今日は、より美しいスタイルを導入するためのプロジェクトを行う過程でBootstrapを使用する方法を学ぶために、このブログを学んだ後、あなたはああ、テンプレートの使用を楽しむことができます！
ステップ1: bootstrapが依存するパッケージをインポートし、bootstrapを導入します。
- 関連するjarパッケージのインポート
- ブートストラップ・ヘッダー・ファイルの紹介
<!-- bootstrapIEブラウザのサポート-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap様々なプラットフォームに対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上記3つのメタタグ* *リストの一番上、その他のコンテンツは* *フォローする！-->
<!-- jqueryに依存するブートストラップの導入-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- bootstrapのメインcssファイルを紹介する。-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- ブートストラップテーマスタイルの紹介-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- bootstrap jsの紹介-->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
ステップ2: bootstrapでラスターシステムを使う
グリッドシステム： 各行が均等な大きさで12等分されることを意味し、画面サイズに応じて、どのプラットフォームでも自動的に表示でき、優れたスタイル効果を発揮します。例えば、ウェブページの解像度はタブレット、携帯電話、パソコンで異なるので、画面の解像度によって親切に表示する必要があります。
フォーマットは以下の通りです：
<!-- サブコンテナを示す-->
<div class="container">
<!-- 行を示す-->
<div class="row">
<!-- 全部で12列並んでいる、mdはパソコンのディスプレイのサイズを示す xsは携帯電話のディスプレイのサイズを示す offsetは列のオフセットが数列あることを示す-->
<div class="col-xs-3 col-md-3 col-md-offset-3"
style="background-color: red">3列を占める</div>
<div class="col-xs-6 col-md-6" style="background-color: green">6カラムを占める</div>
<div class="col-xs-3 col-md-3" style="background-color: gray">3列を占める</div>
</div>
</div>
フォームスタイルテンプレート
<table border="1" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
表示効果は以下の通り：
ログインページのテンプレートは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrapIEブラウザのサポート-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap様々なプラットフォームに対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上記3つのメタタグ* *リストの一番上、その他のコンテンツは* *フォローする！-->
<!-- jqueryに依存するブートストラップの導入-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- bootstrapのメインcssファイルを紹介する。-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- ブートストラップテーマスタイルの紹介-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- bootstrap jsの紹介-->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>ログインインターフェース</title>
<style type="text/css">
#huakuang {
width: 650px;
height: 500px;
margin-top: 100px;
margin-left: 280px;
background-color: #CCFF00;
}
#mag{
margin-top: 90px;
}
</style>
</head>
<body>
<div class="container">
<div id="huakuang">
<div class="row">
<div class="col-md-6 col-md-offset-4" id = "mag">
<h1>ユーザーログイン</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-3">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder=" ">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" placeholder=" ">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox"> <label> <input type="checkbox"> パスワードを覚える</label> <label> <input type="checkbox"> 自動ログイン<br> </label><br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"> </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
表示効果は以下の通り：
登録ページテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrapIEブラウザのサポート-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap様々なプラットフォームに対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上記3つのメタタグ* *リストの一番上、その他のコンテンツは* *フォローする！-->
<!-- jqueryに依存するブートストラップの導入-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- bootstrapのメインcssファイルを紹 する。-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- ブートストラップテーマスタイルの紹介-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- bootstrap jsの紹介-->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>ユーザー登録ページ</title>
<style type="text/css">
#huakuang{
width: 650px;
height: 500px;
margin-top: 100px;
margin-left: 250px;
background-color: #66FFFF;
}
#mgr{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id = "huakuang">
<div class="row">
<div class="col-md-6 col-md-offset-4" id="mgr">
<h1>ユーザー登録</h1><br>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3"
placeholder=" ">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
placeholder=" ">
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio1" value=" " checked="checked">
</label> <label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio2" value=" ">
</label>
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-10">
<label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox1" value=" " >
</label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox2" value=" ">
</label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox3" value=" " checked="checked">
</label> </label> <label class="checkbox-inline"> <input type="checkbox"
id="inlineCheckbox4" value=" ">
</label>
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 control-label"> :</label>
<div class="col-sm-10">
<select class="form-control">
<option selected="selected"> </option>
<option> </option>
<option> </option>
<option> </option>
<option>博士</option>
<option> </option>
</select><br>
</div>
</div>
<div class="row"> <label for="inputPassword3" class="col-sm-2 control-label"> 介:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="6"></textarea><br>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">クリックして登録する</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
表示効果は以下の通り：
バックエンド・システム・インターフェース・テンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrapIEブラウザのサポート-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap様々なプラットフォームに対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上記3つのメタタグ* *リストの一番上、その他のコンテンツは* *フォローする！-->
<!-- jqueryに依存するブートストラップの導入-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- bootstrapのメインcssファイルを紹介する。-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- ブートストラップテーマスタイルの紹介-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- bootstrap jsの紹介-->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>ページテンプレート</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ホテル管理</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">管理者<span class="sr-only">(current)</span></a></li>
<li><a href="#">一般スタッフ</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</div>
</nav>
<!-- -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="menu">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu" href="#div1"> ルーム管理</a>
</h4>
</div>
<div id="div1" class="panel-collapse collapse in">
<div class="list-group">
<a href="#" class="list-group-item">ルームを追加する</a> <a href="#" class="list-group-item">部屋を削除する</a> <a href="#" class="list-group-item">ルームを変更する</a> <a href="#" class="list-group-item">お照会ルーム</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu" href="#div2">トラベラー管理</a>
</h4>
</div>
<div id="div2" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">旅行者を追加する</a> <a href="#" class="list-group-item">旅行者を削除する</a> <a href="#" class="list-group-item">旅行者を修正する</a> <a href="#" class="list-group-item">旅行者に関するお照会</a>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu" href="#div3">休暇管理</a>
</h4>
</div>
<div id="div3" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">離脱フォームを追加する</a> <a href="#" class="list-group-item">退会フォームを削除する</a> <a href="#" class="list-group-item">離脱フォームを修正する</a> <a href="#" class="list-group-item">クエリ休暇スリップ</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<ol class="breadcrumb">
<li><a href="#">メンバーサービス</a></li>
<li><a href="#">ポイントサービス</a></li>
<li><a href="#">ワインサービス</a></li>
</ol>
<table border="1"
class="table table-hover table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th> </th>
<th> </th>
<th> </th>
<th>ID番号</th>
<th> </th>
<th>ルームタイプ</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>23</td>
<td> </td>
<td></td>
<td>#309</td>
<td> </td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" aria-label="Previous"> <span
aria-hidden="true">«</span>
</a></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"> <span
aria-hidden="true">»</span>
</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
インターフェイスを以下に示します：
よく使われるプラグインのソースコードは以下の通りです。
モーダル表示ボックス：
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#myModal">ダイアログボックスを表示する</button>
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h6 class="modal-title"> </h6>
</div>
<div class="modal-body">メッセージコンテンツ部分。</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" fadeクラスはフェード効果を表し、もし効果が必要なければ、クラスを削除することができる。
<button data-dismiss="modal" ボタンがモーダルボックスを消すことができることを示す。
アコーディオンパネル
<div class="panel-group" id="menu">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#menu" href="#div1">
メニューグループ</a>
</h4>
</div>
<div id="div1" class="panel-collapse in">
<div class="list-group">
<a href="#" class="list-group-item">メニュー項目11</a>
<a href="#" class="list-group-item">メニュー項目12</a>
<a href="#"class="list-group-item">メニュー項目13</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#menu"
href="#div2">メニューグループII</a>
</h4>
</div>
<div id="div2" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item">メニュー項目21</a>
<a href="#" class="list-group-item">メニュー項目22</a>
<a href="#"class="list-group-item">メニュー項目23</a>
</div>
</div>
</div>
</div>
ターンテーブル・マップ
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption"> ... </div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
日付ピッカー
bootstrap-datepicker3.css
bootstrap-datepicker.js
bootstrap-datepicker.ja-JP.min.js
インポートする：
<link rel="stylesheet" href="/bs/css/bootstrap.css">
<link rel="stylesheet" href="/bs/css/bootstrap-theme.css">
<link rel="stylesheet" href="/bs/css/bootstrap-datepicker3.css">
<script type="text/javascript" src="/bs/js/html5shiv.js"></script>
<script type="text/javascript" src="/bs/js/respond.js"></script>
<script type="text/javascript" src="/bs/js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap.js"></script>
<script type="text/javascript" src="/bs/js/bootstrap-datepicker.js"></script>
<script type="text/javascript"
src="/bs/js/bootstrap-datepicker.ja-JP.min.js"></script>
HTML
<div class="form-group">
<label for="datepicker">生年月日</label>
<div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-addon">
<span class="add-on glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
日付セレクタはjsコードで初期化する必要があり、そのjsコードは以下の通りである：
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker();
});
</script>
インターフェイスを使用したい場合は、初期化で言語パラメータを渡すことができる：
$('#datepicker').datepicker({language:'ja-JP'});
CAPTCHAプラグイン
CAPTCHA サーブレットの導入
package com.yueqian.echarts.servlet;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Properties;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import com.yueqian.echarts.model.Constant;
/**
* Servlet implementation class CheckImageServlet
*/
@WebServlet("/CheckImageServlet")
public class CheckImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckImageServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*
* //基本プロパティ
kaptcha.border yes/no //
kaptcha.image.width 130 //イメージ幅
kaptcha.image.height 48 //イメージの高さ
kaptcha.textproducer.font.size 38 //フォントサイズ
kaptcha.textproducer.char.length 4 //文字数
//その他のプロパティ
kaptcha.textproducer.char.space 10 //文字間隔
kaptcha.border.thickness 3 //ボーダーの太さ
kaptcha.textproducer.char.string "0" //利用可能な文字
kaptcha.textproducer.font.names "Arial" //
kaptcha.noise.imp com.google.code.kaptcha.impl.NoNoise //干渉しない
com.google.code.kaptcha.impl.DefaultNoise //デフォルトの干渉ポイント
kaptcha.background.clear.from 0,0,0 //グラデーション開始色
kaptcha.background.clear.to 255//グラデーションエンドカラー
*/
DefaultKaptcha dk = new DefaultKaptcha();
Properties ps = new Properties();
ps.setProperty("kaptcha.border", "yes");
ps.setProperty("kaptcha.image.width", "130");
ps.setProperty("kaptcha.image.height", "45");
ps.setProperty("kaptcha.textproducer.char.string","ABCDEFGHIリン・チー・マ・ルー・ハン");
ps.setProperty("kaptcha.noise.imp","com.google.code.kaptcha.impl.DefaultNoise");
ps.setProperty("kaptcha.background.clear.from",",0");
ps.setProperty("kaptcha.background.clear.to",",255");
ps.setProperty("kaptcha.textproducer.font.size","38");
ps.setProperty("kaptcha.textproducer.char.length", "4");
ps.setProperty("kaptcha.textproducer.font.color", "0,0,0");
dk.setConfig(new Config(ps));;
//ランダムコードを取得する
String checkCode = dk.createText();
request.getSession().setAttribute(Constant.CHECK_CODE, checkCode);
//グラフィックを描く
BufferedImage bi = dk.createImage(checkCode);
//レスポンスタイプを設定する
response.setContentType("image/png");
//出力グラフィックス
ImageIO.write(bi, "PNG", response.getOutputStream());
response.getOutputStream().flush();
response.getOutputStream().close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
ランディングページ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ログインインターフェース</title>
<!-- bootstrapIEブラウザのサポート-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap様々なプラットフォームに対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上記3つのメタタグ* *リストの一番上、その他のコンテンツは* *フォローする！-->
<!-- bootstrapのメインcssファイルを紹介する。-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- ブートストラップテーマスタイルの紹介-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- bootstrap jsの紹介-->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<!-- タイムフォーマットユーティリティを導入する.js -->
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
/* CAPTCHAイメージの更新を設定する*/
function getCheckCode() {
$("#checkImg").get(0).src='./CheckImageServlet?rand='+Math.random();
}
/* ログアウトするためのパラメータを渡す*/
function unlogin() {
location.href = "./LoginServlet?typeOper=unlogin";
}
</script>
</head>
<body style="background-color: #33CCCC">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="${pageContext.request.contextPath}/LoginServlet" method="post" style="position: relative; top: 200px; background-color: white; padding: 20px;border-radius: 10px;">
<input type="hidden" name="typeOper" value="login"/>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span> <input
type="text" name ="admId" class="form-control" placeholder="Username"
aria-describedby="basic-addon1">
</div>
<div> </div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span> <input
type="text" name="admPwd" class="form-control" placeholder="Password"
aria-describedby="basic-addon2">
</div>
<div> </div>
<div class="input-group">
<div class="col-md-6">
<input type="text" name="checkCode" class="form-control" placeholder=" " aria-describedby="basic-addon2">
</div>
<div class="col-md-6">
<a href="javascript:getCheckCode()"><img id="checkImg" alt="err pic" src="./CheckImageServlet"></a>
</div> </div>
<div> </div>
<div class="from-group">
<button type="submit" class="form-control btn btn-primary"> </button>
</div> </form>
</div>
</div>
</div>
</body>
</html>
表示効果は以下の通りです。
このブログを終了する元の意図は、バックエンドプログラマがよくあなたの参照のために、いくつかの一般的に使用されるテンプレートを持っているフロントエンドのページを美化して行くために小さなプロジェクトを行うことができるようにすることです、今日の内容はここで共有され、パートナーのサポートと励ましをありがとうございました、あなたが好き+注意ことができますよ！
