Start a project with Bootstrap and HTML5 boilerplate

Source: Internet
Author: User
Tags html5 boilerplate

Download Bootstrap

Visit the following website to download the latest bootstrap source files

http://getbootstrap.com/

Find the download page as shown below, click the Download source button to download, if developed with Sass, then the Sass file is also downloaded,

After unpacking, open the Bootstrap folder to see a bunch of files and folders inside, roughly like this,

Where the less folder contains all the less files, JS folder contains 12 JS plugin, Next, we go to download HTML5 boilerplate.

Download HTML5 boilerplate

Access http://html5boilerplate.com/Get the latest HTML5 boilerplate (h5bp) file, unzip after we give the folder named Project1 to indicate item 1, open the folder, you can see the contents contained inside, as shown below,

Delete files that you do not need
    1. CSS folder (because we will use the bootstrap style)
    2. Changelog.md
    3. Contributing.md
    4. Doc folder and what's in it
Update the required files
    1. Humans.txt, which can be written on the entire site work team, to help the site building people to thank, as well as the use of development tools and so on.
    2. LICENSE.MD, add the license information on the Bootstrap and other frameworks.
    3. README.MD, provides a basic description of the project.
Update Favicon and Touch icons

Replace the H5BP default icon with your own icon,

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

Don't know how to generate an ICO icon, click here to help you convert online

Integrated Bootstrap

First open the Bootstrap folder to find the Font Fonts folder, copied to the Project1 folder inside, the Fonts folder is bootstrap own Glyphicon icon font file, so that the font file is done.

Then is the JavaScript file, look at the h5bp to bring the JS file, open the Project1 folder inside the JS folder, as shown below,

Bootstrap plugin is dependent on jQuery, can see boilerplate already ready for us (vendor folder), another Modernizr script, which contains HTML5 shiv, can make IE8 compatible, but its bigger role is The browser has been tested for features. Plugin.js file is used to place the plug-in, where a new folder named Bootstrap, used to place the bootstrap plug-in, the bootstrap in the JS folder inside the plugin copy into this folder, as shown below,

No accident, there should be 12 plug-ins (do not exclude the possibility of increased or decreased later), you can choose to use some plug-ins, or a catch, all the plug-in reference, a reference is really in vain to increase the HTTP request, so you have to put all the plug-in into a file, will Bootstrap plug-ins all put into the Plugins.js file, find the already packaged code, open bootstrap/dist/js/bootstrap.min.js Select all the code to copy and paste into the plugins.js, it is OK.

Finally, the style file, copying the entire Bootstrap/less folder into Project1.

At this point, the content required in Bootstrap has been fully integrated into the Project1, the contents of Project1 are as follows,

Where the Fonts folder contains the Glyphicon font file, the IMG folder is empty, the less folder is copied from Bootstrap (if you use Sass to develop, then this is the Sass folder), JS folder is as follows,

I'd like to know more about MODERNIZR.

Set homepage

Go back to the Project1 home directory, open the index.html with a lovely text editor, note that it is not open with the browser, you can see the following content,

1 <!DOCTYPE HTML>2 <!--[If Lt IE 7]>  -3 <!--[If IE 7]>  -4 <!--[If IE 8]>  -5 <!--[If GT IE 8]><! - <HTMLclass= "No-js"> <!--<! [EndIf] -6     <Head>7         <MetaCharSet= "Utf-8">8         <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">9         <title></title>Ten         <Metaname= "description"content=""> One         <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> A  -         <!--Place Favicon.ico and apple-touch-icon.png in the root directory - -  the         <Linkrel= "stylesheet"href= "Css/normalize.css"> -         <Linkrel= "stylesheet"href= "Css/main.css"> -         <Scriptsrc= "Js/vendor/modernizr-2.6.2.min.js"></Script> -     </Head> +     <Body> -         <!--[If Lt IE 7]> + <p class= "Browsehappy" >you is using an <strong>outdated</strong> browser. <a href= "http://browsehappy.com/" >upgrade your browser</a> to improve your experience.</p>  A <! [EndIf] - at  -         <!--ADD your site or application content here - -         <P>Hello world! This is HTML5 boilerplate.</P> -  -         <Scriptsrc= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></Script> -         <Script>Window.jquery||document.write ('<script src= "Js/vendor/jquery-1.10.2.min.js" ><\/script>')</Script> in         <Scriptsrc= "Js/plugins.js"></Script> -         <Scriptsrc= "Js/main.js"></Script> to  +         <!--Google analytics:change ua-xxxxx-x to be your site ' s ID. - -         <Script> the             (function(b,o,i,l,e,r) {B.googleanalyticsobject=L;b[l]||(B[l]= *             function() {(B[l].q=b[l].q||[]). push (arguments)}); B[l].l=+NewDate; $ e=o.createelement (i); R=O.getelementsbytagname (i) [0];Panax Notoginseng e.src='//www.google-analytics.com/analytics.js'; - R.parentnode.insertbefore (E,r)} (Window,document,'Script','GA')); the GA ('Create','Ua-xxxxx-x'); GA ('Send','PageView'); +         </Script> A     </Body> the </HTML>

Need to modify part of the code,

 - <  rel= "stylesheet"  href= "Css/normalize.css"> <  rel= "stylesheet"  href= "Css/main.css">

First delete the above two lines into the style sheet code, because Bootstrap has built-in normalize.css, there is no need to introduce, and we have already deleted the two CSS files, and added a line to introduce Bootstrap style sheet code,

<rel= "stylesheet"  href= "Css/bootstrap.css">

Wait, Project1 there is no such file at all, there are two ways to do it now,

1. From the BOOTSTRAP/DIST/CSS, copy a compiled bootstrap.css to PROJECT1/CSS (this folder needs to be created in a new one).

2. Compile into CSS with less file (or Sass).

To talk about the second method, you first need to install less, in node. js, using the Node package management tool NPM to install:

$ NPM install-g Less

After the installation is complete, you can use:

$ LESSC less/bootstrap/bootstrap.less css/bootstrap.css

OK, assuming that the above two methods have been completed one, continue down, style is done, it should be the script, because IE 8 does not support media query, need to download a script (responsive layout, no media query how to play it), point I go down on the road, download good, put Respond.min.js file in Project1/js/vendor, and then add the following code on the page,

<!---<!--[if (LT IE 9) & (! Iemobile)]><script src= "Js/vendor/respond.min.js" ></script><! [EndIf]  -

Just write in the introduction of the Modernizr script code is OK, so that, ie 8 and below the browser can also support the media query, next there is a conditional comment needs to be slightly modified, because Bootstrap no longer support IE7, so, we want to let IE 7 and IE 61 fall into hell (actually More than a hint to upgrade the browser),

 - <!--[if Lt IE 7]> <!--[if LTE IE 7]>

All done, the rest of the matter is to add the main content of the page.

Resource List
    • Bootstrap
    • HTML5 boilerplate
    • Less
    • Sass
    • Normalize.css
    • Modernizr
    • Respond.js
Resources

Bootstrap Site blueprints:design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.