Bootstrap writing a mainstream browser-compatible audience-style page _javascript tips

Although IE6 has been able to be considered in addition to some demanding requirements, WIN7 's browser IE8 still needs support.
The main advantages of this method, the individual feel is to prepare less, do not need to surf the internet to find a large number of pictures to do the material, you just have to prepare a bootstrap, jquery and Photoshop on it, Bootstrap and jquery How to configure, you can refer to the Bootstrap write a dialog box that pops up on the current web page and does not have a pop-up window (click on the Open link)
be asked to write a website, often will be how the layout is troubled, actually also not difficult, if can skilled use bootstrap, and a set of specific method, then should be able to deal with the ordinary demand or can quickly and easily hand over the homework.
Although the page template on the Web search a large segment, but can Sunding understand these page template creation process is the key.
Once the templates are not compatible with the browser and are not modified, it will be a lot of trouble.

I. BASIC OBJECTIVES

Use BootstrapV3 to create the following pages:

Homepage as shown above, first hanging in the header is the navigation of this site, respectively, for the Left,middle,right three buttons and Pull-down menu dropdown. The essence of this is a group of buttons that cannot use the navigation bar component provided by bootstrap because this navigation bar component is incompatible with IE8, see "How to resolve the bootstrap navigation bar navbar defects on the IE8" (Click Open link)

Then, under the giant screen, there are three more columns, with the corresponding two buttons, where you can place the most important parts of the site, and finally follow the customary copyright information.

The inner pages are as follows:

It is also the top navigation bar, followed by the title and content of the inner page. The title of the inner page is essentially a giant screen, just less than the size of the homepage.

Next is the copyright information.

Second, the production process
1. First Open Photoshop, a new 1024x1 image, width arbitrary, as wide as possible, the image is 1 on it, the foreground color for the dark green r:0 g:140 b:0, background color for light green r:100 g:200 b:100, with the gradient tool pull out the following image, how to pull all can be left to right pull can, to the middle to both sides can also see a person's preferences:

This is the only image we need to prepare, you can turn Photoshop off, throw it aside, and save this image in the website Engineering folder, this image is about 6k and does not affect loading.

2. Homepage
the specific code is as follows, and then a paragraph of code explains:

<! 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 apply, we have to write our own navigation bar using the button group provided by Bootstrap  

<!--first navigation bar must be hung on the head of the Web page--> <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" > <!--navigation bar A single button, which is a hyperlink to a button that doesn't have a drop-down menu, should be noted for its use of a tag, followed by a class style, rather than a button label provided by the official website--> <a href= "#" class= "Btn btn-success"
 > Left </a> </div> <div class= "Btn-group" > <a href= "#" class= "btn btn-success" > Middle </a> </div> <div class= "Btn-group" > <a href= "#" class= "btn btn-success" > Right </a> & The lt;/div> <!--pull-down menu is written as follows:--> <div class= "Btn-group" > <button type= "button" class= "Btn btn-success Pdown-toggle "data-toggle=" dropdown "> Dropdown <span class=" caret "></span> </button> <ul Clas s= "Dropdown-menu" role= "menu" > <li> <a href= "#" >dropdown link</a> </li> <li> <a H
ref= "#" >dropdown link</a> </li> </ul> </div> </div> </div>
 

Change the class attribute btn-success into Btn-primary,btn-danger and so can change the color of this button Oh!
(3) The Big curtain part
The big curtain is written as follows, the key is to introduce the background that we just painted with Photoshop

The reason why we have to add so much <br> return is to pull the size of this huge screen.

 <div class= "Jumbotron masthead style=" Background-image:url
 (images/bg.jpg); Text-align:center ">
 <br/>
 <br/> <br/> <br/> <br,
 />
  
 

The

(4) Column section  
applies to the grid organization of the bootstrap, and to the typesetting of three columns  
Specific can refer to bootstrap automatically adapt to the PC, flat, mobile phone bootstrap grid system, the entire Web page of 12 divided into 3, each 4 lattice is just good  , and each column is a panel without panel head, inside a h3 of the big title, Then P's one paragraph text, and then two buttons.
It is worth noting 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. Inner page
will do the homepage, then the inner page of the idea is exactly the same, no longer repeat, the same, the code is as follows:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

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.