【Java】Bootstrap

※Bootstrap4.41を使用

概要

オシャレなフォーム、ボタン、メニューなどの部品のテンプレート。
HTMLのタグにクラス名を指定するだけで簡単に使用できる。

使い方

方法1)ダウンロードしたファイルを使用
方法2)CDNを使用

ダウンロードしたファイルを使用

1)ファイルをダウンロードする
 Bootstrap · The most popular HTML, CSS, and JS library in the world.
Downloadを押下
f:id:vist764:20200329021856p:plain:w500
Complied CSS and JSのDownloadを押下
f:id:vist764:20200329022132p:plain:w500
2)ファイルを配置
cssとjs
f:id:vist764:20200329013230p:plain
3)HTMLにコードを記述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>入力画面</title>

    <!-- BootstrapのCSS読み込み -->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
    <form>
      <div class="form-group">
      <label for="name">氏名</label>
      <input type="email" class="form-control" id="name" placeholder="田中 太郎">
      </div>
      <div class="form-group">
      <label for="message">メッセージ</label>
      <textarea name="message" rows="8" cols="80" class="form-control"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">登録する</button>
    </form>

    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="../static/js/bootstrap.min.js"></script>
  </body>
</html>

CDNを使用

1)Get startedを押下
 Bootstrap · The most popular HTML, CSS, and JS library in the world.
f:id:vist764:20200329021856p:plain:w500
2)リンクをHTMLに張り付け
f:id:vist764:20200329022002p:plain:w500
CSSは/headの上
JSは/bodyの上
f:id:vist764:20200329000543p:plain

point

「ネット環境がない場所」
「参照しているリンクが切れている」
「参照しているサーバーが落ちている」場合は、読み込むことができない