`
weigang.gao
  • 浏览: 488070 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

BootStrap编写的一个简单查询页面

 
阅读更多

首先需要在项目中引入bootstrap:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询redis缓存信息</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</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="col-md-8 col-sm-offset-2 text-center">
						<h3 class="panel-title">
							<strong>查询redis缓存信息</strong>
						</h3>
					</div>
					<div class="panel-body">
					    <div class="panel-heading">
							<h4 class="panel-title">
								<strong>查询条件</strong>
							</h4>
					    </div>
						<div class="alert alert-danger alert-dismissable">
							<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">×</button>
							<strong>注意!</strong> <font color="red">请输入完整的KEY从redis集群中查询数据</font>
						</div>
						
						<div class="form-group">
							<label for="IDCard">请输入完整的KEY</label>
							<div class="input-group">
								<input type="text" class="form-control" id="key"
									name="key" placeholder="KEY"> <span
									class="input-group-btn">
									<button class="btn btn-default" type="button"
										onClick="queryRedisMessagebyKey();">查询</button> </span>
							</div>
						 </div>
						
						 <div class="panel-heading">
							<h4 class="panel-title">
								<strong>查询结果</strong>
							</h4>
					    </div>
						<div class="alert alert-danger alert-dismissable">
							<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">×</button>
							<strong>注意!</strong> <font color="red">没有查到数据,请检查KEY是否完整或者正确,再次查询</font>
						</div>
						<div id="messageInfo">
						      暂无数据!
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-3"></div>
		</div>
	</div>
	<script type="text/javascript" src="bootstrap/js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript">
	
	
	</script>
</body>
</html>

 

 

分享到:
评论

相关推荐

    bootstrap增删改查页面

    Bootstrap的模态框组件可以实现这一功能,提供一个浮动的、不打断页面流程的对话框,用户可以在其中进行编辑或删除操作。 6. **Ajax集成**:为了提供流畅的用户体验,增删改查操作通常会使用Ajax技术,无刷新地更新...

    bootstrap flask登录页面编写实例

    本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助。 Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则...

    Bootstrap制作登录注册页面(完整项目,已配置)

    总的来说,这个项目提供了一个实践Bootstrap技能的机会,尤其是对于那些希望快速构建美观且功能齐全的登录注册页面的开发者。通过学习和应用这些知识点,你可以提高自己的前端开发能力,创造出更加专业和用户友好的...

    bootstrap简易登录注册页面

    这个资源包提供了一个简单的登录注册页面,适用于快速构建基本的用户认证界面。以下是对这个主题的详细解释: 1. **Bootstrap框架**:Bootstrap是由Twitter开发并开源的一款前端框架,它简化了网页设计和开发过程。...

    20分钟成功编写bootstrap响应式页面 就这么简单

    本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面。 图 1. 移动优先,适应不同设备 一、安装 最简单的方式是直接在网页中引用内容分发网络(CDN)提供的 Bootstrap,当用户访问网页时,会从就近...

    bootstrap快速搭建简洁美观的页面

    这个压缩包文件“动力节点蛙课网Bootstrap3”提供了一个已经设计好的美观页面,可以帮助开发者节省大量时间和精力,直接应用于自己的项目中,实现快速搭建。 Bootstrap的核心特性包括一套精心设计的CSS样式、...

    Bootstrap后台登录界面模板_后台模板_bootstrap_

    总的来说,“Bootstrap后台登录界面模板”提供了一个起点,让开发者无需从零开始设计和编写代码,就能快速创建一个专业且美观的后台登录界面。这大大节省了开发时间和工作量,尤其对于初学者或者需要快速原型设计的...

    maven+ssm+Bootstrap简单系统的CRUD

    Bootstrap 是一个流行的前端开发框架,提供了一系列预设的CSS样式和组件,帮助开发者快速创建响应式、移动优先的Web页面。Bootstrap包含栅格系统、表单、按钮、导航等多种组件,极大地提升了开发速度和用户体验。 ...

    bootstrap后台模板,快速生成网站页面

    压缩包中的 "ace - 副本" 文件可能是Ace编辑器的一个副本,Ace 是一个强大的代码编辑器,常用于在线代码编辑器或开发工具的嵌入。Ace 支持多种编程语言的语法高亮,还提供了丰富的可配置选项和插件,与 Bootstrap ...

    基于BootStrap框架的前端菜单页面.rar

    在这个名为"基于BootStrap框架的前端菜单页面.rar"的压缩包中,我们看到的是一个专门针对Bootstrap框架构建的前端菜单页面,但值得注意的是,这个压缩包不包含Bootstrap框架本身,这意味着你需要自行引入Bootstrap的...

    使用Nodejs+BootStrap搭建一个简单的留言板

    在本文中,我们将深入探讨如何使用Node.js和Bootstrap构建一个简单的留言板系统。这不仅是一个适合初学者实践的项目,而且也是提升Web开发技能的理想选择。Node.js作为一个强大的JavaScript后端框架,可以处理HTTP...

    springboot+mybatis+bootstrap整合的简单框架

    本项目"springboot+mybatis+bootstrap整合的简单框架"旨在提供一个快速开发的解决方案,将三个流行的开源技术——Spring Boot、MyBatis和Bootstrap融合在一起,以简化Web应用的构建过程。 Spring Boot是由Pivotal...

    基于Bootstrap页面框架开发的门户网站

    基于Bootstrap的门户网站开发旨在提供一种简洁、高效且易于维护的解决方案,以适应不同设备和屏幕尺寸的用户需求。在这个项目中,我们将会深入探讨Bootstrap的关键特性和在JAVAWEB环境下的应用。 首先,Bootstrap的...

    精品--用Bootstrap编写的简历模板,喜欢可以star哦!.zip

    这个“精品--用Bootstrap编写的简历模板”提供了一个高效、响应式且易于定制的个人简历设计基础,适用于那些希望在线展示自己职业技能和经验的求职者。下面将详细介绍Bootstrap以及如何利用它来创建一个出色的简历...

    一个漫威主题的静态页面网站源程序(html+css+js+jq+bootstrap)

    在这个项目中,开发者利用这些技术构建了一个基本的漫威粉丝站点,虽然页面可能相对简陋,但对于初学者来说,这是一个很好的学习和练习实际编程技能的机会。 首先,我们来探讨一下HTML(HyperText Markup Language...

    bootstrap第一次大作业.rar

    这个“bootstrap第一次大作业”是一个理想的起点,可以帮助新手快速掌握网页开发的基本概念,尤其是使用Bootstrap进行响应式设计的能力。通过完成这个项目,学习者将能够构建一个功能齐全、美观的网页,并为进一步的...

    简单某超市进销存管理系统(bootstrap、MySQL、Tomcat,使用eclipse编写)

    这是一个基于JavaWeb技术构建的简单超市进销存管理系统,它采用了Bootstrap进行前端界面设计,MySQL作为后台数据库存储,以及Tomcat作为应用服务器运行环境。在Eclipse开发环境中编写,提供了全面的功能来支持超市的...

    bootstrap_4.0_template

    Bootstrap 4.0 是一个流行的前端开发框架,用于构建响应式和移动优先的网页项目。这个资源包"bootstrap_4.0_template"提供了一个基于Bootstrap 4.0的基础模板,适用于快速开发前台和后台界面。下面我们将深入探讨...

    bootstrap布局设计器

    总结来说,"bootstrap布局设计器"提供了一个友好的界面,让用户可以轻松创建基于Bootstrap的网页布局。通过理解Bootstrap的栅格系统、HTML结构、CSS样式和JavaScript插件,开发者或设计师可以利用这个工具快速构建...

Global site tag (gtag.js) - Google Analytics