Using the Bootstrap framework for design and development is a relatively popular trend in the world. When optimizing new products, many software companies will choose this development framework because of their comprehensive advantages in js and controls.
The Bootstrap framework is a front-end UI design framework. It provides a unified UI interface and simplifies the process of designing interface UI (the disadvantage is that the interface is customized, so there is not much room for adjustment). Especially the current response-time layout (my understanding is that the page adopts the layout of different page elements according to different resolutions), which is well supported in Bootstrap. As long as the properties are simply set, the response-time layout can be automatically implemented, greatly simplifying the process of programmers' interface.
Therefore, I use the Bootstrap framework to implement the following interface. Although it is simple, it is extraordinary (if you really want to implement it yourself, I don’t know if it will be the Year of the Monkey and Horse Month)
The entire page is divided into several parts, which are implemented using the sample code on the official website of Bootstrap, and finally formed into a page. The schematics of each part are shown in the following figure
Next, explain the code of each part in turn
First, construct a blank page, the code is as follows:
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><title>Bootstrap</title><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--><style>.bs-docs-home{ background-color: #1B31B1; background-image: url(line.png); } </style></head><body> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script></body></html>To use the Bootstrap framework, you must refer to the Bootstrap framework file in the page. There are four in total: bootstrap.min.css, bootstrap-theme.min.css, jquery-1.10.2.min.js, bootstrap.min.js
Only by referring to these files can you use the various UI elements provided by the Bootstrap framework.
Next, as shown in the above figure, explain the codes of each part in sequence
Top description:
The idea of designing the entire page is to place the entire page on a panel, and the text on the top is the Panel Header
The page of the Bootstrap framework is a 12-column grid layout. So I divided the entire page into three parts. There are 3 columns wide blanks on the left and right, and 6 columns widen one panel (Panel).
The code is as follows: the remaining part of the code is in <div> </div> in sequence
<body><div><h1 style=" line-height:2em;"> </h1><br /><div><div></div> <div><div><h3><strong>Vocational Skills Examination Score Query</strong></h3></div><div> </div> </div> </div> </div> <div></div> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script></body>
Prompt text
The prompt text uses the alert component in the Bootstrap framework, and the code is as follows:
<div> <button type="button" data-dismiss="alert" aria-hidden="true">×</button> <strong>Note!</strong> The scores for this site are from the official website of 12333. For details, please consult the official website</div>
Identity card form and query button
The ID card form and the subsequent account form should be in one form. Identity form and query buttons are groupings of form elements that utilize the Bootstrap framework. Use the input group to combine the text box and button. The Bootstrap framework provides effects such as watermarks and highlights. Add a lot of color to the form
<form role="form" name="form1"><div> <label for="IDCard">Please enter your ID number</label> <div> <input type="text" id="IDCard" name="IDCard" placeholder="IDCard number" > <span> <button type="button" onClick="form1.submit();" >Query</button> </span> </div> </form>
Subject form
Account forms are also groups of form elements that utilize the Bootstrap framework. Use the input group to combine the text box (input), button (button) and drop-down list (ul).
You can enter the subject directly in the text box, or you can select the subject in the drop-down menu. The specific implementation is to use $('#Subject').val('Computer Operator') and other codes to change the content in the text box in the click event (click) of the hyperlink (a). The account form is located below the ID form, inside the form (form)
The code is as follows:
<div> <label for="Subject">Please enter the subject you are looking for</label> <div> <input type="text" id="Subject" name="Subject" placeholder="Account, blank subject means querying all subjects" > <div> <button type="button" data-toggle="dropdown">Account<span></span></button> <ul> <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 information
When the query button is clicked and no record is found, the query error message is displayed. Like the previous prompt text, it uses the alert component in the Bootstrap framework.
Whether this information is displayed also requires the cooperation of the background dynamic code. The dynamic code decides whether to display the information based on the query results (if there is no record, the information will be displayed). Dynamic code is not discussed in this article.
The location is behind the form, and the code is as follows:
<div> <button type="button" data-dismiss="alert" aria-hidden="true">×</button> <strong>Note!</strong> No results were found, please check the ID number and subjects and check again</div>
Grade Form
When the query button is clicked, the score form is displayed when the record is found. Similarly, whether to display it also requires the cooperation of dynamic code in the background.
Only one error message and score form can appear at the same time
The code is as follows:
<div> <table cellpacing="0" cellpadding="0"> <tr> <th scope="col" ><span style="color:white">Subjects</span></th> <th scope="col"><span style="color:white">Score</span></th> </tr> <tr> <td>Computer Operator</td> <td>No Grade</td> </tr> <tr> <td>Computer Operator</td> <td>Excellent</td> </tr> <tr> <td>Multimedia Operator</td> <td>Good</td> </tr> <tr> <td>Web Design</td> <td>Failed</td> </tr> </table> </div>
This page is implemented using the Bootstrap framework. Thanks to the power of the Bootstrap framework, designing the UI is no longer a difficult task. But Bootstrap is just a UI framework, and its excellence depends on the cooperation of dynamic code in the background.
The following URL is the function of the author using the above interface plus backend dynamic code (PHP) to realize the query of vocational skills test scores (shanghai only). You can go and have a look and give valuable comments (valid for 1 month).
http://bertin.sturgeon.mopaas.com/
The complete UI code is as follows:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><title>Bootstrap</title><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--><style>.bs-docs-home{ background-color: #1B31B1; background-image: url(line.png); } </style></head><body><div><h1 style=" line-height:2em;"> </h1><br /><div><div></div><div><div><h3><strong>Vocational Skills Examination Score Query</strong></h3></div><div><div><button type="button" data-dismiss="alert" aria-hidden="true">×</button><strong>Note!</strong> The scores inquired on this site are from the official website of 12333. For details, please consult the official website</div><form role="form" name="form1"><div><label for="IDCard">Please enter your ID number</label><div><input type="text" id="IDCard" name="IDCard" placeholder="ID number" ><span><button type="button" onClick="form1.submit();" >Query</button></span></div><div><label for="Subject">Please enter the subject you want to query</label><div><input type="text" id="Subject" name="Subject" placeholder="Account, blank subject means querying all subjects" ><div><button type="button" data-toggle="dropdown">Account<span></span></button><ul><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></form><div><button type="button" data-dismiss="alert" aria-hidden="true">×</button><strong> Attention!</strong> No results were found, please check your ID number and subjects and check again</div> <div><table cellpacing="0" cellpadding="0"><tr><th scope="col" ><span style="color:white">subjects</span></th><th scope="col"><span style="color:white">score</span></th></tr><td>computer operator</td><td>no grade</td></tr><td>computer operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div></div><div></div></div></div></div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script></body></html>The above is the relevant knowledge about using the Bootstrap framework to create interface example codes for query pages introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!