BootStrap布局
1、BootStrap布局
- CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。
- JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等
2、网格系统
- Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的增长，系统会自动分为最多12列。栅格系统是经过定义容器的大小，平均分红若干份，最大是12份，也能够本身定义栅格份数，再调整内边距和外边距，最后结合媒体查询，就能制做出强大的栅格系统。
- 栅格系统的工做原理
- 行必须放置在 .container class内，以便得到适当的对齐(alignment)和内边距(padding)
- 使用行来建立列的水平组
- 内容应该放置在列内，且惟有列能够是行的直接子元素
- 预约义的网格类，好比 .row 和 .col-xs-4，可用于快速建立网格布局。LESS 混合类可用于更多语义布局
- 列经过内边距(padding)来建立列内容之间的间隙，而后用第一列和最后一列设置负值margin来抵消padding的影响。该内边距是经过 .rows 上的外边距(margin)取负，表示第一列和最后一列的行偏移。
- 网格系统是经过指定您想要横跨的十二个可用的列来建立的。例如，要建立三个相等的列，则使用三个 .col-xs-4
- 媒体查询
-
/* 超小设备（手机，小于 768px） */ /* Bootstrap 中默认状况下没有媒体查询 */
-
/* 小型设备（平板电脑，768px 起） * /@media (min-width: @screen-sm-min) { ... }
-
/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
-
/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }
-
须要适配4种类型的浏览器，分别是超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
-
基本网格结构
-
-
偏移列： .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增长 * 列，其中 * 范围是从 1 到 11
-
列排序[交换]： .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11[互换顺序]
-
嵌套列
-
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12
-
超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
-
注意点：
-
默认栅格系统没有边框，若是须要则须要手动编写样式表添加边框；
- 类样式名称必定要使用Bootstrap内置的样式名称，不然不能覆盖；
- 不管是总列数大于12，仍是样式表中设置的列数和大于12，都会将多余的部分折到下一行，所以列数总和不能大于12，不过，若是总数小于12列，全部列是左对齐，就是从左到右排列，最后在右侧留有空白；
3、CSS布局概要
- 移动端先行
- 响应式图片
- <img src="..." class="img-responsive" alt="响应式图像">
- 经过添加 img-responsive class 可让 Bootstrap 3 中的图像对响应式布局的支持更友好。图片和其它元素不一样，不一样图片的分辨率、宽高比例时不同的，若是随意改变，会使图片失真、变形等
- Normalize.css 一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性
- 基础排版
- 以前用reset.css 文件用于重置掉全部的浏览器自带的样式，利于保持各浏览器渲染的一致性
- 排版类
- 禁用响应式布局
- 步骤1： 删除名称为viewport的meta元数据
- 步骤2：为.container设置一个固定的宽度值，从而覆盖框架的默认width设置，例如设置width：970px ！Important；确保这些设置所有放在默认的Bootstrap.min.css后面；
- 步骤3： 若是使用了导航组件，还须要移除全部的折叠行为和展开行为
- 步骤4： 对于栅格布局，额外增长.col-xs-*样式，或者替换.col-md-*和.col-lg-*样式，超小屏幕设备的栅格系统样式能够适用于全部分辨率的环境
- * 对于IE8来讲，因为仍然须要媒体查询语法，因此还须要引入respond.js文件，这样就禁用了Bootstrap对小屏幕设备的响应式支持
4、BootStrap基础规律
- .active class 激活
- .disabled class 禁用
- 颜色
辅助css