引言
Bootstrap 4 是一个广泛使用的前端开发框架，它简化了网页设计和响应式布局的实现。本文将为您提供一份全面的中文教程攻略，帮助您快速掌握 Bootstrap 4，轻松打造响应式网页。
Bootstrap 4 简介
Bootstrap 4 是由 Twitter 开发并维护的开源前端框架。它提供了一系列的 CSS 和 JavaScript 组件，可以简化网页设计和开发过程。Bootstrap 4 的核心特性包括：
- 响应式设计：Bootstrap 4 内置了对各种设备和屏幕尺寸的支持，确保网页在手机、平板电脑和桌面电脑上都能良好显示。
- 栅格系统：Bootstrap 4 提供了一个强大的栅格系统，允许开发者通过简单的类选择器创建灵活的响应式布局。
- 预定义组件：Bootstrap 4 包含多种现成的 UI 组件，如导航条、按钮、表单、模态框等，可以快速构建交互性和美观性俱佳的用户界面。
- JavaScript 插件：Bootstrap 4 提供了丰富的 JavaScript 插件，如轮播图、折叠面板、滚动动画等，可以增强网页的交互性。
安装 Bootstrap 4
要开始使用 Bootstrap 4，首先需要将其引入到您的项目中。您可以通过以下几种方式引入 Bootstrap 4：
通过 CDN 引入
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3pW3stiqomFkZ0tTfUKLwCJYkCk" crossorigin="anonymous">
<!-- 引入 Bootstrap JS 和依赖的 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shKjL+3yTFs2aCzGExNLWJXGZ1aJHLGtc" crossorigin="anonymous"></script>
通过本地文件引入
您也可以将 Bootstrap 4 的 CSS 和 JS 文件下载到您的服务器上，并在 HTML 文件中引用它们。
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- 引入 jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 引入 Popper.js -->
<script src="path/to/popper.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="path/to/bootstrap.min.js"></script>
响应式布局
Bootstrap 4 的栅格系统是构建响应式布局的核心。它将一行水平分割成 12 个等宽的列，允许您通过简单的类选择器控制元素在不同屏幕尺寸下的排布。
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
在上面的示例中，.container 类用于创建一个容器，.row 类用于创建一行，.col-md-4 类用于创建一个宽度为 4⁄12 的列。
预定义组件
Bootstrap 4 提供了丰富的预定义组件，可以快速构建交互性和美观性俱佳的用户界面。
导航条
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
按钮
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
表单
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label" for="check1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JavaScript 插件
Bootstrap 4 提供了丰富的 JavaScript 插件，可以增强网页的交互性。
轮播图
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
折叠面板
<div class="card">
<h5 class="card-header" id="headingOne">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
自定义 Bootstrap
如果您需要自定义 Bootstrap 的样式，可以通过以下几种方式：
使用 Sass
Bootstrap 4 使用 Sass 编写，因此您可以修改 Sass 文件来自定义样式。
// 修改 _variables.scss 文件来自定义变量
$primary: teal;
// 修改 _mixins.scss 文件来自定义混合
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
// 修改 _scaffolding.scss 文件来自定义基本样式
body {
background-color: $primary;
}
// 重新编译 Sass 文件生成 CSS 文件
sass --watch styles.scss:styles.css
使用定制文件
您也可以创建一个自定义的 CSS 文件，并在其中覆盖 Bootstrap 的默认样式。
// 修改 styles.css 文件来自定义样式
body {
background-color: #f8f9fa;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
总结
通过本教程攻略，您应该已经掌握了 Bootstrap 4 的基本使用方法，包括响应式布局、预定义组件和 JavaScript 插件。现在，您可以开始使用 Bootstrap 4 来构建自己的响应式网页了。祝您学习愉快！