首页
所有分类
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 相关文章推荐
jQuery代码优化之基本事件
Nov 01 Javascript
js有关元素内容操作小结
Dec 20 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 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
马耳他购物网站(1) 冰岛购物网站(1) Android面试题(6) JAVA面试题(401) 约旦购物网站(1) C++面试题(199) PHP面试题(54) 保加利亚购物网站(3) 白俄罗斯购物网站(3) 哈萨克斯坦购物网站(2)
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
浅析Python函数式编程
2018/10/06 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python输入中文的实例方法
2020/09/14 Python
《放飞蜻蜓》教学反思
2014/04/27 职场文书
服务标兵事迹材料
2014/05/04 职场文书
演讲比赛主持词
2015/06/29 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS