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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
