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>

猜你喜欢

转载自weigang-gao.iteye.com/blog/2367726
今日推荐