首页 > 代码库 > bootstrap 第一天

bootstrap 第一天

  1.  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 第一天