《深入理解Bootstrap》学习笔记（三）

第二章 整体架构
——2.1 整体架构
——2.2 栅格系统
——2.3 CSS组件架构的设计思想
——2.4 JavaScript插件架构
——2.5 禁止响应式布局

这章内容主要讲的是bootstrap的整体设计思想，个人认为译者在本章开始的那段解释很好，因为这一章节是总结性内容，是对第三~五章的内容的一次总结，已经涉及到后续的内容，不明白作者为什么把这章放在这里，所以如果之前没有接触过bootstrap的话，就跳过学完第三~五章后再看这一章。
2.1 整体架构
整体架构六大部分：12栅格系统 基础布局组件 jQuery 响应式设计 CSS组件 JavaScript插件
2.2 栅格系统
将容器平分12分，在容器内完成列组合、列偏移、列嵌套、列排序的操作并区分4种不同尺寸大小的浏览器进行响应式设计。以下为栅格系统包含的类：
.container：定义容器，根据浏览器超小屏（<768px）小屏（>=768px，<992px）中屏（>=992px，<1220px）大屏（>=1220px）定义class为container的容器宽度为自动、750px、970px、1170px。
.container-fluid：响应式布局定义容器宽度，宽度随浏览器大小而改变。
.row：行，为栅格系统容器和列设置合适的对齐方式和内边距。其直接子元素只有列。
.col-xs- /.col-sm- /.col-md- /.col-lg-：列组合，根据浏览器大小分为四种形式，可以针对不同的浏览器改变宽度，所以可以为一个元素加上所有的列组合设计成响应式布局。其属性全都是左浮动（float:left），和根据列数设定的宽度百分比（width:数值%）。
.col-xs-offset- /.col-sm-offset- /.col-md-offset- /.col-lg-offset-：列偏移，与列组合配合设定偏移宽度，其属性全都是margin-left:数值%。
.col-xs-pull- / .col-sm-pull- / .col-md-pull- /.col-lg-pull-
.col-xs-push- / .col-sm-push- / .col-md-push- /.col-lg-push- ：列排序，和列组合配合，设定列的左右移动，以及移动宽度。因为所有的列组合都是左浮动，所以列排序的属性分别对应向左偏移（left:数值%）和向右偏移（right:数值%）。
.clearfix：清除浮动，与.visible-xs/.visible-sm/.visible-md/.visibe-lg配和清除浮动。
2.3 CSS组件架构的设计思想
CSS组件8大类型样式：基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式。
基础样式：定义CSS组件名称。
颜色样式：bootstrap很多组件都有5中颜色样式：重点蓝（primary）、成功绿（success）、信息蓝（info）、警告橙（warning）、危险红（danger）。定义规则：组件名称-颜色类型。
尺寸样式：一般分为四种 超小（xs）、小型（sm）、普通（md）、大型（lg）
状态样式：active、disabled等，分别定义了其对应的CSS样式。
特定元素：特定类型组件中的一种或几种固定元素样式。
2.4 JavaScript插件结构
bootstrap中插件的调用可以有两种方法：html布局规则和js代码调用。
2.5 禁止响应式布局
步骤：
1 删除名称为viewpot的<mate>标签
2 为container设定固定宽度值
3 移除导航条组件的折叠展开行为
4 为栅格布局额外添加col-xs-*样式