為了獲得乙個好看的form表單空間,我們需要如下的操作:
效果圖如下:
我們首先通過form-horizontal類來指定我們的表單空間是水平排列的,即標籤和輸入框在乙個水平線上,然後我們通過form-group來使得表單控制項佔滿整個容器的寬度,然後通過col-sm-x來指定標籤和空間各自所佔的距離,之後我們新增入control-label和form-control來為標籤和輸入框新增好看的樣式。總結如下**:
水平表單控制項相關bootstrap類
form-horizontal
指定表單的展示方式是水平展示標籤與輸入框
form-group
將label
元素和控制項包裹在.form-group
中可以獲得最好的排列。
form-control
所有設定了.form-control
類的、
和
元素都將被預設設定寬度屬性為
width: 100%;
control-label
為label新增樣式
col-sm-xx
通過該格柵系統來指定各個控制項的寬度
input-lg input-sm
通過該類來指定空間的高度
bootstrap入門 表單樣式
linkhref bootstrap.min.css rel stylesheet 插入bootstrap外部樣式表 divclass form group label 使用者名稱 label inputtype email class form control placeholder email ...
Bootstrap橫向表單
在form上應用.form horizontal 2.使用柵格系統 3.實際操作 1 新建乙個demo03.html,接著再開啟demo03.html,將移動裝置優和css檔案先匯入到標頭檔案 貼上過來就行了 儲存一下。name viewport 移動裝置優 content width device...
Bootstrap筆記 表單
基礎表單 水平表單 內聯表單 form group通常將一組控制項放在該類裡,設定下邊距 單行輸入框 type型別,如果沒有指定type型別,將無法得到正確的樣式 form control讓控制項在各種表單風格中樣式不出錯 placeholder提示輸入 下拉選擇框 1 1文字域核取方塊 單選框核取...