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ù)研究，共同探討。

最新評(píng)論