碼上歡樂
相關內容    簡體    繁體

Bootstrap3 CSS樣式基本用法總結

本文轉載自   查看原文   2016-02-20 14:05   4268    前端框架/ １> Bootstrap/ bootstrap/ 學習總結

出於學習需要，自覺得把基本的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="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" />

 

圖片的三種形狀

        <img class="img-rounded" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-thumbnail" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-circle" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.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>

 

狀態類

表格標題 表格標題 表格標題
狀態active 狀態active 狀態active
狀態success 狀態success 狀態success
狀態info 狀態info 狀態info
狀態warning 狀態warning 狀態warning
狀態danger 狀態danger 狀態danger 
        <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>

 

靜態控件 .form-control-static

Tab Weng

      <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 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>
          <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&lt;stdio&gt;</code>

 

用戶輸入 kbd

請按 F5 刷新 
          請按 <kbd>F5</kbd> 刷新

 

代碼塊 pre

<div>This is a tag name div </div>
          <pre>&lt;div&gt;This is a tag name div &lt;/div&gt;</pre>

 

變量 var

a 
          <var>a</var>

 

程序輸出 samp

Hello World! 
          <samp>Hello World!</samp>

 

 

本篇總結了一些常用的bootstrap3 的Css樣式，但並非所有。

詳細的學習請參考bootstrap官網：http://getbootstrap.com

bootstrap4 即將到來，期待！


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Bootstrap3制作搜索框樣式的方法 bootstrap學習總結-css樣式設計(一) bootstrap學習總結-css樣式設計(二) css字體的樣式與分類用法總結 Bootstrap3模態框Modal垂直居中樣式 利用bootstrap3的分頁樣式和jq實現分頁功能 datatables 配套bootstrap3樣式使用小結（1） datatables 配套bootstrap3樣式使用小結（1） Bootstrap基本CSS樣式 bootstrap 之css樣式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM