Preliminary use bootstrap to quickly create a page _javascript tips

1. Install Bower Front-End Package Manager

Bower is a front-end package manager that facilitates the installation, updating, and unloading of framework resources such as javascript,css,html, and resolves the interdependence between them.

NPM install-g Bower//install
Bower Help//view assistance

Here yy:

NPM is a Node.js Package manager that installs Express,express-generator,supervisor,bower and so on, bower a front-end framework package, and installs a number of dependencies such as Bootstrap and jquery. Suddenly found that is simply a bag of the buckle ah, gradually drunk. One of the water is too deep, want to learn a simple web development is not so easy thing ah, a faint sadness. And then the eggs, yearn, as always.

2. Install Bootstrap and jquery

Of course, you can also directly bootstrap and jquery download down, put into the project document, do not install what Package Manager, their own simple dependencies on the OK, but not all for the rapid build station, install a Package Manager automatically resolve dependencies. And in the release of their own projects, there is no need to publish all the framework package, and just put the relevant JSON file in the project can be, others at a glance your dependency, easy to build quickly.

With Bower, Direct Bower Install Bootstrap is OK, because of the dependency, it will automatically put you on jquery, finished.

3. Introduction of Bootstrap and jquery in the template engine

Installed or said the project has been placed Bootstrap and jquery, the next is to refer to it in the file, in the Views folder to create a Head.jade file, as the name implies is placed in the HTML head tag inside some content. The following code:

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

Once you've created the Head.jade, it's OK to include all the pages you need, plus include head.jade included in the page.

4. Use stencil layout

Because basically all the pages need to include Head.jade, you can't always write include head.jade on each page, so the layout document Layout.jade will work. Create layout.jade files individually, and write some common code.

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

As above, some independent modules can still be loaded through the include statement, the last block content is template layout of the key, meaning in the template here inserted page, that is, the application of this template layout differences.

Then in the application of this template layout of the page, plus extent layout on the OK. As follows:

Extends.. /layout block
content
 p Welcome to #{title}

Note: Use files in the extends template file and include code to use relative paths as much as possible.

5. Start editing page

The preparations are almost done, so the next step is to use the jade syntax and the bootstrap style to edit the page. The following is a brief overview of the Home page (index) and Details pages (detail).

Index.jade
extends. /layout block

content
 . Container
 . Row
 h1= title
 small book list each
 item
 . 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} ') View details
  a.btn.btn-primary (href= ' #{item.buyurl} ') Buy books

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} ') Buy books
 . Col-md-3.col-sm-3
 h3 author
 P #{book_author}
 H3 published
 years P #{book_year} year
 h3 pages
 P #{book_pages} page
 h3 pricing
 P￥#{book_price}

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The top two pages is the most basic layout of the bootstrap, the article is introduced to this, interested friends can continue to study and discuss together.