Bootstrap 是一个流行的前端框架，它提供了一套功能丰富的 CSS 样式和 JavaScript 插件，可以帮助开发者快速构建响应式网站和 Web 应用程序。在本章节中，我们将详细介绍 Bootstrap 的 CSS 部分。
Bootstrap 栅格系统
Bootstrap 的栅格系统是其最重要的特性之一。栅格系统可以帮助开发者在不同设备上实现响应式布局，从而确保网站在各种屏幕尺寸下都能够良好展示。栅格系统由 12 列构成，可以通过添加不同的 CSS 类来指定元素在不同屏幕尺寸下所占的列数。
示例代码：
<div class="container">
<div class="row">
<div class="col-md-6">内容1</div>
<div class="col-md-6">内容2</div>
</div>
</div>在上面的示例中，我们创建了一个包含两列的行，每列在中等屏幕尺寸（medium）下占据了 6 个列。这样可以实现简单的两栏布局。
Bootstrap 组件
除了栅格系统，Bootstrap 还提供了许多实用的 CSS 组件，如按钮、表单、导航栏、面包屑导航等。这些组件可以大大简化开发过程，让开发者可以更加专注于业务逻辑的实现。
示例代码：
<button class="btn btn-primary">Primary 按钮</button>
在上面的示例中，我们创建了一个蓝色的主要按钮。通过添加不同的 CSS 类，可以轻松地定制按钮的样式和颜色。
Bootstrap 响应式工具类
Bootstrap 还提供了许多实用的响应式工具类，可以帮助开发者在不同屏幕尺寸下隐藏、显示或调整元素的样式。例如，可以通过添加 .hidden-xs 类来在小屏幕下隐藏元素。
示例代码：
<div class="hidden-xs">在小屏幕下隐藏的内容</div>
在上面的示例中，我们将内容隐藏在小屏幕下，这样可以确保页面在移动设备上有更好的展示效果。
以上就是 Bootstrap 的 CSS 概览，下一章节我们将继续介绍 Bootstrap 的 JavaScript 组件。