什么是 Bootstrap？

Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開(kāi)發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開(kāi)源產(chǎn)品。

寫到這里，這篇從零開(kāi)始學(xué)Bootstrap（3）我想寫以下幾個(gè)內(nèi)容：

1. 基于我對(duì)Bootstrap的理解，做一個(gè)小小的總結(jié)。

2. 對(duì)從零開(kāi)始學(xué)Bootstrap（2）例子進(jìn)行UI美化和代碼優(yōu)化，主要是說(shuō)說(shuō)我是怎么做出自己想要的效果的。

3. 授人以魚不如授人以漁，以自己的例子（因?yàn)樽约阂彩切率?，寫出?lái)的東西可能更適合初學(xué)者），講講代碼編寫過(guò)程中遇到的坑和需要注意的點(diǎn)。

廢話不多說(shuō)，下面開(kāi)始：

一、 Bootstrap的小小總結(jié)

基于以Bootstrap的官方文檔（http://v3.bootcss.com/）的說(shuō)明，Bootstrap分為三個(gè)大塊：CSS樣式，組件，Javascript插件。

首先要明確一點(diǎn)：Bootstrap是一個(gè)框架，意思就是別人造好了輪子，你可以直接拿來(lái)用，免去了自己去造輪子。所以咱們需要明確兩點(diǎn)：這些輪子是什么樣的輪子，怎么樣去使用這些輪子。

1. CSS樣式：主要介紹了柵格系統(tǒng)和Bootstrap的全局樣式。通過(guò)設(shè)定Class的值實(shí)現(xiàn)。

　　1.1柵格系統(tǒng)：

　　讓我們可以很方便的實(shí)現(xiàn)HTML頁(yè)面的布局(http://v3.bootcss.com/css/#grid)。

　　我覺(jué)得柵格系統(tǒng)很重要。因?yàn)镠TML頁(yè)面的布局是很重要也很繁瑣的一項(xiàng)任務(wù)（你看一下W3School里關(guān)于布局的介紹http://www.w3school.com.cn/html/html_layout.asp，看一下例子里的代碼，就明白了），并且需要考慮到不同瀏覽器、不同設(shè)備的兼容性。

　　柵格系統(tǒng)把這一切大大簡(jiǎn)化了。打開(kāi)上面關(guān)于柵格系統(tǒng)的連接，你會(huì)發(fā)現(xiàn)只需要根據(jù)你想要實(shí)現(xiàn)的效果，給HTML元素Class屬性賦相應(yīng)的值，就可以實(shí)現(xiàn)，并且還能設(shè)置針對(duì)不同屏幕大小的設(shè)備展現(xiàn)不同的效果。

　　1.2 Bootstrap全局樣式：

　　也就是Bootstrap對(duì)常用HTML元素（eg: DIV、Button、 P、 Table、 Img等等）是怎樣美化的。通過(guò)給HTML元素的Class屬性賦相應(yīng)的值，就可以得到自己想要的效果。

　　舉一個(gè)最簡(jiǎn)單的例子：

如上圖所示，Bootstrap可以讓你僅僅改變Button元素的class的值就是改變按鈕的大小，而不用很麻煩的去修改css文件，或者給元素內(nèi)嵌style的值。

2. 組件：我認(rèn)為組件就是Bootstrap把一些元素（HTML元素和Javascript代碼）組合起來(lái)，就變成了組件，并且提供了很多很好看很實(shí)用的圖標(biāo)。這些組件基本都是HTML開(kāi)發(fā)過(guò)程中常用的。通過(guò)設(shè)定Class的值實(shí)現(xiàn)。(http://v3.bootcss.com/components/)

舉一個(gè)最簡(jiǎn)單的例子：

如上圖所示，當(dāng)我們需要實(shí)現(xiàn)導(dǎo)航功能的時(shí)候。找到Boostrap里相應(yīng)的組件，依照其給的代碼模板，根據(jù)自己的需求，賦相應(yīng)的class和ul、li值就可以了

3. Javascript插件：我認(rèn)為Bootstrap的Javascript插件就是封裝了常用網(wǎng)頁(yè)交互功能的”輪子”。只需要設(shè)定class屬性和data屬性就可以實(shí)現(xiàn)常用的網(wǎng)頁(yè)交互功能，而不用自己寫一大堆javascript代碼。

首先說(shuō)一個(gè)小插曲，新手可能誤以為”javascript”和”java”有著很深的聯(lián)系，甚至?xí)J(rèn)為javascript是java的變種。其實(shí)并不是這樣，javascript是網(wǎng)景(Netscape)公司開(kāi)發(fā)的應(yīng)用于互聯(lián)網(wǎng)的腳本語(yǔ)言，其實(shí)它最先的名字”是livescript”，后來(lái)網(wǎng)景公司與Sun公司(也就是發(fā)明Java的公司，后來(lái)被Oracle收購(gòu))達(dá)成合作，當(dāng)時(shí)Java語(yǔ)言如日中天，名氣很大，為了搭順風(fēng)車，就把livesript改名為javascript。以至于有人開(kāi)玩笑：”Java”和”Javascrip”的區(qū)別就好比”雷鋒”和”雷峰塔”的區(qū)別一樣。

言歸正傳，我們知道，Javascript是為了賦予網(wǎng)頁(yè)交互功能而存在的。所以，Bootsript上豐富的Javascript插件能夠讓你很方便的實(shí)現(xiàn)常用的網(wǎng)頁(yè)交互功能，而不用把精力放在”造輪子”上。

如上圖所示，利用Bootstrap的輪播插件(http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html， Bootstrap的官方文檔這里沒(méi)有翻譯成中文，runoob上卻有很詳細(xì)的中文翻譯，并且可以在線修改代碼提交觀察效果，強(qiáng)烈推薦)，你可以很方便的實(shí)現(xiàn)現(xiàn)在很多網(wǎng)站都采用的圖片輪播功能。這里只需要根據(jù)上述鏈接里面的教程，賦相應(yīng)的class和圖片src值就可以了，連data值都不用設(shè)。

二、 對(duì)從零開(kāi)始學(xué)Bootstrap（2）例子進(jìn)行UI美化和代碼優(yōu)化

下圖是上期教程中實(shí)現(xiàn)的效果：

我們可以看到有以下幾個(gè)缺點(diǎn)需要改正：

　　(1) 點(diǎn)擊具體同學(xué)，顯示其信息之后，沒(méi)有處于被選中的狀態(tài)。（你一開(kāi)始點(diǎn)擊，會(huì)處于被選中狀態(tài)，但那只是button的點(diǎn)擊效果，你點(diǎn)一下空白處，被選中的狀態(tài)就消失了）

　　(2) 色彩單調(diào)，不太美觀。

　　(3) 布局方面需要調(diào)整，信息框是呈現(xiàn)我們需要的信息的地方，應(yīng)該盡可能大，最好其顯示的時(shí)候能把不需要的框給隱藏起來(lái)。

　　(4) 對(duì)于代碼方面，對(duì)從零開(kāi)始學(xué)Bootstrap（2）中的Javascript代碼都寫在HTML頁(yè)面里了，并且有重復(fù)的代碼段，應(yīng)該把重復(fù)的代碼段寫成函數(shù)，這樣可以減少代碼體積，再一個(gè)修改代碼的時(shí)候，我直接修改相應(yīng)的函數(shù)就可以了，而不用一個(gè)地方一個(gè)地方的找。Javascript代碼可以寫到JS文件里，實(shí)現(xiàn)HTML頁(yè)面和Javascript代碼的分離。

技術(shù)選型（直白的說(shuō)就是思考怎樣利用Bootstrap框架里已有的東西，實(shí)現(xiàn)想要的效果）：

1、首先調(diào)整布局，把信息框和同學(xué)框調(diào)整在一起，班級(jí)框顯示在最上面。

顯然，我們只需要把信息框所在的DIV和同學(xué)框的DIV放在同一個(gè)row的DIV里，并把修改跟柵格系統(tǒng)相關(guān)的class屬性值”col-md”就可以實(shí)現(xiàn)。比如我們想讓他們2:1的比例顯示，那么信息框的class屬性應(yīng)該有col-md-8，而同學(xué)框的應(yīng)該是col-md-4了。

值得注意的是，前端永遠(yuǎn)不可能是一步到位的開(kāi)發(fā)，往往最開(kāi)始的代碼都不是我們想要的完美結(jié)果，需要細(xì)細(xì)調(diào)整。以下面為例，大家要學(xué)會(huì)自己搜，去嘗試，去不斷的調(diào)整(后面的調(diào)整，具體過(guò)程就不交代了)：

我們修改完代碼后，呈現(xiàn)的效果是下面這樣的：

很明顯的，上面每行只顯示一個(gè)Class，有點(diǎn)浪費(fèi)空間。下面的兩個(gè)部分沒(méi)有對(duì)齊。

把上面DIV組件的class屬性里的”btn-group-vertical”刪掉，把col-md-6添加到j(luò)s代碼里的tmp_button的class屬性中。另外觀察到這樣設(shè)定了之后，第一行與第二行相比有奇怪的縮進(jìn)：

毫無(wú)疑問(wèn)，這種外觀、布局類的變化跟CSS有關(guān)。這時(shí)候我們可以看一下元素具體的CSS。

以Chrome為例：

在這個(gè)元素上點(diǎn)鼠標(biāo)右鍵，選擇Inspect，即審查，你會(huì)在右邊的框里查到相應(yīng)的代碼。通過(guò)比對(duì)，我們發(fā)現(xiàn)是margin-left的問(wèn)題，這個(gè)屬性是bootstrap框架里默認(rèn)的，從上層元素繼承而來(lái)，有的為 -1px，有的為0px，我們只需要改成一樣就可以了，比如都改成0px：

在js代碼里的tmp_button，修改style屬性，添加”margin-left:0px；”，有的人覺(jué)得字體居中不好看，可以添加text-align:left，設(shè)定按鈕上的文字從左邊起。

改正后的效果：

2、添加折疊按鈕，讓用戶可以通過(guò)這個(gè)按鈕隱藏/打開(kāi)class框，點(diǎn)擊classmate顯示詳細(xì)信息的時(shí)候，自動(dòng)隱藏，以把大量的空間省給信息框來(lái)顯示。

添加折疊按鈕可以參考http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html 來(lái)實(shí)現(xiàn)。

另外，我們可以給折疊按鈕加一個(gè)好看的圖標(biāo)，參考http://v3.bootcss.com/components/#glyphicons的教程就可以輕松實(shí)現(xiàn)。

實(shí)現(xiàn)點(diǎn)擊classmate顯示詳細(xì)信息的時(shí)候，自動(dòng)隱藏，需要修改classmate按鈕的點(diǎn)擊事件，即相應(yīng)的js代碼。

我們查看Bootstrap折疊插件的用法http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html（這個(gè)更好，官方的這部分還沒(méi)翻譯好），查到下面的內(nèi)容：

原來(lái)Class屬性里的cllapse和in值控制了隱藏和顯示功能，那我們只需要在按鈕的click事件js代碼里修改相應(yīng)的要進(jìn)行”顯示/隱藏”操作的HTML元素的class屬性就可以了，于是在classmate按鈕的click函數(shù)里添加以下語(yǔ)句就可以了：

$("#collapseOne").attr("class","panel-collapse collapse");

3、修正”點(diǎn)擊具體同學(xué)，顯示其信息之后，沒(méi)有處于被選中的狀態(tài)”的bug。

我們通過(guò)查閱文檔，http://www.runoob.com/bootstrap/bootstrap-button-plugin.html， 給button的data-toggle屬性設(shè)置為”button”，可以使其變成點(diǎn)擊后自動(dòng)呈現(xiàn)被選中的狀態(tài)。

所以我們給classmate的button添加屬性data-toggle=”button”。

此時(shí)又出現(xiàn)了另一個(gè)問(wèn)題，我想接下去點(diǎn)擊其他classmate的時(shí)候，原來(lái)點(diǎn)的還是處于激活狀態(tài)，怎么辦？

通過(guò)查閱http://www.runoob.com/bootstrap/bootstrap-buttons.html, button的class賦值有active時(shí)，才會(huì)呈現(xiàn)被選中的狀態(tài)，也就是說(shuō)，上面的設(shè)定，也就是bootstrap做了這么一件事情：當(dāng)data-toggle=”button”的按鈕被點(diǎn)擊時(shí)，自動(dòng)把a(bǔ)ctive添加到class里，此時(shí)呈現(xiàn)被選中狀態(tài)，當(dāng)再次被點(diǎn)擊時(shí)，自動(dòng)把a(bǔ)ctive從class里移除，就呈現(xiàn)未被選中的狀態(tài)。

也就是說(shuō)，我們只要自己去做這個(gè)操作，比如在點(diǎn)擊classmate時(shí)，我可以把所有的classmate按鈕的active都從class屬性里移除，這樣點(diǎn)擊完成后，只有我最新點(diǎn)擊的Button處于active狀態(tài)。

因此，只需要在classmate按鈕的click函數(shù)里加入這樣的語(yǔ)句：

效果如下圖：

4、美化按鈕外觀

找到bootstrap里CSS關(guān)于按鈕的部分：

http://www.runoob.com/bootstrap/bootstrap-buttons.html

按照教程修改，我這里只是簡(jiǎn)單的修改了一下按鈕的顏色，大家可以按照需求自己改。效果如下圖：

5、 HTML頁(yè)面和Javascript代碼的分離

其實(shí)分為兩步：

第一步：把javascript代碼放到j(luò)s文件里，并在HTML文件里鏈接上。

第二步：把javascript里復(fù)用，或者有明確功能的代碼塊，寫進(jìn)一個(gè)函數(shù)里，直接調(diào)用函數(shù)。

由于這兩步都比較簡(jiǎn)單，任何學(xué)過(guò)編程語(yǔ)言的應(yīng)該都會(huì)。我就不展開(kāi)寫了。

值得注意的是，在鏈接JS文件時(shí)，要注意順序。

比如Bootstrap的JS文件，里面的代碼是基于Jquery寫的，用了很多Jquery的函數(shù)，所以Jquery的JS文件要在Bootstrap的JS文件之前聲明鏈接。

同理，咱們的JS文件時(shí)基于Bootstrap，所以要在Bootstrap之后，不然代碼就不起作用了。

最后國(guó)際慣例，貼一下相關(guān)的代碼：

getClassmate.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>getClassmate</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#btn-group-vertical-classes 
{
overflow-y:auto; 
overflow-x:auto; 
height:100px;
}
#btn-group-vertical-classmates 
{
overflow-y:auto; 
overflow-x:auto; 
height:500px;
}
button
{
text-overflow: ellipsis;
overflow: hidden;
border-radius: 0px;
}
#context_div
{
overflow-y:auto; 
overflow-x:auto; 
height:500px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="text-align:right;">
<a id="collapse_a" data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Click this to show/hide class
</a> 
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row" id="div1-classes-classmates">
<div class="btn-group-lg col-md-12" role="group" aria-label="..." id="btn-group-vertical-classes">
<!-- where classes show-->
</div>
</div>
</div>
</div>
</div>
<br></br>
<div class="row">
<div class="btn-group-vertical btn-group-lg col-md-4 " id="btn-group-vertical-classmates" role="group" aria-label="..."> 
<!-- where classmates show-->
<button type="button" style="border-radius: 0px;" class="btn btn-default">Click class to show classmate.</button>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="jumbotron" id="context_div">
<p>Click classmate to show details.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.0.0.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/script_getClassmate.js"></script>
</body>
</html> 

script_getClassmate.js:

$(document).ready(function(){
$.getJSON("resource/classmates.json",function(result){
$.each(result, function(i, field){
var tmp_button=$('<button type="button" style="border-radius: 0px; text-align:left; margin-left:0px" class="btn btn-default btn-class col-md-6 btn-success" data-toggle="button" chosen_state=0></button>').text(i);
tmp_button.attr("title",i);
$("#btn-group-vertical-classes").append(tmp_button);
});
$(".btn.btn-default.btn-class").click(function(){
var tmp_chosen=Number($(this).attr("chosen_state"))^1;
$(this).attr("chosen_state",String(tmp_chosen));
showClassmates(result);
$(".btn.btn-default.btn-classmate").click(function(){
$(".btn-classmate").attr("class","btn btn-default btn-classmate btn-info");
$("#collapseOne").attr("class","panel-collapse collapse");
var selected_classmate=$(this).text();
showClassmateDetail(result,selected_classmate);
});
});
});
})
function showClassmates(result){
$("#btn-group-vertical-classmates").empty();
var chosen_list=new Array();
$(".btn.btn-default.btn-class").filter(function(){
judgeflag=false;
if($(this).attr("chosen_state")=="1"){
judgeflag=true;
chosen_list.push($(this).text());
}
return judgeflag; 
});
$.each(result,function(i,field){
var chosen_list_x;
for (chosen_list_x in chosen_list){
if(chosen_list[chosen_list_x]==i){
$.each(field,function(j,field2){
var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-classmate btn-info" data-toggle="button" chosen_state=0></button>').text(j);
tmp_button.attr("title",j);
$("#btn-group-vertical-classmates").append(tmp_button);
});
}
}
});
}
function showClassmateDetail(result,selected_classmate){
var classmate_context_item;
$("#context_div").empty();
$.each(result,function(i,field){
$.each(field,function(j,field2){
if(j==selected_classmate){
$.each(field2,function(k,field3){
//alert(k);
//alert(field3);
classmate_context_item=k + ": " + field3;
var tmp_p=$('<p></p>').text(classmate_context_item);
$("#context_div").append(tmp_p);
});
}
});
});
}

classmates.json:

{
"Class 001": {
"Xiao Wang": {
"Gender": "Male",
"Age": "18",
"Interest": "Football",
"Hometown": "Shanghai",
"Chinese": "78",
"Math": "90",
"English": "66",
"Physics": "81",
"Chemistry": "88",
"History": "69",
"Geography": "92"
},
"Xiao Li": {
"Gender": "Male",
"Age": "20",
"Interest": "Basketball",
"Hometown": "Beijing",
"Chinese": "98",
"Math": "77",
"English": "97",
"Physics": "72",
"Chemistry": "73",
"History": "88",
"Geography": "81"
}
},
"Class 002": {
"Xiao Cai": {
"Gender": "Female",
"Age": "19",
"Interest": "Dance",
"Hometown": "Gaoxiong",
"Chinese": "93",
"Math": "80",
"English": "92",
"Physics": "82",
"Chemistry": "77",
"History": "89",
"Geography": "83"
}
},
"Class 003": {
"Xiao Ma": {
"Gender": "Male",
"Age": "18",
"Interest": "Reading",
"Hometown": "Taibei",
"Chinese": "91",
"Math": "93",
"English": "96",
"Physics": "97",
"Chemistry": "100",
"History": "94",
"Geography": "92"
}
},
"Class 005": {
"Xiao Zhang": {
"Gender": "Male",
"Age": "20",
"Interest": "Running",
"Hometown": "Guangzhou",
"Chinese": "67",
"Math": "70",
"English": "66",
"Physics": "80",
"Chemistry": 68,
"History": "79",
"Geography": "93"
}
}
}

以上所述是小編給大家介紹的Bootstrap零基礎(chǔ)入門教程(三)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論