BootStrap系列:BootStrap布局
BootStrap布局
一、BootStrap布局
- CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。
- JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等
二、网格系统
- 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列,所有列是左对齐,就是从左到右排列,最后在右侧留有空白;
三、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对小屏幕设备的响应式支持
四、BootStrap基础规律
- .active class 激活
- .disabled class 禁用
- 颜色
辅助