BootStrap

BootStrap:响应式
排版布局:
.container : width:1170px
.container-fluid :width:100%

标签：h1~h6 : 不加粗、字体颜色也不是纯黑.
h1: font-size:36px
h2: font-size:30px
h3: font-size:24px
h4: font-size:18px
h5: font-size:14px
h6: font-size:12px

<h1 class='page-header'>产品展示</h1>
.page-header : 会在下方加一条横线,css中通过border-bottom设置的.

<small></small> 副标题 小一号 颜色较灰
<big><big> 副标题 大一号

<h1 class='page-header'>产品<small>展示</small></h1>

<p></p> : font-size:14px;padding-bottom:10px

<strong></strong> 加粗
<em></em> 倾斜

<del></del> 删除线


.text-right:文本右对齐
.text-center:文本居中对齐
.text-left:文本左对齐

.text-uppercase:小写英文字母自动变成大写显示
.text-lowercase:大写英文字母自动变成小写显示
.text-capitalize:单词首字母如果是小写则变成大写.注：只管首字母,其他字母不受影响

<ul class='list-unstyle list-inline'></ul>
.list-unstyle:把列表前面那些符号去掉,和去掉所有的格式
.list-inline:列表项纵向排列变横向排列(即li变为float:left)

<dl class='dl-horizontal'>
  <dt>标题</dt>
  <dd>操作</dd>
</dl>
.dl-horizontal:就是把dt、dd变成横向显示，即float:left.

<div class='table-responsive'>
<table class='table table-bordered table-hover table-striped'>
</table>
<div>
.table 每一行有一条横线隔开，没有外边框，也没有竖线分隔。
.table-bordered:给表格加上外边框和单元格竖边框
.table-hover:鼠标所在行变色.即tr:hover改变背景色.
.table-striped:隔行换色
.table-condensed:让表格变得紧凑些。即td的padding变小,tr高度变小.
.table-responsive:让表格变成响应式.在非常窄的情况下（表格标题都靠一起了,没法在窄了）会则出现水平滚动条。

状态类css(设置tr或td的背景颜色):
.active:鼠标悬停
.success:成功
.info:信息
.warning:警告
.danger:危险

<img src='1.jpg' class='img-responsive img-circle'/>
.img-responsive:图片大小会跟着设备屏幕大小而变化。
.img-circle:图片变成椭圆形,如果图片长宽相等，则变成圆形
.img-rounded:图片变成圆角
.img-thumbnail:给图片加一个圆角的边框,这个样式比较常用.

栅格系统(用div实现表格布局，响应式)：
栅格系统一定要放入容器中，即：<div class='container'></div>或<div class='container-fluid'></div>
栅格系统，把浏览器窗口自动最多分为12列，栅格系统是由行row和列column组成.
如果超过12列会自动换行.
<div class='container' style='background:#ffffff;'>
   <div class='row'>
      <div class='col-md-1'>col-md-1</div>
      <div class='col-md-1'>col-md-1</div>
      <div class='col-md-1'>col-md-1</div>
      <div class='col-md-3'>col-md-3</div>
      <div class='col-md-6'>col-md-6</div>
   </div>
   <div class='row'>
      <div class='col-md-4'>
          <img src='1.jpg' class='img-responsive img-thumbnail'/>      
          <h3 class='page-header'>需要地厅需要城要栽</h3>
          <p>城地要需要霜村需要需要城村厅地厅需需要地要地要霜在</p>
      </div>
      <div class='col-md-4'>col-md-4</div>
      <div class='col-md-4'>col-md-4</div>
   </div>
</div>
.col-md-n:点n列(n为1~12)
md:中等屏幕的意思。
如果能显示得下，列就会横向显示，如果显示不下，列就会纵向显示(想当于普通的div显示方式)，
如果要实现根据屏幕大小自动显示1列或两列或三列，就要使用栅格参数。
栅格参数：
超小屏幕 手机: .col-xs-,<768px,.container最大宽度为自动
小屏幕 平板: .col-sm-, >=768px，.container最大宽度为750px
中等屏幕 桌面显示器: .col-md-, >=992px，.container最大宽度为970px
大屏幕 大桌面显示器: .col-lg-,>=1200px，.container最大宽度为1170px
这样使用：
<div class='col-md-3 col-xs-6 col-sm-4'></div>
这样设置好，如果在手机上一列占6格(即按两列显示),如果在平板上一列占4格(即按3列显示),如果是在桌面显示
器上一列占4格(即按3列显示)，这就实现了真正的响应式布局。
===========================================
偏移 offset
注：只能同右偏移
语法：col-xs/sm/md/lg-offset-n,(n为要向右偏移的列数)
例如：<div class='col-md-2 col-md-offset-4'>col-md-2</div>
==============================================
排列：
语法：
col-xs/sm/md/lg-pull-n  ：向左偏移,n为向左移动列数
col-xs/sm/md/lg-push-n  ：向右偏移,n为向右移动列数
==============================================
辅助类：
情境文本颜色：.text-muted(柔和)，.text-sucess,.text-info,.text-primary,.text-warning,.text-danger
情境背景色：.bg-sucess,.bg-info,.bg-primary,.bg-warning,.bg-danger
下拉三角：<span class='caret'></span>
快速浮动：.pull-left(即：float:left),.pull-right(即float:right),.clearfix(清除浮动,设置在.pull-left、.pull-right的父元素)
见：https://v3.bootcss.com/css/#helper-classes
==============================================
表单（重点）：
.form-control:用于input输入框，textarea文本区域
.form-group:分组.用于input、textarea的父元素.(.form-group设有margin,这样组与组之间就有一定距离,这就是分组的目的)
.checkbox-inline:<label class='checkbox-inline'><input type='checkbox'>唱歌</label>
.disabled:设置在label标签.
.radio-inline:<label class='radio-inline'><input type='radio'>男</label>
见：https://v3.bootcss.com/css/#forms
==============================================
输入框组：(标签和输入框为一行)
<div class='input-group'>
 <span class='input-group-addon'>搜索</span>
 <input class='form-control'>
</div>
<div class='input-group'>
 <span class='input-group-addon'><span class='glyphicon glyphicon-search'></span></span>
 <input class='form-control'>
</div>
glyphicon glyphicon-search：这个是iconfont.
==============================================
响应式表单：
<form class='form-horizontal'>
</form>
必须结合栅格系统才能变成响应式效果:
<div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="userName" class="col-md-2 col-xs-2 col-sm-2 text-right" >账号</label>
                <div class="col-md-10 col-xs-10 col-sm-10">
                    <input type="text" id="userName" name="userName" class="form-control"/>
                </div>
            </div>
        </form>
    </div>
===============================================
按钮：
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<button class="btn btn-success active" disabled="disabled">按钮</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">按钮</a>
按钮大小：.btn-lg  .btn-sm  .btn-xs,不设置就是默认大小。
按钮组：（按钮组中的按钮中连在一起的）
<div class="btn-group">
            <button class="btn btn-success">按钮</button>
            <button class="btn btn-info">按钮</button>
            <button class="btn btn-primary">按钮</button>
        </div>
===============================================
缩略图:
<div style="width:100px;height:100px;" class="thumbnail"></div>
.thumbnail 加一个圆角的边框
===============================================
下拉菜单：
===============================================
标签页：tabs
===============================================
导航条
===============================================
分页
===============================================
附：
div[class*='col-']{ //class*='col-':类名中包含"col-"的
   border:1px solid blue;
}
div[class^='col-']{ //class^='col-':类名中以"col-"开头的
   border:1px solid blue;
}

表单元素放在label中间包起来，label就不用设置for.label的作用，只要点击在label的区域即使在input区域外,input都能获得焦点。
<label><input type='checkbox'>唱歌</label>

<label for='tel'></label>
<input id='tel' name='tel' type='text'>