BootStrap整体框架之基础布局组件
1基础布局组件
在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。
CSS组件，总结为8大类型的样式：
基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式
1.1基础样式
基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框：
//源码
.alert{
padding:15px;
margin-bottom:20px;
border:1pxsolidtransparent;
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:10px16px;
font-size:18px;
line-height:1.3333333;
border-radius:6px;
}
.btn-sm,
.btn-group-sm>.btn{
padding:5px10px;
font-size:12px;
line-height:1.5;
border-radius:3px;
}
.btn-xs,
.btn-group-xs>.btn{
padding:1px5px;
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:inset03px5pxrgba(0,0,0,.125);
box-shadow:inset03px5pxrgba(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:10px15px;
}
.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-leftpadding-right)和外边距(margin-leftmargin-right)2.垂直并列时上下内边距(padding-toppadding-bottom)和外边距(margin-topmargin-bottom)
//源码
.alert>p,
.alert>ul{
margin-bottom:0;
}
.alert>p+p{
margin-top:5px;
}
.modal-footer.btn+.btn{
margin-bottom:0;
margin-left:5px;
}
1.7嵌套子元素样式
需要将两个相同或不同的组件嵌套在一起使用，这时会有特殊情况，比如，多个按钮组在一起使用，或者按钮和下拉菜单一起使用。
需要考虑嵌套元素的使用情况。比如多个分组按钮一起使用的时候，需要考虑浮动方向和间距
//源码
//消除2个按钮(或一个按钮和另外一个按钮组)之间的1像素细节引起的冲突
.btn-group.btn+.btn,
.btn-group.btn+.btn-group,
.btn-group.btn-group+.btn,
.btn-group.btn-group+.btn-group{
margin-left:-1px;
}
1.8动画样式
动画样式在BootStrap中的进度条progress组件中才使用到。
<divclass="progress"> <divclass="progress-bar"style="width:45%"> <spanclass="sr-only">45%complete</span> </div> </div>
注意用.progress是总进度条，progress-bar是进度条显示的部分，还有五种颜色progress-bar-success等
sr-only，全称是screenreaderonly（仅供）屏幕阅读器有时候UI上会出现一些仅供视觉识别的元素，比如说“汉堡包菜单按钮”只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是screenreader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。
//源码
.progress{
height:20px;
margin-bottom:20px;
overflow:hidden;
background-color:#f5f5f5;
border-radius:4px;
-webkit-box-shadow:inset01px2pxrgba(0,0,0,.1);
box-shadow:inset01px2pxrgba(0,0,0,.1);
}
.progress-bar{
float:left;
width:0;
height:100%;
font-size:12px;
line-height:20px;
color:#fff;
text-align:center;
background-color:#337ab7;
-webkit-box-shadow:inset0-1px0rgba(0,0,0,.15);
box-shadow:inset0-1px0rgba(0,0,0,.15);
-webkit-transition:width.6sease;
-o-transition:width.6sease;
transition:width.6sease;
}
.progress-striped.progress-bar,
.progress-bar-striped{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
-webkit-background-size:40px40px;
background-size:40px40px;
}
.progress.active.progress-bar,
.progress-bar.active{
-webkit-animation:progress-bar-stripes2slinearinfinite;
-o-animation:progress-bar-stripes2slinearinfinite;
animation:progress-bar-stripes2slinearinfinite;
}
.progress-bar-success{
background-color:#5cb85c;
}
.progress-striped.progress-bar-success{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-bar-info{
background-color:#5bc0de;
}
.progress-striped.progress-bar-info{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-bar-warning{
background-color:#f0ad4e;
}
.progress-striped.progress-bar-warning{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
.progress-bar-danger{
background-color:#d9534f;
}
.progress-striped.progress-bar-danger{
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
}
1.9总结
1.通常8种类型样式，需要组合使用，比如设置active状态时候还要兼顾颜色和尺寸样式，设置尺寸又要考虑并列元素的情况，所以从高层往下考虑，考虑需要写哪几种样式。
2.还有就是样式利用CSS重载覆盖的概念，注意定义的顺序，以免重载顺序错误。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。