Bootstrap CSS布局之表單
更新時(shí)間：2016年12月17日 10:04:09 作者：github_34514750
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之表單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
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-04
JavaScripts數(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
在初步接觸Echarts時(shí),經(jīng)常遇到設(shè)置x軸刻度間隔的問(wèn)題,這篇文章主要給大家介紹了關(guān)于ECharts設(shè)置x軸刻度間隔的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
使用?TypeScript?開(kāi)發(fā)?React?函數(shù)式組件
這篇文章主要介紹了使用?TypeScript開(kāi)發(fā)React函數(shù)式組件，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
js實(shí)現(xiàn)用戶輸入的小寫(xiě)字母自動(dòng)轉(zhuǎn)大寫(xiě)字母的方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)用戶輸入的小寫(xiě)字母自動(dòng)轉(zhuǎn)大寫(xiě)字母的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
這篇文章主要介紹了如何點(diǎn)擊一個(gè)按鈕實(shí)現(xiàn)彈出一個(gè)居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下2014-03-03
JavaScript的數(shù)據(jù)類型是非常弱的（不然不會(huì)叫它做弱類型語(yǔ)言了）！在使用算術(shù)運(yùn)算符時(shí)，運(yùn)算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個(gè)字符串可以和數(shù)字相加2016-03-03
基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫(huà)(api實(shí)現(xiàn))
這篇文章主要介紹了mpvue實(shí)現(xiàn)小程序簽到金幣掉落動(dòng)畫(huà),這里使用小程序自帶的api來(lái)實(shí)現(xiàn)，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-10-10