Bootstrap中的按鈕樣式，圖片樣式 介紹

本篇文章就跟大家介紹Bootstrap中的按鈕與表單結合的樣式，圖片樣式。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。如果大家想要學習和獲取更多的bootstrap相關影片教學也可以訪問：bootstrap教學！

Bootstrap按鈕樣式

#1. 表單群組

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

.form-control : 將樣式設為width為100% ，圓角邊框，適當的藍色陰影...

格式：

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

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

2. 內聯表單

.form-inline : 讓表單左對齊浮動，排成一行

格式：

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

3. 表單合組

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

.input-group-addon :要合組的一個元素

格式：

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

4. 水平排列

.form-horizo​​ntal : 水平排列的表單，透過為表單新增.form-horizo​​ntal 類，並聯合使用Bootstrap 預置的柵格類，可以將label 標籤和控制組水平並排佈局。這樣做將改變.form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加.row 了

格式：

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

5. 單選複選框

.checkbox : 複選框的父級元素使用，將複選框變為區塊級元素

.checkbox-inline :複選框的父級元素使用，將複選框拍成一行

.radio : 單選框的父級元素使用，將單選框變為區塊級元素

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

#格式：

<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 : 將樣式設為width為100% ，圓角邊框，適當的藍色陰影...

格式：

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

7. 校驗狀態

改變取得焦點時邊框和陰影的顏色

.has-error : 錯誤的紅色

.has-success : 成功的綠色

.has-warning : 警告的黃色

.control-label : 標籤同步對應狀態

格式:###

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

###control-label 這個類別是label 同步對應的狀態######8. 新增額外的圖示######.has-feedback : 設定一個位置######.form-control-feedback : 設定一個元素，相對於有 has-feedback類別的元素定位######.glyphicon glyphicon-ok : 對號圖示######.glyphicon-warning-sign : 警告圖示######glyphicon-remove : 錯誤圖示#### ##....######格式：###

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

给 span 设置 form-control-feedback 这个类，让它相对于 has-feedback 进行定位，定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

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

或者直接给父元素设置

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

响应式图片：

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

以上是Bootstrap中的按鈕樣式，圖片樣式 介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！