首页 > 代码库 > bootstrap 第一天
bootstrap 第一天
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）
<abbr title="World Wide Web">WWW</abbr><br>
源码：
abbr[title]:after {
content: " (" attr(title) ")";
}
abbr[title] {
border-bottom: 1px dotted;
}
abbr[title],
abbr[data-original-title] {
cursor: help; //改变鼠标形状
border-bottom: 1px dotted #777;
}
css:选择器，abbr[title],选择有title属性的所有abbr标签。：after将content内容加到abbr标签之间的末尾，（first为加到开头）。attr(title),attr（）这个函数为选择器的对象返回属性X的值，并将其作为一个字符串。该字符串不会被CSS处理器解析。内容为title属性的值。
2..contain .contain-fluid .col-xs-2 .col-md-2-pull .col-md-4-push
源码
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
margin-right: auto;margin-left: auto; 使其左右居中。
padding 使其左右预留15px距离。
@media (min-width: 768px) {
.container {
width: 750px;
}
}
在sm设备中的.container宽度。
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
与.container相同啊
.row {
margin-right: -15px;
margin-left: -15px;
}
.row中第一个元素的margin-left与.container中的padding-left抵消，使其在.contain中贴边显示。
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
四种设备中的显示间隔：15+15 = 30px padding会增加div长度啊
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
每列元素宽度为width*8.3%,左右内边距为15px;
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
不同列数所占宽度，每列为750*8.33% = 60；
.col-xs-pull-10 {
right: 83.33333333%;
}
向右移动10列的宽度。
.col-xs-push-6 {
left: 50%;
}
向左移动6列的宽度。
.col-xs-offset-3 {
margin-left: 25%;
}
左边距为3列的宽度
bootstrap 第一天