新一期的乾貨來了，BootStrap該怎麼用（樂字節java）4

表單

                            若是須要更多資料點擊下方圖片加好友領取⬇（註明來意）
                   
​ 表單主要功能是用來與用戶作交流的一個網頁控件，良好的表單設計可以讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。

表單控件

​ .form-control .input-lg（較大） .input-sm（較小）

輸入框 text

​ .form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>

下拉選擇框 select

​ 多行選擇設置：multiple="multiple"

<div class="col-sm-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

文本域 textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

複選框 checkbox

​ 垂直顯示： .checkbox

​ 水平顯示： .checkbox-inline

<!-- 垂直顯示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >遊戲</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >學習</label>
    </div>
</div>
<!-- 水平顯示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >遊戲
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >學習
    </label>
</div>

單選框 radio

​ 垂直顯示： .radio

​ 水平顯示： .radio-inline

<!-- 垂直顯示 -->
<div>
    <div class="radio">
        <label><input type="radio" >男</label>
    </div>
    <div class="radio">
        <label><input type="radio" >女</label>
    </div>
</div>
<!-- 水平顯示 -->
<div>
    <label class="radio-inline">
        <input type="radio" >男
    </label>
    <label class="radio-inline">
        <input type="radio" >女
    </label>
</div>

按鈕

1）使用 button 實現

​ 基礎樣式： btn

<button class="btn">按鈕</button>

​ 附加樣式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

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

2）多標籤支持：使用 a div 等製做按鈕

<a href="##" class="btn btn-info">a標籤按鈕</a>
<span class="btn btn-success">span標籤按鈕</span>
<div class="btn btn-warning">div標籤按鈕</div>

3）按鈕大小

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

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

4）按鈕禁用

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

<button class="btn btn-danger" disabled="disabled">禁用按鈕</button>

​ 方法2：在元素標籤中添加類名"disabled"

<button class="btn btn-danger disabled">禁用按鈕</button>

​ 在class屬性中添加disabled只是樣式上禁用了，並非真正的禁用了此按鈕！

表單佈局

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

• 向父 <form> 元素添加 role="form"。
• 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
• 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

水平表單

​ 同一行顯示form-horizontal

​ 配合Bootstrap框架的網格系統

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">郵箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="請輸入郵箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2">密碼</label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="請輸入密碼" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <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 class="btn btn-default">提交</button>
        </div>
    </div>
</form>

內聯表單

​ 將表單的控件都在一行內顯示form-inline

​ 注意label不會顯示，存在的意義：若是沒有爲輸入控件設置label標籤，屏幕閱讀器將沒法正確識別。

<form class="form-inline">
    <div class="form-group">
        <label for="email" >郵箱</label>
        <input type="email" class="form-control" placeholder="請輸入郵箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" >密碼</label>
            <input type="pwd" class="form-control" placeholder="請輸入密碼" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />記住密碼</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

縮略圖

​ 縮略圖在電商類的網站很常見，最經常使用的地方就是產品列表頁面。縮略圖的實現是配合網格系統一塊兒使用。同時還能夠讓縮略圖配合標題、描述內容，按鈕等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/IMG_0131.JPG" alt="...">
                <h3>高圓圓</h3>
                <p>出生於北京市，中國內地影視女演員、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜歡</button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>評論
                </button>
            </div>
        </div>
    </div>
</div>

面板

​ 默認的 .panel組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。

​ .panel-default：默認樣式

​ .panel-heading：面板頭

​ .panel-body：面板主體內容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>