Bootstrap框架菜鳥入門教程

時間  2019-11-20
標籤 bootstrap 框架 菜鳥 入門 教程 欄目 Bootstarp 简体版
原文   原文鏈接

 

Bootstrap菜鳥入門教程css

 

 

Bootstrap簡介

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。前端


1、柵格系統

柵格系統的工做原理：瀏覽器

  • 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
  • 經過「行（row）」在水平方向建立一組「列（column）」。
  • 你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
  • 相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
  • 經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。
  • 負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。
  • 柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。
  • 若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
  • 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

媒體查詢：前端框架

  • 媒體查詢是很是別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。若是知足那些條件，則應用相應的樣式。
  • Bootstrap 中的媒體查詢容許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。
/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

 

  • 有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小以內。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
  • 媒體查詢有兩個部分，先是一個設備規範，而後是一個大小規則。在上面的案例中，設置了下列的規則：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  • 對於全部帶有 min-width: @screen-sm-min 的設備，若是屏幕的寬度小於 @screen-sm-max，則會進行一些處理。

柵格參數app

下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。框架

 

下表總結了 Bootstrap 網格系統如何跨多個設備工做：ide

 

 

響應式的列重置

如下實例包含了4個網格，可是咱們在小設備瀏覽時沒法肯定網格顯示的位置。工具

爲了解決這個問題，可使用 .clearfix class和響應式工具來解決，以下面實例所示：佈局

 

<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>

偏移列

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。ui

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有 <div class="col-md-6">..</div>，咱們將使用 .col-md-offset-3 class 來居中這個 div。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

嵌套列

爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。

在下面的實例中，佈局有兩個列，第二列被分爲兩行四個盒子。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分爲四個盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

 

列排序

Bootstrap 網格系統另外一個完美的特性，就是您能夠很容易地以一種順序編寫列，而後以另外一種順序顯示列。

您能夠很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有兩列布局，左列很窄，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序後
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
</div>

 

 

2、Bootstrap 排版
  • HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。
<h1>我是標題1 h1</h1>
<h2>我是標題2 h2</h2>
<h3>我是標題3 h3</h3>
<h4>我是標題4 h4</h4>
<h5>我是標題5 h5</h5>
<h6>我是標題6 h6</h6>

 

  • 在標題內還能夠包含 <small> 標籤或賦予 .small 類的元素，能夠用來標記副標題。

　　　　若是須要向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能獲得一個字號更小的顏色更淺的文本，以下面實例所示：

<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
<h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
<h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
<h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
<h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
<h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>

 

  • 頁面主體：Bootstrap 將全局 font-size 設置爲 14px，line-height 設置爲 1.428。這些屬性直接賦予 <body> 元素和全部段落元素。另外，<p> （段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。

<h2>引導主體副本</h2>
<p class="lead">這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。</p>

 

 

 

列表：

Bootstrap 支持有序列表、無序列表和定義列表。

  • 有序列表：有序列表是指以數字或其餘有序字符開頭的列表。
  • 無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。若是您不想顯示這些着重號，您可使用 class .list-unstyled 來移除樣式。您也能夠經過使用 class .list-inline 把全部的列表項放在同一行中。
  • 定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明 定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd> 是 <dt> 的描述。您可使用 class dl-horizontal 把 <dl> 行中的屬於與描述並排顯示。

下面的實例演示了這些類型的列表：

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>無序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定義樣式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>內聯列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定義列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定義列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

 

 

下表提供了 Bootstrap 更多排版類的實例：

3、Bootstrap 代碼

Bootstrap 容許您以兩種方式顯示代碼：

  • 第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

  • 第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

還可使用 .pre-scrollable 類，其做用是設置 max-height 爲 350px ，並在垂直方向展現滾動條。

 

4、Bootstrap 表格

 

  •  Bootstrap 支持的一些表格元素：

  • 用於表格的樣式

  • 用於表格的行或者單元格

 

 

基本實例

  • 爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。
<table class="table">
  <caption>基本的表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

  • 條紋表格

　　　　經過添加 .table-striped class，您將在 <tbody> 內的行上看到條紋，以下面的實例所示：

<table class="table table-striped">
  <caption>條紋表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

  • 帶邊框的表格

　　　　經過添加 .table-bordered class，您將看到每一個元素周圍都有邊框，且佔整個表格是圓角的，以下面的實例所示：

<table class="table table-bordered">
  <caption>邊框表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

  • 懸停表格

　　　　經過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景，以下面的實例所示：

<table class="table table-hover">
  <caption>懸停表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody>
</table>

 

  • 精簡表格

　　　　經過添加 .table-condensed class，行內邊距（padding）被切爲兩半，以便讓表看起來更緊湊，以下面的實例所示。這在想讓信息看起來更緊湊時很是有用。

<table class="table table-condensed">
  <caption>精簡表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
      <th>郵編</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody>
</table>

  • 上下文類

　　　　下表中所列出的上下文類容許您改變表格行或單個單元格的背景顏色。

 

<table class="table">
  <caption>上下文表格佈局</caption>
  <thead>
    <tr>
      <th>產品</th>
      <th>付款日期</th>
      <th>狀態</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>產品1</td>
      <td>23/11/2013</td>
      <td>待發貨</td></tr>
    <tr class="success">
      <td>產品2</td>
      <td>10/11/2013</td>
      <td>發貨中</td></tr>
    <tr class="warning">
      <td>產品3</td>
      <td>20/10/2013</td>
      <td>待確認</td></tr>
    <tr class="danger">
      <td>產品4</td>
      <td>20/10/2013</td>
      <td>已退貨</td></tr>
  </tbody>
</table>

  • 響應式表格

　　　　經過把任意的 .table 包在 .table-responsive class 內，您可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

<div class="table-responsive">
  <table class="table">
    <caption>響應式表格佈局</caption>
    <thead>
      <tr>
        <th>產品</th>
        <th>付款日期</th>
        <th>狀態</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>產品1</td>
        <td>23/11/2013</td>
        <td>待發貨</td></tr>
      <tr>
        <td>產品2</td>
        <td>10/11/2013</td>
        <td>發貨中</td></tr>
      <tr>
        <td>產品3</td>
        <td>20/10/2013</td>
        <td>待確認</td></tr>
      <tr>
        <td>產品4</td>
        <td>20/10/2013</td>
        <td>已退貨</td></tr>
    </tbody>
  </table>
</div>

5、Bootstrap 表單

  • 基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：

    • 向父 <form> 元素添加 role="form"。
    • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
    • 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

  • 內聯表單

　　　　爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件輸入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

  • 水平表單

　　水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

  • 向父 <form> 元素添加 class .form-horizontal。
  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
  • 向標籤添加 class .control-label。
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">請記住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登陸</button>
    </div>
  </div>
</form>

 

 

6、Bootstrap 按鈕

 

可做爲按鈕使用的標籤或元素
爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式。

如下樣式可用於<a>, <button>, 或 <input> 元素上：

 

 

<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動做 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採起的動做 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動做 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">連接按鈕</button>

按鈕大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕。

下表列出了得到各類大小按鈕的 class：

<p>
  <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
  <button type="button" class="btn btn-default btn-lg">大的按鈕</button>
</p>
<p>
  <button type="button" class="btn btn-primary">默認大小的原始按鈕</button>
  <button type="button" class="btn btn-default">默認大小的按鈕</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
  <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button>
  <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕</button>
  <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button>
</p>

按鈕狀態

Bootstrap 提供了激活、禁用等按鈕狀態的 class，下面將進行詳細講解。

激活狀態

按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態的 class：

 

禁用狀態

當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：

按鈕標籤

您能夠在 <a>、<button> 或 <input> 元素上使用按鈕 class。可是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

下面的實例演示了這點：

<a class="btn btn-default" href="#" role="button">連接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">

7、Bootstrap 圖片
  • 在 Bootstrap 版本 3 中，經過爲圖片添加 .img-responsive 類可讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
  • 若是須要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

圖片形狀

經過爲 <img> 元素添加如下相應的類，可讓圖片呈現不一樣的形狀。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

8、Bootstrap 輔助類

文本

如下不一樣的類展現了不一樣的文本顏色。若是文本是個連接鼠標移動到文本上會變暗：

背景

如下不一樣的類展現了不一樣的背景顏色。 若是文本是個連接鼠標移動到文本上會變暗：

其餘

一些實例：

關閉圖標

使用通用的關閉圖標來關閉模態框和警告框。使用 class close 獲得關閉圖標。

<p>關閉圖標實例
  <button type="button" class="close" aria-hidden="true">
    &times;
  </button>
</p>

三角符號

經過使用三角符號能夠指示某個元素具備下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

<span class="caret"></span>

讓內容塊居中

爲任意元素設置 display: block 屬性並經過 margin 屬性讓其中的內容居中。下面列出的類還能夠做爲 mixin 使用。

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

顯示或隱藏內容

.show 和 .hidden 類能夠強制任意元素顯示或隱藏(對於屏幕閱讀器也能起效)。這些類經過 !important 來避免 CSS 樣式優先級問題，就像 quick floats 同樣的作法。注意，這些類只對塊級元素起做用，另外，還能夠做爲 mixin 使用。

.hide 類仍然可用，可是它不能對屏幕閱讀器起做用，而且從 v3.0.1 版本開始就不建議使用了。請使用 .hidden 或 .sr-only 。

另外，.invisible 類能夠被用來僅僅影響元素的可見性，也就是說，元素的 display 屬性不被改變，而且這個元素仍然可以影響文檔流的排布。

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}
9、Bootstrap 響應式實用工具

 

Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。這些能夠經過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。

須要謹慎使用這些工具，避免在同一個站點建立徹底不一樣的版本。響應式實用工具目前只適用於塊和表切換。

 

打印類

下表列出了打印類。使用這些切換打印內容。

 

 

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">特別小型</span>
            <span class="visible-xs">✔ 在特別小型設備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm">✔ 在小型設備上可見</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">中型</span>
            <span class="visible-md">✔ 在中型設備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg">✔ 在大型設備上可見</span>
        </div>
    </div>
</div>

 

 
 

但願你們都能學會好用的Bootstrap

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程