初步使用bootstrap快速创建页面_html/css

初步使用bootstrap快速创建页面_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-21 08:56:39

asal

833 orang telah melayarinya

1. 安装bower前端包管理器

bower是一个前端软件包管理器，便于安装、更新以及卸载javascript，css，html等框架资源，并解决之间的相互依赖关系。

npm install -g bower   // 安装bower help   // 查看帮助

Salin selepas log masuk

这里YY一下：

npm是node.js的包管理器，通过它安装了 express ， express-generator ， supervisor ， bower 等等软件， bower 又是前端框架的软件包，安装了 bootstrap 以及 jquery 等一些依赖包。突然发现简直是包包相扣啊，渐渐的醉了。其中的水实在是太深了，想简单学个web开发也不是那么容易的事啊，有种淡淡的忧伤。然并卵，心向往之，一如既往。

2. 安装bootstrap以及jquery

当然你也可以直接将 bootstrap 以及 jquery 下载下来，放入项目文档中，不用安装什么包管理器，自己解决简单的依赖关系就OK了，但是不都是为了快速建站嘛，装个包管理器自动解决依赖关系。并且在发布自己的项目的时候，也不需要将所有的框架包一块发布，而只需将相关的 json 文件放到项目里就可以了，别人一目了然你的依赖关系，便于快速搭建。

有了 bower ，直接 bower install bootstrap 就OK了，因为依赖关系，它会自动给你装上 jquery ，完事。

3. 模板引擎中引入 bootstrap 以及 jquery

安装好了或者说项目中已经放置好了 bootstrap 和 jquery 之后，接下来就是在文件中引用它，在views文件夹中创建一个 head.jade 文件，顾名思义就是放置HTML中head标签里面的一些内容。如下代码：

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')

Salin selepas log masuk

创建完 head.jade 后，接下来在所有需要的页面中，加上 include head.jade 包含到页面中就OK了。

4. 使用模版布局

由于基本上所有的页面都需要包含 head.jade ，总不能每个页面都写上 include head.jade 吧，于是布局文档 layout.jade 就要起作用了。单独创建 layout.jade 文件，将一些共性的代码写进去。

doctype htmlhtml  head    title= title    link(rel='stylesheet', href='/stylesheets/style.css')    include ./includes/head  body    include ./includes/header    h1= title    block content

Salin selepas log masuk

如上，一些独立的模块依然可以通过 include 语句进行加载，最后一句 block content 就是模版布局的关键，意思就是在模版的此处插入页面，也就是应用此模版布局的差异处。

然后在应用此模版布局的页面中，加上 extent layout 就OK了。如下：

extends ../layoutblock content  p Welcome to #{title}

Salin selepas log masuk

注意： extends 模版文件以及 include 代码中使用文件尽量使用相对路径。

5. 开始编辑页面

准备工作都做得差不多了，那么接下来就是使用 jade 语法以及 bootstrap 样式来编辑页面了。下面简单大致写个首页（index）以及详情页（detail）。

// index.jadeextends ../layoutblock content  .container    .row      h1= title        small 图书列表      each item in books        .col-md-3.col-xm-6          .thumbnail.text-center            a(href='/detail/#{item._id}')              img(src='#{item.poster}' ,alt='#{item.title}')            .caption              h3= item.title              .btn-group                a.btn.btn-primary(href='/detail/#{item._id}') 查看详情                a.btn.btn-primary(href='#{item.buyUrl}') 购买书籍

Salin selepas log masuk

// detail.jadeextends ../layoutblock 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}') 购买书籍      .col-md-3.col-sm-3        h3 作者        p #{book_author}        h3 出版年月        p #{book_year}年        h3 页数        p #{book_pages}页        h3 定价        p ￥#{book_price}

Salin selepas log masuk

上面两个页面是 bootstrap 最基本的布局，详细学习bootstrap推荐 Bootstrap 教程 | 菜鸟教程