Bootstrap3 CSS樣式基本用法總結

出于學習需要，自覺得把基本的bootstrap用法自己敲一遍，對每個用法有個較清晰的印象，所以做了本篇總結，這也是一個鞏固的學習過程。

可點擊左邊的目錄，方便速查。

按鈕

a,input,button都可以設置為按鈕

a標簽按鈕

        <a class="btn btn-default" href="#" role="button">a標簽按鈕</a>
        <input type="button" class="btn btn-default" value="input的button標簽按鈕" />
        <input type="submit" class="btn btn-default" value="input的submit標簽按鈕" />
        <button class="btn btn-default">button標簽按鈕</button>   

預置樣式

        <button class="btn btn-default">default樣式</button>
        <button class="btn btn-primary">primary樣式</button>
        <button class="btn btn-success">success樣式</button>
        <button class="btn btn-info">info樣式</button>
        <button class="btn btn-warning">warning樣式</button>
        <button class="btn btn-danger">danger樣式</button>
        <button class="btn btn-link">link樣式</button>

按鈕大小

        <button class="btn btn-info btn-lg">大按鈕btn-lg</button>
        <button class="btn btn-info">默認按鈕</button>
        <button class="btn btn-info btn-sm">小按鈕btn-sm</button>
        <button class="btn btn-info btn-xs">超小按鈕btn-xs</button>

塊級按鈕-btn-block

        <button class="btn btn-success btn-block">塊級按鈕，與父元素等寬</button>
        <button class="btn btn-warning btn-lg btn-block">塊級按鈕，與父元素等寬</button>

禁用狀態 class="disabled"

        <button class="btn btn-success disabled">被禁用的按鈕</button>

激活狀態 class="active"

        <button class="btn btn-success active">激活狀態的按鈕</button>

圖片

響應式圖片-img-responsive

        <img class="img-responsive" src="https://simg.open-open.com/show/03543594060d616e8a4ecd27ded04954.png" />

圖片的三種形狀

        <img class="img-rounded" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.jpg" />
        <img class="img-thumbnail" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.jpg" />
        <img class="img-circle" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.jpg" />
      

表格

基本表格 .table

        <table class="table">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

斑馬線表格 .table .table-striped

        <table class="table table-striped">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

帶邊框表格 .table .table-bordered

        <table class="table table-bordered">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

鼠標懸停表格 .table .table-hover

        <table class="table table-hover">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

緊湊表格 .table .table-condensed

        <table class="table table-condensed">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

響應式表格 .table .table-responsive

      <div class="myborder">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

狀態類

        <table class="table">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr class="active">
              <td>狀態active</td>
              <td>狀態active</td>
              <td>狀態active</td>
            </tr>
             <tr class="success">
              <td>狀態success</td>
              <td>狀態success</td>
              <td>狀態success</td>
            </tr>
             <tr class="info">
              <td>狀態info</td>
              <td>狀態info</td>
              <td>狀態info</td>
            </tr>
            <tr class="warning">
              <td>狀態warning</td>
              <td>狀態warning</td>
              <td>狀態warning</td>
            </tr>
            <tr class="danger">
              <td>狀態danger</td>
              <td>狀態danger</td>
              <td>狀態danger</td>
            </tr>
          </tbody>
        </table>

表單

基本表單-.from-control 和.from-group搭配

        <form>
            <div class="form-group">
              <label for="userName">用戶名</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
            </div>
            <div class="form-group">
              <label for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
        </form>

內聯表單-.from-inline

       <form class="form-inline">
            <div class="form-group">
              <label for="userName">用戶名</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
            </div>
            <div class="form-group">
              <label for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
        </form>

移動端注意(隱藏label)

       <form class="form-inline">
            <div class="form-group">
              <label class="sr-only" for="userName">用戶名</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
            </div>
            <div class="form-group">
              <label class="sr-only" for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
      </form>

input的內聯組合

        <form class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-addon">前面</div>
                <input class="form-control" type="text" placeholder="輸入測試" />
              <div class="input-group-addon">后面</div>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
          </div>
        </form>

水平排列表單(用柵格系統)

       <form class="form-horizontal">
            <div class="form-group">
              <label for="userName" class="control-label col-sm-2">用戶名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="control-label col-sm-2">密碼</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
              </div>  
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox">記住密碼</input>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-info">確定</button>
              </div>
            </div>
      </form>

單選框和復選框的內聯形式

          <label class="checkbox-inline">
            <input type="checkbox">選擇1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">選擇2
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">選擇3
          </label>


      <div class="form-group">
        <label class="radio-inline">
          <input type="radio" name="myradio">選擇1
        </label>
        <label class="radio-inline">
          <input type="radio" name="myradio">選擇2
        </label>
        <label class="radio-inline">
          <input type="radio" name="myradio">選擇3
        </label>
      </div></pre> 

靜態控件 .form-control-static
 
  
 
   用戶名 
   
Tab Weng

</div>
</form> 
 
      <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">用戶名</label>
            <div class="col-sm-10">
              <p class="form-control-static">Tab Weng</p>
            </div>
        </div>
      </form>
 
 
標題

（提示：由于默認的h1~h7在博客園編輯器中受默認樣式的影響，所以無法顯示bootstrap的樣式，其具體樣式與下面的class="h1"等相同）
 
  
h1標題樣式

  
h4標題樣式

  
h5標題樣式

  
h6標題樣式

 
      <h1>h1標題樣式</h1>
      <h4>h4標題樣式</h4>
      <h5>h5標題樣式</h5>
      <h6>h6標題樣式</h6>
 
 
標題也可用class="h1"設置

 
  
通過class="h1"來設置樣式

  
通過class="h4"來設置樣式

  
通過class="h5"來設置樣式

  
通過class="h6"來設置樣式

 
        <div class="h1">通過class="h1"來設置樣式</div>
        <div class="h4">通過class="h4"來設置樣式</div>
        <div class="h5">通過class="h5"來設置樣式</div>
        <div class="h6">通過class="h6"來設置樣式</div>
 
 
副標題-<small>(或class="small")

 
  
 設置樣式h1 這里是副標題 

  
 設置樣式h4 這里是副標題 

  
 設置樣式h5 這里是副標題 

  
 設置樣式h6 這里是副標題 

 
        <div class="h1">設置樣式h1<small>這里是副標題</small></div>
        <div class="h4">設置樣式h4<small>這里是副標題</small></div>
        <div class="h5">設置樣式h5<small>這里是副標題</small></div>
        <div class="h6">設置樣式h6<small>這里是副標題</small></div>
 
 
頁面內容

p標簽
Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。 制作標準優化的代碼，并增加交互動態功能，開發JavaScript以及Flash模塊，同時結合后臺開發技術模擬整體 效果，進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。
        <p>
          Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。
          制作標準優化的代碼，并增加交互動態功能，開發JavaScript以及Flash模塊，同時結合后臺開發技術模擬整體
          效果，進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。
        </p>
 
 
突出段落-class="lead"

Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。 制作標準優化的代碼，并增加交互動態功能，開發JavaScript以及Flash模塊，同時結合后臺開發技術模擬整體 效果，進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。
      <p class="lead">
        Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。
        制作標準優化的代碼，并增加交互動態功能，開發JavaScript以及Flash模塊，同時結合后臺開發技術模擬整體
        效果，進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。
      </p>
 
 
內聯文本元素

標記-<mark>
使用mark來標記一下
        使用mark來<mark>標記</mark>一下
 
 
刪除線-<del>或<s>

 
   用del標簽來刪除這段話  
  
用s標簽來刪除這段話

 
        <p><del>用del標簽來刪除這段話</del></p>
        <p><s>用s標簽來刪除這段話</s></p>
 
 
下劃線-<ins>或<u>

 
   ins標簽表示插入文本  
  u標簽表示加上下劃線 
 
        <p><ins>ins標簽表示插入文本</ins></p>
        <u>u標簽表示加上下劃線</u>
 
 
小號文本-<small>

 這是小號文本 
        <small>這是小號文本</small>
 
 
強調-<strong>

 這是加強字體，用strong 
        <strong>這是加強字體，用strong</strong>
 
 
斜體-<em>

 這是斜體，用em 
        <em>這是斜體，用em</em>
 
 
對齊

 
  
居左對齊

  
居中對齊

  
居右對齊

  
[兩端對齊] 現代項目的開發，需要掌握多種技術。互聯網項目，需要用到后端開發、 前端開發、界面設計、產品設計、數據庫、各種移動客戶端、三屏兼容、restFul API設計 和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公眾號微博應用等等。

  
[沒有對齊] 現代項目的開發，需要掌握多種技術。互聯網項目，需要用到后端開發、 前端開發、界面設計、產品設計、數據庫、各種移動客戶端、三屏兼容、restFul API設計 和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公眾號微博應用等等。

 
      <p class="text-left">居左對齊</p>
      <p class="text-center">居中對齊</p>
      <p class="text-right">居右對齊</p>
      <p class="text-justify">
        [兩端對齊] 現代項目的開發，需要掌握多種技術。互聯網項目，需要用到后端開發、
        前端開發、界面設計、產品設計、數據庫、各種移動客戶端、三屏兼容、restFul API設計
        和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3
        這些技術以及像第三方開發像微信公眾號微博應用等等。
      </p>
      <p class="text-nowrap">
         [沒有對齊] 現代項目的開發，需要掌握多種技術。互聯網項目，需要用到后端開發、
        前端開發、界面設計、產品設計、數據庫、各種移動客戶端、三屏兼容、restFul API設計
        和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3
        這些技術以及像第三方開發像微信公眾號微博應用等等。
      </p>
 
 
改變大小寫

 
  
LowerCase HahaHa

  
UpperCase Hahaha

  
capitalize haHaha

 
      <p class="text-lowercase">LowerCase HahaHa</p>
      <p class="text-uppercase">UpperCase Hahaha</p>
      <p class="text-capitalize">capitalize haHaha</p>
 
 
縮略語 <abbr>標簽

 
  
 bootstrap是一個高度集成化的開發框架 此處縮略 

  
 bootstrap是一個高度集成化的開發框架 此處縮略 

 
        <p class="lead">
          bootstrap是一個高度集成化的開發框架 <abbr title="這里顯示了縮略語的內容">此處縮略</abbr><br />
          bootstrap是一個高度集成化的開發框架 <abbr class="initialism" title="這里加了類.initialism所以變小了">此處縮略</abbr>
        </p>
 
 
引用

基本引用
 
  
這是html的基本引用標簽blockquote，bootstrap為它左邊添加了一個灰色帶

 
        <blockquote>
          <p>這是html的基本引用標簽blockquote，bootstrap為它左邊添加了一個灰色帶</p>
        </blockquote>
 
 
引用來源<footer>

 
  
這世界并不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。

  
比爾蓋茨

 
        <blockquote>
          <p>這世界并不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。</p>
          <footer>比爾蓋茨</footer>
        </blockquote>
 
 
居右的引用，添加類.blockquote-reverse

 
  
這世界并不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。

  
比爾蓋茨

 
        <blockquote class="blockquote-reverse">
          <p>這世界并不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。</p>
          <footer>比爾蓋茨</footer>
        </blockquote>
 
 
列表

無樣式列表.list-unstyled
 
  
這里是列表

  
這里是列表

  
 
   
這里是二級列表

   
這里是二級列表

   
這里是二級列表

   
這里是二級列表

  
這里是列表
這里是列表
這里是列表
</ul>
        <ul class="list-unstyled">
          <li>這里是列表</li>
          <li>這里是列表</li>
            <ul>
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
            </ul>
          <li>這里是列表</li>
          <li>這里是列表</li>
          <li>這里是列表</li>
        </ul>
 
 
內聯列表-同一行顯示.list-inline

 
  
這里是列表

  
這里是列表

  
 
   
這里是二級列表

   
這里是二級列表

   
這里是二級列表

   
這里是二級列表

  
這里是列表
這里是列表
這里是列表
</ul>
        <ul>
          <li>這里是列表</li>
          <li>這里是列表</li>
            <ul class="list-inline">
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
              <li>這里是二級列表</li>
            </ul>
          <li>這里是列表</li>
          <li>這里是列表</li>
          <li>這里是列表</li>
        </ul>
 
 
普通描述

 
  
     名言 
  
 
  
     如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。 
  
 
  
     比爾蓋茨的名人名言是這樣描述的 
  
 
  
     在你出生之前，你的父母并非像他們現在這樣乏味。 他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。 所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣柜里的蟲子吧。 
  
 
 
 
 
        <dl>
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。</dd>
          <dt>比爾蓋茨的名人名言是這樣描述的</dt>
          <dd>在你出生之前，你的父母并非像他們現在這樣乏味。
            他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。
            所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣柜里的蟲子吧。
          </dd>
        </dl>
 
 
水平排列描述.dl-horizontal

 
  
     名言 
  
 
  
     如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。 
  
 
  
     比爾蓋茨的名人名言是這樣描述的 
  
 
  
     在你出生之前，你的父母并非像他們現在這樣乏味。 他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。 所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣柜里的蟲子吧。 
  
 
 
 
 
        <dl class="dl-horizontal">
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。</dd>
          <dt>比爾蓋茨的名人名言是這樣描述的</dt>
          <dd>在你出生之前，你的父母并非像他們現在這樣乏味。
            他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。
            所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣柜里的蟲子吧。
          </dd>
        </dl>
 
 
代碼

內聯代碼 code
 Let's add a headFile #include<stdio> 
          Let's add a headFile <code>#include<stdio></code>
 
 
用戶輸入 kbd

 請按 F5 刷新 
          請按 <kbd>F5</kbd> 刷新
 
 
代碼塊 pre

<div>This is a tag name div </div>
 
 
          <pre><div>This is a tag name div </div></pre>
 
 
變量 var

 a 
          <var>a</var>
 
 
程序輸出 samp

 Hello World!  
          <samp>Hello World!</samp>
 
 
本篇總結了一些常用的bootstrap3 的Css樣式，但并非所有。

 詳細的學習請參考bootstrap官網： http://getbootstrap.com 
bootstrap4 即將到來，期待！
 </div>

                    
                    

                        
 本文由用戶 KieraLevy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 本文地址：http://www.baiduhome.net/lib/view/open1455964564761.html
                        
 Bootstrap CSS 前端技術