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-horizontal : 水平排列的表單,通過為表單添加 .form-horizontal 類,并聯合使用 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 : 給圖片加一個邊框
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com