Bootstrap零基礎(chǔ)入門教程(二)
什么是 Bootstrap？
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
本文重點(diǎn)給大家介紹Bootstrap零基礎(chǔ)入門教程(二)，具體詳情如下所示：
過程中會(huì)頻繁查閱資料的網(wǎng)站：
http://www.w3school.com.cn/ 這是W3C聯(lián)盟為了傳播W3C標(biāo)準(zhǔn)而建立的網(wǎng)站，有很多關(guān)于Web端的技術(shù)，你可以將其看作為一部Web技術(shù)的百科全書。
http://v3.bootcss.com/ 不用多說，BootStrap3官方文檔
http://www.runoob.com/ 這個(gè)其實(shí)跟W3school差不多，但是比W3school要全要雜一點(diǎn)，好多內(nèi)容都是從原版W3C英文網(wǎng)站和原版BootStrap官方英文文檔翻譯過來(lái)，但是我感覺他的翻譯質(zhì)量要更高（因?yàn)榍皟蓚€(gè)網(wǎng)站說白了也是翻譯過來(lái)的），有些Case更加好懂。
閑話不多說，讓我們開始：
（1） 明確實(shí)現(xiàn)目標(biāo)
如下圖所示，這就是咱們要實(shí)現(xiàn)的一個(gè)簡(jiǎn)單網(wǎng)站。布局簡(jiǎn)單，也沒有很炫的效果。但是要實(shí)現(xiàn)一個(gè)功能：從Json文件（關(guān)于Json的知識(shí)可以到上述網(wǎng)站去查）里讀取相關(guān)信息，顯示在網(wǎng)站上。
Json文件內(nèi)容：
{
"Class 001": {
"Xiao Wang": {
"Gender": "Male",
"Age": "18",
"Interest": "Football",
"Hometown": "Shanghai"
},
"Xiao Li": {
"Gender": "Male",
"Age": "20",
"Interest": "Basketball",
"Hometown": "Beijing"
}
},
"Class 002": {
"Xiao Cai": {
"Gender": "Female",
"Age": "19",
"Interest": "Dance",
"Hometown": "Gaoxiong"
}
},
"Class 003": {
"Xiao Ma": {
"Gender": "Male",
"Age": "18",
"Interest": "Reading",
"Hometown": "Taibei"
}
},
"Class 005": {
"Xiao Zhang": {
"Gender": "Male",
"Age": "20",
"Interest": "Running",
"Hometown": "Guangzhou"
}
}
}
即：
布局：
為三大塊：第一行左邊為班級(jí)列表，第一行右邊為同學(xué)姓名列表，第二行為同學(xué)相關(guān)信息。
功能：
1.點(diǎn)擊班級(jí)列表中的某一個(gè)班級(jí)，可以動(dòng)態(tài)地在同學(xué)列表中更新這個(gè)班級(jí)中有哪些同學(xué)，并且可以實(shí)現(xiàn)班級(jí)的復(fù)選。
2.點(diǎn)擊同學(xué)列表中的某一個(gè)同學(xué)，動(dòng)態(tài)的在第二行顯示該同學(xué)的信息，每次只能顯示一個(gè)同學(xué)的信息。
（2）分析需要用到的技術(shù)
布局：
BootStrap：用來(lái)實(shí)現(xiàn)這種簡(jiǎn)單的兩行布局，以及Class列的復(fù)選，以及滾動(dòng)條（有些直接用BootStrap很好實(shí)現(xiàn)，有些則不能。如何知道？去上述三個(gè)網(wǎng)站里去找，去查）
功能：
用Javascript和Ajax來(lái)實(shí)現(xiàn)數(shù)據(jù)的獲取和動(dòng)態(tài)的交互(以局部刷新的方式)。
（3）技術(shù)選型分析
1. 實(shí)現(xiàn)布局。
通過查閱文檔（http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html），我發(fā)現(xiàn)了Bootstrap是用柵格系統(tǒng)布局的，通過給div 設(shè)置特定的class屬性可以實(shí)現(xiàn)我想要的布局效果。并且可以給手機(jī)、平板、臺(tái)式電腦設(shè)置不一樣的效果。關(guān)于HTML標(biāo)簽的class屬性，以及什么是HTML標(biāo)簽可以在W3SCHOOL上查到。
值得注意的一點(diǎn)是：元素的class屬性可以有多個(gè)。
Eg: <div class="btn-group-vertical btn-group-lg col-md-6" role="group" aria-label="..." id="btn-group-vertical-classes">
不同屬性之間用“空格”間隔，相信我 ，這樣能讓你寫Javacript腳本和調(diào)整CSS時(shí)游刃有余。
2.實(shí)現(xiàn)Class編號(hào)垂直排列以及多選。
查閱http://www.runoob.com/bootstrap/bootstrap-button-groups.html 知道了如何設(shè)置垂直的按鈕組。即將按鈕組所在的DIV的class設(shè)置為btn-group-vertical，使之成為存放按鈕組的容器。
查閱http://www.runoob.com/bootstrap/bootstrap-button-plugin.html 知道了如何讓按鈕組實(shí)現(xiàn)復(fù)選。通過向class屬性為 btn-group的DIV 添加 data 屬性 data-toggle="buttons" 來(lái)實(shí)現(xiàn)。
3.實(shí)現(xiàn)按鈕邊角由圓角重新定義為直角，給按鈕組加滾動(dòng)條，以及給按鈕上顯示的文字加上限制，使其不超出按鈕，超出的部分以”…”顯示，并且當(dāng)鼠標(biāo)移動(dòng)停在按鈕上的時(shí)候，顯示全部文字：
少部分（圓角變直角，鼠標(biāo)懸停顯示文字）需要直接在HTML標(biāo)簽里設(shè)置style和title屬性。
大部分的實(shí)現(xiàn)，是寫了個(gè)CSS：
<style type="text/css">
#btn-group-vertical-classes
{
overflow-y:auto;
overflow-x:auto;
height:150px;
}
#btn-group-vertical-classmates
{
overflow-y:auto;
overflow-x:auto;
height:150px;
}
button
{
text-overflow: ellipsis;
overflow: hidden;
border-radius: 0px;
}
</style>
該<style>部分代碼放在head里，即<head>和</head>之間。
大體的方法是先用CSS選擇器選定要設(shè)置CSS的標(biāo)簽，然后在花括號(hào)里設(shè)置相應(yīng)的樣式。
所謂CSS選擇器，就是上述代碼中的“#btn-group-vertical-classes”和“button”，即花括號(hào)上面的一行代碼。CSS選擇器有多重使用方法，可以通過W3SCHOOL網(wǎng)站查到相關(guān)方法。
因?yàn)镃SS樣式表有三種加載方式（CSS文件；<head>里的<style>標(biāo)簽，HTML元素里的style屬性，生效優(yōu)先級(jí)順序?yàn)椋?“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，），我們又引用了BootStrap的CSS，所以會(huì)涉及到覆寫問題，就是說有些CSS樣式你在head里的<style>標(biāo)簽里設(shè)置好了，但是它不work（例如上述<style>里button的border-radius設(shè)置不work）。從“一定會(huì)work”和“耦合度最低(即最方便修改)”的角度，此時(shí)推薦兩種方法：
<1> 直接在元素標(biāo)簽里寫style屬性。這是最優(yōu)先的，所以一定會(huì)work。
<2> 修改你鏈接的BootStrap CSS文件，一勞永逸，以后加入了新的元素，也不用一個(gè)個(gè)重新寫style屬性。這里要求你一定要把CSS文件下載下來(lái)，而不是引用鏈接。
由于我們這個(gè)網(wǎng)頁(yè)很小，所以我采取了方法一。
4．用Ajax實(shí)現(xiàn)數(shù)據(jù)獲取、交互和動(dòng)態(tài)加載。
問我怎么知道用Ajax? 百度去搜，或者問會(huì)前端技術(shù)的人。
Ajax最核心的地方在于可以局部刷新，而不用整個(gè)頁(yè)面都刷新。這里還是先查閱Ajax技術(shù)的相關(guān)文檔（上面三個(gè)網(wǎng)站，以及各種百度）。由于要從Json文件里取數(shù)據(jù)，所以參考了Jquery（因?yàn)锽ootStrap的JS是基于Jquery的，所Jquery的方法都work，這個(gè)知識(shí)點(diǎn)也是我搜資料的時(shí)候搜到的）的Ajax手冊(cè)http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp，選取了getJson函數(shù)，另外，參考http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 選取each函數(shù)作為解析的方法。
代碼實(shí)現(xiàn)的話，主要牽扯到遍歷(for語(yǔ)句)、判斷(if語(yǔ)句)，以及對(duì)HTML元素的操作，添加子元素，修改屬性值啥的。
關(guān)于具體頁(yè)面怎么寫的，寫的太詳細(xì)也沒意思，我直接把代碼貼上來(lái)。
跑demo的時(shí)候要注意幾點(diǎn)：chrome好像限制了直接在本地讀取文件內(nèi)容，所以你要把整個(gè)項(xiàng)目放在Apache的htdocs文件夾里。然后跑起來(lái)。關(guān)于Apache如何安裝，我的前面的blog有很詳細(xì)的介紹。如何使用，請(qǐng)大家百度吧。
<!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:150px;
}
#btn-group-vertical-classmates
{
overflow-y:auto;
overflow-x:auto;
height:150px;
}
button
{
text-overflow: ellipsis;
overflow: hidden;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="container">
<br></br>
<div class="row" id="div1-classes-classmates">
<div class="btn-group-vertical btn-group-lg col-md-6" role="group" aria-label="..." id="btn-group-vertical-classes">
<!-- where classes show-->
</div>
<div class="btn-group-vertical btn-group-lg col-md-6" 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>
<br></br>
<div class="row">
<form role="form">
<div class="form-group">
<div class="col-md-12">
<div class="jumbotron" id="context_div">
<p>Click classmate to show details.</p>
</div>
</div>
</div>
</form>
</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>
$(document).ready(function(){
$.getJSON("resource/classmates.json",function(result){
$.each(result, function(i, field){
var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-class" 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));
$("#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" chosen_state=0></button>').text(j);
tmp_button.attr("title",j);
$("#btn-group-vertical-classmates").append(tmp_button);
});
}
}
});
$(".btn.btn-default.btn-classmate").click(function(){
var selected_classmate=$(this).text();
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){
classmate_context_item=k + ": " + field3;
var tmp_p=$('<p></p>').text(classmate_context_item);
$("#context_div").append(tmp_p);
});
}
});
});
});
});
});
})
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了基于js判斷瀏覽器是否支持webGL,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
簡(jiǎn)單實(shí)現(xiàn)jQuery輪播效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)jQuery輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript針對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查用法實(shí)例
這篇文章主要介紹了JavaScript針對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查用法,實(shí)例分析了JavaScript操作網(wǎng)頁(yè)節(jié)點(diǎn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JS創(chuàng)建對(duì)象的十種方式總結(jié)
面向?qū)ο笫且环N重要的編程范式,如何靈活的創(chuàng)建對(duì)象,是對(duì)編程基本功的考驗(yàn),本來(lái)我們來(lái)探討一下JavaScript中創(chuàng)建對(duì)象的十種方式,感興趣的小伙伴可以了解下2023-10-10
js使用棧來(lái)實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制與取除數(shù)及余數(shù)
這篇文章主要介紹了js使用棧來(lái)實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制、js取除數(shù)、余數(shù),需要的朋友可以參考下2014-06-06
JavaScript塊級(jí)作用域綁定以及狀態(tài)提升詳解
這篇文章主要給大家介紹了關(guān)于JavaScript塊級(jí)作用域綁定以及狀態(tài)提升的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Javascript面試經(jīng)典套路reduce函數(shù)查重
reduce函數(shù)，是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法.下面通過本文給大家分享Javascript面試經(jīng)典套路reduce函數(shù)查重，需要的朋友參考下吧2017-03-03
JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
用js實(shí)現(xiàn)的頁(yè)面關(guān)鍵字密度查詢代碼
2007-12-12
前端實(shí)現(xiàn)文件下載的幾種常用方式總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)文件下載的兩種常用方式,兩種方法均通過創(chuàng)建臨時(shí)URL并觸發(fā)下載實(shí)現(xiàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11