首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用Bootstrap框架制作查询页面的界面实例代码

Posted in Javascript onMay 27, 2016

以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势。很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架。

Bootstrap框架是一个前端UI设计的框架，它提供了统一的UI界面，简化了设计界面UI的过程（缺点是定制了界面，调整的余地不是太大）。尤其是现在的响应时布局（我的理解是页面根据不同的分辨率，采用不同的页面元素的布局），在Bootstrap中很好的支持了，只要简单设置了属性，就能自动实现响应时布局，大大简化了程序员的界面的过程。

因此，本人用Bootstrap框架实现了如下的界面，虽然简单，但也不凡（真要自己实现的话，不知要猴年马月了）

使用Bootstrap框架制作查询页面的界面实例代码

整个页面分为几个部分，分别用Bootstrap官网上的示例代码实现，最终拼成一个页面。各部分示意如下图所示

使用Bootstrap框架制作查询页面的界面实例代码

接下来依次讲解各个部分的代码

首先，构造空白页面，代码如下：

<!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="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 class="bs-docs-home"> 
<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>

要想使用Bootstrap框架，就要在页面中引用Bootstrap框架文件。一共四个：bootstrap.min.css、bootstrap-theme.min.css、jquery-1.10.2.min.js、bootstrap.min.js

只有引用了这些文件，接下来才可以使用Bootstrap框架提供的各种UI元素

接下来按照上图依次说明各个部分的代码

顶部说明文字：

设计整个页面的思路是整个页面放在一个面板（Panel）上，顶部的说明的文字就是面板头（Panel Head）

而Bootstrap框架的页面是一个12列的网格布局。因此，我把整个页面分成三部分。左右各3列宽的空白，中间6列宽放一个面板（Panel）。

代码如下：剩下部分的代码都依次在<div class="panel-body"> </div>中

<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>职业技能考证分数查询</strong></h3>
</div>
<div class="panel-body"> 
</div> 
</div> 
</div> 
<div class="col-sm-3"></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>

提示文字

提示文字用的是Bootstrap框架中的提示（alert）组件，代码如下：

<div class="alert alert-danger alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
<strong>注意!</strong> 本站查询的分数来源于12333官网，详情请到官网咨询
</div>

身份证表单和查询按钮

身份证表单和后面的科目表单都应该在一个表单中。身份证表单和查询按钮是利用Bootstrap框架的表单元素组。利用input group把文本框（input）和按钮（button）组合在一起。而Bootstrap框架提供了诸如水印、高亮等效果。为表单增色不少

<form role="form" name="form1">

<div class="form-group"> 
<label for="IDCard">请输入您的身份证号码</label> 
<div class="input-group"> 
<input type="text" class="form-control" id="IDCard" name="IDCard" placeholder="身份证号码" > 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button" onClick="form1.submit();" >查询</button> 
</span> 
</div> 
</div> 
</form>

科目表单

科目表单也是利用Bootstrap框架的表单元素组。利用input group把文本框（input）和按钮（button）和下拉列表（ul）组合在一起。

可以在文本框里直接输入科目，也可以在下拉菜单中选择科目。具体的实现是在超链接（a）的点击事件（click）中用$('#Subject').val('计算机操作员')等代码来改变文本框中的内容。科目表单位置在身份证表单的下方，在表单（form）里面

代码如下：

<div class="form-group"> 
<label for="Subject">请输入您要查询的科目</label> 
<div class="input-group"> 
<input type="text" class="form-control" id="Subject" name="Subject" placeholder="科目，空白科目意味着查询所有的科目" > 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">科目 <span class="caret"></span></button> 
<ul class="dropdown-menu pull-right"> 
<li><a href="#" onClick="$('#Subject').val('计算机操作员');">计算机操作员</a></li> 
<li><a href="#" onClick="$('#Subject').val('网页设计');">网页设计</a></li> 
<li><a href="#" onClick="$('#Subject').val('多媒体');">多媒体</a></li> 
</ul> 
</div> 
</div> 
</div>

查询错误信息

当点击查询按钮时，没有查到记录的时候，则显示该查询错误信息。和之前的提示文字一样，用的是Bootstrap框架中的提示（alert）组件。

这个信息是否显示，还需要后台动态代码的配合，动态代码根据查询的结果来决定是否显示该信息（没有记录，则显示该信息）。动态代码不在这篇文章里讨论。

位置在表单（form）的后面，代码如下：

<div class="alert alert-danger alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
<strong>注意!</strong> 没有查到成绩，请检查身份证号码和科目后，再次查询 
</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">科目</span></th> 
<th scope="col"><span style="color:white">成绩</span></th> 
</tr> 
<tr class="active"> 
<td>计算机操作员</td> 
<td>没有成绩</td> 
</tr> 
<tr class="success"> 
<td>计算机操作员</td> 
<td>优秀</td> 
</tr> 
<tr class="active"> 
<td>多媒体操作员</td> 
<td>良好</td> 
</tr> 
<tr class="success"> 
<td>网页设计</td> 
<td>不及格</td> 
</tr> 
</table> 
</div>

这个页面是利用Bootstrap框架来实现的，得益于Bootstrap框架的强大，使得设计UI不再成为一件难事。但Bootstrap仅仅是UI框架，它的出彩还得依靠后台的动态代码的配合。

下面这个网址，就是笔者用上面的界面加上后台动态代码（PHP）来实现职业技能考试分数（仅限于上海）的查询的功能。大家可以去看看，并提出宝贵的意见（有效期1个月）。

http://bertin.sturgeon.mopaas.com/

使用Bootstrap框架制作查询页面的界面实例代码

完整的UI代码如下：

<!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="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 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>职业技能考证分数查询</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">×</button>
<strong>注意!</strong> 本站查询的分数来源于12333官网，详情请到官网咨询</div>
<form role="form" name="form1">
<div class="form-group">
<label for="IDCard">请输入您的身份证号码</label>
<div class="input-group">
<input type="text" class="form-control" id="IDCard" name="IDCard" placeholder="身份证号码" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" onClick="form1.submit();" >查询</button>
</span>
</div>
</div>
<div class="form-group">
<label for="Subject">请输入您要查询的科目</label>
<div class="input-group">
<input type="text" class="form-control" id="Subject" name="Subject" placeholder="科目，空白科目意味着查询所有的科目" >
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">科目 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#" onClick="$('#Subject').val('计算机操作员');">计算机操作员</a></li>
<li><a href="#" onClick="$('#Subject').val('网页设计');">网页设计</a></li>
<li><a href="#" onClick="$('#Subject').val('多媒体');">多媒体</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">×</button>
<strong>注意!</strong> 没有查到成绩，请检查身份证号码和科目后，再次查询 
</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">科目</span></th>
<th scope="col"><span style="color:white">成绩</span></th>
</tr>
<tr class="active">
<td width="50%">计算机操作员</td>
<td>没有成绩</td>
</tr>
<tr class="success">
<td>计算机操作员</td>
<td>优秀</td>
</tr>
<tr class="active">
<td>多媒体操作员</td>
<td>良好</td>
</tr>
<tr class="success">
<td>网页设计</td>
<td>不及格</td>
</tr> 
</table>
</div> 
</div>
</div>
</div>
<div class="col-sm-3"></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>

以上所述是小编给大家介绍的使用Bootstrap框架制作查询页面的界面实例代码的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

使用Bootstrap框架制作查询页面的界面实例代码

- Author -

万仓一黍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
javascript内存管理详细解析
Nov 11 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
Sep 25 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JS组件Bootstrap Table布局详解
May 27 #Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 #Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 #Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 #Javascript
Dojo获取下拉框的文本和值实例代码
May 27 #Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 #Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
FTP(9) 3389(1) systemctl(1) DHCP(2) 远程控制(1) 远程登录(2) Windows server 2008(5) 域控制器(1) Ubuntu Server(6) 防火墙(2)
You might like
php SQL之where语句生成器
2009/03/24 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python格式化日期时间操作示例
2018/06/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
大学生个人实习的自我评价
2014/02/15 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
驻村工作先进事迹
2014/08/14 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL