Bootstrap按鈕樣式

1. 表單組

.form-group : 把表單組合起來

.form-control : 將樣式設(shè)置為 width為100% ，圓角邊框，適當(dāng)?shù)乃{(lán)色陰影...

格式：

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

注意：只有正確設(shè)置了輸入框的 type 類型，才能被賦予正確的樣式。

2. 內(nèi)聯(lián)表單

.form-inline : 讓表單左對(duì)齊浮動(dòng)，排成一行

格式：

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3. 表單合組

.input-group : 和 form-group 作用一樣，在合組的時(shí)候使用

.input-group-addon : 要合組的一個(gè)元素

格式：

<form>
   <p class="input-group">
   <p class="input-group-addon">合組</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4. 水平排列

.form-horizontal : 水平排列的表單，通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了

格式：

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

5. 單選復(fù)選框

.checkbox : 復(fù)選框的父級(jí)元素使用，將復(fù)選框變?yōu)閴K級(jí)元素

.checkbox-inline : 復(fù)選框的父級(jí)元素使用，將復(fù)選框拍成一行

.radio : 單選框的父級(jí)元素使用，將單選框變?yōu)閴K級(jí)元素

.radio-inline : 單選框的父級(jí)元素使用，將單選框拍成一行

格式：

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />選擇1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />選擇2
   </label>
   </p>
</form>

6. 下拉列表

.from-control : 將樣式設(shè)置為 width為100% ，圓角邊框，適當(dāng)?shù)乃{(lán)色陰影...

格式 ：

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7. 校驗(yàn)狀態(tài)

改變獲取焦點(diǎn)時(shí)邊框和陰影的顏色

.has-error : 錯(cuò)誤的紅色

.has-success : 成功的綠色

.has-warning : 警告的黃色

.control-label : 標(biāo)簽同步相應(yīng)狀態(tài)

格式 :

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用戶</label>
   <input type="text" class="form-control" id="user" placeholder="請(qǐng)輸入用戶名"/>
   </p>
</form>

control-label 這個(gè)類是 label 同步相應(yīng)的狀態(tài)

8. 添加額外的圖標(biāo)

.has-feedback : 設(shè)置一個(gè)位置

.form-control-feedback : 設(shè)置一個(gè)元素，相對(duì)于有has-feedback類的元素定位

.glyphicon glyphicon-ok : 對(duì)號(hào)圖標(biāo)

.glyphicon-warning-sign : 警告圖標(biāo)

glyphicon-remove : 錯(cuò)誤圖標(biāo)

....

格式 ：

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

給 span 設(shè)置 form-control-feedback 這個(gè)類，讓它相對(duì)于 has-feedback 進(jìn)行定位，定位到input 框里面的右側(cè)

9. 控制輸入框大小

.input-lg : 大輸入框

.input-small : 小輸入框

.form-group-lg : 大輸入框

.form-group-sm : 小輸入框

格式 ：

<input type="text" class="form-control input-sm">

或者直接給父元素設(shè)置

<p class="form-group-lg"></p>

響應(yīng)式圖片：

.img-responive : 圖片會(huì)跟隨屏幕的縮放而縮放

.img-rounded : 圓角矩形圖片

.img-circle : 圓形圖片

.img-thumbnail : 給圖片加一個(gè)邊框

以上就是Bootstrap中的按鈕樣式，圖片樣式 介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！