First contact with magical bootstrap_javascript skills

As a Web front-end development framework, Bootstrap provides user-friendly, browser-expanding solutions for most standard UI designs.

1. Download Bootstrap

Open the official website http://getbootstrap.com/ for downloading.

2. Prepare the project Template folder

Next, we create a folder and some basic files for the first project. predicate we also use the HTML5 boilerplate file HTML5 boilerplate (h5bp), and then copy bootstrap useful files to the past.

2.1 Download h5bp

Visit website link address:https://html5boilerplate.com/ , download b5bp.

After decompression, modify the folder name Bootstrap_first, whose directory structure is as follows:

2.2 Then delete and update the necessary boilerplate files

Delete the following folders and files related to h5bp:

-because you want to use less to create your own CSS file later, delete the CSS folder first.

-doc folder and its contents

2.3 Understand the. htaccess file in the template

The content in this file may not be all used, depending on the host settings and site requirements. One of the main uses of this file is to ensure optimal site performance.

2.4 Update the necessary template files

The following files in the template provide standard information about the project, update them as needed, use them directly, or leave them alone.

-humans.txt: This document records contributors, H5BP, Bootstrap, and other contributors.

-license.txt: Before the h5bp license, plus the license information for the Web site you built based on the license, after h5bp permission, plus bootstrap and other important libraries used in other sites.

2.5 Update site desktop and touch device icons

Don't forget to replace the boilerplate default icon file with the icon for your own project.

3. Add Bootstrap file

3.1 Fonts

From the bootstrap home folder, copy and paste the Fonts folder into the Bootstrap_first folder. This folder contains the important Glyphicon fonts attached to the bootstrap.

For insurance purposes, place a cross-domain friendly. htaccess file in the Fonts folder:

Copy Code code as follows:

<filesmatch "\. (Ttf|otf|eot|woff) $ "><ifmodule Mod_headers.c>header set Access-control-allow-origin" * "</IfModule> </FilesMatch>

The purpose is to ensure that no font problems occur even if the h5bp. htaccess file is not placed in the root directory of the site.

3.2 JavaScript

The next step is to join the bootstrap JavaScript file. The h5bp folder already contains a few JavaScript files as follows:

In the JS folder to create a new folder Bootsreap, and then the Bootstrap JS folder in the script are copied over. The screenshot below shows the plug-ins that are bootstrap with. One file per plugin:

Saving these plug-in files to the new Js/bootstrap folder makes it easy to optimize your site's performance by selecting Plug-ins, excluding other files, and shrinking the file size on demand.

It is also a way to keep all bootstrap plug-ins available during development. This way, if you want to add a folding, hint, or conveyor effect, you can come in handy.

The h5bp approach is to copy all the plug-in code into a plugins.js template file. This is the best practice after the end of development because it reduces HTTP requests and speeds up the site. (In other words, a 80K file is faster than loading 4 20K of files.) ）

Open the Dist folder that contains the distribution file in the Bootstrap folder. In this folder, the JS folder contains Bootstrap.js and Bootstrap.min.js, which is a large file containing bootstrap all the plug-in code.

Copy all the Bootstrap.min.js code into the plugins.js.

The less folder in the bootstrap folder is then copied to the project folder.

4. Constructing HTML templates

Open the index.html file in the project for editing. This sample tag file is from h5bp, reflecting some of the best practices and recommended scenarios. We're going to base it on this and integrate it into the bootstrap workflow.

Browse through the entire file, and there are a few interesting places that are detailed in the H5BP documentation, and the current 5.3.0 version of the link address is: https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/ Doc/extend.md. The following is also a brief introduction, in order:

-HTML5 Document Type declaration:

Copy Code code as follows:

<!doctype html>

-Next is a few meta tags

Used to specify the character set:

Copy Code code as follows:

<meta charset= "Utf-8" >

Tell IE to use the latest version of the rendering engine

Copy Code code as follows:

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

Reserved for the description site:

Copy Code code as follows:

<meta name= "description" content= "" >

Viewport labels for mobile browsers

Copy Code code as follows:

<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

-Next is a link to the two style sheets

Copy Code code as follows:

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

-and the following is the script tag that loads the Modernizr scripts. This script aftertaste IE8 provides HTML5 "shim script" so that it recognizes HTML5 partition elements:

Copy Code code as follows:

<script src= "Js/vendor/modernizr-2.8.3.min.js" ></script>

-Next is the IE conditional annotation, which contains the recommended user to upgrade the older version of IE to the new version:

<!--[If Lt IE 8]>
<p class= "Browserupgrade" >you are using an <strong>outdated</strong> browse. ...
<! [endif]-->

-followed by a piece of text

-followed by a jquery link hosted on Google Server and a fallback link to a local jquery:

Copy Code code as follows:

<script src= "https://code.jquery.com/jquery-1.12.0.min.js" ></script><script>window.jquery | | document.write (' <script src= ' js/vendor/jquery-1.12.0.min.js ' ><\/script> ') </script>

-Here are the links to Plugins.js and main.js, not to save the JavaScript plug-in code and the code we write:

Copy Code code as follows:

<script src= "Js/plugins.js" ></script><script src= "Js/main.js" ></script>

-Google's Analytics script:

<!--Google Analytics:change ua-xxxxx-x to be your site ' s ID. -->
<script>
 (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=+new Date;
 E=o.createelement (i); R=o.getelementsbytagname (i) [0];
 e.src= ' https://www.google-analytics.com/analytics.js ';
 R.parentnode.insertbefore (E,r)} (window,document, ' script ', ' GA '));
 GA (' Create ', ' ua-xxxxx-x ', ' Auto '); GA (' Send ', ' pageview ');
</script>

For this task, we need to do the following for the elements in this template:

(1) Set the title of our site, for the old version of the browser users update the existing IE condition comments;

(2) based on less file compiled bootstrap CSS, add basic page content;

(3) Integrate bootstrap JavaScript plug-ins to ensure that the response of the navigation bar (NavBar) normal response.

After these few things, we can start to design our own website.

5. Set the site title

Copy Code code as follows:

<title> First Knowledge bootstrap</title>

5.1 Tuning outdated browser messages

The message in the template is for the old browser user.

<!--[If Lt IE 8]>
<p class= "Browserupgrade" >you are using an <strong>outdated</strong> browser. Please <a href= "http://browsehappy.com/" >
Upgrade your browser</a> to improve your experience.</p>
<! [endif]-->

It contains links to http://browsehappy.com/ , which is a recommended site for browser upgrades.

5.2 Setting the main structure element

Now you're ready to start the page, and there's only one paragraph. We can add a little bit of content:

-The header area of the navigation that contains the logo;

-content area containing the content of the page;

-A footer area containing copyright and social media links.

These additions are based on the latest HTML best practices and take into account the role attributes of Aria (Accessible Rich Internet applications, access to rich Internet applications) (that is, banner, navigation, Main and ContentInfo these roles). HTML5 later added the <main cole= "main></main> element, which is designed specifically to provide a dedicated element for the main content in a page or partition. For more information, you can refer to the link:https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

Locate the following code:

<!--ADD your site or application content here-->
<p>hello world! This is HTML5 boilerplate.</p>

Modified to:

This is the basic structure and content of our page.

6. Navigation Bar

Let's set the bootstrap-specific elements first, which is the navigation bar.

As a starting point, we can temporarily use the bootstrap basic navigation bar. To do this, take the navigation bar code from the bootstrap document and make the following adjustments:

-The Navbar-static-top class was added because we wanted the navigation bar to be positioned at the top of the window, but to scroll with the page scrolling.

-Connect the project name to the index.html;

-Change the original parent div tag to a semantically HTML5 nav tag.

After the adjustment, the header element is as follows:

The results are saved and the navigation bars are displayed as follows:

The content has. Now, we especially need our own style sheets. First to mutate and link bootstrap the default style sheet.

7. Compile and link the default bootstrap CSS

7.1 Compiling bootstrap CSS

Locate less/bootstrap.less and open it, and this file imports all other files in the less folder. Once compiled, the file generates a complete BOOTSTRAP.CSS style sheet. And that's the first step we'll make.

Ps:less's document address is http://lesscss.org/

If everything has not been compiled less file, you need to download and install its compiler.

-window users, download and install this compiler:

Winless (free desktop application), the address is http://winless.org .

-mac users can choose to download:

Crunch Application (free), address for http://crunchapp.net/

Codekit (surcharge), address is http://incident57.com/codekit/

After downloading the selected less compiler, install, open. Then you can follow the steps below to do it.

(1) Create a CSS folder in the root directory.

(2) Add the main files (CSS, fonts, IMG, JS, and less folders) to the compiler using one of the following:

Drag the folder to the compiler window;

Locate the Add folder button in the compiler window and click Select Home Folder.

(3) Then the compiler window can see the loaded less file, find the Less/bootstrap.lesss file

(4) Right-click the less/bootstrap.less file, select Select Output file, find the CSS folder you just created, at which point the output file name should automatically become BOOTSTRAP.CSS, click Save.

(5) Select the output path and file name, click Compile.

(6) A compiled generated bootstrap.css file appears in the CSS folder.

(7) After the successful compilation, the only thing to note is whether the filename is the same as the file name of the link in index.html.

(8) In index.html, delete the style sheet link to css/normalize.css because the stylesheet is already included in the bootstrap.

(9) Duplicate a copy of bootstrap.css and rename it to Main.css.

(10) The browser opens the Index.html file, you can see the default navigation style as follows, from the typesetting and layout enhancements, which means that CSS has been in force.

7.2 Completion of the response navigation bar

In order to complete our navigation bar based on the Bootstrap response navigation bar, we have to add two additional elements and the corresponding class and data properties. Related usage can refer to bootstrap's components documentation, under the NavBar tab:http://getbootstrap.com/components/#navbar

Follow these steps to add additional markup.

(1) Search to <div>, add a navbar-toggle button in an element to expand and close the response navigation bar. Here is the button's full tag:

<div class= "Navbar-header" >
<button type= "button" class= "Navbar-toggle" data-toggle= "collapse" Data-target= ". Navbar-collapse" >
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
</button>
<a class= " Navbar-brand "href=" "index.html" > First bootstrap</a>
</div>

Briefly explain the above code:

The Navbar-toggle class in the button is used to apply CSS styles;

The following data properties Data-toggle and Data-target are used by bootstrap JavaScript plug-ins, which represent expected behavior and expected targets (that is, the collapse and the element with class name Navbar-collapse, after which will be added)

The span element with the class name Icon-bar is used by the CSS to create the three-bar button in the button.

(2) Next wrap the navigation item in a closed Div, that is, with the appropriate Bootstrap class div to the <ul> packaging:

<div class= "Navbar-collapse collapse" >
<ul class= "Nav navbar-nav" >
<li class= "Active" > <a href= "index.html" >Home</a></li>
<li><a href= "#" >Link</a></li>
<li><a href= "#" >Link</a></li>
</ul>
</div>

In the previous two steps, we separated the code into two parts and were both in <div>.

OK, in any modern browser (IE9 or Firefox, Chrome, Safari, etc.), drag the window down to less than 980 pixels. The display effect is as follows:

7.3 Troubleshooting

If all goes well, you've successfully compiled less into CSS and successfully included Bootstrap JavaScript plug-ins. If it's not going well, check it out carefully.

7.4 Support IE8

To support IE8, a section of JavaScript code is required to enable browsers to respond to media queries. This code is Scott Jehl's respond.js "Putty script."

Bootstrap's own documentation recommends doing so to be compatible with IE8. Related information can refer to here: http://getbootstrap.com/getting-started/

To apply this script to IE8, you need to comment on the IE8 criteria:

<!--[If Lt IE 9]>
...
<! [endif]-->

In addition, according to Andy Clarke's suggestion, in order not to let the script is not required to load the script Windows Mobile device, you should also exclude IE mobile browser, specifically see his online code block 320andup, address is: https://github.com/ malarkey/320andup/.

The conditional comments suggested by Clarke are as follows:

<!--[if (LT IE 9) & (! Iemobile)]>
...
<! [endif]-->

With the conditional annotation, the following is the Add Putty script in the site template file, as follows:

(1) Open https://github.com/scottjehl/Respond, download source code.

(2) Decompression, find a compressed version named Respond.min.js.

(3) Copy it to the Js/vendor directory in the project folder and put it together with jquery and Modernizr.

(4) Then, add the following lines to load the Respond.js file code into the index.html, including for IE's conditional annotation, load the MODERNIZR code below:

Copy Code code as follows:

<!--Modernizr--><script src= "js/vendor/modernizr-2.8.3.min.js" ></script><!--respond.js for IE 8 or less only--><!--[if (LT IE 9) & (! Iemobile)]><script src= "Js/vendor/respond.min.js" ></script><! [endif]-->

(5) OK, so IE8 can support the media query response viewport size changes.

PS: If you want to test the results of adding putty script, but do not have IE8 browser, you can use an online service, called Browsershots, address is:http://browsershots.org/ , this is free. There is also a charge, called Browserstack, address is: https://www.browserstack.com/(trial for free).

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 above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.