快捷導(dǎo)航

Bootstrap基礎(chǔ)學(xué)習(xí)

更新時(shí)間：2015年06月16日 10:26:36 投稿：hebedich

Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。它使用了流行的瀏覽器技術(shù)，給web開發(fā)提供了時(shí)尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。

Bootstrap是一個(gè)基于柵格結(jié)構(gòu)的前端結(jié)構(gòu)框架（當(dāng)然也有JS，JQuery）,它的優(yōu)點(diǎn)是內(nèi)容框架能夠迅速搭建起來(lái)，基于媒介查詢可以使搭建的頁(yè)面迅速的適應(yīng)不同的用戶端，無(wú)論是手機(jī)，平板，還是PC,基本上都能自適應(yīng)，當(dāng)然新版本已經(jīng)開始不支持IE6了，對(duì)IE8的支持也很有限，畢竟IE8對(duì)HTML5的支持不太好，（說(shuō)實(shí)話，我自己也不喜歡IE6~8,對(duì)于我這種初級(jí)選手來(lái)說(shuō)，兼容性有時(shí)候真費(fèi)勁，不僅項(xiàng)目上要用，連面試也要用，有沒有搞錯(cuò)嘛，遇到了，上網(wǎng)查一下不就行了。發(fā)個(gè)牢騷，該會(huì)的還是得會(huì)啊?。。。?/p>

閑言碎語(yǔ)不多講，開始總結(jié)自己這段時(shí)間BS筆記！

1.在結(jié)構(gòu)內(nèi)容方面,BS對(duì)結(jié)構(gòu)內(nèi)容的控制基本是有類來(lái)控制，比如對(duì)結(jié)構(gòu)的控制就是

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
     這一塊div的類名中，是由col-md-4,col-xs-6這兩個(gè)類名來(lái)控制他的框架寬度；其中col代表是柵格,md代表客戶端顯示器的寬度為pc中屏，同樣的xs則代表客戶端顯示器為超小屏，也就是手機(jī)屏；4，6就代表了柵格的長(zhǎng)度，意思就是在中屏顯示器下寬度為4個(gè)柵格，在手機(jī)端寬度為6個(gè)柵格 ，一般情況下把把一整塊div最多可以劃成12個(gè)柵格，所以他的兄弟div在中屏下則是8個(gè)柵格！ 
   </div>
   <div class="col-md-8  text-muted">這一塊div的類名中，拋去col-md-8不說(shuō)，來(lái)說(shuō)說(shuō)text-muted.這個(gè)類則是控制這個(gè)div下的內(nèi)容字體顏色的，當(dāng)你把BS的css下載到本地后，你在css我文件中搜索text-muted，就會(huì)看到他的定義只有顏色，和他在一起的其他類名就分別定義了不同的顏色 </div>
  </div>
</div>

2.結(jié)構(gòu)上面說(shuō)完了，那就說(shuō)說(shuō)頁(yè)面中具體的一些組件，先說(shuō)說(shuō)導(dǎo)航吧，原先我們自己制作導(dǎo)航是由一個(gè)基本的內(nèi)聯(lián)ul組成（以下css在BS中可以實(shí)現(xiàn)），

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

但在BS中，則有nav這個(gè)類來(lái)實(shí)現(xiàn)，但是nav這個(gè)類需要和其他類合用才能讓頁(yè)面效果發(fā)揮出來(lái)，譬如說(shuō)nav-pills和nav-tabs,如果是垂直導(dǎo)航的話則在類名中加入nav-stacked

<ul class="nav nav-pill">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

3.說(shuō)完導(dǎo)航條再來(lái)說(shuō)說(shuō)下拉菜單，BS中的下拉菜單得依靠它自帶的一個(gè)js文件來(lái)實(shí)現(xiàn)，而它本身的js還依靠了JQuery,所以這兩個(gè)文件是必備的。值得說(shuō)明的是關(guān)于這個(gè)下拉菜單代碼方面有點(diǎn)復(fù)雜，button中的data-toggle="dropdown"必須和外層的div類名相同。

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜單
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
 </ul>
</div>

4.貌似該說(shuō)說(shuō)表單了，在Bootstrap框架中，通過(guò)定制了一個(gè)類名`form-control`，也就是說(shuō)，如果這幾個(gè)元素使用了類名“form-control”，將會(huì)實(shí)現(xiàn)一些設(shè)計(jì)上的定制效果。

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">郵箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請(qǐng)輸入您的郵箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密碼</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請(qǐng)輸入您的郵箱密碼">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> 記住密碼
  </label>
 </div>
 <button type="submit" class="btn btn-default">進(jìn)入郵箱</button>
</form>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡

您可能感興趣的文章: