Help us understand the problem. What is going on with this article?

PlayFramework 2.6でbootstrap 4 を使う(CDNなし)

More than 1 year has passed since last update.

環境

  • 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<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" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">

main.scala.html<body>に下のコードを追記。
(jQuery, Popper, Bootstrapの順番で!)

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>

main.scala.html(全文)

@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
    <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" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">

        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>

    </head>
    <body>

        @content

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>

    </body>
</html>

bootstrap4 cheatsheet を使ってみる

https://hackerthemes.com/bootstrap-cheatsheet/

好きな部品をmain.scala.htmlとかに貼り付けてみる。

スクリーンショット 2018-10-16 15.51.40.png

有効化できていることが確認できました。
お疲れ様でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした