Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(2)

更新時(shí)間：2016年06月07日 09:23:01 作者：向婷風(fēng)

這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)，感興趣的小伙伴們可以參考一下

首先，很感謝各位朋友對(duì)我的支持，關(guān)于bootstrap的學(xué)習(xí)總結(jié)，我會(huì)持續(xù)更新，如果有寫的不對(duì)的地方，麻煩各位給我指正出來(lái)哈。關(guān)于上篇文章，固定布局和流式布局很關(guān)鍵，如果還不太清楚的可以再看看我寫的：Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)

這次我們來(lái)看看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ù)上面代碼引申出不同的類，我們一行行的來(lái)看。給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)，沒(méi)反應(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的作用

有沒(méi)有覺(jué)得很奇怪，為什么在寫表單或者一些控件的時(shí)候，要加上role？

作用：保證讀屏軟件可以識(shí)別。讀屏軟件即一款幫助智障人士上網(wǎng)的軟件，將圖片，文字等以語(yǔ)音的形式傳達(dá)給智障人士，因此為確保讀屏軟件可以識(shí)別，通常沒(méi)有語(yǔ)義化的標(biāo)簽，或者功能特殊的標(biāo)簽都要寫上它。比如：

<a class="btn btn-default" href="#" role="button">link</a>
<!-- 如果鏈接a作為按鈕使用，并用于當(dāng)前頁(yè)面觸發(fā)某些功能，

而不是連接到其它其它頁(yè)面或當(dāng)前頁(yè)面的其余部分，務(wù)必設(shè)置role="button" -->
原本a標(biāo)簽是表示鏈接，但這里卻當(dāng)做按鈕來(lái)使用，讀屏軟件無(wú)法識(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：用來(lái)提示解釋說(shuō)明的文本
 </div>
 <div class="form-group">
 <label for="idCard">身份證</label>
 <input type="text" id="idCard" >
 <p class="help-block">Example block-level </p>
 </div>

效果如下：

前者沒(méi)有出現(xiàn)可視化的“身份證”字樣，兩者均是為了便于讀屏軟件識(shí)別出來(lái)。只是aria-label被隱藏起來(lái)了。

再來(lái)看下aria-labelled怎么用，通常是當(dāng)標(biāo)簽文本已經(jīng)存在于某一個(gè)元素時(shí)，使用aria-labelled，它的值為所有讀取元素的id,來(lái)看下列子：

<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)單來(lái)說(shuō)，三者之間，只是使用的范圍不一樣，基本功能是相同的，都是為了便于讀屏軟件的識(shí)別。說(shuō)到隱藏的類，就要提到sr-only類了。我們來(lái)看下。

<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í)效果是：上面的文字被隱藏起來(lái)，僅僅這種區(qū)別，其它基本功能不變。

5.disabled類

在表單中，這個(gè)類要注意，這里我們對(duì)比來(lái)看。

<!-- 引入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"> 禁用無(wú)法選擇
 </label>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

如果給fileset增加disabled類的話，禁用的表單，只對(duì)button select input等禁用，而對(duì)于其它的項(xiàng)legend屬性并不起作用。對(duì)比來(lái)看，添加legend屬性

<!-- 加了lenged屬性 -->
<form role="form">
 <fieldset disabled>
 <legend><input type="text" class="form-control" placeholder="顏色變灰，但沒(méi)被禁用" ></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"> 無(wú)法選擇
  </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允許開(kāi)發(fā)者自由為其標(biāo)簽添加屬性，這種自定義屬性一般用“data-”開(kāi)頭。

data-toggle:表示數(shù)據(jù)交互，上面列子中點(diǎn)擊button,即可切換到下拉菜單。

data-spy表示：監(jiān)控

data-traget：目標(biāo)。

這里涉及到j(luò)s中的事件，不再詳解，等到進(jìn)入bootstrap中的js學(xué)習(xí)中再來(lái)看一下這些問(wèn)題。表單涉及到的東西還是很多的，總結(jié)的差不多這么多，還有補(bǔ)充的，麻煩大家在下面給我留言。

二、按鈕類

這個(gè)沒(méi)啥難點(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">

效果如下：

三、圖片類

<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">
效果如下：