BootStrap系列：BootStrap布局

BootStrap布局

---

一、BootStrap布局

1. CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。
2. JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等

二、网格系统

1. Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统是通过定义容器的大小，平均分成若干份，最大是12份，也可以自己定义栅格份数，再调整内边距和外边距，最后结合媒体查询，就能制作出强大的栅格系统。
2. 栅格系统的工作原理
• 行必须放置在 .container   class内，以便获得适当的对齐(alignment)和内边距(padding)
• 使用行来创建列的水平组
• 内容应该放置在列内，且唯有列可以是行的直接子元素
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局
• 列通过内边距(padding)来创建列内容之间的间隙，然后用第一列和最后一列设置负值margin来抵消padding的影响。该内边距是通过 .rows 上的外边距(margin)取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4
3. 媒体查询
• /* 超小设备（手机，小于 768px） */  /* Bootstrap 中默认情况下没有媒体查询 */
• /* 小型设备（平板电脑，768px 起） * /@media (min-width: @screen-sm-min) { ... }
• /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
• /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }
4. 需要适配4种类型的浏览器，分别是超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
5. 基本网格结构
• 
6. 偏移列： .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11
7. 列排序[交换]： .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11[互换顺序]
8. 嵌套列
• 为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12
9. 响应式 http://caibaojian.com/bootstrap/scaffolding.html
1. 超小屏 .col-xs-、小屏 .col-sm-、中屏 .col-md-、大屏 .col-lg-
2. 清除浮动：visible-xs 等等https://www.jianshu.com/p/7d3fef79fbbf https://blog.csdn.net/amohan/article/details/51480790
10. 注意点：
• 默认栅格系统没有边框，如果需要则需要手动编写样式表添加边框；
• 类样式名称一定要使用Bootstrap内置的样式名称，否则不能覆盖；
• 无论是总列数大于12，还是样式表中设置的列数和大于12，都会将多余的部分折到下一行，因此列数总和不能大于12，不过，如果总数小于12列，所有列是左对齐，就是从左到右排列，最后在右侧留有空白；

三、CSS布局概要

1. 移动端先行
2. 响应式图片
• <img src="..." class="img-responsive" alt="响应式图像">
• 通过添加 img-responsive  class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。图片和其它元素不同，不同图片的分辨率、宽高比例时不一样的，如果随意改变，会使图片失真、变形等
3. Normalize.css 一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性
4. 基础排版
• 之前用reset.css  文件用于重置掉所有的浏览器自带的样式，利于保持各浏览器渲染的一致性
• 排版类
• 
5. 禁用响应式布局
• 步骤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基础规律

1.  .active class  激活
2.  .disabled class  禁用
3. 颜色
• 
4. 辅助
• 

             

原文地址：https://www.cnblogs.com/guisenbin/p/10448165.html