Use bootstrap to quickly create a page.

Use bootstrap to quickly create a page.

1. Install the bower front-end Package Manager

Bower is a front-end Software Package Manager that allows you to easily install, update, and uninstall javascript, css, html, and other framework resources and resolve their dependencies.

Npm install-g bower // install bower help // view help

Here YY:

Npm is node. the js Package Manager installs software such as express, express-generator, supervisor, and bower. bower is a front-end framework software package, and some dependent packages such as bootstrap and jquery are installed. Suddenly it was just a bag buckle, and gradually got drunk. The water in it is too deep. It is not that easy to simply learn web development. There is a slight sadness. As always.

2. Install bootstrap and jquery

Of course, you can also download bootstrap and jquery directly and put them into the project documentation. You don't need to install any package manager, so you can solve the simple dependency by yourself, however, it is not all about creating a website quickly. Install a package manager to automatically resolve the dependency. In addition, when releasing your own project, you do not need to publish all the framework packages. Instead, you only need to put the relevant json files in the project, you can easily build your dependencies.

With bower, you can directly install bootstrap on the bower. Because of the dependency, it will automatically install jquery for you.

3. Introduce bootstrap and jquery into the template engine

After bootstrap and jquery are installed or in the project, reference it in the file and create a head in the views folder. the jade file, as its name implies, is to place some content in the head tag in HTML. 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')

After the head. jade is created, add include head. jade to all the required pages.

4. Use the template Layout

Because basically all pages need to contain head. jade, you cannot write include head. jade on every page, so the layout document layout. jade will take effect. Create a separate layout. jade file to write some common code.

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

As shown above, some independent modules can still be loaded using the include statement. The last block content is the key to the template layout, which means to insert the page here of the template, that is, the layout difference of the template.

Then, add extent layout to the page where the template layout is applied. As follows:

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

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

5. start editing page

The preparation work is almost done, so the next step is to use the jade syntax and bootstrap style to edit the page. Below is a rough description of the home page (index) and details page (detail ).

// Index. jadeextends .. /layoutblock content. container. row h1 = title small book list 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. btn. btn-primary (href = '/books/# {item. _ id} ') View Details. btn. btn-primary (href = '# {item. buyUrl} ') purchase books

// 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. btn. btn-primary (href = '# {book_buyUrl}') to purchase books. col-md-3.col-sm-3 h3 author p # {book_author} h3 published by p # {book_year} years h3 pages p # {book_pages} page h3 pricing p ￥ # {book_price}

The above two pages are the most basic layout in bootstrap. This article will introduce you to them. Interested friends can continue to study and discuss them together.

Articles you may be interested in:

• The page mask layer prevents page body scrolling. Bootstrap mode frame Principle
• Solve the problem that the page cannot be closed when the Esc key is encountered in modal in bootstrap.
• Every day, Bootstrap is required.
• Navigation bar required by Bootstrap every day
• Comprehensive Analysis of Bootstrap image carousel Effect
• JS component Bootstrap Table multi-row drag effect implementation code
• Detailed description of JS table component artifact bootstrap table (Basic Edition)
• Perfect for bootstrap paging queries
• It is worth sharing the Bootstrap Ace template for menu and Tab page effects.