Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(2)
首先,很感謝各位朋友對(duì)我的支持,關(guān)于bootstrap的學(xué)習(xí)總結(jié),我會(huì)持續(xù)更新,如果有寫的不對(duì)的地方,麻煩各位給我指正出來哈。關(guān)于上篇文章,固定布局和流式布局很關(guān)鍵,如果還不太清楚的可以再看看我寫的:Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這次我們來看看bootstrap中關(guān)于樣式的一些具體關(guān)鍵的類以及如何使用這些類,類與類之間的區(qū)別,另外涉及到的一些相關(guān)類,舉列子的時(shí)候解釋。
一、表單
1.form-control類:含有此類的<input><select><textarea>標(biāo)簽寬度都將變?yōu)閣idth:100%,且在表單中通常是將控件配合label標(biāo)簽一起包含在form-group中使用。
<form role="form"> <!-- 所有設(shè)置了form-control類的input,textarea,select,元素都將被默認(rèn)為width:100% --> <div class="form-group"> --form-group:一般講標(biāo)簽和空間包裹在form-group中使用 <label for="exampleInputEmail">Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="input"> </div> <div class="form-group"> <label for="exampleInputEmail">Email name</label> <textarea class="form-control">11111</textarea> </div> <div class="form-group"> <label for="select">select form</label> <select class="form-control"> <option>111</option> <option>222</option> </select> </div> </form>
根據(jù)上面代碼引申出不同的類,我們一行行的來看。給form添加form-inline類(將控件放在一行) | form-horizontal類(標(biāo)簽在左,控件在右),后者借助標(biāo)簽。
<!-- form-inline類使表單水平呈現(xiàn)--> <form class="form-inline"> --其次還有check-inline,radio-inline等 <div class="form-group"> <label class="src-only" for="exampleInputAmount">Amount</label> <div class="input-group"> --input-group:輸入組 <div class="input-group-addon">@</div> --addon:指添加的文本或按鈕 <input type="text" class="form-control " id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">@</div> </div> </div> <button type="submit" class="btn btn-primary">search</button> </form>
效果如下:
如果不加的話,button將被擠到下一行。這里不再貼圖,可自行貼碼測(cè)試。
<!--水平排列的表單 control-label:表示文本采用右對(duì)齊 --> <form class="form-horizontal" > <div class="form-group"> <label for="inputEmail" class="col-sm-2 control-label">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail" placeholder="email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="password"> </div> </div> </form>
效果如下:
(注意:這里的input文本框應(yīng)該是占5/6的,我把它的寬度自定義了下為20%)
這里關(guān)于form-horizontal,要配合bootstrap的柵格系統(tǒng)進(jìn)行。
在<form>元素上使用類名“form-horizontal”主要有以下幾個(gè)作用:
1:設(shè)置表單控件padding和margin值。上面的代碼可在調(diào)試控制臺(tái)里面看到,為padding-left:50px。
2:改變“form-group”的表現(xiàn)形式,類似于網(wǎng)格系統(tǒng)的“row”。
2.label的作用
<label for="hello1">hello</label><input type="text" id="hello"><br> ---產(chǎn)生藍(lán)色光暈 <label for="1111">hello</label><input type="text" id="jiang"><br> ---id不對(duì)應(yīng),沒反應(yīng),只有當(dāng)鼠標(biāo)放在控件上時(shí),才有藍(lán)色光暈
結(jié)合上面的代碼看:label中的for屬性,應(yīng)該對(duì)應(yīng)的是控件中的id。作用:保證當(dāng)鼠標(biāo)置于label上,相應(yīng)的控件會(huì)產(chǎn)生藍(lán)色光暈。
3.role的作用
有沒有覺得很奇怪,為什么在寫表單或者一些控件的時(shí)候,要加上role?
作用:保證讀屏軟件可以識(shí)別。讀屏軟件即一款幫助智障人士上網(wǎng)的軟件,將圖片,文字等以語音的形式傳達(dá)給智障人士,因此為確保讀屏軟件可以識(shí)別,通常沒有語義化的標(biāo)簽,或者功能特殊的標(biāo)簽都要寫上它。比如:
<a class="btn btn-default" href="#" role="button">link</a> <!-- 如果鏈接a作為按鈕使用,并用于當(dāng)前頁面觸發(fā)某些功能, 而不是連接到其它其它頁面或當(dāng)前頁面的其余部分,務(wù)必設(shè)置role="button" --> 原本a標(biāo)簽是表示鏈接,但這里卻當(dāng)做按鈕來使用,讀屏軟件無法識(shí)別, 因此需要加上role="button",讓讀屏軟件知道這是個(gè)button按鈕。
4.label,aria-label,aria-labelled的區(qū)別?
<div class="form-group"> <input type="text" id="idCard" aria-label="身份證"> <p class="help-block">Example block-level </p> --help-block:用來提示解釋說明的文本 </div> <div class="form-group"> <label for="idCard">身份證</label> <input type="text" id="idCard" > <p class="help-block">Example block-level </p> </div>
效果如下:
前者沒有出現(xiàn)可視化的“身份證”字樣,兩者均是為了便于讀屏軟件識(shí)別出來。只是aria-label被隱藏起來了。
再來看下aria-labelled怎么用,通常是當(dāng)標(biāo)簽文本已經(jīng)存在于某一個(gè)元素時(shí),使用aria-labelled,它的值為所有讀取元素的id,來看下列子:
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 選擇下列選項(xiàng) <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">1111</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">22222</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">33333</a> </li> </ul> </div>
此時(shí)ul中包含的有l(wèi)i,且是在button中控制的,所以此時(shí)用aria-labelledby比較合適。簡(jiǎn)單來說,三者之間,只是使用的范圍不一樣,基本功能是相同的,都是為了便于讀屏軟件的識(shí)別。說到隱藏的類,就要提到sr-only類了。我們來看下。
<label for="inputEmail" class="col-sm-2 control-label sr-only">Email:</label>
<label for="inputEmail" class="col-sm-2 control-label ">Email:</label>
此時(shí)效果是:上面的文字被隱藏起來,僅僅這種區(qū)別,其它基本功能不變。
5.disabled類
在表單中,這個(gè)類要注意,這里我們對(duì)比來看。
<!-- 引入fieldset的表單,作用:將表單包含在一個(gè)塊里面 --> <form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的輸入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>禁用不可選擇</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> 禁用無法選擇 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </fieldset> </form>
如果給fileset增加disabled類的話,禁用的表單,只對(duì)button select input等禁用,而對(duì)于其它的項(xiàng)legend屬性并不起作用。對(duì)比來看,添加legend屬性
<!-- 加了lenged屬性 --> <form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="顏色變灰,但沒被禁用" ></legend>--這里鼠標(biāo)可以放入輸入框中 <div class="form-group"> <label for="disabledTextInput">禁用的輸入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可選擇</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> 無法選擇 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </fieldset> </form> <!-- 禁用的表單,只對(duì)button select input等禁用,而對(duì)于其它的項(xiàng)legend并不起作用-->
6.data-toggle data-target data-spy屬性
html5允許開發(fā)者自由為其標(biāo)簽添加屬性,這種自定義屬性一般用“data-”開頭。
data-toggle:表示數(shù)據(jù)交互 ,上面列子中點(diǎn)擊button,即可切換到下拉菜單。
data-spy表示:監(jiān)控
data-traget:目標(biāo)。
這里涉及到j(luò)s中的事件,不再詳解,等到進(jìn)入bootstrap中的js學(xué)習(xí)中再來看一下這些問題。表單涉及到的東西還是很多的,總結(jié)的差不多這么多,還有補(bǔ)充的,麻煩大家在下面給我留言。
二、按鈕類
這個(gè)沒啥難點(diǎn),記住屬性類就行了,很好理解。
<a class="btn btn-default" href="#" role="button">link</a> <button class="btn btn-default btn-lg" type="submit" disabled="disabled">default</button> <button class="btn btn-primary" type="submit">primary</button> <button class="btn btn-success" type="submit">success</button> <button class="btn btn-info btn-block" type="submit">info</button> --btn-block:將其拉伸到父元素的100% <button class="btn btn-warning" type="submit">warning</button> <input class="btn btn-danger active" type="button" value="Input"> <input class="btn btn-link" type="button" value="submit">
效果如下:
三、圖片類
<!-- 使圖片居中center-block:使內(nèi)容居中顯示 img-rounded :帶有圓角 img-circle:環(huán)形 img-thumbnail:給圖片加了個(gè)外邊框-->
<img src="111.png" class="img-responsive center-block img-rounded" alt="responsive image">
<img src="111.png" class="img-responsive center-block img-circle" alt="responsive image">
<img src="111.png" class="img-responsive center-block img-thumbnail" alt="responsive image">
效果如下:
總結(jié)一句,個(gè)人感覺,表單的作用還是很重要的,其它的一些基本類,這里不再講解,都比較容易。下一篇將轉(zhuǎn)入css組件的學(xué)習(xí):Bootstrap學(xué)習(xí)筆記之css組件(3)
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap輪播加上css3動(dòng)畫,炫酷到底!
- BootStrap.css 在手機(jī)端滑動(dòng)時(shí)右側(cè)出現(xiàn)空白的原因及解決辦法
- Bootstrap中CSS的使用方法
- bootstrap和jQuery.Gantt的css沖突 如何解決
- Bootstrap學(xué)習(xí)筆記之css組件(3)
- Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
- Bootstrap每天必學(xué)之柵格系統(tǒng)(布局)
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- 談一談bootstrap響應(yīng)式布局
- Bootstrap CSS布局之代碼
相關(guān)文章
JS公共小方法之判斷對(duì)象是否為domElement的實(shí)例
下面小編就為大家?guī)硪黄狫S公共小方法之判斷對(duì)象是否為domElement的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11整理一些JavaScript的IE和火狐的兼容性注意事項(xiàng)
整理一些JavaScript的IE和火狐的兼容性解決方法,有更好的方法多多交流2011-03-03動(dòng)態(tài)加載iframe時(shí)get請(qǐng)求傳遞中文參數(shù)亂碼解決方法
這篇文章主要介紹了動(dòng)態(tài)加載iframe時(shí)get請(qǐng)求傳遞中文參數(shù)亂碼解決方法,需要的朋友可以參考下2014-05-05js實(shí)現(xiàn)屏蔽默認(rèn)快捷鍵調(diào)用自定義事件示例
本文要說的是如何屏蔽默認(rèn)的快捷鍵后去執(zhí)行自定義的事件,下面以一個(gè)textarea中enter進(jìn)行保存的例子為大家詳細(xì)介紹下,感興趣的朋友可以參考下哈2013-06-06談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長(zhǎng)
這篇文章主要介紹了談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長(zhǎng),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01JavaScript數(shù)據(jù)類型的存儲(chǔ)方法詳解
JavaScript中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型是如何存儲(chǔ)的呢?下面通過本文給大家分享js數(shù)據(jù)類型的存儲(chǔ)方法,需要的朋友參考下吧2017-08-08