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

表單控件狀態(禁用狀態)

Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“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>

表單控件狀態(焦點狀態)

表單主要用來與用戶溝通，好的表單就能更好的與用戶進行溝通，而好的表單一定離不開表單的控件狀態。

表單狀態的作用：

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

焦點狀態是通過偽類“:focus”來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，重新添加陰影效果。

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

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

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

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

表單控件(文本域textarea)

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

內聯表單

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

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

內聯表單：通過form-inline設置表單控件為內聯塊

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

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

其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對于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”主要有三個作用：

? ? ?給表格設置了margin-bottom:20px以及設置單元內距

??? ?在thead底部設置了一個2px的淺灰實線

??? ?每個單元格頂部設置了一個1px的淺灰實線

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

class="text-primary：主要，使用藍色"

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

class=".text-info：通知信息，使用淺藍色"

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

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

IE版本低于IE9的處理方式

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

塊狀按鈕? btn-block

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

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

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

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

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

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

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

代碼風格

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

code風格：

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

pre風格：

<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風格：

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