初步使用bootstrap快速創(chuàng)建頁(yè)面
1. 安裝bower前端包管理器
bower是一個(gè)前端軟件包管理器,便于安裝、更新以及卸載javascript,css,html等框架資源,并解決之間的相互依賴關(guān)系。
npm install -g bower // 安裝 bower help // 查看幫助
這里YY一下:
npm是node.js的包管理器,通過(guò)它安裝了express,express-generator,supervisor,bower等等軟件,bower又是前端框架的軟件包,安裝了bootstrap以及jquery等一些依賴包。突然發(fā)現(xiàn)簡(jiǎn)直是包包相扣啊,漸漸的醉了。其中的水實(shí)在是太深了,想簡(jiǎn)單學(xué)個(gè)web開(kāi)發(fā)也不是那么容易的事啊,有種淡淡的憂傷。然并卵,心向往之,一如既往。
2. 安裝bootstrap以及jquery
當(dāng)然你也可以直接將bootstrap以及jquery下載下來(lái),放入項(xiàng)目文檔中,不用安裝什么包管理器,自己解決簡(jiǎn)單的依賴關(guān)系就OK了,但是不都是為了快速建站嘛,裝個(gè)包管理器自動(dòng)解決依賴關(guān)系。并且在發(fā)布自己的項(xiàng)目的時(shí)候,也不需要將所有的框架包一塊發(fā)布,而只需將相關(guān)的json文件放到項(xiàng)目里就可以了,別人一目了然你的依賴關(guān)系,便于快速搭建。
有了bower,直接bower install bootstrap就OK了,因?yàn)橐蕾囮P(guān)系,它會(huì)自動(dòng)給你裝上jquery,完事。
3. 模板引擎中引入bootstrap以及jquery
安裝好了或者說(shuō)項(xiàng)目中已經(jīng)放置好了bootstrap和jquery之后,接下來(lái)就是在文件中引用它,在views文件夾中創(chuàng)建一個(gè)head.jade文件,顧名思義就是放置HTML中head標(biāo)簽里面的一些內(nèi)容。如下代碼:
link(href='/bootstrap/dist/css/bootstrap.min.css',rel='stylesheet') script(src='/jquery/dist/jquery.min.js') script(src='/bootstrap/dist/js/bootstrap.min.js')
創(chuàng)建完head.jade后,接下來(lái)在所有需要的頁(yè)面中,加上include head.jade包含到頁(yè)面中就OK了。
4. 使用模版布局
由于基本上所有的頁(yè)面都需要包含head.jade,總不能每個(gè)頁(yè)面都寫上include head.jade 吧,于是布局文檔layout.jade就要起作用了。單獨(dú)創(chuàng)建layout.jade文件,將一些共性的代碼寫進(jìn)去。
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') include ./includes/head body include ./includes/header h1= title block content
如上,一些獨(dú)立的模塊依然可以通過(guò)include語(yǔ)句進(jìn)行加載,最后一句block content就是模版布局的關(guān)鍵,意思就是在模版的此處插入頁(yè)面,也就是應(yīng)用此模版布局的差異處。
然后在應(yīng)用此模版布局的頁(yè)面中,加上extent layout就OK了。如下:
extends ../layout block content p Welcome to #{title}
注意:extends模版文件以及include代碼中使用文件盡量使用相對(duì)路徑。
5. 開(kāi)始編輯頁(yè)面
準(zhǔn)備工作都做得差不多了,那么接下來(lái)就是使用jade語(yǔ)法以及bootstrap樣式來(lái)編輯頁(yè)面了。下面簡(jiǎn)單大致寫個(gè)首頁(yè)(index)以及詳情頁(yè)(detail)。
// index.jade extends ../layout block content .container .row h1= title small 圖書(shū)列表 each item in books .col-md-3.col-xm-6 .thumbnail.text-center a(href='/books/#{item._id}') img(src='#{item.poster}',alt='#{item.title}') .caption h3= item.title .btn-group a.btn.btn-primary(href='/books/#{item._id}') 查看詳情 a.btn.btn-primary(href='#{item.buyUrl}') 購(gòu)買書(shū)籍
// detail.jade extends ../layout block content .container .row h1= title small= book_title .col-md-9.col-sm-9 .thumbnail img(src='#{book_poster}') .caption p= book_info a.btn.btn-primary(href='#{book_buyUrl}') 購(gòu)買書(shū)籍 .col-md-3.col-sm-3 h3 作者 p #{book_author} h3 出版年月 p #{book_year}年 h3 頁(yè)數(shù) p #{book_pages}頁(yè) h3 定價(jià) p ¥#{book_price}
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
上面兩個(gè)頁(yè)面是bootstrap里最基本的布局,文章就為大家介紹到這,感興趣的朋友可以繼續(xù)研究,共同探討。
- 頁(yè)面遮罩層,并且阻止頁(yè)面body滾動(dòng)。bootstrap模態(tài)框原理
- 解決bootstrap中modal遇到Esc鍵無(wú)法關(guān)閉頁(yè)面
- 第二章之Bootstrap 頁(yè)面排版樣式
- Bootstrap框架動(dòng)態(tài)生成Web頁(yè)面文章內(nèi)目錄的方法
- 全面解析bootstrap格子布局
- 使用Bootstrap框架制作查詢頁(yè)面的界面實(shí)例代碼
- Bootstrap布局方式詳解
- Bootstrap表單布局樣式代碼
- Bootstrap布局組件教程之Bootstrap下拉菜單
- Bootstrap頁(yè)面布局基礎(chǔ)知識(shí)全面解析
相關(guān)文章
js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法
這篇文章主要介紹了js操作css屬性實(shí)現(xiàn)div層展開(kāi)關(guān)閉效果的方法,涉及javaScript操作css樣式實(shí)現(xiàn)div彈出層的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼
用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼,需要的朋友可以參考一下2007-03-03npm script和package-lock.json使用示例詳解
這篇文章主要為大家介紹了npm script和package-lock.json使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02復(fù)制小說(shuō)文本時(shí)出現(xiàn)的隨機(jī)亂碼的去除方法
想把小說(shuō)復(fù)制下來(lái)慢慢看,卻發(fā)現(xiàn)復(fù)制到記事本里出現(xiàn)一大堆亂七八糟的東西,很是不爽。于是就想了個(gè)簡(jiǎn)單的辦法把它干掉了。2010-09-09使用JavaScript實(shí)現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼
鏈表(Linked list)是一種常見(jiàn)的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu),是一種線性表,但是并不會(huì)按線性的順序存儲(chǔ)數(shù)據(jù),而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針(Pointer) 。下面我們用 JavaScript 代碼對(duì)鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)2017-08-08webpack配置文件外置的兩種實(shí)現(xiàn)方式
webpack配置環(huán)境變量文件,是根據(jù)打包命令尋找對(duì)應(yīng)的環(huán)境變量文件,從而獲取接口地址,本文就來(lái)介紹一下webpack配置文件外置的兩種實(shí)現(xiàn)方式,感興趣的可以了解一下2023-12-12最簡(jiǎn)短的拖動(dòng)對(duì)象代碼實(shí)例演示
最簡(jiǎn)短的拖動(dòng)對(duì)象代碼實(shí)例演示...2006-11-11javascript 支持鏈?zhǔn)秸{(diào)用的異步調(diào)用框架Async.Operation
javascript 支持鏈?zhǔn)秸{(diào)用的異步調(diào)用框架Async.Operation2009-08-08JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音的庫(kù)文件示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音的庫(kù)文件,結(jié)合具體實(shí)例分析了JSPinyin庫(kù)文件與簡(jiǎn)單使用技巧,需要的朋友可以參考下2016-12-12