Bootstrap 是一个 HTML、CSS、JavaScript 的开源框架，可以帮助用户快速构建网站和 Web 应用程序。Bootstrap 的栅格系统是其主要特点之一，可以帮助用户实现页面的模块化布局。下面演示如何使用 Bootstrap 的栅格系统实现模块化布局。

　　引入 Bootstrap

　　在 HTML 页面中引入 Bootstrap 的 CSS 和 JavaScript 文件，方法如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 　　使用栅格系统

　　在 HTML 页面中使用 Bootstrap 的栅格系统，将页面划分为行和列。栅格系统由 12 个列组成，开发者可以将页面划分为等宽的列，也可以设置不同列宽度的组合。栅格系统的语法如下：

<div class="container">
  <div class="row">
    <div class="col-*-*">Content</div>
    <div class="col-*-*">Content</div>
    <div class="col-*-*">Content</div>
  </div>
</div>

 　　其中，class 为 container 的 div 元素是容器，用于限制页面内容的宽度。每个 class 为 row 的 div 元素代表一行。每一个列元素的 class 名称都是由 col-前缀和数值组成，其中第一个代表设备类型，可选xs、sm、md和lg，分别代表手机屏幕、平板屏幕、台式电脑屏幕和大型电视屏幕;第二个代表列的宽度，取值范围为1-12。

　　例如，一个由两列组成的页面，其中左侧部分占 3 列，右侧部分占 9 列，可以如下实现：

<div class="container">
  <div class="row">
    <div class="col-md-3">左侧部分</div>
    <div class="col-md-9">右侧部分</div>
  </div>
</div>

 　　响应式设计

　　Bootstrap 的栅格系统支持响应式设计，可以根据设备大小自动调整页面布局。在栅格系统中，设备类型的缩写有 xs、sm、md 和 lg 四个级别，从小到大依次为手机、平板、台式电脑和大型电视屏幕。在设计页面时，应根据不同设备的显示情况，为不同的设备类型设置不同的列宽和布局方式。

　　例如，下面的 HTML 代码实现了一个响应式布局的 navbar：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">导航菜单</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">主页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

 　　在上述代码中，class 为 navbar-header 的 div 元素是标题栏的头部，class 为 navbar-collapse 的 div 元素是标题栏的主体，class 为 navbar-toggle 的 button 元素则用于切换导航菜单的显示状态。根据设备大小的不同，导航栏会自动调整布局，保证整体风格一致。