BootStrap整体框架之基础布局组件

1 基础布局组件

在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。
CSS组件，总结为8大类型的样式：
基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式

1.1基础样式

基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框：

//源码.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;}

1.2颜色样式

看BootStrap官网的按钮btn或者alert警告框会发现许多组件默认的5种颜色样式：
primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
http://getbootstrap.com/examples/theme/

定义规则：组件名称-颜色类型，比如btn-primary，alert-info

//源码.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4;}

1.3尺寸样式

BootStrap为大部分组件都提供了尺寸的快捷设置。一般组件包含xs、sm、普通、lg四种尺寸
定义规则：组件名称-尺寸，比如btn-xs

//源码.btn-lg,.btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;}.btn-sm,.btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;}.btn-xs,.btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;}

1.4状态样式

高亮可用的时候用active样式，禁用的时候用disabled样式或disabled属性。

//源码.btn:active,.btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}

1.5特殊元素样式

所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素。
比如：alert警告框内一般有警告标题、内容、关闭链接元素；nav导航中常用li元素

//源码//alert内连接的样式.alert .alert-link { font-weight: bold;}//alert内p元素和ul元素的底部外边距设置.alert > p,.alert > ul { margin-bottom: 0;}//两个段落之间，增加一个段落外边距.alert > p + p { margin-top: 5px;}//增大右内边距，以便关闭按钮.alert-dismissable,.alert-dismissible { padding-right: 35px;}//关闭按钮，右对齐.alert-dismissable .close,.alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit;}

//源码.nav > li { position: relative; display: block;}.nav > li > a { position: relative; display: block; padding: 10px 15px;}.nav > li > a:hover,.nav > li > a:focus { text-decoration: none; background-color: #eee;}.nav > li.disabled > a { color: #777;}.nav > li.disabled > a:hover,.nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent;}