Bootstrap is like a front-end framework. It has already arranged a lot of CSS, and can be called directly if it is required for front-end development. The website address is http://www.bootcss.com. Using Bootstrap can reduce the layout time in CSS during front-end development
You need to use Bootstrap to download the components on the official website (click to open the link). The Bootstrap version used in the production environment (click to open the link). Bootstrap3 is not compatible with 2. It is recommended to use Bootstrap3 directly according to its development documents.
After decompressing Bootstrap, copy the obtained 3 folders css, fonts, and js to the site directory. If it is Eclipse's JSP Web Project, put them under the WebRoot folder.
After that, you can call Bootstrap to quickly model the front-end any page in this site directory.
However, it is worth noting that different browsers have different explanations for Bootstrap. IE cannot read some styles, but the basic functions are not affected, and the page is just a bit ugly.
Here is a comparison between IE and Google Chrome on the same page:
1. Basic Objectives
Use Bootstrap to write a beautiful landing page for PC, tablet, and mobile phone.
If stretched on the PC, various elements will automatically adapt to the screen.
If you open such pages on your phone, you will directly adapt to the phone screen without the need for automatic adjustment of the user.
2. Basic ideas
The layout of the page is designed according to the inherent style of Bootstrap as follows:
3. Production process
The specific code of the entire page is as follows, and the following will analyze the tags one by one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Login Page</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head> <body> <div> <div> <table frame="void"> <tr> <td> <img src="images/img0.jpg" /> </td> <td> welcome. Please log in first. </td> </tr> </table> </div> <div> <form role="form" action="1.html" method="post"> <div> <label for="username"> Username: </label> <div> <input type="text" name="username" placeholder="username" id="username" /> </div> </div> <div> <label for="password"> Password: </label> <div> <input type="password" name="password" placeholder="password" id="password" /> </div> </div> <div> <div> <button type="submit"> Log in</button> <small> Don't have an account? <a href="http://2.com">Click to register</a> </small> </div> </div> </form> </div> </div> </div> </body></html>
1.<head> tag
First, put the following two lines of code in the <head> tag:
<head> <title>Login Page</title> <!--Require the page to automatically adapt to the browser's screen--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--Declare I want to use bootstrap--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head>
2.<body> tag
(1) First write <div></div>, and then put the code in it. The basic description is as follows:
(2) <div> tag
<div> <!--Set the table to layout this CSS layer. It is not easy to add align="left" to the img tag. The image will overflow to the layer--> <!--Same as <table>--> <table frame="void"> <tr> <td> <img src="images/img0.jpg" /> </td> <td> Welcome. Please log in first. </td> </tr> </table> </div>
(3) Under the <div> tag, first put a form element form role="form" action="1.html" method="post">. Compared with ordinary HTML forms, this form has more class attributes and role attributes. There is no need to say much about the class attribute. If the value is form, even if the form has enough location, the outer label and the input box will not be on the same line. If the value is the current form-horizontal, then it is as shown in the effect of the figure. The role attribute does not show any effect, and it is only added according to the Chinese document of bootstrap.
Next, the elements under each form form are as follows:
<div> <form role="form" action="1.html" method="post"> <!--The outer label of each property forms a form-group tuple with the input box --> <div> <!--The following class attribute is for it to be automatically stretched according to the size of the screen --> <label for="username"> Username: </label> <div> <!--The placholder here means that the gray words for not entering anything, which of course cannot be explained in IE8. I can't see any function of id, it is just added according to the requirements of Bootstrap Chinese documents --> <input type="text" name="username" placeholder="username" id="username" /> </div> </div> <div> <label for="password"> Password: </label> <div> <input type="password" name="password" placeholder="password" id="password" /> </div> </div> <div> <!--The button here is different from the HTML ordinary submit button, but it does not affect the form submission --> <button type="submit"> Login</button> <!--<small> tag ensures that this text is the same line as the submit button--> <small> No account? <a href="http://2.com">Click to register</a> </small> </div> </div> </form> </div> </div>
At this point, the development of this page has been completed.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.