Bootstrap基本布局實(shí)現(xiàn)方法詳解
看到了一篇 20 分鐘打造 Bootstrap 站點(diǎn)的文章，內(nèi)容有點(diǎn)老，重新使用 Bootstrap3 實(shí)現(xiàn)一下，將涉及的內(nèi)容也盡可能詳細(xì)說(shuō)明。
1. 創(chuàng)建基本的頁(yè)面
我們先創(chuàng)建一個(gè)基本的 HTML 模板頁(yè)面，使用 sublime + emmet 可以直接創(chuàng)建這個(gè)頁(yè)面。
1.1 新建一個(gè)文件， Ctrl + N
1.2 保存到頁(yè)面文件中，Ctrl + S，命名為 index.html
1.3 在這個(gè)空白頁(yè)面中，輸入 html:5，然后直接按制表鍵 Tab，就應(yīng)該可以看到一個(gè)基本的 HTML5 模板頁(yè)面了。
1.4 再次保存，按 Ctrl + S.
頁(yè)面內(nèi)容應(yīng)該如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. 添加 Bootstrap 文件引用
在 index.html 文件所在的文件夾中，創(chuàng)建 css 文件夾，用來(lái)保存所有的樣式文件，在 css 子文件夾中創(chuàng)建一個(gè)名為 bootstrap 的文件夾，用來(lái)保存我們的 bootstrap 文件。
從 bootstrap 官網(wǎng)可以下載到 bootstrap 的包，其中有一個(gè) dist 的文件夾，這個(gè)文件夾中包含了三個(gè)子文件夾：css, font 和 js。將這三個(gè)子文件夾復(fù)制到你的 css/bootstrap 文件夾中。
在頁(yè)面中會(huì)涉及兩部分內(nèi)容，樣式和腳本。
2.1 添加樣式引用
在 header 中添加 bootstrap 的樣式引用。注意路徑。
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css 是 bootstrap 的樣式文件，包含了所有的 bootstrap 樣式定義，bootstrap-theme.min.css 則是主題定義。
2.2 添加腳本引用
由于 bootstrap 使用了 jQuery 的腳本，所以，你還需要下載 jquery 腳本庫(kù)。
在你的 index.html 文件所在目錄中，創(chuàng)建一個(gè)名為 lib 的子目錄，用來(lái)保存以后使用的腳本庫(kù)，將下載得到的 jquery.min.js 復(fù)制到這個(gè)目錄中。
在緊鄰你的 </body> 之間添加 jquery 和 bootstrap 腳本庫(kù)引用。
<script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
3. 添加 bootstrap 容器
bootstrap的 .container 類(lèi)是非常有用的，它能在頁(yè)面中創(chuàng)建一個(gè)居中的區(qū)域，然后我們能夠把其他位置的內(nèi)容放到里面。container類(lèi)等價(jià)于創(chuàng)建了一個(gè)具有靜態(tài)寬度并且magin值為auto的一個(gè)居中的div框。twitter bootstrap的 container類(lèi)的優(yōu)點(diǎn)在于它是響應(yīng)式的，它會(huì)以當(dāng)前屏幕的寬度為基礎(chǔ)計(jì)算出最佳的寬度予以使用。
.container-fluid 則是一個(gè)全寬的容器，使用整個(gè)寬度。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
在body標(biāo)簽中，使用container類(lèi)創(chuàng)建一個(gè)div。它會(huì)作為頁(yè)面主要的放置其他代碼的外層包裹.
順便還可以添加一個(gè) title，現(xiàn)在你的頁(yè)面應(yīng)該是這樣的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title> <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/> </head> <body> <div class="container"> </div> <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body> </html>
雖然現(xiàn)在在瀏覽器中還看不到什么內(nèi)容，但是，已經(jīng)為后面的操作打好了基礎(chǔ)。
4. 標(biāo)題和導(dǎo)航
現(xiàn)在我們可以為頁(yè)面添加一些可見(jiàn)的內(nèi)容了。
4.1 標(biāo)題
添加標(biāo)題非常簡(jiǎn)單，直接添加一個(gè) h1 元素就可以了。
<div class="container"> <h1>Twitter bootstrap tutorial</h1> </div>
刷新頁(yè)面應(yīng)該看到一個(gè)醒目的標(biāo)題了。下面我們看導(dǎo)航。
4.2 導(dǎo)航
使用 nav 元素可以創(chuàng)建導(dǎo)航，而且我們希望創(chuàng)建一個(gè)導(dǎo)航條來(lái)組織導(dǎo)航項(xiàng)目，在 bootstrap 中，導(dǎo)航條稱(chēng)為 navbar，繼續(xù)在容器中添加導(dǎo)航條。
<div class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> </nav> </div>
navbar 會(huì)幫助我們創(chuàng)建導(dǎo)航條，默認(rèn)是白色的底色，navbar-inverse 設(shè)置反白，這樣底色會(huì)是黑色，文字會(huì)是白色，比較醒目。現(xiàn)在刷新頁(yè)面，你會(huì)看到一個(gè)黑色的導(dǎo)航條，里面還沒(méi)有任何導(dǎo)航內(nèi)容。
添加導(dǎo)航內(nèi)容如下
<div class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </div> </nav> </div>
ul 是實(shí)際的導(dǎo)航內(nèi)容，其中的 .nav 說(shuō)明這是一組導(dǎo)航，.navbar-nav 說(shuō)明是用于 navbar 中的導(dǎo)航。li 則是實(shí)際的導(dǎo)航項(xiàng)目，可以使用 .active 用來(lái)說(shuō)明當(dāng)前活動(dòng)的導(dǎo)航。
注意 .navbar-collapse，它是說(shuō)在視口的寬度小于 768px 的時(shí)候，將導(dǎo)航變成垂直方向。
大于 768px
小于 768px
4.3 三明治菜單
變成垂直的導(dǎo)航也不方便，我們希望成為流行的樣式，比如這樣。
我們需要額外做一些工作，一方面，我們需要說(shuō)明，在視口小于一定寬度的時(shí)候，顯示出來(lái)我們的特定的導(dǎo)航，添加額外的導(dǎo)航內(nèi)容。
<!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>
其實(shí)里面是兩部分組成的，button 部分看起來(lái)很多，就是用來(lái)畫(huà)出右面的三明治按鈕。后面的 a 元素則是左邊的導(dǎo)航。
通常它不會(huì)顯示出來(lái)。
然后，我們需要制定點(diǎn)擊三明治按鈕的時(shí)候，需要顯示我們?cè)瓉?lái)的導(dǎo)航。button 元素中，我們有一個(gè) attribute ，data-target="#navbar-menu" ，就是用來(lái)完成這一步工作的，這個(gè) #navbar-menu 就是我們?yōu)樵瓉?lái)的導(dǎo)航所起的 id 標(biāo)識(shí)。
這樣，我們的導(dǎo)航就是這樣的了。
<h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div id="navbar-menu" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </div> </nav> </div>
5. 內(nèi)容和邊欄
主要內(nèi)容部分，我們使用 div 來(lái)進(jìn)行布局。
<div id="content" class="row-fluid"> <div class="col-md-9"> <h2>Main Content Section</h2> </div> <div class="col-md-3"> <h2>Sidebar</h2> </div> </div>
這里使用了 bootstrap 的柵格布局，柵格系統(tǒng)利用了12列的布局，這意味著一個(gè)頁(yè)面可以被分割成12個(gè)相同的列。下面這張從bootstrap官方文檔中拿到的圖片給出了一個(gè)很好的展示。
這張表格則給出了詳細(xì)的說(shuō)明。
現(xiàn)在頁(yè)面看起來(lái)是這樣的。
6. 側(cè)邊欄導(dǎo)航
在側(cè)邊欄中添加一些導(dǎo)航內(nèi)容。這里就是普通的導(dǎo)航，使用 .nav 進(jìn)行聲明，.nav-tabs 和 .nav-stacked 是導(dǎo)航的外觀。
<div class="col-md-3"> <h2>Sidebar</h2> <ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul> </div>
看看最終的效果，一個(gè)基于 bootstrap 的響應(yīng)式布局頁(yè)面就完成了。
7. 參考資料
1. 20 分鐘打造你的 Bootstrap 站點(diǎn)
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6字符串模板，剩余參數(shù)，默認(rèn)參數(shù)功能與用法示例
這篇文章主要介紹了ES6字符串模板，剩余參數(shù)，默認(rèn)參數(shù)功能與用法,結(jié)合具體實(shí)例形式分析了ECMAScript6中的6字符串模板，剩余參數(shù)，默認(rèn)參數(shù)的概念、作用、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
js arguments,jcallee caller用法總結(jié)
這篇文章主要介紹了js中arguments, jcallee caller用法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
原生JS實(shí)現(xiàn)表單checkbook獲取已選擇的值
本文為大家介紹下采用原生JS實(shí)現(xiàn)從一個(gè)表單checkbox獲取到已選中的數(shù)據(jù)值，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
javascript+ajax實(shí)現(xiàn)產(chǎn)品頁(yè)面加載信息
本文給大家分享的是使用javascript結(jié)合ajax實(shí)現(xiàn)產(chǎn)品頁(yè)面無(wú)刷新加載信息的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
JavaScript中的回調(diào)函數(shù)實(shí)例講解
今天小編就為大家分享一篇關(guān)于JavaScript中的回調(diào)函數(shù)實(shí)例講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
JS實(shí)現(xiàn)的用來(lái)對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實(shí)現(xiàn)的用來(lái)對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫(xiě),需要的朋友可以參考下2014-09-09
JavaScript判斷兩個(gè)對(duì)象是否相等的方法總結(jié)
判斷兩個(gè)對(duì)象是否相等是js中的一個(gè)很常見(jiàn)的內(nèi)容,不同的編程語(yǔ)言和環(huán)境可能會(huì)有不同的方式來(lái)實(shí)現(xiàn)這一目標(biāo),在 JavaScript 中,判斷兩個(gè)對(duì)象是否相等主要有以下幾種方法,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-08-08
利用JavaScript檢測(cè)CPU使用率自己寫(xiě)的
這篇文章主要介紹了自己寫(xiě)的一個(gè)利用JavaScript檢測(cè)CPU使用率的方法,需要的朋友可以參考下2014-03-03
button沒(méi)寫(xiě)type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交
點(diǎn)擊了一個(gè)彈窗中的按鈕，想到彈窗消失了，經(jīng)測(cè)試后發(fā)現(xiàn)button 沒(méi)寫(xiě)type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交2014-03-03
javascript 流暢動(dòng)畫(huà)實(shí)現(xiàn)原理
瀏覽器目前來(lái)說(shuō)是沒(méi)有抗鋸齒效果的(將來(lái)不一定哦)，這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。2009-09-09