bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等

下面是关于bootstrap3.0教程之栅格系统案例的一些详细讲解。

下面是关于"bootstrap3.0教程之栅格系统案例"的一些详细讲解。

栅格系统简介

在制作一个网页时，我们通常会使用栅格系统来布局页面，把页面上的内容划分为若干个列和行，然后在列中放置内容。Bootstrap框架提供了一套非常好用的栅格系统，可以让你快速的创建响应式布局的页面。

栅格选项说明

Bootstrap栅格系统有5个选项，分别是：超小屏幕设备（<768px）、小屏幕设备（≥768px）、中等屏幕设备（≥992px）、大屏幕设备（≥1200px）和特大屏幕设备（≥1440px）。

从堆叠到水平排列

在 Bootstrap 中，如果你不显式地指定栅格布局类，那么所有的列都会自动堆叠在一起，形成一个垂直的布局。你可以使用栅格系统来将一列内容分割成几个区块，或者将多列内容组合成更复杂的布局。

下面是一个从堆叠到水平排列的示例：

<div class="container">
  <div class="row">
    <div class="col-sm-4">列1</div>
    <div class="col-sm-4">列2</div>
    <div class="col-sm-4">列3</div>
  </div>
</div>

在这个示例中，.container包裹了整个栅格系统，.row类用来创建一些列，并且在列中包含栅格类，如.col-sm-4。这三个 .col-sm-4 类表示，在小屏幕（≥768px）以上，将每行分为3列。

移动设备和桌面平台的排列

在 Bootstrap 中，你可以使用推荐的col-xs-类来为超小屏幕设备设置一些列布局，使用col-sm-类为小屏幕及以上设备设置列布局。如果你想要为大屏幕设备增加一些特殊的布局，可以使用col-md-类。如果你想要为特大屏幕设备设置一些特殊的布局，可以使用col-lg-类。

下面是一个移动设备和桌面平台的排列示例：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">1</div>
    <div class="col-sm-6 col-md-4 col-lg-3">2</div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-sm-6 col-md-4 col-lg-3">3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">4</div>
  </div>
</div>

在这个列布局中，我们使用推荐的col-xs-*类来设置了列的布局。在小屏幕设备上，每一行会显示两个列；在大屏幕设备上，每行会显示四个列。

我们还使用了clearfix类来打断每一行的布局，并且可见性使用了.visible-sm-block类，这样可以让此元素仅在屏幕尺寸小于768像素的视窗下可见，在更大的屏幕尺寸下自动隐藏。

以上就是关于Bootstrap 3.0栅格系统的一些基础说明和示例，希望能帮到你。