bootstrap 辅助类

可能会派上用场的辅助类

文字:

.text-muted  颜色 #777

.text-muted {
    color: #777;
}

背景:

  不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:  .bg-primary  等

其他:

  浮动: .pull-left     .pull-right     

  居中显示: .center-block    设置元素为块元素,并且居中显示

  清楚浮动: .clearfix    在bootstrap中通过给父元素container  添加伪类      .clearfix::before{ clear: both}     .clearfix::after{clear: both} (!不对的请指出)

        .row {  //行  bootstrap 把一行分成12份或列  
            margin-right: -15px;
            margin-left: -15px;
        }
        .col-xs-1 {  //在xs尺寸屏占1列     一列 父元素的  width: 8.33333333%;
           position: relative;
           min-height: 1px;
           padding-right: 15px;
             padding-left: 15px;

          float: left;     // 浮动布局     且元素有内边距    注意在父元素上清楚浮动   .clearfix
        }

 

  显示下拉功能: .caret

    定义一个下拉功能的按钮:    (摘自菜鸟教程)
    <div class="btn-group">
      <button type="button"   class="btn btn-primary dropdown-toggledata-toggle="dropdown">Menu <span class="caret"></span></button> 
      <ul class="dropdown-menu" role="menu">
          <li><a href="#">一个链接</a></li>
         <li><a href="#">另一个链接 link</a></li>
        <li><a href="#">其他功能</a></li>
     </ul>
   </div>

    

    .dropup,  .dropdown{position: relative}  

     .dropdown-toggle:focus {  outline: 0;}

    .btn-group{ position: relative;    display: inline-block;   vertical-align: middle;}   //相对定位

    .btn-group >.btn   //相对定位,浮动
       {   
       position: relative;
        float: left;    }

    .dropdown-menu {   //绝对定位
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;   //默认隐藏
        float: left;
        min-width: 160px;
        padding: 5px 0;    //padding-top: 5px ; padding-bottom: 5px
        margin: 2px 0 0;  //margin-top: 2px  上方的距离
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
              background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
             box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }

 

   阅读上显示,其他隐藏:     .sr-only

   显示隐藏:  .show    .hidden

  

posted @ 2017-03-03 14:19  铁塔  阅读(150)  评论(0编辑  收藏  举报