BootStrap入门教程(三)之响应式原理

下面我会详细讲解“BootStrap入门教程(三)之响应式原理”的完整攻略。

1. 引言

在现代 web 开发中，响应式布局已经成为必备技能。因此，学习 Bootstrap 框架的响应式原理，对我们深入了解前端开发是很有帮助的。

2. Bootstrap 响应式原理

Bootstrap 的响应式原理是基于 CSS 媒体查询的。它通过为不同的屏幕宽度设置不同的样式类来实现不同的布局。

Bootstrap 的屏幕尺寸划分如下：

• 超小屏幕（<576px）： 手机
• 小型屏幕 (≥576px)： 平板
• 中等屏幕 (≥768px)： 桌面电脑
• 大型屏幕 (≥992px)： 大桌面电脑
• 超大屏幕 (≥1200px)： 大型显示器

在编写 Bootstrap 响应式布局时，我们可以使用 .container 和 .container-fluid 两个类来实现响应式布局。其中，.container 适用于固定宽度的布局，而 .container-fluid 则适用于填充整个屏幕的布局。

举个例子，以下代码将创建一个 div 元素，并用 .container 类将其包裹起来，使其在小型屏幕下具有最大宽度，从而实现响应式布局。

<div class="container">
  <p>我是响应式文本，我会根据屏幕宽度自动调整大小！</p>
</div>

3. Bootstrap 响应式栅格系统

Bootstrap 的响应式栅格系统是用于快速布局内容的一种方法，它基于列（column）和行（row）来组合和排列内容。在 Bootstrap 中，一个网格系统包括了 12 列，可以根据需要组合使用来布局不同大小的内容。

通过使用 .col-* 类来创建列。例如，以下代码将创建一个占用整行宽度的 div 元素。

<div class="row">
  <div class="col">
    <p>我占用整个屏幕宽度！</p>
  </div>
</div>

我们可以通过为 .col-* 类设置不同的值来控制栏的宽度。例如，以下代码将创建两个占据屏幕一半宽度的列。

<div class="row">
  <div class="col-sm-6">
    <p>我占用一半的屏幕宽度！</p>
  </div>
  <div class="col-sm-6">
    <p>我也占用一半的屏幕宽度！</p>
  </div>
</div>

4. 示例说明

以下是一些使用 Bootstrap 响应式布局的示例：

示例 1：响应式导航栏菜单

Bootstrap 提供了丰富的导航栏组件，我们可以使用它们来创建一个漂亮的响应式导航栏菜单。以下代码将创建一个响应式导航栏菜单，并在超小屏幕下显示折叠菜单。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">我的网站</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="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

示例 2：响应式表格

Bootstrap 的表格组件可以帮助我们创建漂亮的响应式表格。以下代码将创建一个响应式表格，并在超小屏幕下隐藏某些列。

<table class="table table-bordered table-responsive-md">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th class="d-none d-md-table-cell">年龄</th>
      <th>地址</th>
      <th class="d-none d-lg-table-cell">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td class="d-none d-md-table-cell">30</td>
      <td>北京</td>
      <td class="d-none d-lg-table-cell">[e-mail]</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td class="d-none d-md-table-cell">25</td>
      <td>上海</td>
      <td class="d-none d-lg-table-cell">[e-mail]</td>
    </tr>
  </tbody>
</table>

5. 总结

Bootstrap 的响应式原理是基于 CSS 媒体查询的。我们可以使用 .container 和 .container-fluid 两个类来实现响应式布局，同时还可以使用 Bootstrap 的响应式栅格系统来快速布局内容。在实际开发中，我们可以根据需要使用不同的 Bootstrap 组件来实现漂亮的响应式界面。