Bootstrap零基礎(chǔ)入門教程(二)
什么是 Bootstrap?
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
本文重點給大家介紹Bootstrap零基礎(chǔ)入門教程(二),具體詳情如下所示:
過程中會頻繁查閱資料的網(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/ 這個其實跟W3school差不多,但是比W3school要全要雜一點,好多內(nèi)容都是從原版W3C英文網(wǎng)站和原版BootStrap官方英文文檔翻譯過來,但是我感覺他的翻譯質(zhì)量要更高(因為前兩個網(wǎng)站說白了也是翻譯過來的),有些Case更加好懂。
閑話不多說,讓我們開始:
(1) 明確實現(xiàn)目標(biāo)
如下圖所示,這就是咱們要實現(xiàn)的一個簡單網(wǎng)站。布局簡單,也沒有很炫的效果。但是要實現(xiàn)一個功能:從Json文件(關(guān)于Json的知識可以到上述網(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" } } }
即:
布局:
為三大塊:第一行左邊為班級列表,第一行右邊為同學(xué)姓名列表,第二行為同學(xué)相關(guān)信息。
功能:
1.點擊班級列表中的某一個班級,可以動態(tài)地在同學(xué)列表中更新這個班級中有哪些同學(xué),并且可以實現(xiàn)班級的復(fù)選。
2.點擊同學(xué)列表中的某一個同學(xué),動態(tài)的在第二行顯示該同學(xué)的信息,每次只能顯示一個同學(xué)的信息。
(2)分析需要用到的技術(shù)
布局:
BootStrap:用來實現(xiàn)這種簡單的兩行布局,以及Class列的復(fù)選,以及滾動條(有些直接用BootStrap很好實現(xiàn),有些則不能。如何知道?去上述三個網(wǎng)站里去找,去查)
功能:
用Javascript和Ajax來實現(xiàn)數(shù)據(jù)的獲取和動態(tài)的交互(以局部刷新的方式)。
(3)技術(shù)選型分析
1. 實現(xiàn)布局。
通過查閱文檔(http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html),我發(fā)現(xiàn)了Bootstrap是用柵格系統(tǒng)布局的,通過給div 設(shè)置特定的class屬性可以實現(xiàn)我想要的布局效果。并且可以給手機、平板、臺式電腦設(shè)置不一樣的效果。關(guān)于HTML標(biāo)簽的class屬性,以及什么是HTML標(biāo)簽可以在W3SCHOOL上查到。
值得注意的一點是:元素的class屬性可以有多個。
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時游刃有余。
2.實現(xiàn)Class編號垂直排列以及多選。
查閱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 知道了如何讓按鈕組實現(xiàn)復(fù)選。通過向class屬性為 btn-group的DIV 添加 data 屬性 data-toggle="buttons" 來實現(xiàn)。
3.實現(xiàn)按鈕邊角由圓角重新定義為直角,給按鈕組加滾動條,以及給按鈕上顯示的文字加上限制,使其不超出按鈕,超出的部分以”…”顯示,并且當(dāng)鼠標(biāo)移動停在按鈕上的時候,顯示全部文字:
少部分(圓角變直角,鼠標(biāo)懸停顯示文字)需要直接在HTML標(biāo)簽里設(shè)置style和title屬性。
大部分的實現(xiàn),是寫了個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)簽,然后在花括號里設(shè)置相應(yīng)的樣式。
所謂CSS選擇器,就是上述代碼中的“#btn-group-vertical-classes”和“button”,即花括號上面的一行代碼。CSS選擇器有多重使用方法,可以通過W3SCHOOL網(wǎng)站查到相關(guān)方法。
因為CSS樣式表有三種加載方式(CSS文件;<head>里的<style>標(biāo)簽,HTML元素里的style屬性,生效優(yōu)先級順序為: “元素上的style” > “文件頭上的style元素” >“外部樣式文件”,),我們又引用了BootStrap的CSS,所以會涉及到覆寫問題,就是說有些CSS樣式你在head里的<style>標(biāo)簽里設(shè)置好了,但是它不work(例如上述<style>里button的border-radius設(shè)置不work)。從“一定會work”和“耦合度最低(即最方便修改)”的角度,此時推薦兩種方法:
<1> 直接在元素標(biāo)簽里寫style屬性。這是最優(yōu)先的,所以一定會work。
<2> 修改你鏈接的BootStrap CSS文件,一勞永逸,以后加入了新的元素,也不用一個個重新寫style屬性。這里要求你一定要把CSS文件下載下來,而不是引用鏈接。
由于我們這個網(wǎng)頁很小,所以我采取了方法一。
4.用Ajax實現(xiàn)數(shù)據(jù)獲取、交互和動態(tài)加載。
問我怎么知道用Ajax? 百度去搜,或者問會前端技術(shù)的人。
Ajax最核心的地方在于可以局部刷新,而不用整個頁面都刷新。這里還是先查閱Ajax技術(shù)的相關(guān)文檔(上面三個網(wǎng)站,以及各種百度)。由于要從Json文件里取數(shù)據(jù),所以參考了Jquery(因為BootStrap的JS是基于Jquery的,所Jquery的方法都work,這個知識點也是我搜資料的時候搜到的)的Ajax手冊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ù)作為解析的方法。
代碼實現(xiàn)的話,主要牽扯到遍歷(for語句)、判斷(if語句),以及對HTML元素的操作,添加子元素,修改屬性值啥的。
關(guān)于具體頁面怎么寫的,寫的太詳細也沒意思,我直接把代碼貼上來。
跑demo的時候要注意幾點:chrome好像限制了直接在本地讀取文件內(nèi)容,所以你要把整個項目放在Apache的htdocs文件夾里。然后跑起來。關(guān)于Apache如何安裝,我的前面的blog有很詳細的介紹。如何使用,請大家百度吧。
<!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)文章
mpvue 頁面預(yù)加載新增preLoad生命周期的兩種方式
這篇文章主要介紹了mpvue 頁面預(yù)加載新增preLoad生命周期的兩種方式,本文重點給大家講解了第一種方式,需要的朋友可以參考下2019-10-10JavaScript獲取當(dāng)前運行腳本文件所在目錄的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前運行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02js實現(xiàn)網(wǎng)頁檢測是否安裝了 Flash Player 插件
js實現(xiàn)網(wǎng)頁檢測是否安裝了 Flash Player 插件...2007-08-08