第一次接触神奇的Bootstrap网格系统

第一次接触神奇的Bootstrap网格系统

Bootstrap是一款流行的前端开发框架，其中最具特色的功能莫过于它的网格系统了。本文将详细介绍如何利用Bootstrap网格系统进行前端页面布局。

什么是Bootstrap网格系统

Bootstrap网格系统是一种通过12个栅格列来进行页面布局的系统。栅格列可以覆盖整个页面宽度，也可以将页面分成多个部分。

默认情况下，Bootstrap网格系统将整个页面分成12列宽度相等的栅格列。每列的宽度默认为1/12，即每行最多可以包含12个栅格列，每个栅格列的宽度可以用class="col-*"来指定。其中的星号代表了该列的宽度占总宽度的百分比，例如指定class="col-6"的栅格列就占据了页面总宽度的50%。

如果页面需要分成多个部分进行布局，可以使用container和row两个类来进行划分。在container类内部，通过row类来把整个容器分成一行一行；在row类内部，通过class="col-*"来定义每一列宽度的大小。

如何使用Bootstrap网格系统

下面通过两个示例来展示如何使用Bootstrap网格系统进行页面布局。

示例一：分栏

考虑一个页面需要进行两栏布局，左边栏宽度为2/5，右边栏宽度为3/5。

首先，在页面中添加container和row类：

<div class="container">
  <div class="row">
  </div>
</div>

然后，在row类内部添加两个col类，分别设置宽度为col-5和col-7，代码如下：

<div class="container">
  <div class="row">
    <div class="col-5">
      左边栏
    </div>
    <div class="col-7">
      右边栏
    </div>
  </div>
</div>

最后，在col类内部添加具体的内容即可。

示例二：响应式

在移动设备上显示的页面布局往往需要与在PC端显示的页面布局不同。Bootstrap网格系统还提供了响应式栅格用于在不同设备上显示不同的布局。

下面考虑一个页面，在PC端上采用两栏布局，在移动设备端上采用一栏布局。

首先，在col类中添加class="col-md-"和class="col-sm-"，表示在不同设备上显示不同的布局。例如，在PC端上col类的宽度为5，代码如下：

<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-12">
      左边栏
    </div>
    <div class="col-md-7 col-sm-12">
      右边栏
    </div>
  </div>
</div>

在移动设备端上col类的宽度为12，代码如下：

<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-12">
      左边栏
    </div>
    <div class="col-md-7 col-sm-12">
      右边栏
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12">
      页面主内容
    </div>
  </div>
</div>

这样，在PC端上页面会呈现两栏布局，在移动设备端上页面会呈现一栏布局。同时，container和row类的作用也是非常关键的，container类的作用是限定页面宽度，row类的作用是限定每行内col类宽度之和。