- Bootstrapとは
- 準備するソフトやライブラリ
- Bootstrapを導入する方法3選
- 最後に動作確認
- テーブルの使い方
- ボタンの使い方
- グリッドシステムを配置
今回は上記のテーマで解説していきます。
細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。
目次
Bootstrapとは
まずは「Bootstrap」とは何か、から紐解いていきましょう。
BootstrapはCSSのいわゆる「フレーワーク」です。
フレームワークとは「システム開発を楽に行えるように用意された、プログラムとかのひな形のこと」を指します。
開発元はあの有名な「Twitter社」です。
本来であれば、先ほど述べたように「CSS」をすべて、自分の手によって1から組み立てていかないといけません。
作業工程もHTMLとは別にCSSスタイルシートというものを別途組み立てていく必要があるため、非常に作業が面倒であることが多いです。
しかし、この「Bootstrap」では、あらかじめテンプレートやシステムが構築されているので、誰でも簡単にCSSを構築していくことが可能となります。
また、直接HTMLのbodyに書き込めるので、別途でスタイルシートを組まなくてよいのも特徴の１つです。
余談ですが、以前は「Twitter Bootstrap」でしたが、現在では「Bootstrap」と名称が変更されています。
Bootstrapが選ばれる理由
Bootstrapがなぜこのように広く浸透しているかというと、「レスポンシブサイト」に対応しているのが特に大きな理由の１つであることが考えられます。
通常の場合、現在ですと、スマートフォンやタブレット、その他小型端末機器や、パソコン上でも小さく端に寄せられてしまうとサイトの形は崩れてしまいます。
それらを１つ１つ手作業で調節するというのは、かかる時間も労力も恐ろしいほど必要とします。
Bootstrapは、既にそういったものが内蔵されているので、ブラウザの横幅サイズを判断基準として、レイアウトを整えてくれます。
また、個人で好きなように設定するのも簡単です。
準備するソフトやライブラリ
今回使用するものは、主に下記です。
- TERASOLUNA GFW
- Spring MVC
- Bootstrap
- JQuery Bootstrap
原則、最新バージョンを使用することをお勧めします。
2020年8月現在、最新のバージョンは５のベータ版なので、不具合があるようでしたらバージョン４に戻すのが良いです。
なお、他のソフトにも同様のことが言えます。
Bootstrapを導入する方法5選
導入方法はたくさんありますが、今回は簡単なものから順に解説していきます。
HTMLからCSSファイルを読み込む
コピペするだけなので、非常に簡単です。
1.bootstrap公式ページにアクセス
2.下にスクロールすると「BootstrapCDN」があるので、そこから手に入れます。
3.下記のコードをHTMLの</head>の直前に設置します。
|
1 2 |
<!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
|
1 2 3 4 |
<!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html> |
アプリ経由でBootstrapを読み込む
2つ目はアプリ経由でBootstrapを読み込みます。
事前にCSSファイルをダウンロードしているのが前提になります。
TERASOLUNAでは<mvc:resources>タグが設定済みで、src/main/webapp/resourcesディレクトリに配置したCSSファイルが自動的に公開されるようになっています。
※ちなみに、CSS等のリソースはウェブサーバーやAPサーバーで公開します。なので、アプリで公開するとかはありませんのでご安心ください。
Beanで定義されたファイルが下記です（spring-mvc.xml）
|
1 2 3 |
<mvc:resources mapping="/resources/**" location="/resources/,classpath:META-INF/resources/" cache-period="#{60 * 60}" /> |
このままで大丈夫です。
また、ディレクトリの設定例は下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
src/main/webapp/ - resouces/app/ - css/ - bootstrap.min.css - bootstrap.min.css.map - fonts/ - glyphicons-halflings-regular.eot - glyphicons-halflings-regular.svg - glyphicons-halflings-regular.ttf - glyphicons-halflings-regular.woff - glyphicons-halflings-regular.woff2 - js/ - bootstrap.min.js - jquery.min.js - jquery.min.map |
DLしたBootstrap及びJQueryはsrc/main/webapp/resources/appディレクトリに設置します。
当然ですが、CSSはCSSファイルへ、JSはJSファイルへ組み込みます。
JSPファイルの設定例は下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <!-- (1) --> <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/app/css/bootstrap.min.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/bootstrap.min.js"></script> </head> <body> <!-- (2) --> <div id="wrapper" class="container-fluid"> <h1>Hello world!</h1> </div> </body> </html> |
アプリ公開用のパスを指定します。
BootstrapのCSSファイルとJSファイル、JQueryのJSファイルを読み込みます。
※CDNとの大きな違いは、EL式を利用してアプリケーション内のパスを指定している部分となります。
WebJarsを活用してBootstrapを読み込む
3つ目の方法として、WebJarsを利用していきましょう。
MavenでCSSやJSファイルを取得するとほぼ自動でアプリに組み込むことができます。
<mvc:resources>タグを設定していきます。
すると、WebJarsで取得したCSSファイル等を公開できるようになります。
WebJarsで取得できるものはかなりメジャーなものだけになります。
なので、ライブラリーで必要なファイルが取得できるか確認しておくことをオススメします。
Mavenファイルの設定例（pom.xml）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- == Begin WebJars == --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1-1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7-1</version> </dependency> <!-- == End WebJars == --> |
続いて、dependenciesタグ内にwebjars-locatorとBootstrapとJQueryを追加します。
Beanファイルの設定例（spring-mvc.xml）
|
1 2 3 4 5 |
<mvc:resources mapping="/resources/**" location="/resources/,classpath:META-INF/resources/,/webjars/" cache-period="#{60 * 60}"> <mvc:resource-chain resource-cache="true" /> </mvc:resources> |
locationに/webjars/の中に<mvc:resources>タグを格納していきます。
そして、<mvc:resource-chain>タグを用意して、<mvc:resources>タグ内に格納していきます。
JSPファイル設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <!-- (1) --> <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script> </head> <body> <!-- (2) --> <div id="wrapper" class="container-fluid"> <h1>Hello world!</h1> </div> </body> </html> |
アプリを公開するパスを設定していきます。
それぞれのファイルを読み込む作業をしていきます。
- Bootstrapの以下２つ
- CSSファイル
- JSファイル
- JQueryのJSファイル
bootstrapを導入したら動作確認を忘れずに
実際にアプリを起動してみましょう。
ブラウザの開発者ツールを開きます。
「ネットワーク」を確認して、参照ファイルの取得画面で「200 OK」になっていれば、完了です。
正常にBootstrapが適用されています。
mvc bootstrapでのテーブルの使い方
Bootstrapでは、tableタグでテーブルレイアウト（表組み）を簡単に装飾できます。
詳しくは下記の記事で紹介しています。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" /> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script> $(function () { // datatableの設定を変更 $("#table1").DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json" } }); }); </script> </body> </html> |
mvc bootstrapでのボタンの使い方
サイト等でよく見かけるクリックできる「ボタン」を作成できます。
詳しくは下記の記事で紹介しています。
サンプルコード
|
1 2 3 4 5 6 7 8 9 |
<button type="button" class="btn btn-primary">あお</button> <button type="button" class="btn btn-secondary">はいいろ</button> <button type="button" class="btn btn-success">みどり</button> <button type="button" class="btn btn-danger">あか</button> <button type="button" class="btn btn-warning">きいろ</button> <button type="button" class="btn btn-info">あおみどり</button> <button type="button" class="btn btn-light">しろ</button> <button type="button" class="btn btn-dark">くろ</button> <button type="button" class="btn btn-link">リンク</button> |
mvc bootstrapでのグリッドシステムの使い方
グリッドシステムとは、いわゆる視聴する端末によって構造を変化させる機能です。
つまり、どんな端末から見ても形の崩れてない綺麗な、本来こちらが見せたかったありのままを見せることが可能となります。
詳しくは下記の記事で紹介しています。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div class="container"> <div class="row"> <div class="col-lg-6 chartreuse"> 6 </div> <div class="col-lg-6 seashell"> 6 </div> </div> <br> <h2>4分割</h2> <div class="row"> <div class="col-lg-3 chartreuse"> 3 </div> <div class="col-lg-3 seashell"> 3 </div> <div class="col-lg-3 chartreuse"> 3 </div> <div class="col-lg-3 seashell"> 3 </div> </div> <br> <h2>12分割</h2> <div class="row"> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> <div class="col-lg-1 chartreuse"> 1 </div> <div class="col-lg-1 seashell"> 1 </div> </div> </div> |
