--- title: PlayFramework 2.6でbootstrap 4 を使う(CDNなし) tags: Java PlayFramework Bootstrap author: yuucu slide: false --- # 環境 * MacOS X High Sierra 10.13.6 * PlayFramework 2.6.19 * Bootstrap 4.1.3 # Bootstrap4の導入 ## 必要ファイルのダウンロード ### bootstrap https://getbootstrap.com コンパイル済みのcssとjsをダウンロードする。 スクリーンショット 2018-10-16 15.13.43.png 下の2つのファイルが有ることを確認する。 * `bootstrap-4/css/bootstrap.min.css` * `bootstrap-4/js/bootstrap.min.js` ### jQuery https://jquery.com `jquery-3.3.1.min.js` をダウンロードしました。 ### popper https://popper.js.org `popper.js` のダウンロード。 ## ファイルの設置 PlayFrameworkのプロジェクト `project_name/public/javascripts/`に * `bootstrap-4/js/bootstrap.min.js` * `jquery-3.3.1.min.js` * `popper.js` の3つを設置する。 スクリーンショット 2018-10-16 15.35.42.png PlayFrameworkのプロジェクト `project_name/public/stylesheets/`に * `bootstrap-4/css/bootstrap.min.css`を設置する。 スクリーンショット 2018-10-16 15.35.48.png ## main.scala.html `main.scala.html`の``に下のコードを追記。 ```html ``` `main.scala.html`の``に下のコードを追記。 (jQuery, Popper, Bootstrapの順番で!) ```html ``` #### main.scala.html(全文) ```html @(title: String)(content: Html) @title @content ``` # bootstrap4 cheatsheet を使ってみる https://hackerthemes.com/bootstrap-cheatsheet/ 好きな部品を`main.scala.html`とかに貼り付けてみる。 スクリーンショット 2018-10-16 15.51.40.png 有効化できていることが確認できました。 お疲れ様でした。