bootstrap栅格化的原理是啥

1. Bootstrap 栅格化介绍

Bootstrap 是一款简洁、直观、强悍的前端开发框架。它的出现简化了我们前端开发的工作流程，让我们更加迅速、轻松地搭建出令人惊艳的界面。其中，Bootstrap 栅格化系统是 Bootstrap 构建响应式布局的基石。

Bootstrap 栅格系统利用了 CSS 等技术，使得根据屏幕大小分配不同的列宽成为可能。当然，这个列宽不是屏幕宽度的真实宽度值，而是在框架内定义的一些宽度值的百分比宽度规则。Bootstrap 通过注入 CSS 类去定义栅格化布局。开发者所需要做的，只是通过调用不同 CSS 类来指定不同的栅格化设置。Bootstrap 栅格化系统默认使用了 12 个 column，之后也可以基于用户的需求自定义不同的列数。

实用 Bootstrap 栅格化系统，我们无需考虑设备大小的差异、容器尺寸以及浏览器厂商带来的兼容问题，因为 Bootstrap 已经为我们做好了这些件事。这样，开发者只需要关注 UI 设计即可。

2. 栅格化的应用

2.1. 栅格化的原理

Bootstrap 栅格化的原理即利用 CSS 中的“百分比”属性来达到精准的宽度分配，通过对列数进行设置来控制栅格化的效果，同时结合媒体查询，确保在不同设备下都能够达到合适的显示效果。

下面是一份示例代码，是一个 Bootstrap 栅格化系统的介绍页面：

<div class="row">

   <div class="col-sm-4">第一列</div>
   <div class="col-sm-4">第二列</div>
   <div class="col-sm-4">第三列</div>
</div>

解释：

Bootstrap 这里设定了一个“row”类来表示一行网格。在这个网格中，包含了三个子元素，分别使用了“col-sm-4”类表示分成三等份。其中，数字 4 表示每个 div 占据父元素的一份四分之一宽度。

2.2. 栅格化的布局

Bootstrap 的栅格化布局包含了很多可供开发者使用的预定义类，可以很方便地实现不同的布局。下面是一份示例代码：

<div class="row">

  <div class="col-sm">一分之一</div>
  <div class="col-sm">一分之一</div>
  <div class="col-sm">一分之一</div>
  <div class="col-sm">一分之一</div>
  <div class="col-sm">一分之一</div>
  <div class="col-sm">一分之一</div>
</div>

解释：

这里定义了一个 row 类用以定义一行网格，然后为每个子元素添加 col-sm 类。每个 div 元素都分配了相同的类，栅格化的数量会根据屏幕宽度自适应。

2.3. 栅格化组件的适配

Bootstrap 不仅仅支持栅格化布局，还提供了许多其他的样式组件，例如表单、图片、按钮、导航等等，这些组件应该如何适配到栅格化系统中呢？

对于这点，Bootstrap 也提供了非常好的解决方案。每一个组件都包含了自己的栅格化类，使用者只需要将这个组件添加到栅格化系统中即可。

3. 栅格化的实战应用

3.1. 响应式图片适配

在实际应用中，我们有时需要根据图片大小来调整栅格化，以达到更好的显示效果。为了解决这个问题，Unicode 支持响应式图片栅格化功能。下面是一份示例代码：

<div class="row">

  <div class="col-sm-6 col-md-4">
    <img src="your-img-url.jpg" class="img-responsive" alt="响应式图片">
  </div>
</div>

解释：

img-responsive 类让图片以栅格化的方式展示，自动适配宽度。

<nav class="navbar navbar-fixed-top">

   <div class="container">
      <p>一些文本内容</p>
   </div>
</nav>

<nav class="navbar navbar-default navbar-fixed-top">

   <div class="container">
      <div class="navbar-header">
         <a href="#" class="navbar-brand">Title</a>
      </div>
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
   </div>
</nav>