bootstrap學習11 表單 下

2021-08-01 13:39:37 字數 1425 閱讀 4869

校驗狀態

.has-success,.has-warn 等 

.form-control 這個類在表單控制中非常關鍵,很多的控制項效果 都是基於這個類的定義之下才顯示出來效果的。

.has-feedback

反饋圖示(feedback icon)只能使用在文字輸入框元素上。 只能使用在文字框上!!!!

class=

"form-group has-success has-feedback"

>

class=

"control-label"

for=

"inputsuccess2"

>input with success

type=

"text"

class=

"form-control"

id="inputsuccess2"

aria-describedby=

"inputsuccess2status"

>

class=

"glyphicon glyphicon-ok form-control-feedback"

aria-hidden=

"true"

>

id="inputsuccess2status"

class=

"sr-only"

>(success)

利用字型圖示 glyphicon glyphicon-* 設定圖示 

form-control-feedback 修飾具體控制項

@

控制項尺寸

.input-lg .input-sm 

水平排列的按鈕組和表單組的尺寸

.form-group-lg 或 .form-group-sm

用柵格系統中列 包裹輸入元素 可以輕鬆設定輸入框的寬度

class=

"col-xs-2"

>

type=

"text"

class=

"form-control"

placeholder=

".col-xs-2"

>

bootStrap學習10 表單

form control 所有的基礎表單元素,在form control類的控制下,都會被定義寬度等資訊。所有設定了.form control類的 和元素都將被預設設定寬度屬性為width 100 例如 form group label和表單元素包裹在.form group中,可以獲得比較好的排列。...

Bootstrap橫向表單

在form上應用.form horizontal 2.使用柵格系統 3.實際操作 1 新建乙個demo03.html,接著再開啟demo03.html,將移動裝置優和css檔案先匯入到標頭檔案 貼上過來就行了 儲存一下。name viewport 移動裝置優 content width device...

bootstrap 表單樣式

為了獲得乙個好看的form表單空間,我們需要如下的操作 效果圖如下 我們首先通過form horizontal類來指定我們的表單空間是水平排列的,即標籤和輸入框在乙個水平線上,然後我們通過form group來使得表單控制項佔滿整個容器的寬度,然後通過col sm x來指定標籤和空間各自所佔的距離,...