目录

一、Bootstrap 简介

二、安装 Bootstrap

（一）通过 CDN 引入

（二）下载并本地引入

三、Bootstrap 基础

（一）容器

（二）网格系统

四、核心组件

（一）导航栏

（二）卡片

（三）模态框

五、高级特性

（一）自定义样式

（二）响应式设计

六、总结

Bootstrap 是一个流行的前端框架，用于快速构建响应式和移动优先的网页。它提供了预定义的 CSS 样式和 JavaScript 组件，使开发者能够快速构建现代化的网页。本文将详细介绍 Bootstrap 的基本用法、核心组件、布局方式以及一些高级特性，帮助你快速掌握 Bootstrap 的开发技能。

一、Bootstrap 简介

Bootstrap 最初由 Twitter 开发，旨在提高内部项目的开发效率和一致性。它迅速成为全球最受欢迎的前端框架之一，广泛应用于各种类型的网页开发中。

二、安装 Bootstrap

（一）通过 CDN 引入

这是最简单快捷的方式，无需下载任何文件。

HTML复制

Hello, Bootstrap!

（二）下载并本地引入

你可以从 Bootstrap 官网 下载文件，然后在项目中引入。

HTML复制

三、Bootstrap 基础

（一）容器

容器是 Bootstrap 中用于包裹内容的组件，提供了响应式布局。

HTML复制

（二）网格系统

Bootstrap 的网格系统基于 12 列布局，使用 row 和 col 类创建响应式布局。

HTML复制

四、核心组件

（一）导航栏

导航栏是网页中常见的组件，用于提供页面导航。

HTML复制

（二）卡片

卡片组件用于展示内容，如图片、文本等。

HTML复制

（三）模态框

模态框用于创建弹出窗口。

HTML复制

打开模态框

五、高级特性

（一）自定义样式

通过 Sass 自定义 Bootstrap 的样式。

scss复制

// Variable overrides first

$primary: #900;

$enable-shadows: true;

$prefix: "mo-";

// Then import Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

（二）响应式设计

使用媒体查询和响应式工具类创建响应式布局。

css复制

@media (max-width: 768px) {

.container {

background-color: #3498db;

}

}

六、总结

Bootstrap 是一个功能强大的前端框架，广泛应用于现代网页开发中。它提供了丰富的组件和工具，帮助开发者快速构建响应式和移动优先的网页。本文详细介绍了 Bootstrap 的基本用法、核心组件、布局方式以及一些高级特性，希望对你有所帮助。如果你在使用 Bootstrap 时遇到任何问题，欢迎在评论区留言，我会及时为你解答。