Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

Bootstrap栅格系统是Bootstrap框架的一个重要组成部分，它可以帮助我们实现页面的自适应效果，让同一份代码在不同尺寸的设备上都能够呈现出良好的显示效果。下面是Bootstrap栅格系统的完整攻略：

什么是Bootstrap栅格系统

Bootstrap栅格系统由一系列的栅格列组成，每个栅格列的宽度是固定的，可以根据设备的屏幕尺寸进行自动调整。Bootstrap栅格系统有12列，我们可以把页面的内容划分成若干个栅格列，然后根据我们的需求在不同的设备尺寸下设置每个栅格列的宽度，从而实现页面的自适应效果。

栅格列的基本使用方法

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">栅格列1</div>
    <div class="col-sm-4">栅格列2</div>
    <div class="col-sm-4">栅格列3</div>
  </div>
</div>

上面的代码中，.container-fluid是Bootstrap提供的用于页面布局的容器，会根据设备的屏幕尺寸自动调整宽度；.row用于包裹栅格列；.col-sm-4表示这是一个占4列的栅格列，sm代表设备尺寸为小屏幕，也就是位于768px和992px之间的设备。

设备尺寸和栅格列的响应范围

Bootstrap栅格系统根据设备尺寸提供了多个响应范围，分别是：

• 超小屏幕（<576px）：.col-（默认）、.col-xs-
• 小屏幕（≥576px）：.col-sm-
• 中等屏幕（≥768px）：.col-md-
• 大屏幕（≥992px）：.col-lg-
• 超大屏幕（≥1200px）：.col-xl-

在不同的响应范围内，栅格列的宽度会随着设备尺寸的变小而逐渐变小。为了方便演示，我们接下来用两个示例分别演示如何使用Bootstrap栅格系统实现页面的自适应效果。

示例1：响应式导航栏

<div class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-content">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

上面的代码是一个响应式的导航栏，该导航栏使用了Bootstrap提供的.navbar组件和.nav组件，并使用了Bootstrap栅格系统的.navbar-expand-sm和.collapse类，用于控制导航栏的自适应展示效果。在小屏幕设备下，该导航栏会自动折叠为按钮式导航，点击按钮后才会展开。

示例2：响应式图片布局

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 1</p>
    </div>
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 2</p>
    </div>
    <div class="col-sm-4">
      <img src="https://placekitten.com/300/300" class="img-fluid rounded-circle">
      <p class="text-center">Kitty 3</p>
    </div>
  </div>
</div>

上面的代码演示了如何使用Bootstrap栅格系统实现一个响应式的图片布局。在大屏幕设备下，三张图片平均分配在页面的三个栅格列中，而在小屏幕设备下，图片会自动调整为垂直排列的形式，以适应设备的屏幕尺寸。而通过.img-fluid和.rounded-circle两个类的添加，可以使图片自动适应父元素的大小，并展示成圆形。