Home > Developer > Web Develop
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 boilerplateAccess 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 needReplace the H5BP default icon with your own icon,
Don't know how to generate an ICO icon, click here to help you convert online
Integrated BootstrapFirst 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 homepageGo 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 ListBootstrap Site blueprints:design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
