Bootstrap CSS布局之表單
1. 表單
表單是html網(wǎng)頁(yè)交互很重要的部分,同時(shí)也是BootSTrap框架中的核心內(nèi)容,表單提供了豐富的樣式(基礎(chǔ)、內(nèi)聯(lián)、橫向)
表單的元素
input textarea select checkbox radio(checkbox和radio是input的特殊類型)
其他標(biāo)簽
form fieldset legend
1.1.基礎(chǔ)表單
<!--基礎(chǔ)表單: 1.向父 <form> 元素添加 role="form"。 2.把標(biāo)簽label和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。因?yàn)閒orm-group提供了margin 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--> <form role="form"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> <div class="form-group"> <label for="psd">密碼</label> <input type="text" class="form-control" id="psd" placeholder="請(qǐng)輸入密碼"> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <button type="submit" class="btn btn-default">登錄</button> </fieldset> </form>
1.2.內(nèi)聯(lián)表單
<!-- 內(nèi)聯(lián)表單: 如果需要?jiǎng)?chuàng)建一個(gè)表單,它的所有元素是內(nèi)聯(lián)的,向左對(duì)齊的,標(biāo)簽是并排的,請(qǐng)向 <form> 標(biāo)簽添加 class .form-inline --> <form role="form" class="form-inline"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> <div class="form-group"> <label for="psd">密碼</label> <input type="text" class="form-control" id="psd" placeholder="請(qǐng)輸入密碼"> </div> <div class="checkbox"> <label><input type="checkbox">記住密碼</label> </div> <button type="submit" class="btn btn-default">登錄</button> </fieldset> </form>
1.3.橫向表單
<!-- 橫向表單: 1.向父 <form> 元素添加 class .form-horizontal。 2.把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。 3.向標(biāo)簽添加 class .control-label。 4.要實(shí)現(xiàn)橫向表單,還要用柵格類--> <form role="form" class="form-horizontal"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label class="control-label col-lg-1" for="name">姓名</label> <div class="col-lg-10"> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> </div> <div class="form-group"> <label class="control-label col-lg-1" for="psd">密碼</label> <div class="col-lg-10"> <input type="text" class="form-control" id="psd" placeholder="請(qǐng)輸入密碼"> </div> </div> </fieldset> </form>
1.4.表單控件
input元素:
使用input元素的時(shí)候,必須聲明type類型,否則可能引起問(wèn)題。
select元素:
多行選擇設(shè)置multiple=”multiple”
textarea元素:
textarea元素定義了rows數(shù)字即可定義大文本框的高度,cols寬度。但是textarea應(yīng)用了form-control央視,則cols無(wú)效。
checkbox和radio(是兩個(gè)特殊的type)
注意使用的時(shí)候,每個(gè)input外部用label包住,并且在最外層用容器元素寶珠,并應(yīng)用相應(yīng)的.checkbox和.radio樣式。
//使用 <div class="checkbox"> <label><input type="checkbox">學(xué)習(xí)前端</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="male">男生</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="female">女生</label> </div>
//源碼 //讓單選框和復(fù)選框都能左右和上下居中 .radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } //內(nèi)部有l(wèi)abel的話,內(nèi)聯(lián)顯示 .radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; }
同時(shí)可以內(nèi)聯(lián)顯示,在labelshang添加checkbox-inline或者radio-inline
1.5.空間狀態(tài)
焦點(diǎn)狀態(tài)、禁用狀態(tài)、驗(yàn)證提示狀態(tài)
焦點(diǎn)狀態(tài):
當(dāng)輸入框 input 接收到 :focus 時(shí),輸入框的輪廓會(huì)被移除,同時(shí)應(yīng)用 box-shadow。
禁用狀態(tài):
對(duì) 添加 disabled 屬性來(lái)禁用 內(nèi)的所有控件。
驗(yàn)證提示狀態(tài):
Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class(.has-warning、 .has-error 或 .has-success)即可使用驗(yàn)證狀態(tài)。
–對(duì)文字、邊框和陰影設(shè)置的顏色不同
<div class="form-group has-warning"> <label for="inputWarning" class="control-label">輸入長(zhǎng)度不夠!</label> <input type="text" class="form-control"> </div> <div class="form-group has-error"> <label for="inputError" class="control-label">輸入不符合要求!</label> <input type="text" class="form-control"> </div> <div class="form-group has-success has-feedback"> <label for="inputSuccess" class="control-label">輸入文本符合要求!</label> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div>
//相對(duì)定位,用于設(shè)置input元素的父容器的定位方式 .has-feedback { position: relative; } //右內(nèi)邊距的設(shè)置,以便可以顯示小圖標(biāo) .has-feedback .form-control { padding-right: 42.5px; } //設(shè)置小圖標(biāo)的顯示方式 .form-control-feedback { position: absolute;//絕對(duì)定位 top: 0; right: 0;//右對(duì)齊 z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none; } .input-lg + .form-control-feedback, .input-group-lg + .form-control-feedback, .form-group-lg .form-control + .form-control-feedback { width: 46px; height: 46px; line-height: 46px; } .input-sm + .form-control-feedback, .input-group-sm + .form-control-feedback, .form-group-sm .form-control + .form-control-feedback { width: 30px; height: 30px; line-height: 30px; } .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label { color: #3c763d; } .has-success .form-control { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .has-success .form-control:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168; } .has-success .input-group-addon { color: #3c763d; background-color: #dff0d8; border-color: #3c763d; } .has-success .form-control-feedback { color: #3c763d; }
1.6.空間大小
input-lg/input-sm
以上就是本文的全部?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é)之表單
- 基于jQuery.validate及Bootstrap的tooltip開(kāi)發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
相關(guān)文章
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中,Map、Set、WeakMap和WeakSet是四個(gè)不同的數(shù)據(jù)結(jié)構(gòu),它們都有不同的特點(diǎn)和用途,本文詳細(xì)介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別,需要的朋友可以參考下2023-04-04JavaScripts數(shù)組里的對(duì)象排序的24個(gè)方法(最新整理收藏)
文章介紹了24種在JavaScript中對(duì)數(shù)組進(jìn)行排序的方法,每種方法都有具體的示例和應(yīng)用場(chǎng)景,適合不同情況下的排序需求,感興趣的朋友跟隨小編一起看看吧2025-01-01純?cè)鷍s實(shí)現(xiàn)table表格的增刪
本文主要介紹了純?cè)鷍avascript實(shí)現(xiàn)table表格的增刪的方法,文章底部提供了完整的代碼。需要的朋友一起來(lái)看下吧2017-01-01使用?TypeScript?開(kāi)發(fā)?React?函數(shù)式組件
這篇文章主要介紹了使用?TypeScript開(kāi)發(fā)React函數(shù)式組件,文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-08-08js實(shí)現(xiàn)用戶輸入的小寫字母自動(dòng)轉(zhuǎn)大寫字母的方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)用戶輸入的小寫字母自動(dòng)轉(zhuǎn)大寫字母的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫(api實(shí)現(xiàn))
這篇文章主要介紹了mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫,這里使用小程序自帶的api來(lái)實(shí)現(xiàn),文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-10-10