bootStrap學習10 表單

2021-08-01 11:00:38 字數 1941 閱讀 2818

.form-control

所有的基礎表單元素,在form-control類的控制下,都會被定義寬度等資訊。

所有設定了.form-control類的元素都將被預設設定寬度屬性為width: 100%;

例如:

.form-group

label和表單元素包裹在.form-group中,可以獲得比較好的排列。

輸入框組和表單組不要混合使用

建議將輸入框組巢狀到表單組中使用。

內聯表單

.form-inline

輸入框組

input-group-addon

被支援的控制項

包括大部分表單控制項、文字輸入域控制項,還支援所有 html5 型別的輸入控制項:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

水平排列

.form-horizontal 

單選多選框 內聯顯示

.checkbox-inline.radio-inline

所謂螢幕閱讀器 就是能通過軟體 直接將頁面上的文字 轉化成 語音等資訊的裝置。

靜態控制項

.form-control-static 

如果需要在表單中將一行純文字和label元素放置於同一行,為元素新增.form-control-static類即可。

導航和導航條元件只支援元素。

成功 訊息 警告 錯誤 

bootstrap學習11 表單 下

校驗狀態 has success,has warn 等 form control 這個類在表單控制中非常關鍵,很多的控制項效果 都是基於這個類的定義之下才顯示出來效果的。has feedback 反饋圖示 feedback icon 只能使用在文字輸入框元素上。只能使用在文字框上!class for...

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來指定標籤和空間各自所佔的距離,...