Bootstrap學習筆記(二) 表單

時間  2019-11-19
標籤 bootstrap 學習 筆記 表單 欄目 Bootstarp 简体版
原文   原文鏈接

在Bootstrap學習筆記（一） 排版的基礎上繼續學習Bootstrap的表單，編輯器及head內代碼不變。css

3-1 基礎表單html

　　單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。ios

　　在Bootstrap框架中，經過定製了一個類名`form-control`，也就是說，若是這幾個元素使用了類名「form-control」，將會實現一些設計上的定製效果。　　bootstrap

　　一、寬度變成了100%框架

　　二、設置了一個淺灰色（#ccc）的邊框編輯器

　　三、具備4px的圓角ide

　　四、設置陰影效果，而且元素獲得焦點之時，陰影和邊框效果會有所變化學習

　　五、設置了placeholder的顏色爲#999字體

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">郵箱</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="請輸入您的郵箱地址">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密碼</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" >記住密碼
        </label>
    </div>
    <button type="submit" class="btn btn-default">進入郵箱</button>
</form>

 

　　顯示結果以下圖所示:this

　　

3-2 水平表單

　　Bootstrap框架默認的表單是垂直顯示風格，在Bootstrap框架中要實現水平表單效果，必須知足如下兩個條件：
　　一、在<form>元素是使用類名「form-horizontal」。
　　二、配合Bootstrap框架的網格系統。

　　在<form>元素上使用類名「form-horizontal」主要有如下幾個做用：
　　一、設置表單控件padding和margin值。
　　二、改變「form-group」的表現形式，相似於網格系統的「row」。

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" 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>

　　顯示結果以下圖所示:

　　

3-3內聯表單

　　在Bootstrap框架中實現內聯表單,只須要在<form>元素中添加類名「form-inline」便可。若是你要在input前面添加一個label標籤時，會致使input換行顯示。若是你必須添加這樣的一個label標籤，而且不想讓input換行，你須要將label標籤也放在容器「form-group」中。

    <p>內聯表單</p>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">郵箱</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址">
        </div>
        <div class="form-group" >
            <label class="sr-only" for="exampleInputPassword2">密碼</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">記住密碼
            </label>
        </div>
        <button type="submit" class="btn btn-default">進入郵箱</button>
    </form>

     

3-4表單控件(輸入框input)

　　每個表單都是由表單控件組成。離開了控件，表單就失去了意義。在Bootstrap中使用input時也必須添加type類型，若是沒有指定type類型，將沒法獲得正確的樣式，由於Bootstrap框架都是經過input[type=「?」](其中?號表明type類型，好比說text類型，對應的是input[type=「text」])的形式來定義樣式的。

    <form role="form">
        <div class="form-group">
            <input type="email" class="form-control" placeholder="Enter email">
        </div>
    </form>

　　效果以下圖所示：

3-7表單控件(複選框checkbox和單選擇按鈕radio)

　　一、不論是checkbox仍是radio都使用label包起來了
　　二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內
　　三、radio連同label標籤放置在一個名爲「.radio」的容器內
　　在Bootstrap框架中，主要藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式。

    <form role="form">
        <h3>案例1</h3>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                記住密碼
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
                喜歡
            </label>
        </div>
        <div class="rodio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
                不喜歡
            </label>
        </div>
    </form>

　　顯示結果以下:

      

 3-8表單控件(複選框和單選框按鈕水平排列)

　　複選框和單選按鈕有時須要水平排列:

　　一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
　　二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」

    <form role="form">
        <div class="form-group">
            <label class="radio-inline">
                <input type="radio" value="option1" name="sex">男性
            </label>
            <label class="radio-inline">
                <input type="radio" value="option2" name="sex">女性
            </label>
            <label class="radio-inline">
                <input type="radio" value="option3" name="sex">中性
            </label>
        </div>
    </form>

　　顯示結果以下:
　　

3-9表單控件(按鈕)

　　按鈕也是表單重要控件之一,製做按鈕一般使用下面代碼來實現：

 　　 ☑  input[type=「submit」]

  　　☑  input[type=「button」]

  　　☑  input[type=「reset」]

 　　 ☑  <button>

　　在Bootstrap框架中的按鈕都是採用<button>來實現。

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Button</th>
                <th>class=""</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><button class="btn" href="#">Default</button></td>
                <td><code>btn</code></td>
                <td>Standard gray button with gradient</td>
            </tr>
            <tr>
                <td><button class="btn btn-primary" href="#">Primary</button></td>
                <td><code>btn btn-primary</code></td>
                <td>Provides extra visul weight and identifies the primary action in a set of buttons</td>
            </tr>
            <tr>
                <td><button class="btn btn-info" href="#">Info</button></td>
                <td><code>btn btn-info</code></td>
                <td>Used as an alternative to the default styles</td>
            </tr>
            <tr>
                <td><button class="btn btn-success" href="#">Success</button></td>
                <td><code>btn btn-success</code></td>
                <td>Indicates a successful or positive action</td>
            </tr>
            <tr>
                <td><button class="btn btn-warning" href="#">Warning</button></td>
                <td><code>btn btn-warning</code></td>
                <td>Indicates caution should be taken with this action</td>
            </tr>
            <tr>
                <td><button class="btn btn-danger" href="#">Danger</button></td>
                <td><code>btn btn-danger</code></td>
                <td>Indicates a dangerous or potentially negative action</td>
            </tr>
            <tr>
                <td><button class="btn btn-inverse" href="#">Inverse</button></td>
                <td><code>btn btn-inverse</code></td>
                <td>Alternate dark gray button, not tied to a semantic action or use</td>
            </tr>
        </tbody>
    </table>

　　顯示效果以下:

　　

3-10表單控件大小

　　Bootstrap框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：
　　一、input-sm:讓控件比正常大小更小
　　二、input-lg:讓控件比正常大小更大

　　這兩個類適用於表單中的input，textarea和select控件

    <h1>案例1</h1>
    <form role="form">
        <div class="form-group">
            <label class="control-label">控件變大</label>
            <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
        </div>
        <div class="form-group">
            <label class="control-label">正常大小</label>
            <input class="form-control" type="text" placeholder="正常大小">
        </div>
        <div class="form-group">
            <label class="control-label">控件變小</label>
            <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">
        </div>
    </form>

    <br>
    <br>
    <br>
    <h1>案例2</h1>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-4">
                <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
            </div>
            <div class="col-xs-4">
                <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
            </div>
            <div class="col-xs-4">
                <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-6">
                <input class="form-control" type="form-control" placeholder=".col-xs-6">
            </div>
            <div class="col-xs-6">
                <input class="form-control" type="form-control" placeholder=".col-xs-6">
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-5">
                <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
            </div>
            <div class="col-xs-7">
                <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
            </div>
        </div>
    </form>

　　顯示結果以下:

　　

3-11表單控件狀態(焦點狀態)

　　表單狀態的做用：

　　每一種狀態都能給用戶傳遞不一樣的信息，好比表單有焦點的狀態能夠告訴用戶能夠輸入或選擇東西，禁用狀態能夠告訴用戶不能夠輸入或選擇東西，還有就是表單控件驗證狀態，能夠告訴用戶的操做是否正確等。那麼在Bootstrap框架中的表單控件也具有這些狀態。焦點狀態是經過僞類「:focus」來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，從新添加陰影效果。

　　要讓控件在焦點狀態下有樣式效果，須要給控件添加類名「form-control」

    <form role="form" class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-6">
                <input class="input-lg" type="text" placeholder="不是焦點狀態下效果">
            </div>
            <div class="col-xs-6">
                <input class="form-control input-lg" type="text" placeholder="焦點點狀態下的效果">
            </div>
        </div>
    </form>

　　顯示效果以下:

　　

3-12表單控件狀態(禁用狀態)

 　　Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是同樣的，在相應的表單控件上添加屬性「disabled」。和其餘表單的禁用狀態不一樣的是，Bootstrap框架作了一些樣式風格的處理：使用方法爲：只須要在須要禁用的表單控件上加上「disabled」便可：在使用了「form-control」的表單控件中，樣式設置了禁用表單背景色爲灰色，並且手型變成了不許輸入的形狀。若是控件中不使用類名「form-control」，禁用的控件只會有一個不許輸入的手型出來。在Bootstrap框架中，若是fieldset設置了disabled屬性，整個域都將處於被禁用狀態。對於整個禁用的域中，若是legend中有輸入框的話，這個輸入框是沒法被禁用的。

    <h3>示例1</h3>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-6">
                <input class="form-control input-lg" type="text" placeholder="不是焦點狀態下的效果">
            </div>
            <div class="col-xs-6">
                <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用,不可輸入" disabled>
            </div>
        </div>
    </form>
    <br>
    <br>
    <br>
    <h3>示例2</h3>
    <form role="form">
        <fieldset disabled="">
            <div class="form-group">
                <label for="disabledTextInput"></label>
                <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
            </div>
            <div class="from-group">
                <label for="diabledSelect">禁用的下拉框</label>
                <select id="disabledSelect" class="form-control">
                    <option>不可選擇</option>
                </select>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" >沒法選擇
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </fieldset>
    </form>

    <br>
    <br>
    <br>
    <h3>示例3</h3>
    <form role="form">
        <fieldset disabled>
            <legend>
                <input type="text" class="form-control" placeholder="顯然我顏色變灰了，可是我沒有被禁用，不信？點擊試一下">
            </legend>
            <div class="form-group">
                <label for="disabledTextInput">禁用的輸入框</label>
                <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
            </div>
            <div class="form-group">
                <label for="disabledSelect">禁用的下拉框</label>
                <select id="disabledSelect" class="form-control">
                    <option>不可選擇</option>
                </select>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">沒法選擇
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </fieldset>

　　顯示結果以下:

　　 

3-13表單控件狀態(驗證狀態)

　　在製做表單時，難免要作表單驗證。一樣也須要提供驗證狀態樣式，在Bootstrap框架中一樣提供這幾種效果。
　　一、.has-warning:警告狀態（黃色）
　　二、.has-error：錯誤狀態（紅色）
　　三、.has-success：成功狀態（綠色）
　　使用的時候只須要在form-group容器上對應添加狀態類名。

　　不少時候，在表單驗證的時候，不一樣的狀態會提供不一樣的 icon，好比成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。若是你想讓表單在對應的狀態下顯示 icon 出來，只須要在對應的狀態下添加類名「has-feedback」。請注意，此類名要與「has-error」、「has-warning」和「has-success」在一塊兒。在 Bootstrap 的小圖標都是使用@font-face來製做。並且必須在表單中添加了一個 span 元素。

    <h3>示例1</h3>
    <form role="form">
        <div class="form-group has-success">
            <label class="control-label" for="inputSuccess1">成功狀態</label>
            <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態">
        </div>
        <div class="form-group has-warning">
            <label class="control-label" for="inputWarning1">警告狀態</label>
            <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
        </div>
        <div class="form-group has-error">
            <label class="control-label" for="inputError1">錯誤狀態</label>
            <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
        </div>
    </form>
    <br>
    <br>
    <br>
    <h3>示例2</h3>
    <form role="form">
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="inputSuccess1">成功狀態</label>
            <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="inputWarning1">警告狀態</label>
            <input type="text" class="form-control" id="inputWarning" placeholder="警告狀態">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="inputError1">錯誤狀態</label>
            <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="inputEmail1">email地址</label>
            <input type="email" class="form-control" id="inputEmail1" placeholder="錯誤狀態">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
          </div>
    </form>

顯示結果以下:

　　

3-14表單提示信息

　　Bootstrap框架中使用了一個"help-block"樣式，將提示信息以塊狀顯示，而且顯示在控件底部。在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名「help-inline」。通常讓提示信息顯示在控件的後面，也就是同一水平顯示。若是你想在BootstrapV3.x版本也有這樣的效果，你能夠添加這段代碼：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

　　若是你不想爲bootstrap.css增長本身的代碼，並且設計又有這種樣的需求，那麼只能藉助於Bootstrap的網格系統。

    <h3>示例1</h3>
    <form role="form">
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="inputSuccess1">成功狀態</label>
            <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態">
            <span class="help-block">你輸入的信息是的正確</span>
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="inputWarning1">警告狀態</label>
            <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
            <span class="help-block">請輸入正確信息</span>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="inputError1">錯誤狀態</label>
            <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
            <span class="help-block">你輸入的信息是錯誤的</span>
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
    </form>
    <br>
    <br>
    <br>
    <h3>示例2</h3>
    <form role="form">
        <div class="form-group">
            <label class="control-label" for="inputSuccess1">成功狀態</label>
            <div class="row">
                <div class="col-xs-6">
                    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態">
                </div>
                <span class="col-xs help-block">你輸入的信息是正確的</span>
            </div>
        </div>
    </form>

　　顯示效果以下:

　　

3-15按鈕

　　按鈕是Bootstrap框架核心內容之一

    <button class="btn" type="button">基礎按鈕.btn</button>
    <button class="btn btn-default" type="button">默認按鈕.btn-default</button>
    <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
    <button class="btn btn-success" type="button">成功按鈕.btn-success</button>
    <button class="btn btn-info" type="button">信息按鈕.btn-info</button>
    <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
    <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
    <button class="btn btn-link" type="button">連接按鈕.btn-link</button>

　　顯示效果以下所示:

　　

3-16基本按鈕

<button class="btn" type="button">我是一個基本按鈕</button>

　　

3-17默認按鈕

　　Bootstrap框架首先經過基礎類名「.btn」定義了一個基礎的按鈕風格，而後經過「.btn-default」定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。使用默認按鈕風格也很是的簡單，只須要在基礎按鈕「btn」的基礎上增長類名「btn-default」便可：

<button class="btn btn-default" type="button">默認按鈕</button>

　　顯示效果以下圖所示:

　　

3-18多標籤支持

　　通常製做按鈕除了使用<button>標籤元素以外，還可使用<input type="submit">和<a>標籤等。一樣，在Bootstrap框架中製做按鈕時，除了剛纔所說的這些標籤元素以外，還可使用在其餘的標籤元素上，惟一須要注意的是，要在製做按鈕的標籤元素上添加類名「btn」。若是不添加是不會有任何按鈕效果。

    <button class="btn btn-defalult" type="button">button標籤</button>
    <input type="submit" class="btn btn-default" value="input標籤按鈕"/>
    <span class="btn btn-default">span標籤按鈕</span>
    <div class="btn btn-default">div標籤按鈕</div>

　　顯示效果以下圖所示:

　　
3-19定製風格　

　　在Bootstrap框架中除了默認的按鈕風格以外，還有其餘六種按鈕風格，每種風格的其實都同樣，不一樣之處就是按鈕的背景顏色、邊框顏色和文本顏色。在Bootstrap框架中不一樣的按鈕風格都是經過不一樣的類名來實現，在使用過程當中，開發者只須要選擇不一樣的類名便可：

　　代碼和圖請參考3-15

3-20按鈕大小

　　在Bootstrap框架中，對於按鈕的大小，也是能夠定製的。相似於input同樣，經過在基礎按鈕「.btn」的基礎上追加類名來控制按鈕的大小，btn-lg，btn-sm，btn-xs分別表示大型，小型，和超小型。

　　 <button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
    <button class="btn btn-primary" type="button">正常按鈕</button>
    <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
    <button class="btn btn-primary btn-xl" type="'button">超小型按鈕.btn-xs</button>

　　顯示效果以下:

　　

3-21塊狀按鈕

　　Bootstrap框架中提供了一個類名「btn-block」。按鈕使用這個類名就可讓按鈕充滿整個容器，而且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。

    <button class="btn btn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button>
    <button class="btn btn-primary btn-block" type="button">正常按鈕</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">小型按鈕.btn-sm</button>
    <button class="btn btn-primary btn-xl btn-block" type="'button">超小型按鈕.btn-xs</button>

　　顯示效果以下圖所示:

　　

3-22按鈕狀態

　　Bootstrap框架針對按鈕的狀態作了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分爲兩種：活動狀態和禁用狀態。　Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。並且不一樣風格下的按鈕都具備這幾種狀態效果，只是顏色作了必定的調整

　　代碼及圖請參考3-15

3-23按鈕狀態--禁用狀態　　

　　在Bootstrap框架中，要禁用按鈕有兩種實現方式：

　　方法1：在標籤中添加disabled屬性

　　方法2：在元素標籤中添加類名「disabled」

　　二者的主要區別是：

　　「.disabled」樣式不會禁止按鈕的默認行爲，好比說提交和重置行爲等。若是想要讓這樣的禁用按鈕也能禁止按鈕的默認行爲，則須要經過JavaScript這樣的語言來處理。對於<a>標籤也存在相似問題，若是經過類名「.disable」來禁用按鈕，其連接行爲是沒法禁止。而在元素標籤中添加「disabled」屬性的方法是能夠禁止元素的默認行爲的。

    <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">經過disabled屬性禁用按鈕</button>
    <button class="btn btn-primary btn-block disabled" type="button">經過添加類名disabled禁用按鈕</button>
    <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按鈕</button>

　　顯示效果以下圖所示:

　　

3-24圖像

　　在Bootstrap框架中對於圖像的樣式風格提供如下幾種風格：

　　一、img-responsive：響應式圖片，主要針對於響應式設計
　　二、img-rounded：圓角圖片
　　三、img-circle：圓形圖片
　　四、img-thumbnail：縮略圖片

　　使用方法很是簡單，只須要在<img>標籤上添加對應的類名

    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img alt="140*140" src="http://placehold.it/140x140">
                    <div>默認圖片</div>
            </div>
            <div class="col-sm-4">
                <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
                    <div>圓角圖片</div>
            </div>
            <div class="col-sm-4">
                <img class="img-circle" alt="140x140"   src="http://placehold.it/140x140">
                    <div>圓形圖片</div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
                    <div>縮略圖</div>
                </div>
            </div>
            <div class="col-sm-6">
                <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
                    <div>響應式圖片</div>
            </div>
        </div>
    </div>

　　顯示效果以下圖所示:

　　

3-25圖標(一)

　　Bootstrap框架中提供了近200個不一樣的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

　　自定義完字體以後，須要對icon設置一個默認樣式，在Bootstrap框架中是經過給元素添加「glyphicon」類名來實現，而後經過僞元素「:before」的「content」屬性調取對應的icon編碼

    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-cloud"></span>

　　顯示效果以下圖所示:

      

3-26圖標(二)

　　在網頁中使用圖標也很是的簡單，在任何內聯元素上應用所對應的樣式便可：

    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-cloud"></span>
    <span class="glyphicon glyphicon-heart"></span>
    <span class="glyphicon glyphicon-star"></span>
    <span class="glyphicon glyphicon-cloud"></span>
    <span class="glyphicon glyphicon-envelope"></span>
    <span class="glyphicon glyphicon-th-list"></span>
    <span class="glyphicon glyphicon-euro"></span>
    <span class="glyphicon glyphicon-music"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-user"></span>
    <span class="glyphicon glyphicon-th"></span>
    <span class="glyphicon glyphicon-zoom-in"></span>
    <span class="glyphicon glyphicon-ok"></span>
    <span class="glyphicon glyphicon-remove"></span>
    <span class="glyphicon glyphicon-zoom-out"></span>

　　顯示效果以下圖所示:

　　

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