前端之家收集整理的这篇文章主要介绍了
BootStrap整体框架之基础布局组件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1 基础布局组件
在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。
CSS组件，总结为8大类型的样式：
基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式
1.1基础样式
基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框：
1.2颜色样式
看BootStrap官网的按钮btn或者alert警告框会发现许多组件默认的5种颜色样式：
primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
nofollow" target="_blank" href="http://getbootstrap.com/examples/theme/">http://getbootstrap.com/examples/theme/
定义规则：组件名称-颜色类型，比如btn-primary，alert-info
1.3尺寸样式
BootStrap为大部分组件都提供了尺寸的快捷设置。一般组件包含xs、sm、普通、lg四种尺寸
定义规则：组件名称-尺寸，比如btn-xs
.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属性。
Box-shadow: inset 0 3px 5px rgba(0,.125);
Box-shadow: inset 0 3px 5px rgba(0,.125);
}
1.5特殊元素样式
所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素。
比如：alert警告框内一般有警告标题、内容、关闭链接元素；nav导航中常用li元素
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;
}
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;
}
1.6并列元素样式
很多情况下，一个组件内部需要放置多个子元素，比如导航栏nav里放置多个li元素，按钮组可以放置多个button元素。
一般并列元素考虑：1.水平并列时左右内边距(padding-left padding-right)和外边距(margin-left margin-right)2.垂直并列时上下内边距(padding-top padding-bottom)和外边距(margin-top margin-bottom)
p,.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
1.7嵌套子元素样式
需要将两个相同或不同的组件嵌套在一起使用，这时会有特殊情况，比如，多个按钮组在一起使用，或者按钮和下拉菜单一起使用。
需要考虑嵌套元素的使用情况。比如多个分组按钮一起使用的时候，需要考虑浮动方向和间距
1.8动画样式
动画样式在BootStrap中的进度条progress组件中才使用到。
