KingFisherではデザインテンプレートとしてBootstrapを採用したいと思います。（Twitterさんありがとう！）。
Bootstrapは初めて触るので、どんなものか正直手探りですが、まずはサイト（システム）に導入するまでの検証を行いたいと思います。
今回のタスク
- Bootstrapのライブラリをダウンロード
- Java Servlet で動くシステムに適用
- servletを実行するOSはWindowsとする
まずはBootstrapのライブラリをダウンロードします
https://getbootstrap.jp/へアクセスします
ダウンロードボタンをクリックします
ダウンロードボタンをクリックします
ダウンロードされたzipの中を見るとcssとjsフォルダあありますので、まずbootstrap.css
そしてbootstrap.jsを作成しているservletの開発環境へ持ち込みます
ログイン画面を実装してみます
１つめのポイントは、headタグでbootstrap.cssを読み込むように設定します
<!-- Bootstrap core CSS --> <head> <link rel="stylesheet" href="<%= request.getContextPath() %>/contents/css/bootstrap.css"/>
２つめのポイントは、bodyタグの最後でbootstrap.jsを読み込むように設定します
<script src="<%= request.getContextPath() %>/js/bootstrap.js"></script> </body>
完成したjspです
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:useBean id="Form0010" scope="request" class="jp.co.ngs.kingfisher.form.Form0010" />
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="NipponGuideSystem,.Co.Ltd.">
<META name="description" content="kingfisher">
<META name="keywords" content="kingfisher,販売管理システム">
<title>Login</title>
<style>
.form-signin-message {
width: 100%;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="<%= request.getContextPath() %>/contents/css/bootstrap.css"/>
</head>
<!-- <body class="text-center"> -->
<body class="d-flex flex-column h-100">
<header class="form-signin-message">
<div class="container">
<div class="pgm-message text-danger">
<ul>
<c:forEach var="data" items="${Form0010.strMessages}">
<li><c:out value="${data}" /></li>
</c:forEach>
</ul>
</div>
</div>
</header>
<main class="form-signin">
<div class="container">
<form method="post" action="./Ctrl0010">
<h1 class="h3 mb-3 fw-normal">Login</h1>
<input type="text" id="inputorgId" class="form-control"
placeholder="組織ID" required autofocus name="orgId" size="8"
maxlength="8" value="<c:out value="${Form0010.orgId}"/>">
<input type="text" id="inputloginid" class="form-control"
placeholder="ユーザーID" required name="loginId" size="20"
maxlength="64" value="<c:out value="${Form0010.loginId}"/>">
<input type="password" id="inputPassword" class="form-control"
placeholder="パスワード" required name="loginPassword" size="20"
maxlength="64" value="<c:out value="${Form0010.loginPassword}"/>">
<button class="w-100 btn btn-lg btn-primary" type="submit">LOGIN</button>
<p class="mt-5 mb-3 text-muted">© 2021 NipponGuideSystem</p>
</form>
</div>
</main>
<script src="<%= request.getContextPath() %>/js/bootstrap.js"></script>
</body>
</html>
実行した結果
そちらを参考にしながら、開発がすすめられそうです。
0 件のコメント:
コメントを投稿