第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

禁用狀態(tài)(直接加disable)

Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”

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

有焦點(diǎn)狀態(tài)? form-control就已經(jīng)設(shè)置了焦點(diǎn)狀態(tài)

<form?role="form"?class="form-horizontal">
??<div?class="form-group">
????<div?class="col-xs-6">
??????<input?class="form-control?input-lg"?type="text"?placeholder="不是焦點(diǎn)狀態(tài)下效果">
????</div>
????<div?class="col-xs-6">
??????<input?class="form-control?input-lg"?type="text"?placeholder="焦點(diǎn)點(diǎn)狀態(tài)下效果">
????</div>
??</div>
</form>

控制控件的大小

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

bootstrap復(fù)選框和單選框的水平排列

1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標(biāo)簽上添加類名“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>

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

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

bootstrap中的復(fù)選框

<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>? ?

將表單的控件都在一行內(nèi)顯示

在<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="請(qǐng)輸入你的郵箱地址">
</div>
<div?class="form-group">
??<label?class="sr-only"?for="exampleInputPassword2">密碼</label>
??<input?type="password"?class="form-control"?id="exampleInputPassword2"?placeholder="請(qǐng)輸入你的郵箱密碼">
</div>
<div?class="checkbox">
<label>
???<input?type="checkbox">記住密碼
</label>
</div>
<button?type="submit"?class="btnbtn-default">進(jìn)入郵箱</button>
</form>

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

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

“form-control”

1、寬度變成了100%

2、設(shè)置了一個(gè)淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時(shí)，陰影和邊框效果會(huì)有所變化

5、設(shè)置了placeholder的顏色為#999

bootstrap中對(duì)tr的顏色設(shè)置

.active

.success

.info

.warning

.danger

.table:基礎(chǔ)表格

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

.table.bordered:帶邊框的表格

.table.hover:懸浮高亮

.table.condensed:緊湊表格

.table-responsive:響應(yīng)式表格,當(dāng)你的瀏覽器可視區(qū)域小于768px時(shí)，表格底部會(huì)出現(xiàn)水平滾動(dòng)條。當(dāng)你的瀏覽器可視區(qū)域大于768px時(shí)，表格底部水平滾動(dòng)條就會(huì)消失。

控制頁面大小

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

水平定義列表

<dl class="dl-horizontal">

? ? <dt>W3cplus</dt>

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

? ? <dt>慕課網(wǎng)</dt>

? ? <dd>一個(gè)專業(yè)的，真心實(shí)意在做培訓(xùn)的網(wǎng)站</dd>

? ? <dt>我來測(cè)試一個(gè)標(biāo)題，我來測(cè)試一個(gè)標(biāo)題</dt>

? ? <dd>我在寫一個(gè)水平定義列表的效果，我在寫一個(gè)水平定義列表的效果</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>