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 类让图片以栅格化的方式展示，自动适配宽度。

col-sm-6 代表该元素在屏幕宽度大于等于 768px 时占一行的 6 分之一宽度，col-md-4 则表示在屏幕宽度大于等于 992px 时需要占 4 分之一。

3.2. 工具栏适配

工具栏是网站最为常用的配色组件之一。在 Bootstrap 中，有两种工具栏。

3.2.1. 固定工具栏

这种工具栏将会一直停留在屏幕的顶部，直到页面结束。下面是一份示例代码：

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

解释：

navbar-fixed-top 类指定了这个工具栏将会固定在屏幕顶部，而 container 标签确认了栅格宽度。之后，在这个容器中，您可以自己划定所需要的网格化体系。

3.2.2. 响应式工具栏

响应式工具栏意味着工具栏在不同的屏幕宽度下都会有不同的布局样式。下面是一份示例代码：

<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>

解释：

navbar-default 类定义了工具栏的基本样式。

navbar-collapse 类使用了 CSS3 媒体查询技术，定义了在不同屏幕大小下如何去显示导航的细节。

nav navbar-nav 类定义了工具栏按钮的样式。

4. 总结

Bootstrap 栅格化系统是 Bootstrap 最为核心的组件之一，它给开发者提供了很多方便的工具，帮助我们处理不同分辨率设备下的网页布局和显示效果，使得我们能够很方便地处理各种响应式设计问题。

bootstrap栅格化的原理是啥