1. 表單
表單是html網頁交互很重要的部分，同時也是BootSTrap框架中的核心內容，表單提供了豐富的樣式(基礎、內聯、橫向)
表單的元素
input textarea select checkbox radio(checkbox和radio是input的特殊類型)
其他標簽
form fieldset legend
1.1.基礎表單
<!--基礎表單：1.向父 <form> 元素添加 role="form"。2.把標簽label和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。因為form-group提供了margin3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--><form role="form"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="psd">密碼</label> <input type="text" class="form-control" id="psd" placeholder="請輸入密碼"> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <button type="submit" class="btn btn-default">登錄</button> </fieldset></form>
1.2.內聯表單
<!-- 內聯表單： 如果需要創建一個表單，它的所有元素是內聯的，向左對齊的，標簽是并排的，請向 <form> 標簽添加 class .form-inline --> <form role="form" class="form-inline"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="psd">密碼</label> <input type="text" class="form-control" id="psd" placeholder="請輸入密碼"> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <button type="submit" class="btn btn-default">登錄</button> </fieldset> </form>
1.3.橫向表單
<!-- 橫向表單： 1.向父 <form> 元素添加 class .form-horizontal。 2.把標簽和控件放在一個帶有 class .form-group 的 <div> 中。 3.向標簽添加 class .control-label。 4.要實現橫向表單，還要用柵格類--> <form role="form" class="form-horizontal"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label class="control-label col-lg-1" for="name">姓名</label> <div class="col-lg-10"> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> </div> <div class="form-group"> <label class="control-label col-lg-1" for="psd">密碼</label> <div class="col-lg-10"> <input type="text" class="form-control" id="psd" placeholder="請輸入密碼"> </div> </div> </fieldset> </form>
1.4.表單控件
input元素：
使用input元素的時候，必須聲明type類型，否則可能引起問題。
select元素：
多行選擇設置multiple=”multiple”
textarea元素：
textarea元素定義了rows數字即可定義大文本框的高度，cols寬度。但是textarea應用了form-control央視，則cols無效。
checkbox和radio(是兩個特殊的type)
注意使用的時候，每個input外部用label包住，并且在最外層用容器元素寶珠，并應用相應的.checkbox和.radio樣式。
//使用<div class="checkbox"> <label><input type="checkbox">學習前端</label></div><div class="radio"> <label><input type="radio" name="optionsRadios" value="male">男生</label></div><div class="radio"> <label><input type="radio" name="optionsRadios" value="female">女生</label></div>
//源碼//讓單選框和復選框都能左右和上下居中.radio,.checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px;}//內部有label的話，內聯顯示.radio label,.checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer;}同時可以內聯顯示，在labelshang添加checkbox-inline或者radio-inline
1.5.空間狀態
焦點狀態、禁用狀態、驗證提示狀態
焦點狀態：
當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
禁用狀態：
對 添加 disabled 屬性來禁用 內的所有控件。
驗證提示狀態：
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。
–對文字、邊框和陰影設置的顏色不同
<div class="form-group has-warning"> <label for="inputWarning" class="control-label">輸入長度不夠!</label> <input type="text" class="form-control"></div><div class="form-group has-error"> <label for="inputError" class="control-label">輸入不符合要求！</label> <input type="text" class="form-control"></div><div class="form-group has-success has-feedback"> <label for="inputSuccess" class="control-label">輸入文本符合要求！</label> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
//相對定位，用于設置input元素的父容器的定位方式.has-feedback { position: relative;}//右內邊距的設置，以便可以顯示小圖標.has-feedback .form-control { padding-right: 42.5px;}//設置小圖標的顯示方式.form-control-feedback { position: absolute;//絕對定位 top: 0; right: 0;//右對齊 z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none;}.input-lg + .form-control-feedback,.input-group-lg + .form-control-feedback,.form-group-lg .form-control + .form-control-feedback { width: 46px; height: 46px; line-height: 46px;}.input-sm + .form-control-feedback,.input-group-sm + .form-control-feedback,.form-group-sm .form-control + .form-control-feedback { width: 30px; height: 30px; line-height: 30px;}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label { color: #3c763d;}.has-success .form-control { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}.has-success .form-control:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;}.has-success .input-group-addon { color: #3c763d; background-color: #dff0d8; border-color: #3c763d;}.has-success .form-control-feedback { color: #3c763d;}1.6.空間大小
input-lg/input-sm
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
