深入學(xué)習(xí)Bootstrap表單
本文知識(shí)點(diǎn)借鑒來(lái)自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面寫的比較詳細(xì)還給出了例子,這里總結(jié)一下重點(diǎn)方便記憶。
一、表單布局
1.垂直表單(默認(rèn))
向父 <form> 元素添加 role="form"。
把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form action="#" role="form"> <div class="form-group"> <lable>姓名:<input class="form-control" type="text"/></lable> <lable>性別:<input class="form-control" type="text"/></lable> </div> </form>
2.內(nèi)聯(lián)表單
向 <form> 標(biāo)簽添加 class .form-inline;
默認(rèn)情況下,Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時(shí),您需要在表單控件上設(shè)置一個(gè)寬度。
使用 class .sr-only,您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。
3.水平表單
向父 <form> 元素添加 class .form-horizontal。
把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
向標(biāo)簽添加 class .control-label。
<form action="#" role="form" class="form-horizontal"> <div class="form-group"> <lable class="control-label col-lg-2">姓名:</lable> <div class=" col-lg-10"><input class="form-control" type="text"/></div> <lable class="control-label col-lg-2">性別:</lable> <div class="col-lg-10"><input class="form-control " type="text"/></div> </div> </form>
二、支持的表單控件
1.輸入框(Input)
<lable>姓名:<input class="form-control" type="text"/></lable>
2.文本框(Textarea) 可改變 rows 屬性
<div class="form-group"> <textarea rows="8" class="form-control"> </textarea> </div>
3.復(fù)選框(Checkbox)和單選框(Radio)
當(dāng)創(chuàng)建表單時(shí),如果您想讓用戶從列表中選擇若干個(gè)選項(xiàng)時(shí),請(qǐng)使用 checkbox。如果您限制用戶只能選擇一個(gè)選項(xiàng),請(qǐng)使用 radio。
對(duì)一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class,控制它們顯示在同一行上。
<div class="checkbox-inline"> <lable class="control-label"><input type="checkbox"/>籃球</lable> </div> <div class="checkbox-inline"> <lable class="control-label"><input type="checkbox"/>音樂(lè)</lable> </div> <div class="checkbox-inline"> <lable class="control-label"><input type="checkbox"/>繪畫</lable> </div> <div class="radio"> <lable><input type="radio"/>男</lable> </div> <div class="radio"> <lable><input type="radio"/>女</lable> </div>
4.選擇框(Select)
使用 <select> 展示列表選項(xiàng),通常是那些用戶很熟悉的選擇列表,比如州或者數(shù)字。
使用 multiple="multiple" 允許用戶選擇多個(gè)選項(xiàng)。
<div class="form-group"> <select name="" id="" class="form-control" multiple> <option value="">1</option> <option value="">1</option> <option value="">1</option> <option value="">1</option> <option value="">1</option> </select> </div>
5.靜態(tài)控件
當(dāng)您需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí),請(qǐng)?jiān)?<p> 上使用 class .form-control-static。
<div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div>
三、表單控件狀態(tài)
1.輸入框焦點(diǎn)
當(dāng)輸入框 input 接收到 :focus 時(shí),輸入框的輪廓會(huì)被移除,同時(shí)應(yīng)用 box-shadow。
2.禁用的輸入框 input
如果您想要禁用一個(gè)輸入框 input,只需要簡(jiǎn)單地添加 disabled 屬性,這不僅會(huì)禁用輸入框還,會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。
<div> <lable>姓名:<input type="text" disabled class="form-control"/></lable> </div>
3.禁用的字段集 fieldset
對(duì) <fieldset> 添加 disabled 屬性來(lái)禁用 <fieldset> 內(nèi)的所有控件。
4.驗(yàn)證狀態(tài)
Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)腸lass(.has-warning、 .has-error 或 .has-success)即可使用驗(yàn)證狀態(tài)。
<div class="has-error"> <lable class="control-label"> 姓名:<input type="text" class="form-control" placeholder="has-error"/> </lable> </div> <div class="has-warning"> <lable class="control-label"> 姓名:<input type="text" class="form-control" placeholder="has-warning"/> </lable> </div>
5.表單控件大小
分別使用 class .input-lg(或.input-sm) 和 .col-lg-* 來(lái)設(shè)置表單的高度和寬度
<div class="form-group"> 姓名:<input type="text" class="form-control input-lg" placeholder="input-lg"/> 姓名:<input type="text" class="form-control input-sm" placeholder="input-sm"/> 姓名:<input type="text" class="form-control " placeholder="normal"/> </div>
6.表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個(gè)塊級(jí)幫助文本。 為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊,請(qǐng)?jiān)?<input> 后使用 .help-block。
<div class="form-grounp"> <input type="text"/> <span class="help-block"> Bootstrap 表單控件可以在輸入框 input 上有一個(gè)塊級(jí)幫助文本。 </span> </div>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法(表單按鈕)
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 全面解析Bootstrap表單使用方法(表單樣式)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
- Bootstrap每天必學(xué)之表單
- 全面解析Bootstrap表單使用方法(表單控件狀態(tài))
- Bootstrap三種表單布局的使用方法
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)常見面試問(wèn)題整理
在JavaScript中,數(shù)據(jù)結(jié)構(gòu)是指相互之間存在一種或多種特定關(guān)系的數(shù)據(jù)元素的集合,是帶有結(jié)構(gòu)特性的數(shù)據(jù)元素的集合。常用的數(shù)據(jù)結(jié)構(gòu)有:數(shù)組、列表、棧、隊(duì)列、鏈表、字典、集合等等2022-08-08javascript計(jì)算對(duì)象長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)算對(duì)象長(zhǎng)度的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript原型和原型鏈與構(gòu)造函數(shù)和實(shí)例之間的關(guān)系詳解
這篇文章主要介紹了JavaScript原型和原型鏈與構(gòu)造函數(shù)和實(shí)例之間的關(guān)系,每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象,并且它可以從中繼承屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到object.prototype,它是JavaScript中的標(biāo)配對(duì)象2022-07-07JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作,涉及到年、月、日、星期,感興趣的小伙伴們可以參考一下2016-01-01jsMind通過(guò)鼠標(biāo)拖拽的方式調(diào)整節(jié)點(diǎn)位置
這篇文章主要介紹了jsMind通過(guò)鼠標(biāo)拖拽的方式調(diào)整節(jié)點(diǎn)位置的方法,十分的簡(jiǎn)單實(shí)用,推薦給有需要的小伙伴參考下。2015-04-04Javascript中函數(shù)名.length屬性用法分析(對(duì)比arguments.length)
這篇文章主要介紹了Javascript中函數(shù)名.length屬性用法,結(jié)合實(shí)例形式簡(jiǎn)單對(duì)比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下2016-09-09BootstrapTable加載按鈕功能實(shí)例代碼詳解
這篇文章主要介紹了BootstrapTable加載按鈕功能實(shí)例代碼詳解,需要的朋友可以參考下2017-09-09微信小程序阻止頁(yè)面返回實(shí)例詳解(包滑動(dòng)、自動(dòng)返回鍵)
小程序如果在頁(yè)面內(nèi)進(jìn)行復(fù)雜的界面設(shè)計(jì),用戶進(jìn)行返回操作會(huì)直接離開當(dāng)前頁(yè)面,不符合用戶預(yù)期,下面這篇文章主要給大家介紹了關(guān)于微信小程序阻止頁(yè)面返回(包滑動(dòng)、自動(dòng)返回鍵)的相關(guān)資料,需要的朋友可以參考下2023-06-06根據(jù)后端返回的json數(shù)據(jù)快速生成ts類型的實(shí)現(xiàn)代碼
在前端開發(fā)中,我們通常需要處理來(lái)自后端或其他數(shù)據(jù)源的 JSON 數(shù)據(jù),這些數(shù)據(jù)可能非常復(fù)雜,包含不同類型的屬性,甚至嵌套對(duì)象和數(shù)組,為了更好地使用這些數(shù)據(jù),我們希望將其轉(zhuǎn)換為TypeScript類型定義,以獲得類型檢查和代碼智能提示的好處2023-10-10