Start a project using Bootstrap and HTML5 Boilerplate

Download Bootstrap

Visit the following website to download the latest bootstrap source file

Http://getbootstrap.com/

Find the Download page shown below and click the Download source button to Download it. If Sass is used for development, Download the Sass file as well,

After decompression, open the bootstrap folder and you will see a bunch of files and folders in it, roughly like this,

The less folder contains all the less files, and the js folder contains 12 js plug-ins. Next, we will download HTML5 Boilerplate.

Download HTML5 Boilerplate

Access the http://html5boilerplate.com/get the latest HTML5 Boilerplate (H5BP) file, decompress it, we name the folder project1 to indicate Project 1, open the folder, you can see the content contained in it, as shown below,

Delete unnecessary files and update required files. Update favicon and touch icons.

Replace the default H5BP icon with your own icon,

• Apple-touch-icon-precomposed.png
• Favicon. ico

I don't know how to generate the ico icon. Click here to help you switch online.

Integrate Bootstrap

Open the bootstrap folder, find the fonts folder, and copy it to the project1 folder. The fonts folder contains the built-in Glyphicon font file of Bootstrap. This makes the font file ready.

Next is the javaScript file. Check out the js file that comes with H5BP and open the js folder in the project1 folder, as shown below,

The Bootstrap plug-in depends on jQuery. We can see that Boilerplate has been prepared for us (in the vendor folder), and another Modernizr script contains HTML5 shiv, which can be compatible with IE8, however, it is more important to detect the features of the browser. The plugin. js file is used to place the plug-in. Here, a new folder named bootstrap is created to place the Bootstrap plug-in. The plug-in the js folder in Bootstrap is copied to this folder, as shown below,

There should be 12 plug-ins (which may increase or decrease in the future). You can choose to use some plug-ins as needed or refer all the plug-ins, one-by-one reference adds HTTP requests in vain, so you have to put all the plug-ins into one file and put all the Bootstrap plug-ins into plugins. in the js file, find the packaged code and open bootstrap/dist/js/bootstrap. min. js Selects all codes and copies them to plugins. js.

Finally, copy the entire bootstrap/less folder to project1.

So far, all the content in Bootstrap has been integrated into project1. The content in project1 is as follows,

The fonts folder contains the Glyphicon font file, the img folder is empty, and the less folder is copied from Bootstrap (if Sass is used for development, this is the Sass folder ), the js folder is as follows,

I want to know