"Bootstrap" a PC, tablet, mobile phone used at the same time and beautiful landing page

Bootstrap is like the foreground frame, it has already arranged a lot of CSS. The use of front-end development needs to be directly called. The URL of its site is http://www.bootcss.com. Using bootstrap can reduce the time of the front-end development time in CSS-like layout

Need to use bootstrap first on the official website (click the Open link) to download the component, the bootstrap version number for the production environment (click Open link), BOOTSTRAP3 is not compatible with 2, it is recommended to use BOOTSTRAP3 directly according to its development documents.

After extracting bootstrap, copy the resulting 3 directory Css,fonts,js to the site directory.

Let's say that Eclipse's JSP Web project puts them below the Webroot directory.

After that, you can call bootstrap for front-end high-speed modeling on any page under this Web folder.

It is only worth noting that different browsers for bootstrap interpretation is not the same, in which IE does not read some styles, but the main function is not affected. The page is a little ugly.

Here is the comparison between IE and Google browser on the same page:

I. BASIC OBJECTIVES

Use bootstrap to write a PC, tablet, mobile phone at the same time and beautiful landing page.

Assume stretching on the PC. Various elements will actively adapt themselves to the screen.

On the phone to open this kind of page, will directly adapt to the phone screen, without the user's own initiative to adjust.

Second, the basic idea

Layout of the page, according to the bootstrap inherent style design such as the following:

Third, the production process

For example, the following entire page detail code, for example, follows a label to analyze:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

1.
First, in the 

(2) <div class= "panel-heading" > Label
<div class= "panel-heading" ><!--settings table for this CSS layer layout, add align= "left" in the IMG tag is not good, the image will overflow outside the layer--><!--with < Table border= "0" >--><table frame= "void" ><tr><td></td><td> welcome. Please log in first. </td></tr></table></div>
(3) <div class= "Panel-body" > label. First put a table cell form class= "form-horizontal" role= "form" action= "1.html" method= "post", this form compared to the normal form of HTML, Just the class attribute and the role attribute, the class attribute does not need to say much. Assuming a value of form, the form will not be on the same line as the input box, even if there is enough space, assuming that the value is today's form-horizontal. Then the effect is seen. The role attribute does not see how it works, but is added here according to Bootstrap's Chinese documentation.
Next, the elements under each form form are as follows:
<div class= "Panel-body" ><form class= "form-horizontal" role= "form" action= "1.html" method= "POST" ><!-- The outer label of each property and the input box make up a form-group tuple--><div class= "Form-group" ><!--for example, the following class attribute is used for its own active stretching, depending on the size of the screen. <label for= "username" class= "col-sm-2 Control-label" > User name: </label><div class= "col-sm-10" ><!-- The placholder here means that no matter what the description of the gray word, of course, in the IE8 can not be explained.
ID does not see what the effect is. However, the--><input type= "text" name= "username" class= "Form-control" placeholder= "User name" id= "were added according to the requirements of bootstrap Chinese documents. Username "/></div></div><div class=" Form-group "><label for=" password "class=" col-sm-2 Control-label "> Password: </label><div class=" col-sm-10 "><input type=" password "name=" password "class=" Form-control "placeholder=" password "id=" password "/></div></div><div class=" Form-group "><div class= "Col-sm-offset-2 col-sm-10" ><!--here the button is different from the normal submit button for HTML, but does not affect the submission of the form--><button type= "    Submit "class=" btn btn-info "> Login </button><!--<small> tag to ensure that the text is the same line as the submit button--><small> No account? <ahref= "http://2.com" > click Register </a> </small></div></div></form></div>

So far. The development of this page is complete.
 
"Bootstrap" a PC, tablet, mobile phone used at the same time and beautiful landing page