Bootstrap栅格系统、组件

CSS全局样式——栅格系统

• 栅格系统介绍

1. Bootstrap提供了一套响应式、移动设备优先的流式的栅格系统
2. Bootstrap把一个容器或整个网页平均分成12列
3. Bootstrap的栅格系统，由一个行（.raw）和多个列组成
4. 栅格系统通过行列的形式来创建网页布局，把具体的数据放入列当中。

注：栅格系统，必须放在.container和.container-fluid

• 栅格系统参数

注：*为数字，表示占几列（数字加起来和为12，超过后会自动换行）

• 栅格系统的简单应用

• 列偏移（.col-md-offset-*）：指一个栏向右偏移多少个列（类似浮动）

例：

.col-md-offset-4：向右偏移4个列

• 列嵌套：在某个栏中再嵌套一个完整的栅格系统

组件

• 图片样式

• 辅助类样式

• 下拉菜单

• 按钮组

• 按钮式下拉菜单

• 输入框组

• 标签页（选项卡）

• 路径导航

• 缩略图

• 分页

• 导航条