響應(yīng)式布局

body{  //樣式
        background:#444;
    }
@media screen and (max-width:500px){    //當(dāng)屏幕小于500時(shí)腰涧，的css樣式
    body{  //樣式
        background:#fff;
    }
}

手機(jī)視口

使手機(jī)端可以正常顯示月弛，不被壓縮
<meta name="viewport" content="width=device-width,initial-scale=1">

字體圖標(biāo)庫(kù) fontawesome.io 導(dǎo)入css文件即可用

bootstap 網(wǎng)站：http://v3.bootcss.com

table
加類名：table 自動(dòng)設(shè)置表格樣式
table-bordered 邊框
table-hover 移入事件
table-condensed 緊湊
tr td 顏色：
加類名：
success
active
warning
info
danger

表單
實(shí)現(xiàn)基本的表單樣式

<form>//內(nèi)聯(lián)表單:<form class="form-inline">
    <div class="form-group">//has-error 錯(cuò)誤狀態(tài),has-success 成功狀態(tài),has-warning 警告狀態(tài)
        <label>電子郵件</label>
        <input type="email" class="form-control"
        placeholder="請(qǐng)輸入您的電子郵件">
    </div>
    <div class="form-group">
        <label>密碼</label>
        <input type="password" class="form-control"
        placeholder="請(qǐng)輸入您的密碼">
    </div>
</form> 

讓表單內(nèi)的元素保持水平排列

<form class="form-horizontal"> //保持水平
    <div class="form-group">
        <label class="col-sm-2 control-label">電子郵件</label>
        <div class="col-sm-10"> //需要加div在外層
            <input type="email" class="form-control" placeholder="請(qǐng)輸
        入您的電子郵件">
        </div>
    </div>
</form> 

單選框、復(fù)選框

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
           Option one is this and that—be sure to include why it's great
      </label>
    </div>
//禁用
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
      </label>
    </div>

//設(shè)置內(nèi)聯(lián)一行顯示的復(fù)選框

<label class="checkbox-inline">
    <input type="checkbox">體育
</label>
<label class="checkbox-inline disabled">
    <input type="checkbox" disabled>音樂
</label>

設(shè)置下拉列表

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

文本框右側(cè)內(nèi)置文本圖標(biāo)

<div class="form-group has-feedback">
    <label>電子郵件</label>
    <input type="email" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

** 柵欄布局 **

<div class="container"> //container-fluid全屏顯示
      <div class="row">
      <!--  md:middle  lg:large sm:small  適應(yīng)不同大小的屏糠馆，
         col-md-offset-3  向右邊偏移 3份  會(huì)影響后面的位置(margin-left)
         col-md-push-3    向右邊移動(dòng) 3份  不會(huì)影響后面的位置(relative) 
         col-md-pull-3    向左邊移動(dòng) 3份  不會(huì)影響后面的位置(relative)
      --> 
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12  a">
          <div class="row">
            <div class="col col-md-4 a"></div>
            <div class="col col-md-4 a"></div>
            <div class="col col-md-4 a"></div>
          </div>
        </div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 col-md-push-2 a"></div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
        <div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
      </div>
  </div>

圖片

    ![](1.jpg)  <!-- 圓角 -->
    ![](1.jpg) <!-- 圓形 -->
    ![](1.jpg) <!-- 縮略圖 -->
    <!-- 當(dāng)圖片大于父元素的寬度時(shí),圖片會(huì)縮小到父元素的寬度 -->
    ![](1.jpg)

按鈕
按鈕分組

  <div class="btn-group dropup"><!-- 加三角號(hào)  dropup向上 /btn-group-lg, sm, xm 指定大小 -->
    <button class="btn btn-info active"> <!-- 給btn加active 選中狀態(tài) ，btn-info  可改變顏色-->
      <span class="glyphicon glyphicon-star"></span> <!-- 加字體符號(hào) -->
      按鈕 
    </button>   
    <button class="btn btn-primary"><span class="caret"></span></button>
  </div>

<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

預(yù)定義樣式

• 樣式 說(shuō)明
  btn-default 默認(rèn)樣式
  btn-success 成功樣式
  btn-info 一般信息樣式
  btn-warning 警告樣式
  btn-danger 危險(xiǎn)樣式
  btn-primary 首選項(xiàng)樣式
  btn-link 鏈接樣式

從大到小的尺寸

lg large
sm small
xs x-small
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

//塊級(jí)換行

<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>

列表
//移出默認(rèn)樣式

<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

//設(shè)置成內(nèi)聯(lián)

<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

//設(shè)置英文文本大小寫

<p class="text-lowercase">Bootstrap 框架</p> <!--小寫-->
<p class="text-uppercase">Bootstrap 框架</p> <!--大寫-->
<p class="text-capitalize">bootstrap 框架</p><!--首字母大寫-->

//縮略語(yǔ)

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>