在form上應用.form-horizontal
2.使用柵格系統
3.實際操作
1、新建乙個demo03.html，接著再開啟demo03.html，將移動裝置優和css檔案先匯入到標頭檔案（貼上過來就行了），儲存一下。
name="viewport"
//移動裝置優
content="width=device-width,initial-scale=1, user-scalable=no」>
demo01>
//css檔案
2、定義乙個div，我們先做兩個表單項。
使用者名稱:
3、執行效果
3.4結合柵格系統進行修改，在label上加乙個樣式，input要放在div裡面。相當於form-group佔一行，使用者名稱的label標籤佔兩格，這個文字框我們可以設成form-control，因為form-control可以佔滿整個容器。
//在表單上設定.form-horizontal這個樣式
//我們把form-group當成一行
使用者名稱:
//用柵格系統我們可以指定label佔多少列
(注意：要給乙個control-label，讓裡面的input佔滿全屏。)
5、執行效果
這裡有乙個問題，就是當它小於這個768的解析度時，就變成這樣排列了。所以橫向排列只適合在大於768的解析度時候使用。
6、同時，我們發現這還有個 問題就是使用者名稱和文字框之間有乙個間距，我們可以在這個地方給乙個control-label來調整間距。
使用者名稱:
7、執行效果，它可以自適應。
8、橫向表單第一步是在表單上設定.form-horizontal這個樣式，我們把form-group當成一行，現在我們要用柵格系統我們可以指定label佔多少列，注意：要給乙個control-label。接下來，增加乙個div讓這個div佔柵格的幾格，讓裡面的input佔滿全屏。我們可以在bootstrap.css中查詢一下form-horizontal可以發現它只做了一些邊距的設定等。
9、同樣的我們可以設定密碼的這個label，原理和上面講的一樣。
密碼:
10、執行效果
當解析度小於768px，就變成縱向排列了。
bootstrap 表單樣式
為了獲得乙個好看的form表單空間，我們需要如下的操作 效果圖如下 我們首先通過form horizontal類來指定我們的表單空間是水平排列的，即標籤和輸入框在乙個水平線上，然後我們通過form group來使得表單控制項佔滿整個容器的寬度，然後通過col sm x來指定標籤和空間各自所佔的距離，...
Bootstrap筆記 表單
基礎表單 水平表單 內聯表單 form group通常將一組控制項放在該類裡，設定下邊距 單行輸入框 type型別，如果沒有指定type型別，將無法得到正確的樣式 form control讓控制項在各種表單風格中樣式不出錯 placeholder提示輸入 下拉選擇框 1 1文字域核取方塊 單選框核取...
bootstrap入門 表單樣式
linkhref bootstrap.min.css rel stylesheet 插入bootstrap外部樣式表 divclass form group label 使用者名稱 label inputtype email class form control placeholder email ...