亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

禁用狀態(直接加disable)

Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”

<input?class="form-control"?type="text"?placeholder="表單已禁用，不能輸入"?disabled>

有焦點狀態? form-control就已經設置了焦點狀態

<form?role="form"?class="form-horizontal">
??<div?class="form-group">
????<div?class="col-xs-6">
??????<input?class="form-control?input-lg"?type="text"?placeholder="不是焦點狀態下效果">
????</div>
????<div?class="col-xs-6">
??????<input?class="form-control?input-lg"?type="text"?placeholder="焦點點狀態下效果">
????</div>
??</div>
</form>

控制控件的大小

可以通過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大

bootstrap復選框和單選框的水平排列

1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”

<form?role="form">
??<div?class="form-group">
????<label?class="checkbox-inline">
??????<input?type="checkbox"??value="option1">游戲
????</label>
????<label?class="checkbox-inline">
??????<input?type="checkbox"??value="option2">攝影
????</label>
????<label?class="checkbox-inline">
????<input?type="checkbox"??value="option3">旅游
????</label>
??</div>
??<div?class="form-group">
????<label?class="radio-inline">
??????<input?type="radio"??value="option1"?name="sex">男性
????</label>
????<label?class="radio-inline">
??????<input?type="radio"??value="option2"?name="sex">女性
????</label>
????<label?class="radio-inline">
??????<input?type="radio"??value="option3"?name="sex">中性
????</label>
??</div>
</form>

文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

<form?role="form">
??<div?class="form-group">????<textarea?class="form-control"?rows="3"></textarea>
??</div>
</form>

bootstrap中的復選框

<form?role="form">
<div?class="checkbox">
<label>
<input?type="checkbox"?value="">
記住密碼
</label>
</div>
<div?class="radio">
<label>
<input?type="radio"?name="optionsRadios"?id="optionsRadios1"?value="love"?checked>
喜歡
</label>
</div>
<div?class="radio">
<label>
<input?type="radio"?name="optionsRadios"?id="optionsRadios2"?value="hate">
不喜歡
</label>
</div>
</form>

bootstrap中input的使用

<form role="form">

? <div class="form-group">

? ? <input type="email" class="form-control" placeholder="Enter email">

? ??

? </div>

</form>? ?

將表單的控件都在一行內顯示

在<form>元素中添加類名“form-inline”

<form?class="form-inline"?role="form">
<div?class="form-group">
??<label?class="sr-only"?for="exampleInputEmail2">郵箱</label>
??<input?type="email"?class="form-control"?id="exampleInputEmail2"?placeholder="請輸入你的郵箱地址">
</div>
<div?class="form-group">
??<label?class="sr-only"?for="exampleInputPassword2">密碼</label>
??<input?type="password"?class="form-control"?id="exampleInputPassword2"?placeholder="請輸入你的郵箱密碼">
</div>
<div?class="checkbox">
<label>
???<input?type="checkbox">記住密碼
</label>
</div>
<button?type="submit"?class="btnbtn-default">進入郵箱</button>
</form>

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設置表單控件padding和margin值。
2、改變“form-group”的表現形式，類似于網格系統的“row”。

表單中的元素的樣式(input、select、textarea等)

“form-control”

1、寬度變成了100%

2、設置了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化

5、設置了placeholder的顏色為#999

bootstrap中對tr的顏色設置

.active

.success

.info

.warning

.danger

.table:基礎表格

.table-striped:斑馬線表格,讓表格帶有背景條紋效果

.table.bordered:帶邊框的表格

.table.hover:懸浮高亮

.table.condensed:緊湊表格

.table-responsive:響應式表格,當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。

控制頁面大小

.pre-scrollable?{
max-height:?340px;
overflow-y:?scroll;
}

水平定義列表

<dl class="dl-horizontal">

? ? <dt>W3cplus</dt>

? ? <dd>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>

? ? <dt>慕課網</dt>

? ? <dd>一個專業的，真心實意在做培訓的網站</dd>

? ? <dt>我來測試一個標題，我來測試一個標題</dt>

? ? <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>

</dl>

水平列表

<ul class="list-inline">

? ? <li class="list-inline-item">W3cplus</li>

? ? <li class="list-inline-item">Blog</li>

? ? <li class="list-inline-item">CSS3</li>

? ? <li class="list-inline-item">jQuery</li>

? ? <li class="list-inline-item">PHP</li>

</ul>