environnement

MacOS X High Sierra 10.13.6
PlayFramework 2.6.19
Bootstrap 4.1.3

Présentation de Bootstrap 4

Téléchargez les fichiers requis

bootstrap https://getbootstrap.com Téléchargez les css et js compilés. スクリーンショット 2018-10-16 15.13.43.png

Assurez-vous d'avoir les deux fichiers ci-dessous.

bootstrap-4/css/bootstrap.min.css
bootstrap-4/js/bootstrap.min.js

jQuery https://jquery.com

J'ai téléchargé jquery-3.3.1.min.js.

popper https://popper.js.org

Téléchargez popper.js.

Installation de fichiers

Projet Play Framework Dans nom_projet / public / javascripts /

bootstrap-4/js/bootstrap.min.js
jquery-3.3.1.min.js
popper.js

Installez trois fichiers. スクリーンショット 2018-10-16 15.35.42.png

Projet Play Framework Dans project_name / public / stylesheets /

Installez bootstrap-4 / css / bootstrap.min.css.

main.scala.html

Ajoutez le code ci-dessous à «» de «main.scala.html».

<!-- 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")">

Ajoutez le code ci-dessous à «» de «main.scala.html». (Dans l'ordre de 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 (texte intégral)

@(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>

Essayez d'utiliser la feuille de triche bootstrap4

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

Collez vos parties préférées dans main.scala.html.

J'ai pu confirmer qu'il était activé. Je vous remercie pour votre travail acharné.