※Bootstrap4.41を使用
概要
オシャレなフォーム、ボタン、メニューなどの部品のテンプレート。
HTMLのタグにクラス名を指定するだけで簡単に使用できる。
使い方
方法1)ダウンロードしたファイルを使用
方法2)CDNを使用
ダウンロードしたファイルを使用
1)ファイルをダウンロードする
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Downloadを押下
Complied CSS and JSのDownloadを押下
2)ファイルを配置
※cssとjs
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.
2)リンクをHTMLに張り付け
CSSは/headの上
JSは/bodyの上
point
「ネット環境がない場所」
「参照しているリンクが切れている」
「参照しているサーバーが落ちている」場合は、読み込むことができない