bootstrap 小点

<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" >×</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>