萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Bootstrap基礎學習

Bootstrap基礎學習

  Bootstrap是一個基於柵格結構的前端結構框架(當然也有JS,JQuery),它的優點是內容框架能夠迅速搭建起來,基於媒介查詢可以使搭建的頁面迅速的適應不同的用戶端,無論是手機,平板,還是PC,基本上都能自適應,當然新版本已經開始不支持IE6了,對IE8的支持也很有限,畢竟IE8對HTML5的支持不太好,(說實話,我自己也不喜歡IE6~8,對於我這種初級選手來說,兼容性有時候真費勁,不僅項目上要用,連面試也要用,有沒有搞錯嘛,遇到了,上網查一下不就行了。發個牢騷,該會的還是得會啊!!!)

  閒言碎語不多講,開始總結自己這段時間BS筆記!

  1.在結構內容方面,BS對結構內容的控制基本是有類來控制,比如對結構的控制就是

? 1 2 3 4 5 6 7 8 <div class="container"> <div class="row"> <div class="col-md-4 col-xs-6"> 這一塊div的類名中,是由col-md-4,col-xs-6這兩個類名來控制他的框架寬度;其中col代表是柵格,md代表客戶端顯示器的寬度為pc中屏,同樣的xs則代表客戶端顯示器為超小屏,也就是手機屏;4,6就代表了柵格的長度,意思就是在中屏顯示器下寬度為4個柵格,在手機端寬度為6個柵格 ,一般情況下把把一整塊div最多可以劃成12個柵格,所以他的兄弟div在中屏下則是8個柵格! </div> <div class="col-md-8 text-muted">這一塊div的類名中,拋去col-md-8不說,來說說text-muted.這個類則是控制這個div下的內容字體顏色的,當你把BS的css下載到本地後,你在css我文件中搜索text-muted,就會看到他的定義只有顏色,和他在一起的其他類名就分別定義了不同的顏色 </div> </div> </div>

2.結構上面說完了,那就說說頁面中具體的一些組件,先說說導航吧,原先我們自己制作導航是由一個基本的內聯ul組成(以下css在BS中可以實現),

? 1 2 3 4 5 6 7 <ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>

但在BS中,則有nav這個類來實現,但是nav這個類需要和其他類合用才能讓頁面效果發揮出來,譬如說nav-pills和nav-tabs,如果是垂直導航的話則在類名中加入nav-stacked

? 1 2 3 4 5 6 7 <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.說完導航條再來說說下拉菜單,BS中的下拉菜單得依靠它自帶的一個js文件來實現,而它本身的js還依靠了JQuery,所以這兩個文件是必備的。值得說明的是關於這個下拉菜單代碼方面有點復雜,button中的data-toggle="dropdown"必須和外層的div類名相同。

? 1 2 3 4 5 6 7 8 9 10 11 12 <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="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>

        4.貌似該說說表單了,在Bootstrap框架中,通過定制了一個類名`form-control`,也就是說,如果這幾個元素使用了類名“form-control”,將會實現一些設計上的定制效果。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">郵箱:</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的郵箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼"> </div> <div class="checkbox"> <label> <input type="checkbox"> 記住密碼 </label> </div> <button type="submit" class="btn btn-default">進入郵箱</button> </form>

        以上所述就是本文的全部內容了,希望大家能夠喜歡

copyright © 萬盛學電腦網 all rights reserved