bootstrap 小点

 checkbox对齐

<div class="checkbox">
      <label>
        <input type="checkbox" class="">选项
     </label>
</div>

 

!important 被用来明确 CSS 样式的优先级


table表格
table   //基本属性
table-bordered  //显示表格线条
table-condensed //表格大格变小格
table-hover     //鼠标移动变色
table-striped   //隔行变色
table-responsive  //在table的外层加上 使表格在宽度很小的时候出现下划线

form表单
form-inline   //是表单内容left左浮动
form-horizontal     //使label和控件水平布局
form-group         //相当于 row 行
label            //control-label来定义样式
input, textarea   //使用form-control 来定义样式
<form action="" method="post" class="form-horizontal">
  <div class="form-group">
     <label for="name" class="control-label col-sm-2">用户:</label>
     <div id = "name" class="col-sm-10">
         <!--<p class="form-control-static">张三</p>-->
         张三
         <textarea class="form-control" name="con" id="" cols="30" rows="10" placeholder="请输入内容~"></textarea>
     </div>
 </div>

//标题字体颜色
<p class="text-success">...</p>
//标题文字背景颜色
<p class="bg-primary">...</p>
//ul li
<div class="row list-group">
   <a href=""  class=" list-group-item">
//提示消息
div.alert  alert-success

//点击X隐藏内容     (data-dismiss="alert"  alert 不能变固定的)
<div class="alert">
<button type="button" class="close" data-dismiss="alert" >&times</button>

//三角形
<span class="caret"></span>
//pull-left pull-right  让元素左/右浮动
div.pull-right

//隐藏/显示 内容
div.show 
div.hidden   .sr-only    .invisible/.text-hide(内容隐藏块的高宽都还在)

.visible-lg-*   //除了大屏的时候显示，其它时候都隐藏
.hidden-lg     //大屏的时候隐藏 ，其他屏都显示


//下拉框    （父div 为dropup向上下拉）
//dropdown-menu-left / dropdown-menu-right   下拉框向右对齐
//divider     下划线
<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
    标题
    <span class="caret"></span>
    </button>
    <ul   class="dropdown-menu">
          <li>分类</li>
      <li class="divider"></li>

//按钮组
//btn-group-vertical   竖着排列
//btn-group-justified   对齐到左右两边  （button 也要放到 .btn-group的div中）
//btn-lg   按钮大小
//btn-group-lg   按钮组大小
<div class="btn-group">
      <button  ...
      <div class="btn-group">
            下拉框。。。


//输入框组
//input-group-btn     要是添加按钮就用这个class的div进行添加
//input-group-addon    添加组元素
<div class="input-group">
    <div class="input-group-addon">
          <span class="input-group-addon">@</span>
     </div>
     <input type="text" class="form-control">



//标签页
//nav-tabs   改为nav-pills   时标签样式变成按钮切换
//nav-justified    对齐到网络
//nav  加上 nav-stacked     竖着切换
<di>
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#aa" data-toggle="tab">aaaa</a> </li>
                <li><a href="#bb" data-toggle="tab">bbbb</a> </li>
                
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="aa">aa div</div>
                <div class="tab-pane" id="bb">bb div</div>
               
            </div>
        </di>


//导航栏
//navbar-fixed-top /navbar-fixed-bottom   固定在顶部/底部
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>