The first time I got into touch with the amazing Bootstrap, bootstrap

The first time I got into touch with the amazing Bootstrap, bootstrap

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

1. Download Bootstrap

Open the official website http://getbootstrap.com/to download.

2. Prepare the project template folder

Next, we will create a folder and some basic files for the first project. We also need to use the HTML5 Boilerplate (H5BP) template file for the predicate, and then copy the useful Bootstrap files.

Download H5BP 2.1

Visit the website URL: https://html5boilerplate.com/, download B5BP.

After decompression, change the folder name to Bootstrap_First. The directory structure is as follows:

2.2 Delete and update the necessary template files

Delete the following folders and files related to H5BP:

□Because you will use LESS to create your own CSS file later, delete the css folder first.

□Doc folder and content

2.3 understand the. htaccess file in the template.

Not all contents in this file are used, depending on the host settings and site requirements. One of the main purposes of this file is to ensure that the site performance is optimal.

2.4 update necessary template files

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

□Humans.txt: This file records contributors, H5BP, Bootstrap, and other contributors.

License license.txt: Before the H5BP license, add the license information for the website you built based on the license, and add the license information for the important libraries used by Bootstrap and other sites after the H5BP license.

2.5 Update site desktop and touch device icons

Do not forget to replace the default Boilerplate icon file with the icon of your project.

3. Add the Bootstrap File

3.1 font

Copy and paste the fonts folder from the main Bootstrap folder to the Bootstrap_First folder. This folder contains the important Glyphicon fonts attached to Bootstrap.

To be safe, place a cross-domain friendly. htaccess file in the fonts Folder:

Copy codeThe Code is 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 even if the H5BP. htaccess file is not stored in the root directory of the site, there will be no font problems.

3.2 JavaScript

The next step is to add the JavaScript file of Bootstrap. The H5BP folder contains the following JavaScript files:

Create a folder bootsreap In the js folder, and copy the scripts in the Bootstrap js folder. The following shows the Bootstrap built-in plug-in. Each plug-in has one file:

Save These plug-in files to the newly created js/bootstrap folder to optimize website performance. You can select plug-ins as needed, exclude other files, and reduce the file size.

During development, it is also a way to keep all Bootstrap plug-ins available. In this way, if you want to add a folding, tip, or conveyor belt effect, you can click it with confidence.

H5BP copies all plug-in code to a plugins. js template file. This is the best practice after development, because it can reduce HTTP requests and speed up the site. (In other words, an 80 K file is faster than loading four 20 k 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 are large files that contain all the Bootstrap plug-in code.

Copy all bootstrap. min. js code to plugins. js.

Then, copy the less folder in the Bootstrap folder to the project folder.

4. Construct an HTML Template

Open the index.html file of the project and edit it. This example marks the file from H5BP, reflecting some best practices and suggestions. Based on this, we integrate it into the Bootstrap workflow.

Browse the entire file, which has a few interesting places, H5BP documentation has detailed instructions, 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 a brief introduction, in order:

□Html5 document type declaration:

Copy codeThe Code is as follows: <! Doctype html>

□Next are several meta tags

■ Used to specify the character set:

Copy codeThe Code is as follows: <meta charset = "UTF-8">

■ Tell IE to use the latest Rendering Engine

Copy codeThe Code is as follows: <meta http-equiv = "x-ua-compatible" content = "ie = edge">

■ Reserved for site description:

Copy codeThe Code is as follows: <meta name = "description" content = "">

■ For mobile browsers

Copy codeThe Code is as follows: <meta name = "viewport" content = "width = device-width, initial-scale = 1">

□Next is the link between two style sheets

Copy codeThe Code is as follows: <link rel = "stylesheet" href = "css/normalize.css"> <link rel = "stylesheet" href = "css/main.css">

□Next is the script tag for loading the Modernizr script. This script evades IE8 by providing HTML5 "gasket script" so that it can recognize HTML5 partition elements:

Copy codeThe Code is as follows: <script src = "js/vendor/modernizr-2.8.3.min.js"> </script>

□Next is the IE condition annotation, which contains the message that we recommend that you upgrade the old version of ieto 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

□Next is the jQuery link hosted on the Google server, and a local jQuery backup link:

Copy codeCode: <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>

□Below are the links between plugins. js and main. js. Do not save the JavaScript plug-in code and the code we have compiled:

Copy codeThe Code is 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 perform the following operations on the elements in this template:

(1) set the title of our site and update the existing IE condition comments for old browser users;

(2) Compile Bootstrap CSS based on the LESS file and add basic page content;

(3) Integrate the JavaScript plug-in of Bootstrap to ensure a responsive navigation bar (navbar) responds normally.

After completing these steps, we can start designing our own website.

5. Set the site title

Copy codeThe Code is as follows: <title> Bootstrap first recognized </title>

5.1 adjust outdated browser messages

Messages in the template are for old browser users.

<! -- [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] -->

The link http://browsehappy.com/included, which is a site that recommends browser upgrade.

5.2 set the primary structure element

Prepare the page content. There is only one section. We can add a little bit of content:

□Tab area for Navigation containing the Logo;

□Content area containing page content;

□Footer area containing copyright and social media links.

Adding this content will be based on the latest HTML best practices, and will consider ARIA (Accessible Rich Internet Applications, Accessible to Rich Internet Applications) the role attribute (namely, the banner, navigation, main, and contentinfo roles ). HTML5 later added the <main cole = "main> </main> element to provide a dedicated element for the main content in the page or partition. For more information, see the link: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

Find the following code:

<! -- Add your site or application content here -->
<P> Hello world! This is HTML5 Boilerplate. </p>

To:

This is the basic structure and content of our page.
6. navigation bar
Set the unique element of Bootstrap first, that is, the navigation bar.
As a starting point, we can temporarily use the basic navigation bar of Bootstrap. To this end, use the navigation bar code in the Bootstrap document and make the following adjustments:
□Added the navbar-static-top class, because we want the navigation bar to be positioned at the top of the window, but to scroll along with the page.
□Connect the project name to index.html;
□Change the original parent div tag to the semantic HTML5 nav tag.
After adjustment, the header element is as follows:
<Header role = "banner"> <nav role = "navigation" class = "navbar nav-static-top navbar-default"> <div class = "container"> <div class = "navbar-header"> <a class = "navbar-brand" href = "index.html"> first glance at Bootstrap </a> </div> <ul class = "nav navbar- nav "> <li class =" active "> <a href =" index.html "> Home </a> </li> <a href =" # "> Link </a> </li> <a href = "#"> Link </a> </li> </ul> </div> </nav> 
Save the result. The display effect of the navigation bar is as follows:

The content is available. Now, we need our own style sheets. First, mutate and link to the default Bootstrap style sheet.
7. Compile and link the default Bootstrap CSS
7.1 compile Bootstrap CSS
Find less/bootstrap. less and open it. This file is imported to all other files in the less folder. After compilation, this file will generate the corresponding bootstrap.css style sheet. This is our first step.
PS: LESS documentation address for http://lesscss.org/
If no LESS file has been compiled, You need to download and install its compiler.
□Window user, download and install this compiler:
■ WinLess (free desktop application) address for http://winless.org.
□Mac users can choose to download:
■ Crunch application (free) address for http://crunchapp.net/
■ CodeKit (charged), address for http://incident57.com/codekit/
After downloading the selected LESS compiler, install and enable it. Then you can follow the steps below.
(1) create a css folder in the root directory.

(2) Add the parent folder of the main file (css, fonts, img, js, and less folders) to the compiler using one of the following methods:
■ Drag the folder to the compiler window;
■ Find the Add folder button in the compiler window and click Select Main folder.
(3) then, you can see the loaded LESS file in the compiler window and find the less/bootstrap. lesss file.
(4) Right-click the less/bootstrap. less file, Select output file, find the newly created cssfolder, and then change the output file name to bootstrap.css, and click Save ".
(5) Select the output path and file name, and click Compile.

(6) The compiled bootstrap.css file will appear in the css folder.
(7) after successful compilation, the only difference is that the file name is the same as the file name linked in index.html.
(8) In index.html, delete the link to the style sheet pointing to css/normalize.css because the style sheet is already included in Bootstrap.
(9) copy a copy of bootstrap.css and rename it main.css.

(10) Open the index.html file on the browser. The default navigation style is as follows, which is enhanced from the layout and layout. This indicates that CSS has taken effect.

7.2 complete responsive navigation bar
To complete the navigation bar based on the Bootstrap responsive navigation bar, we have to add two new elements, as well as the corresponding class and data attributes. For more information about usage, see the Bootstrap Components document on the Navbar tab: http://getbootstrap.com/components/#navbar
Follow these steps to add additional tags.
(1) Find <div> and add a navbar-toggle button to an element to expand and collapse the responsive navigation bar. All the buttons are marked as follows:
<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 "> Bootstrap </a> </div>
Briefly explain the above Code:
■ The navbar-toggle class in the button is used to apply the CSS style;
■ The following data attributes data-toggle and data-target are used by the JavaScript plug-in of Bootstrap. The segment represents the expected behavior and expected target (that is, collapse and the element of the class named navbar-collapse, this element will be added later)
■ The span element of the class named icon-bar is used by CSS to create the Three-bar button in the button.
(2) Next, wrap the navigation items in a collapsed div, that is, wrap <ul> with a div with an appropriate Bootstrap class:
<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 split the code into two parts, which are both in <div>.
All right, in any modern browser (IE9 or the latest version of Firefox, Chrome, Safari, etc.), drag the window down to less than 980 pixels. The result is as follows:

7.3 troubleshooting
If everything goes well, it means that you have successfully compiled LESS into CSS and also successfully included the JavaScript plug-in of Bootstrap. If not, check carefully.
7.4 support for IE8
To support IE8, A JavaScript code is required to allow the browser to respond to media queries. This code is Scott Jehl's respond. js "putty script ".
Bootstrap documentation recommends this to be compatible with IE8. For more information, see here: http://getbootstrap.com/getting-started/#browsers
To apply this script to IE8, you must note the following conditions for IE8:
<! -- [If lt IE 9]>
...
<! [Endif] -->
In addition, according to Andy Clarke's suggestion, in order not to allow Windows Mobile devices that do not need the script to load the script, the IE mobile browser should also be excluded. For details, see his online code block 320 andup, address: https://github.com/malarkey/320andup.
The recommended conditions for Clarke are described as follows:
<! -- [If (lt IE 9 )&(! IEMobile)]>
...
<! [Endif] -->
With the conditional annotation, add the putty script to the site template file as follows:
(1) Open the https://github.com/scottjehl/Respond, download the source code.

(2) decompress the package and find the compressed version named respond. min. js.
(3) copy it to the js/vendor directory in the project folder and place it with jQuery and Modernizr.

(4) Then, add the following lines of respond. js file code to index.html, including the conditional comments for IE. Load the Modernizr code below:
Copy codeThe Code is 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) Okay, so that IE8 can support media queries to respond to changes in the size of the view.
PS: If you want to test the result of adding putty script, but there is no IE8 browser, you can use an online service called Browsershots, address is: http://browsershots.org/, which is free of charge. There is also a charge, called BrowserStack, address is: https://www.browserstack.com/(trial free ).
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.