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

表單控件狀態(tài)(禁用狀態(tài))

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

.form-control[disabled],
.form-control[readonly],
fieldset[disabled]?.form-control?{
cursor:?not-allowed;
background-color:?#eee;
opacity:?1;
}

使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：

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

表單控件狀態(tài)(焦點(diǎn)狀態(tài))

表單主要用來與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開表單的控件狀態(tài)。

表單狀態(tài)的作用：

每一種狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點(diǎn)的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗(yàn)證狀態(tài)，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態(tài)。

焦點(diǎn)狀態(tài)是通過偽類“:focus”來實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。

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

這兩個類適用于表單中的input，textarea和select控件

表單控件(復(fù)選框和單選按鈕水平排列)

有時候，為了布局的需要，將復(fù)選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標(biāo)簽上添加類名“radio-inline”

表單控件(文本域textarea)

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

內(nèi)聯(lián)表單

有時候我們需要將表單的控件都在一行內(nèi)顯示，類似這樣的：

在Bootstrap框架中實(shí)現(xiàn)這樣的表單效果是輕而易舉的，你只需要在<form>元素中添加類名“form-inline”即可。
內(nèi)聯(lián)表單實(shí)現(xiàn)原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）。

內(nèi)聯(lián)表單：通過form-inline設(shè)置表單控件為內(nèi)聯(lián)塊

讓表格帶有背景條紋效果。在Bootstrap中實(shí)現(xiàn)這種表格效果并不困難，只需要在<table class="table">的基礎(chǔ)上增加類名“.table-striped”即可：

<table?class="table?table-striped">
…
</table>

其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實(shí)現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來實(shí)現(xiàn)，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。

源碼請查看bootstrap.css文件第1465行~第1468行：

.table-striped?>?tbody?>?tr:nth-child(odd)?>?td,
.table-striped?>?tbody?>?tr:nth-child(odd)?>?th?{
background-color:?#f9f9f9;

“.table”主要有三個作用：

? ? ?給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距

??? ?在thead底部設(shè)置了一個2px的淺灰實(shí)線

??? ?每個單元格頂部設(shè)置了一個1px的淺灰實(shí)線

class="text-muted":提示，顯示淺灰色

class="text-primary：主要，使用藍(lán)色"

class=".text-success：成功，使用淺綠色"

class=".text-info：通知信息，使用淺藍(lán)色"

class="text-warning：警告，使用黃色（#8a6d3b）.

? ? ? ? ? ? ?text-danger：危險，使用褐色（#a94442）

IE版本低于IE9的處理方式

寬度與瀏覽器一致，縮放比例為1

塊狀按鈕? btn-block

充斥整個父容器（width：100%）? 主要運(yùn)用在移動端的制作中

很多時候，在表單驗(yàn)證的時候，不同的狀態(tài)會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應(yīng)的狀態(tài)下顯示 icon 出來，只需要在對應(yīng)的狀態(tài)下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：

<div?class="form-group?has-success?has-feedback">

從效果圖中可以看出，圖標(biāo)都居右。在 Bootstrap 的小圖標(biāo)都是使用@font-face來制作（后面的內(nèi)容中將會著重用一節(jié)內(nèi)容來介紹）。而且必須在表單中添加了一個 span 元素：

<span?class="glyphiconglyphicon-warning-sign?form-control-feedback"></span>

在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個域都將處于被禁用狀態(tài)。

<form?role="form">
<fieldset?disabled>
??<div?class="form-group">

代碼風(fēng)格

不管使用哪種代碼風(fēng)格，在代碼中碰到小于號（<）要使用硬編碼“&lt;”來替代，大于號(>)使用“&gt;”來替代。

code風(fēng)格：

<div>Bootstrap的代碼風(fēng)格有三種：??<code>&lt;code&gt;</code>??<code>&lt;pre&gt;</code>??<code>&lt;kbd&gt;</code></div>

pre風(fēng)格：

<div><pre>&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</pre></div>

kbd風(fēng)格：

<div>請輸入<kbd>ctrl+c</kbd>來復(fù)制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>