bootstrap grid用法-猿码集

1. 简介

Bootstrap是由Twitter开发的一个开源前端框架，可以帮助开发者快速地构建响应式、移动优先的网站和应用程序。Bootstrap提供了多种组件和工具，其中最基础的莫过于bootstrap的Grid系统。Grid系统是一个12列网格化的系统，可以进行定位和布局网页或应用程序的不同部分，而不必依赖于额外的CSS代码和样式表。接下来我们将会详细介绍Bootstrap Grid系统的用法。

2. Grid基础概念

2.1 栅格系统

在Bootstrap中，栅格系统是一个12列的网格化系统，其中的每一列都拥有对应的类名 .col-{1~12}。这些列可以位于罗列在一行中，每一行的总宽度分别为12列。通过将不同数量个12列的列组合在一起，可以实现响应式的网页布局。以下是对12列网格化的宽度分配：


<div class="row">
    <div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
</div>

以上代码展示了三种不同的布局方式，分别是一行占据所有12列、两个占据6列、以及三个占据了每一行的1/3。其中col-sm-为列的类名，其中sm是响应式断点，默认的对应尺寸是≥576px。列数要在1~12之间。

2.2 容器

使用 .container类表示固定宽度并支持栅格化的响应式容器，使用 .container-fluid类表示全宽度并且支持栅格系统的响应式容器。

3. Grid系统使用方法

3.1 响应式布局

由于Grid系统是通过列的数量进行布局的，因此要想实现响应式，我们需要在不同尺寸的设备上改变列的数量，即使用Bootstrap提供的响应式断点。以下是Bootstrap常用的断点：

sm（≥576px）

md（≥768px）

lg（≥992px）

xl（≥1200px）

例如，我们要实现在手机上为单列布局，而在桌面上为两列布局，我们可以这样写：


<div class="row">
  <div class="col-12 col-md-6">内容1</div>
  <div class="col-12 col-md-6">内容2</div>
</div>

代码中的 .col-12 表示在所有屏幕大小下都占12列，而 .col-md-6 则表示在md(≥768px)及以上屏幕中占6列。

3.2 栅格系统列偏移

使用 .offset-{1~12}来实现列偏移。例如：


<div class="row">
  <div class="col-md-4">内容1</div>
  <div class="col-md-4 col-md-offset-4">内容2</div>
</div>

代码中第二个div为offset-4（即4列偏移，total width - 4列空间），表示内容2偏移了4列。它的实际作用是：.col-md-4 和 .col-md-offset-4 的组合一共占据了12个列的宽度。

3.3 栅格系统列嵌套

容器里的栅格系统嵌套，嵌套条件是祖先元素必须是行，子元素必须是列，且内层列的栅格总数必须等于外层栅格系统的栅格数的倍数。例如：


<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">子内容1</div>
        <div class="col-md-6">子内容2</div>
      </div>
    </div>
    <div class="col-md-4">内容2</div>
  </div>
</div>

代码中，row.row 中的 .col-md-6 一共由外层栅格系统提供了8列的宽度，刚好符合总栅格数为8的要求。

3.4 栅格系统列排序

Bootstrap 4中，我们可以使用新 class .order-{1~12} 以及 .order-first 和 .order-last 在视觉上排序列。例如，将一列排列在另一列之后：


<div class="row">
  <div class="col-md-6 order-md-2">内容1</div>
  <div class="col-md-6 order-md-1">内容2</div>
</div>

代码中，内容1的 .order-md-2 类并排在前面，而 .order-md-1 类并排在后面。

4. 总结

本文主要介绍了Bootstrap Grid系统的基本概念和用法。通过学习本文，您掌握了栅格系统的使用方法，包括响应式布局、列偏移、列嵌套、列排序等。希望本文可以帮助您更好地使用Bootstrap Grid System进行网页布局和开发。

bootstrap grid用法