The design and development with bootstrap framework is a popular trend in the world at present. Many software companies use this development framework when optimizing new products because of their comprehensive advantages in JS and control.
The bootstrap framework is a front-end UI design framework that provides a unified UI interface that simplifies the process of designing interface UI (the disadvantage is that the interface is customized and the scope of the adjustment is not too great). Especially now in response to the layout (my understanding is that the page according to different resolution, using different page elements of the layout), in the bootstrap very good support, as long as the simple setting of attributes, can automatically implement the layout of the response, greatly simplifying the programmer's interface process.
Therefore, I use the bootstrap framework to achieve the following interface, although simple, but also extraordinary (really want to achieve their own words, I do not know to se years)
The entire page is divided into several parts, respectively, with the bootstrap official online sample code to achieve, and finally spelled into a page. The parts are indicated in the following figure
Next, we'll explain the code for each section.
First, construct a blank page with the following code:
<! DOCTYPE html>
To use the bootstrap framework, you should refer to the bootstrap frame file in the page. Altogether four: Bootstrap.min.css, Bootstrap-theme.min.css, Jquery-1.10.2.min.js, bootstrap.min.js
Only by referencing these files can you use the various UI elements provided by the bootstrap framework
Next, follow the diagram above to show the code for each section.
Top Description Text:
The idea of designing the entire page is that the entire page is placed on a panel, and the caption at the top is the panel head
The bootstrap frame page is a 12-column grid layout. Therefore, I divided the whole page into three parts. The left and right 3 columns wide blank, the middle 6 column width puts one panel (panel).
The code is as follows: The rest of the code is in <div class= "Panel-body" > </div>
<body class= "Bs-docs-home" > <div class= "Container theme-showcase" >
Hint text
The hint text uses the prompt (alert) component in the bootstrap frame with the following code:
<div class= ' alert Alert-danger alert-dismissable ' > <button type= ' button ' class= ' Close ' data-dismiss= ' Alert "aria-hidden= true" >x</button> <strong> Note!</strong> This site query score from the 12333 official website, please go to the official website for more information </div>
ID card form and query button
Both the ID form and the following account form should be in a single form. The ID card form and the query button are groups of form elements that take advantage of the bootstrap framework. Use input group to group text boxes (input) and buttons (button) together. The bootstrap framework provides such effects as watermarks, highlighting, and so on. Add a lot to your form
<form role= "Form" Name= "Form1" > <div class= "Form-group" > <label for= "Idcard" > Please enter your ID number </label> <div class= "Input-group" > <input type= "text" class= "Form-control" id= "Idcard" name= "Idcard" placeholder= "ID number" > <span class= "input-group-btn" > <button class= "Btn Btn-default" Type= "button" onclick= "Form1.submit ();" > Query </button> </span> </div> </div > </form>
Account Form
The account form is also a group of form elements that take advantage of the bootstrap framework. Use input group to combine text boxes (input) and buttons (button) and Drop-down lists (UL).
You can enter the account directly in the text box, or you can select an account in the Drop-down menu. The specific implementation is to change the contents of the text box using the code such as $ (' #Subject ') in the Click event (' computer operator ') of the hyperlink (a). The Account table unit is placed below the ID card form, in the form (form)
The code is as follows:
<div class= "Form-group" >
<label for= "Subject" > Please enter the subject you want to query
</label> <div class= " Input-group ">
<input type=" text "class=" Form-control "id=" Subject "name=" Subject "placeholder=" subjects, Blank accounts mean querying all the accounts ">
<div class=" input-group-btn ">
<button type=" button "class=" btn Dropdown-toggle "data-toggle=" dropdown "> Subject <span class=" Caret "></span></button>
<ul class= "Dropdown-menu pull-right" >
<li><a href= "#" onclick= "$ (' #Subject '). Val (' computer operator '); > Computer operator </a></li>
<li><a href= "#" onclick= "$ (' #Subject '). Val (' web Design ');" > Web Design </a></li>
<li><a href= "#" onclick= "$ (' #Subject '). Val (' Multimedia '); > Multimedia </a></li>
</ul>
</div>
</div>
</div>
Query Error message
When the query button is clicked, the query error message is displayed when no record is found. As with the previous hint text, the prompt (alert) component in the bootstrap frame is used.
Whether this information is displayed, but also need the background dynamic code, dynamic code based on the results of the query to decide whether to display the information (no record, display this information). Dynamic code is not discussed in this article.
The location is after the form, and the code is as follows:
<div class= ' alert Alert-danger alert-dismissable ' > <button type= ' button ' class= ' Close ' data-dismiss= ' Alert "aria-hidden= true" >x</button> <strong> note!</strong> did not find the results, please check the ID number and the subject, again query </div>
Results form
When you click on the Query button, when the record is found, the result form is displayed. Similarly, whether or not the display also needs the background of the dynamic code to match.
Query error messages and performance forms can only appear with one
The code is as follows:
<div class= "table-responsive" > <table border= "0" cellspacing= "0" cellpadding= "0" class= "table" > <tr class= "label-primary" > <th scope= "col" width= "50%" ><span style= "Color:white" > Subjects < /span></th> <th scope= "col" ><span style= "Color:white" > Achievements </span></th> </tr> <tr class= "active" > <td> computer operator </td> <td> no results </td> </tr> <tr class= "Success" > <td> computer operator </td> <td> excellent </td> </tr> <tr class= "active" > <td> multimedia operator </td> <td> good </td> </tr> <tr class= "Success" > <td> web Design </td> <td> less than box </td> </tr> </table>
This page is implemented using the bootstrap framework, benefiting from the power of the bootstrap framework, making the design UI no longer a difficult task. But Bootstrap is just a UI frame, and it's going to depend on the dynamic code in the background.
The following Web site, is the author with the above interface plus background dynamic code (PHP) to achieve professional skills test scores (limited to Shanghai) query function. You can go and have a look and make valuable comments (valid for 1 months).
http://bertin.sturgeon.mopaas.com/
The complete UI code is as follows:
<! DOCTYPE html>
The above is a small part of the introduction of the use of bootstrap framework to make Query page interface example code of knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
