BootStrap編寫的一個簡單查詢頁面
阿新 • • 發佈：2019-01-04
首先需要在專案中引入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>