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-toggle"  data-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