"Bootstrap" is compatible with viewers of IE8, Google and other mainstream browsers IMAX style pages

Although we have not been able to think about IE6 in addition to the harsh requirements, WIN7 's built-in browser IE8 also needs support.

In this article, the basic advantage of this approach, I personally think, is to prepare less. We don't need to find a lot of photos online to make the material, you just have to be ready with Bootstrap, jquery and Photoshop on it. Bootstrap and jquery how to configure. Be able to refer to "Bootstrap" a dialog box that pops up on the current page to close it. No jumps. Non-pop window (click to open link)

be asked to write a site that is often plagued by how it is laid out.

In fact, it's not difficult. Suppose you can use bootstrap skillfully. And there is a specific method.

It's also a high-speed and easy way to do your homework in response to common needs.

Although the page template on the Web search a large segment. However, it is discovering to understand the creation process of these page templates is the key.

Once you download these templates that are incompatible with your browser and don't change, it's a big hassle.

I. BASIC OBJECTIVES

Use BootstrapV3 to create pages such as the following:

Home page as seen above, first hanging in the page header is the navigation of this site, respectively, left,middle,right three button and drop-down menu dropdown. The essence here is a button group, cannot use the navigation bar component provided by Bootstrap, because this navigation bar component is incompatible with IE8, see in detail: "Bootstrap" navigation bar NavBar on IE8 flaw and Solution Way "article (click Open link)

Then, under the curtain, there are three columns, with the corresponding two buttons,

Here you can place the most important parts of the site,

Finally, it is customary to follow the copyright information.

The inner page, for example, looks like the following:

The same is the pinned navigation bar.

Then there is the title and content of this inside page. The title of the inside page is essentially a giant curtain, just a little less than the size of the homepage.

Next is the copyright information.

Second, the production process

1. First open Photoshop, create a new 1024x1 image, any width. Try to be as wide as possible. The image is 1 to be able. The foreground color is dark green r:0 g:140 b:0. The background color is light green r:100 g:200 b:100, using the gradient tool to pull out images such as the following. You can pull to the left to the right. To the middle to both sides can also, see a person likes:

This is the only image we need to prepare. The ability to turn Photoshop off, aside, and save this image in the site project directory,

This image is only about 6k. Does not affect loading at all.

2. Homepage

Detailed code such as the following, and then a section of code description:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(1) 
(2) Navigation bar
Because the navigation bar provided by Bootstrap does not work, we only use the button group provided by bootstrap to write the navigation bar ourselves
<!--first navigation bar must be hung in the Web header--><div style= "position:absoulted; top:0; left:0; width:100%; "                > <!--Define a button group--><div class= "Btn-group btn-group-justified" ><div class= "Btn-group" > <!--a single button in the navigation bar, that is, a hyperlink that does not have a drop-down menu, the way to do this is to note that a tag is used, followed by a class style instead of a button label--><a href= "#" class= "btn Btn-success "> Left </a></div><div class=" Btn-group "><a H ref= "#" class= "btn btn-success" >middle</a></div><div class= "Btn-group" ><a href= "#" class= " BTN btn-success ">Right</a></div> <!--drop-down menu such as the following:--><div class=" Btn-group "><b Utton type= "button" class= "btn btn-success dropdown-toggle" data-toggle= "dropdown" >dropdown<span class= "caret" ></span></button><ul class= "Dropdown-menu" role= "menu" ><li><a href= "#" >Dropdown Link</a></li><li><a href= "#" >dropdown Link</a></li></ul></div></div></div> 
Change the color of this button by changing the class attribute btn-success to Btn-primary,btn-danger etc.
(3) Giant curtain part
For example, the key is to introduce the background we just painted with Photoshop.
The reason to add so much <br> return is due to the size of the big curtain
<div class= "Jumbotron masthead" style= "Background-image:url (images/bg.jpg); Background-repeat:repeat; Text-align:center "><br/><br/><br/><br/><br/>
(4) Column section
This applies to the grid organization of the bootstrap. Make a layout of three columns
In detail, I "Bootstrap" self-adaptation to the PC, tablet, mobile phone Bootstrap grid system (click the Open link) article,
Divide the entire 12 grid into 3 parts, and each 4 is just right.
And each column is a panel without a panel head, inside a H3 headline. Then a paragraph text of p, and then two button
It is important to note that these items must be placed within a container, otherwise these three items will fill the entire page:
<div class= "container" ><div class= "row" ><div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ><div class= "Panel Panel-default" ><div class= "Panel-body" >(5) Copyright Information Section
There's nothing to say, just a panel
<div class= "Panel panel-default" ><div class= "Panel-body" style= "Text-align:center" >Copyright Information</div></div>


3. Inside page
Will do the homepage, then the idea of the inside page is exactly the same, no longer repeat, the same, the code such as the following:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

 
Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.
 
"Bootstrap" is compatible with viewers of IE8, Google and other mainstream browsers IMAX style pages