Bootstrap writing a landing page for PCs, tablets, and mobile phones _javascript tips

Source: Internet
Author: User
Tags button type

Bootstrap as a foreground frame, it has been decorated a lot of CSS, front-end development of the use of direct call can be. Its web site is http://www.bootcss.com. Using bootstrap can reduce the layout time of CSS when front-end development

Need to use bootstrap first in the official website (click to open the link) to download components can be used in the production environment of the bootstrap version (click to open the link), BOOTSTRAP3 is not compatible with 2, it is recommended to use BOOTSTRAP3 directly according to their development documents.

After the bootstrap decompression, the resulting 3 folders Css,fonts,js copied to the site directory below. If this is Eclipse's JSP Web project, put them under the Webroot folder.

You can then call bootstrap on any page in this site directory to quickly model the front end.

However, it is noteworthy that the different browsers for bootstrap interpretation is not the same, ie on some of the styles can not read, but the basic function is not affected, the page is ugly.

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

I. BASIC OBJECTIVES

Use bootstrap to write a landing page with a PC, tablet, and mobile phone at the same time and beautifully.
If stretched on the PC, the various elements will automatically adapt to the screen.

Open this kind of page on the handset, will adapt directly to the handset screen, does not need the user to adjust automatically.

Ii. Basic Ideas

The layout of the page, based on the bootstrap intrinsic style, is designed as follows:

Third, the production process
following the entire page specific code below, the following will be a tag to analyze:

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

1.First in the

  
 

2.<body> Label

(1) First write to <div class= "Panel Panel-info" ></div>, and then put the code in it, the basic description of the following figure:

(2) <div class= "panel-heading" > Label

 <div class= "panel-heading" >
 <!--Setup table to lay out the CSS layer, it is not good to add align= "left" to the IMG tag, the image will overflow out of 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 into a table cell element form class= "Form-horizontal" role= "form" action= "1.html" method= "post "", this form and HTML ordinary form, is more than the class attribute and role attribute, class attribute Needless to say, if the value is form, even if the form has enough position, the outer label and the input box will not be on the same line, If the value is now form-horizontal, then as shown in the diagram effect. The role attribute does not see how it works, and is only added here based on Bootstrap's Chinese document.

Next, the elements below 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 attribute and the input box form a form-group tuple--> <div class= "Form-group" > <!--the following class property is designed to automatically stretch according to the size of the screen--> < Label for= "username" class= "col-sm-2 Control-label" > Username: </label> <div class= "col-sm-10" > <!--PL here Acholder means not to enter anything in the description of gray words, of course, in the IE8 can not explain. ID do not see any effect, only in accordance with the requirements of bootstrap Chinese documents added--> <input type= "text" name= "username" class= "Form-control" "placeholder=" Username "id=" 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 "CLA ss= "Form-control" placeholder= "password" id= "password"/> </div> </div> <div class= "Form-group" > <d IV class= "Col-sm-offset-2 col-sm-10" > <!--button here is different from the ordinary submit button of HTML, but it does not affect the submission of the form--> <button type= " Submit "Class= "BTN btn-info" > Login </button> <!--<small> Label ensures this text is the same line as the submit button--> <small> no account?
 <a href= "http://2.com" > Click Registration </a> </small> </div> </div> </form> </div>

At this point, the development of this page is complete.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.