2019-06-03

Bootstrap

[if !supportLists]一、      [endif]布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们

提供了两个作此用处的类。注意，由于padding 等属性的原因，这两种容器

类不能互相嵌套。

...

.container类用于固定宽度并支持响应式布局的容器；

class="container-fluid">

...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

[if !supportLists]二、      [endif]栅格网格系统（Grid System）

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕

或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

注意: 网格系统必须使用到 css

container、row 、xs (xsmall

phones), sm (small tablets), md

(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏

(750px)，中屏(970px)和大屏(1170px)

数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对

齐方式和内距(padding)。

在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容

器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。

class="container">

class="row">

class="col-md-4">4 列

class="col-md-8">8 列