本文主要講解的是表單，這個其實對于做過網站的人來說，并不陌生，而且可以說是最為常用的提交數據的Form表單。本文主要來講解一下內容：

1.基本案例

2.內聯表單

3.水平排列的表單

4.被支持的控件

5.靜態控件

6.控件狀態

7.控件尺寸

8.幫助文本

9.總結

基本案例單獨的表單控件會被自動賦予一些全局樣式。所有設置了.form-control的、和元素都將被默認設置為width: 100%;。將label和前面提到的這些控件包裹在.form-group中可以獲得最好的排列。

復制代碼代碼如下:

Email address

Password

File input

Example block-level help text here.

Check me out

Submit

兩個文本框的寬度的確為100%。并且有三個form-group。

內聯表單

為左對齊和inline-block級別的控件設置.form-inline，可以將其排布的更緊湊。

需要設置寬度：在Bootstrap中,input、select和textarea默認被設置為100%寬度。為了使用內聯表單，你需要專門為使用到的表單控件設置寬度。

一定要設置label:如果你沒有為每個輸入控件設置label,屏幕閱讀器將無法正確識讀。對于這些內聯表單,你可以通過為label設置.sr-only已將其隱藏。

復制代碼代碼如下:

Email address

Password

Remember me

Sign in

水平排列的表單

通過為表單添加.form-horizontal，并使用Bootstrap預置的柵格class可以將label和控件組水平并排布局。這樣做將改變.form-group的行為，使其表現為柵格系統中的行(row)，因此就無需再使用.row了。

復制代碼代碼如下:

Email

Password

Remember me

Sign in

被支持的控件

在表單布局案例中展示了其所支持的標準表單控件。

Input大部分表單控件、文本輸入域控件。包括HTML5支持的所有類型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

注意：有正確設置了type的input控件才能被賦予正確的樣式。

文本框示例

復制代碼代碼如下:

Textarea

支持多行文本的表單控件。可根據需要改變rows屬性。

復制代碼代碼如下:

textarea

Checkbox 和 radioCheckbox用于選擇列表中的一個或多個選項，而radio用于從多個選項中只選擇一個。

默認外觀(堆疊在一起)

復制代碼代碼如下:

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Inline checkboxes

通過將.checkbox-inline 或 .radio-inline應用到一系列的checkbox或radio控件上，可以使這些控件排列在一行。

復制代碼代碼如下:

1

2

3

同理Radio是一樣的，只需要添加一下樣式即可。

Select

復制代碼代碼如下:

1

2

3

4

5

1

2

3

4

5

靜態控件在水平布局的表單中，如果需要將一行純文本放置于label的同一行，為

元素添加.form-control-static即可。

復制代碼代碼如下:

Email

email@examtryrtyrple.com

Password

控件狀態通過為控件和label設置一些基本狀態，可以為用戶提供回饋。

輸入焦點我們移除了某些表單控件的默認outline樣式，并對其:focus狀態賦予了box-shadow樣式。

復制代碼代碼如下:

被禁用的輸入框?為輸入框設置disabled屬性可以防止用戶輸入，并能改變一點外觀，使其更直觀。

復制代碼代碼如下:

被禁用的fieldset為

設置disabled屬性可以禁用中包含的所有控件。

標簽的鏈接功能不受影響

這個class只改變按鈕的外觀，并不能禁用其功能。建議自己通過JavaScript代碼禁用鏈接功能。

跨瀏覽器兼容性

雖然Bootstrap會將這些樣式應用到所有瀏覽器上，Internet Explorer 9及以下瀏覽器中的

并不支持disabled屬性。因此建議在這些瀏覽器上通過JavaScript代碼來禁用fieldset

復制代碼代碼如下:

Disabled input

Disabled select menu

Disabled select

Can't check this

Submit

可將鼠標移到各個控件上進行查看效果。

校驗狀態Bootstrap對表單控件的校驗狀態，如error、warning和success狀態，都定義了樣式。使用時，添加.has-warning、.has-error或.has-success到這些控件的父元素即可。任何包含在此元素之內的.control-label、.form-control和.help-block都將接受這些校驗狀態的樣式。

復制代碼代碼如下:

Input with success

Input with warning

Input with error

控件尺寸

通過.input-lg之類的class可以為控件設置高度，通過.col-lg-*之類的class可以為控件設置寬度。

高度尺寸創建大一些或小一些的表單控件以匹配按鈕尺寸。

復制代碼代碼如下:

...

...

...

調整列尺寸用柵格系統中的列包裹input或其任何父元素，都可很容易的為其設置寬度。

復制代碼代碼如下:

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html中内联的form,bootstrap3.0教程之表单(form)使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。