栅格系统的概述

Bootstrap内置了一个响应式的栅格系统，可以在不同设备窗口下自动调整和布局。这个流式栅格系统一共分为12列，通过行（row）和列（column）的组合来创建页面布局。

使用container和row

在使用栅格系统之前，需要将row放入container中。row在水平方向上创建一组column，容器会帮助我们对齐和居中内容。

设置栅格系统的列宽

栅格系统的列宽是通过1到12的值来表示跨越的范围。例如，如果我们想要创建4个等宽的列，可以使用col-xs-3来定义每个列的宽度。

添加间隔和填充

如果我们想要在列与列之间添加一定的间隔，可以使用padding属性来指定。创建一个包含栅格系统的HTML代码，并在body中添加以下代码：

lt;div class"container"gt;
  lt;div class"row"gt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 1lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 2lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 3lt;/divgt;
    lt;div class"col-xs-3" style"padding: 10px;"gt;Module 4lt;/divgt;
  lt;/divgt;
lt;/divgt;

通过给每个列添加padding属性，我们可以在列与列之间创建指定的间隔。

显示模块内容在一行上

如果我们想要将几个模块的内容显示在一行上，并且每个模块的宽度一样，可以使用row来包裹这些模块，并通过col-xs-3来设置每个模块的宽度：

lt;div class"row"gt;
  lt;div class"col-xs-3"gt;Module 1lt;/divgt;
  lt;div class"col-xs-3"gt;Module 2lt;/divgt;
  lt;div class"col-xs-3"gt;Module 3lt;/divgt;
  lt;div class"col-xs-3"gt;Module 4lt;/divgt;
lt;/divgt;

以上代码将会把这些模块的内容显示在一行上，并且每个模块的宽度相等。

最终效果

运行以上代码后，你会看到编写的模块内容占满了网页全屏，并且每个模块的宽度都一样。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。