Bootstrap(2) 排版样式

Bootstrap是一组用于构建Web应用程序的工具和模板。通过使用Bootstrap，您可以轻松地创建现代和响应式的Web应用程序和网站。Bootstrap的排版样式是用于控制网页所有区块的宽度、高度和对齐方式。在这篇文章中，我们将详细讨论Bootstrap的排版样式。

栅格系统

Bootstrap的栅格系统是一种用于控制网页布局的响应式网格布局系统。通过使用Bootstrap，您可以将Web页面分为多个列和行，使得页面能够以不同的设备或屏幕大小上呈现出不同的布局。这种栅格系统依赖与一组CSS样式。

栅格类

在Bootstrap栅格系统中，每个列都是由12个具有相同宽度的网格组成。您可以使用以下的类来调整每个网格的宽度：

• col-：用于定义小屏幕下为一个格，中等设备上为两个格，大屏幕为四个格的网格布局；
• col-md-：用于定义中等设备下一行显示两个格的网格布局；
• col-sm-：用于定义小屏幕下为一个格，中等和大屏幕上为两个格的网格布局；
• col-lg-：用于定义大屏幕下一个行显示两个格的网格布局；

栅格偏移

您还可以将网格偏移量应用于任何一列，即将一列放到网格的某个位置。通过在网格类中添加以下类来实现网格偏移：

• offset-：用于定义一个列网格偏移x列；
• offset-md-：用于定义一个列向右偏移x列；
• offset-sm-：用于定义一个列向右偏移x列，中等和大屏幕上；

已知问题

在使用Bootstrap栅格系统时，一定要注意以下两点：

• 网格类必须直接嵌套在行元素内，行元素必须直接嵌套在容器内；
• 当您使用col-*-12的时候，您可以跳过掉偏移方法，因为这个类排满了一整个宽度。

结论

Bootstrap排版样式是控制Web页面中各个区块的响应式导航系统。通过学习如何使用栅格系统，并了解如何应用列之间的偏移，您将能够构建现代响应式Web应用程序和网站。