婷婷久久国产,玖玖在线只有精品,久久久久久久久久伊

Bootstrap

標(biāo)簽和樣式

Bootstrap 中把一些標(biāo)簽的樣式重置了，也即是為一些標(biāo)簽設(shè)置了帶有 Bootstrap 風(fēng)格的樣式，如 h 標(biāo)簽，p 標(biāo)簽等等，這其中包含了 HTML5 標(biāo)簽。

示例代碼如下：
你可以把 Bootstrap 的 css 的樣式文件注釋后刷新瀏覽器，看看兩種情況下的標(biāo)簽的默認(rèn)樣式。

<h1>愛秋的艷</h1>
<h2>寫給女朋友系列</h2>
<h3>Bootstrap學(xué)習(xí)文檔</h3>
<h4>一只寫程序的猿</h4>
<h5>html</h5>
<h6>css</h6>
<p>http://www.itdecent.cn</p>
<p><kbd>ctrl+i</kbd></p>
<pre><p>這里是一段文字，不會(huì)被解析</p><br /><div>kaivon</div></pre>
<code>Hello, word!</code>
<code><span></code>

如果你想用Bootstrap h 標(biāo)簽的六級(jí)標(biāo)題樣式，還可以直接在標(biāo)簽中加上 h1~h6 的類名，如： <span class="h1">標(biāo)題樣式</span> 。

表格

Bootstrap 也重置了表格這個(gè)標(biāo)簽，加入了表格常用的樣式，比如隔行換色，加邊框等，下面是 Bootstrap 的表格類名，它們可以組合使用。

table 會(huì)修改一些簡(jiǎn)單的樣式
table-striped 隔行換色
table-bordered 給表格添加邊框
table-hover 給每一行添加一個(gè)hover狀態(tài)
table-condensed 讓表格更加緊湊

注意：將表格包在一個(gè)class為table-responsive的div里，當(dāng)屏幕尺寸小于768的時(shí)候會(huì)出現(xiàn)滾動(dòng)條

在表格中，Bootstrap 還封裝了一些狀態(tài)類，通過這些狀態(tài)類可以為行或單元格設(shè)置顏色。

active 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
success 標(biāo)識(shí)成功或積極的動(dòng)作
info 標(biāo)識(shí)普通的提示信息或動(dòng)作
warning 標(biāo)識(shí)警告或需要用戶注意
danger 標(biāo)識(shí)危險(xiǎn)或潛在的帶來負(fù)面影響的動(dòng)作

示例代碼如下：

<div class="container">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>語文  </td>
          <td>數(shù)學(xué)</td>
          <td>英文</td>
          <td>生物</td>
          <td>化學(xué)</td>
        </tr>
        <tr class="success">
          <td>語文  </td>
          <td>數(shù)學(xué)</td>
          <td>英文</td>
          <td>生物</td>
          <td>化學(xué)</td>
        </tr>
        <tr class="warning">
          <td>語文  </td>
          <td>數(shù)學(xué)</td>
          <td>英文</td>
          <td>生物</td>
          <td>化學(xué)</td>
        </tr>
        <tr class="danger">
          <td>語文  </td>
          <td>數(shù)學(xué)</td>
          <td>英文</td>
          <td>生物</td>
          <td>化學(xué)</td>
        </tr>
        <tr class="info">
          <td>語文  </td>
          <td>數(shù)學(xué)</td>
          <td>英文</td>
          <td>生物</td>
          <td>化學(xué)</td>
        </tr>
        <tr>
          <td class="active">語文 </td>
          <td class="success">數(shù)學(xué)</td>
          <td class="warning">英文</td>
          <td class="danger">生物</td>
          <td class="info">化學(xué)</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</div>

表單

1.基本樣式

form-control 讓表單的寬度為100%，并且還添加了一些其它的樣式，如表單圓角效果和聚焦發(fā)光
form-group 給表單縱向之間添加了一些距離
form-inline 讓表單在一行中顯示，此時(shí)可以不要form-group，但還是建議加上
示例代碼如下：

<div class="container">
  <div class="row">
    <form action="#" class="form-inline">
      <!--<div class="form-group">-->
        <label for="userName">用戶名</label>
        <input type="text" id="userName" class="form-control" />
      <!--</div>-->
      
      <!--<div class="form-group">-->
        <label for="password">密碼</label>
        <input type="password" id="password" class="form-control" />
      <!--</div>-->
    </form>
  </div>
</div>

2.樣式進(jìn)階

form-horizontal 讓表單在一行中顯示，并且能夠改變form-group的樣式
control-label 讓label里的文字水平垂直居中對(duì)齊

示例代碼如下：

<div class="container">
  <div class="row">
    <form action="#" class="form-horizontal">
      <div class="form-group">
        <label for="userName" class="col-lg-1 control-label">用戶名</label>
        <div class="col-lg-11">
          <input type="text" id="userName" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <label for="password" class="col-lg-1 control-label">密碼</label>
        <div class="col-lg-11">
          <input type="password" id="password" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <div class="col-lg-1 col-lg-offset-1">
          <input type="button" value="登錄" class="btn" />
        </div>
      </div>
    </form>
  </div>
</div>

3.特殊樣式
單選框，復(fù)選框，文本域框的樣式

checkbox checkbox的樣式設(shè)置
checkbox-inline 讓checkbox在一行中顯示
radio radio的樣式設(shè)置
radio-inline 讓radio在一行中顯示

表單的校驗(yàn)狀態(tài)類

has-warning 表單填寫警告
has-error 表單填寫錯(cuò)誤
has-success 表單填寫成功

示例代碼如下：

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox disabled">
      <label><input type="checkbox" disabled /> 記住我</label>
    </div>
    
  </div>
</div>

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox">
      <label><input type="checkbox" /> 忘記我</label>
    </div>
    
  </div>
</div>

<!--checkbox在一行中顯示-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="checkbox">
      <label class="checkbox-inline"><input type="checkbox" /> 忘記我</label>
      <label class="checkbox-inline"><input type="checkbox" /> 忘記我</label>
    </div>
    
  </div>
</div>


<!--radio在一行中顯示-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="radio">
      <label class="radio-inline"><input type="radio" /> 忘記我</label>
      <label class="radio-inline"><input type="radio" /> 忘記我</label>
    </div>
  </div>
</div>

<!--select下拉框-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <select multiple class="form-control">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
    </select>
  </div>
</div>

<!--文本輸入框-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <textarea class="form-control"></textarea>
  </div>
</div>

按鈕

Bootstrap 為我們提供了豐富的按鈕樣式

按鈕的背景色
btn-default 默認(rèn)的按鈕樣式
btn-link 鏈接樣式的按鈕
btn-primary 首選項(xiàng)顏色的按鈕
btn-success 成功顏色的按鈕
btn-info 一般信息顏色的按鈕
btn-warning 警告顏色的按鈕
btn-danger 危險(xiǎn)顏色的按鈕
按鈕的尺寸
btn-lg btn-md btn-sm btn-xs
btn-block
讓按鈕從內(nèi)聯(lián)塊級(jí)元素變?yōu)閴K級(jí)元素，可以撐滿整個(gè)父級(jí)元素，也即是把按鈕的寬度置為100%；
按鈕的狀態(tài)
active（激活狀態(tài)） disabled（禁用狀態(tài)）

示例代碼如下：

<div class="container">
  <div class="row">
    <input type="button" value="按鈕" class="btn" />
    <button type="button" class="btn btn-default">kaivon</button>
    <button type="button" class="btn btn-primary">kaivon</button>
    <button type="button" class="btn btn-success">kaivon</button>
    <button type="button" class="btn btn-info">kaivon</button>
    <button type="button" class="btn btn-warning">kaivon</button>
    <button type="button" class="btn btn-danger">kaivon</button>
    <button type="button" class="btn btn-link">kaivon</button>
  </div>
  
  <!--按鈕的尺寸-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-default btn-lg">kaivon</button>
    <button type="button" class="btn btn-primary btn-md">kaivon</button>
    <button type="button" class="btn btn-success btn-sm">kaivon</button>
    <button type="button" class="btn btn-info btn-xs">kaivon</button>
  </div>
  
  <!--btn-block 讓按鈕的寬度變?yōu)?00%，并且成了塊級(jí)元素-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary btn-block">kaivon</button>
  </div>
  
  <!--激活狀態(tài)-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active">kaivon</button>
    <a href="#" class="btn btn-danger active">kaivon</a>
  </div>
  
  <!--禁用狀態(tài)-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active" disabled>kaivon</button>
    <button type="button" class="btn btn-info disabled">kaivon</button>
    <a href="#" class="btn btn-danger active disabled">kaivon</a>
  </div>
</div>

圖片

直接在img標(biāo)簽里面放置這些類，但不要亂用哦

img-responsive
響應(yīng)式圖片，圖片的大小隨著父級(jí)容器的改變而改變，最大為圖片的真實(shí)尺寸
圖片的形狀
img-rounded 帶圓角效果的圖片
img-circle 圓形的圖片
img-thumbnail 帶邊框的圖片

示例代碼如下：

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      ![](logo.jpg)
    </div>
  </div>
  
  <!--圖片的形狀-->
  <div class="row" style="margin-top: 10px;">
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
  </div>
</div>

輔助類

1.字體的顏色
text-muted text-primary text-success text-info text-warning text-danger
可以發(fā)現(xiàn)和前面的按鈕背景色的后面一部分有相同的地方，Bootstrap 的命名是很有規(guī)律的，對(duì)于不同的使用場(chǎng)景，使用不同的前綴。

示例代碼如下：

<div class="row">
  <p class="text-muted">愛秋的艷</p>
  <p class="text-primary">愛秋的艷</p>
  <p class="text-success">愛秋的艷</p>
  <p class="text-info">愛秋的艷</p>
  <p class="text-warning">愛秋的艷</p>
  <p class="text-danger">愛秋的艷</p>
</div>

2.文本的背景
bg-primary bg-success bg-info bg-warning bg-danger

示例代碼如下：

<div class="row">
  <p class="bg-primary">愛秋的艷</p>
  <p class="bg-success">愛秋的艷</p>
  <p class="bg-info">愛秋的艷</p>
  <p class="bg-warning">愛秋的艷</p>
  <p class="bg-danger">愛秋的艷</p>
</div>

3.三角符號(hào)和按鈕
Bootstrap 提供了常用的三角符號(hào)和按鈕圖標(biāo)，使用起來很方便。
在span標(biāo)簽里面加上caret的類名，就可以變成一個(gè)下三角的符號(hào)。在button里面加上close的類名，并在button中加上×的轉(zhuǎn)義符號(hào)就可以出現(xiàn)一個(gè)關(guān)閉的按鈕。

示例代碼如下：

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>

4.浮動(dòng)
pull-left 左浮動(dòng)
pull-right 右浮動(dòng)
注意，直接將浮動(dòng)的部分放在row中，是可以撐開容器的，因?yàn)閞ow是帶清楚浮動(dòng)樣式的，如果不放直接放在row中可以在浮動(dòng)部分外面加上clearfix的類名清楚內(nèi)部的浮動(dòng)。

示例代碼如下：

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>
<div class="row" style="border: 1px solid #f00;">
  <div class="pull-left">程序員</div>
  <div class="pull-right">程序媛</div>
</div>

隱藏與顯示
hidden 不在占去文檔流的位置
show 正常的顯示
invisible 不可見，但仍會(huì)占有位置

示例代碼如下：

<style>
.row div{
    height: 100px;
    background: green;
    border: 1px solid #000;
    color: #fff;
  }
</style>

<div class="row">
  <div class="col-lg-3 show">第1列</div>
  <div class="col-lg-3 hidden">第2列</div>
  <div class="col-lg-3">第3列</div>
  <div class="col-lg-2 invisible">第4列</div>
  <div class="col-lg-1">第5列</div>
</div>

6.居中顯示
center-block 是一個(gè)塊級(jí)元素居中，原理其實(shí)很簡(jiǎn)單，就是我們經(jīng)常寫的 margin: 0 auto; 另外還加入了 display:block; 來使元素變?yōu)閴K級(jí)的。

示例代碼如下：

<div class="row" >
  <div style="width: 100px; height: 100px; border: 1px solid #f00;" class="center-block"></div>
</div>

響應(yīng)式工具

針對(duì)不同的屏幕寬度，顯示和隱藏相關(guān)的內(nèi)容

滿足條件則顯示
visible-- 第一個(gè)*的內(nèi)容是 lg md sm xs，第一個(gè) * 的內(nèi)容是 block inline inline-block 。
滿足條件則隱藏
hidden-* * 的內(nèi)容為 lg md sm xs 。

示例代碼如下：

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-lg-block">第1行第1列</div>
    <div class="col-lg-4 visible-lg-inline">第1行第2列</div>
    <div class="col-lg-4 visible-lg-inline-block">第1行第3列</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 visible-md-block">第2行第1列</div>
    <div class="col-lg-4 visible-md-inline">第2行第2列</div>
    <div class="col-lg-4 visible-md-inline-block">第2行第3列</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-lg">第3行第1列</div>
  </div>
</div>

打印類

打印的功能（瀏覽器快捷鍵Ctrl + P 或者右鍵功能選項(xiàng)）我們平時(shí)很少使用，Bootstrap 為了更加全面，加入了打印的樣式類。

打印的時(shí)候顯示
visible-print-* * 的內(nèi)容有 block inline inline-block
打印的時(shí)候隱藏（不顯示）
hidden-print

示例代碼如下：

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-print-block">第1行第1列</div>
    <div class="col-lg-4 visible-print-inline">第1行第2列</div>
    <div class="col-lg-4 visible-print-inline-block">第1行第3列</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-print">第2行第1列</div>
  </div>
</div>

Bootstrap 系列：

Bootstrap學(xué)習(xí)文檔（一）
Bootstrap學(xué)習(xí)文檔（二）
Bootstrap學(xué)習(xí)文檔（三）
Bootstrap學(xué)習(xí)文檔（四）

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Bootstrap學(xué)習(xí)文檔（二）

Bootstrap學(xué)習(xí)文檔（二）

標(biāo)簽和樣式

表格

表單

按鈕

圖片

輔助類

響應(yīng)式工具

打印類

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Bootstrap學(xué)習(xí)文檔（二）

標(biāo)簽和樣式

表格

表單

按鈕

圖片

輔助類

響應(yīng)式工具

打印類

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av