Designing and developing with the Bootstrap framework 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 attributes 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>Vocational Skills Examination Score Query（Bootstrap）</title>
<link rel="stylesheet" href="/twitter-bootstrap/3.0.1/css/">
<link rel="stylesheet" href="/twitter-bootstrap/3.0.1/css/">
<!--[if lt IE 9]><script src="../../docs-assets/js/"></script><![endif]-->
<!--[if lt IE 9]>
<script src="/libs/html5shiv/3.7.0/"></script>
<script src="/libs//1.3.0/"></script>
<![endif]-->
<style>
.bs-docs-home
{
background-color: #1B31B1;
background-image: url();
}
</style>
</head>
<body class="bs-docs-home">
<script src="/jquery-1.10."></script>
<script src="/twitter-bootstrap/3.0.1/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: jquery-1.10.
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 class="panel-body"> </div> in sequence
<body class="bs-docs-home"> <div class="container theme-showcase"> <h1 style=" line-height:2em;"> </h1><br /> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong>Vocational Skills Examination Score Query</strong></h3> </div> <div class="panel-body"> </div> </div> </div> <div class="col-sm-3"></div> </div> </div> <script src="/jquery-1.10."></script> <script src="/twitter-bootstrap/3.0.1/js/"></script> </body>
Prompt text
The prompt text uses the alert component in the Bootstrap framework, and the code is as follows:
<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Notice!</strong> The scores for this site are from12333Official website，详情请到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 button 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 class="form-group"> <label for="IDCard">Please enter your ID number</label> <div class="input-group"> <input type="text" class="form-control" name="IDCard" placeholder="Identity card number" > <span class="input-group-btn"> <button class="btn btn-default" type="button" onClick="();" >Query</button> </span> </div> </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 codes such as $('#Subject').val('Computer Operator') 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 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" name="Subject" placeholder="Abstract, blank subject means querying all subjects" >
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">suject <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 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, the code is as follows:
<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Notice!</strong> No results found，Please check your ID number and subject，Query 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 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">suject</span></th> <th scope="col"><span style="color:white">score</span></th> </tr> <tr class="active"> <td>Computer operator</td> <td>没有score</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>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).
/
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>Vocational Skills Examination Score Query（Bootstrap）</title>
<link rel="stylesheet" href="/twitter-bootstrap/3.0.1/css/">
<link rel="stylesheet" href="/twitter-bootstrap/3.0.1/css/">
<!--[if lt IE 9]><script src="../../docs-assets/js/"></script><![endif]-->
<!--[if lt IE 9]>
<script src="/libs/html5shiv/3.7.0/"></script>
<script src="/libs//1.3.0/"></script>
<![endif]-->
<style>
.bs-docs-home
{
background-color: #1B31B1;
background-image: url();
}
</style>
</head>
<body class="bs-docs-home">
<div class="container theme-showcase">
<h1 style=" line-height:2em;"> </h1><br />
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><strong>Vocational Skills Examination Score Query</strong></h3>
</div>
<div class="panel-body">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Notice!</strong> The scores for this site are from12333Official website，详情请到Official website咨询</div>
<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" name="IDCard" placeholder="Identity card number" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" onClick="();" >Query</button>
</span>
</div>
</div>
<div class="form-group">
<label for="Subject">请输入您要Query的suject</label>
<div class="input-group">
<input type="text" class="form-control" name="Subject" placeholder="Abstract, blank subject means querying all subjects" >
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">suject <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>
</form>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Notice!</strong> No results found，请检查身份证号码和suject后，再次Query
</div>
<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">suject</span></th>
<th scope="col"><span style="color:white">score</span></th>
</tr>
<tr class="active">
<td width="50%">Computer operator</td>
<td>没有score</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>Failed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
<script src="/jquery-1.10."></script>
<script src="/twitter-bootstrap/3.0.1/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 for my website!