bootstrap 表單樣式

2021-08-31 01:14:25 字數 804 閱讀 2202

為了獲得乙個好看的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文字域核取方塊 單選框核取...