Home > Developer > Web Develop
[CSS] uses Bootstrap to compile a user-friendly login page for both PC, tablet, and mobile phones. cssbootstrap
Bootstrap is like the front-end framework. It has already configured a lot of CSS and can be directly called for front-end development. The website is http://www.bootcss.com. Using Bootstrap can reduce the CSS la s during front-end development.
You need to use Bootstrap to download the component from the official website (click to open the link). The Bootstrap version used in the production environment (click to open the link) is incompatible with Bootstrap3 and 2, we recommend that you use Bootstrap3 directly based on the development documentation.
Decompress Bootstrap and copy the three folders css, fonts, and js to the site directory. For JSP Web projects of Eclipse, place them under the WebRoot folder.
Then, you can call Bootstrap to quickly create a model for the front-end on any page under the site directory.
However, it is worth noting that different browsers have different interpretations of Bootstrap. IE cannot read certain styles, but the basic functions are not affected, and the page is ugly.
The following is a comparison between IE and Google Chrome on the same page:
I. Basic Objectives
You can use Bootstrap to compile a PC, tablet, and mobile phone logon page.
If it is stretched on a PC, various elements automatically adapt to the screen.
When this type of page is opened on a mobile phone, the page can be directly adapted to the mobile phone screen without automatic adjustment.
Ii. Basic Ideas
The page layout is designed according to the inherent Bootstrap style as follows:
Iii. Production Process
The code for the entire page is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
1.
Put the following two lines of code in the
<Head> <title> logon page </title> <! -- Requires 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 that I want to use bootstrap --> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen">
2. <body> label(1) first write <div class = "panel-info"> </div>, and then put the code in it. The basic instructions are as follows:
(2) <div class = "panel-heading"> label
<Div class = "panel-heading"> <! -- Set the table to layout the CSS layer. Adding align = "left" to the img label is not easy to use. The image will overflow out of the layer. --> <! -- Same as <table border = "0"> --> <table frame = "void"> <tr> <td> </td> <td> welcome. Please log on first. </Td> </tr> </table> </div>(3) <div class = "panel-body"> tag, first, add a form Element form class = "form-horizontal" role = "form" action = "1.html" method = "post">. This form is different from a common HTML form, this means that the class attribute and the role attribute are added. The class attribute does not need to be said much. If the value is form, the form will not be in the same line even if it has enough position, if the value is the current form-horizontal, the effect is shown. The role attribute does not show how it works. Here, it is added based on the Chinese Document of bootstrap.Next, the elements in each 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 constitute a form-group tuples --> <div class = "form-group"> <! -- The following class property is used to automatically stretch the screen size --> <label for = "username" class = "col-sm-2 control-label"> User Name: </label> <div class = "col-sm-10"> <! -- The placholder here indicates that it cannot be interpreted in ie8. Id does not show any effect, only added according to the requirements of the Bootstrap Chinese document --> <input type = "text" name = "username" class = "form-control" placeholder = "username" id = "username "/> </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 class =" form-group "> <div class =" col-sm-off Set-2 col-sm-10 "> <! -- The button here is different from the ordinary HTML submit button, but does not affect form submission --> <button type = "submit" class = "btn-info"> login </button> <! -- <Small> label ensures that the text is the same line as the submit button --> <small> no account? <Ahref = "http://2.com"> click to register </a> </small> </div> </form> </div>
Now, the development of this page is complete.
Html, css, and friends I am now using bootstrap to create a simple web page. How can I set aside a certain interval between the two sides of the browser navigation bar?Bootstrap styles use hierarchical styles, that is, looking for them from the external layer. Therefore, you cannot directly write css styles on the navigation bar, which has a higher priority than hierarchical styles, you need to find the corresponding style modification in the css in the bootstrap source file.
Bootstrap has a matching css file docscss. Where can I download it?You can download the source code repository (github) of bootstrap. All historical versions are available. An address of the current version is provided:
Github.com/twbs/bootstrap/
You can save it as an attachment of 3.0 or use a download tool.
Raw.github.com/..cs.css
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
