Bootstrap 4 是一个功能强大的前端框架，广泛应用于现代网页开发中。它提供了丰富的组件和工具，帮助开发者快速构建响应式和移动优先的网页。本文将详细介绍 Bootstrap 4 的基本用法、核心组件、布局方式以及一些高级特性，帮助你快速掌握 Bootstrap 4 的开发技能。
一、Bootstrap 4 简介
Bootstrap 4 是全球最受欢迎的前端框架之一，用于开发响应式布局、移动设备优先的 Web 项目。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件。
二、安装 Bootstrap 4
（一）通过 CDN 引入
这是最简单快捷的方式，无需下载任何文件。
HTML
复制
Bootstrap 示例
Hello, Bootstrap!
（二）下载并本地引入
你可以从 Bootstrap 官网 下载文件，然后在项目中引入。
HTML
复制
三、Bootstrap 4 基础
（一）容器
容器是 Bootstrap 中用于包裹内容的组件，提供了响应式布局。
HTML
复制
这是一个固定宽度的容器
这是一个全宽度的容器
（二）栅格系统
Bootstrap 4 的栅格系统基于 12 列布局，使用 row 和 col 类创建响应式布局。
HTML
复制
列 1
列 2
列 3
四、核心组件
（一）导航栏
导航栏是网页中常见的组件，用于提供页面导航。
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 4 是一个功能强大的前端框架，广泛应用于现代网页开发中。它提供了丰富的组件和工具，帮助开发者快速构建响应式和移动优先的网页。本文详细介绍了 Bootstrap 4 的基本用法、核心组件、布局方式以及一些高级特性，希望对你有所帮助。如果你在使用 Bootstrap 4 时遇到任何问题，欢迎在评论区留言，我会及时为你解答。