Umgebung

MacOS X High Sierra 10.13.6
PlayFramework 2.6.19
Bootstrap 4.1.3

Einführung in Bootstrap 4

Laden Sie die erforderlichen Dateien herunter

bootstrap https://getbootstrap.com Laden Sie die kompilierten CSS und JS herunter. スクリーンショット 2018-10-16 15.13.43.png

Stellen Sie sicher, dass Sie die beiden folgenden Dateien haben.

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

jQuery https://jquery.com

Ich habe jquery-3.3.1.min.js heruntergeladen.

popper https://popper.js.org

Laden Sie popper.js herunter.

Dateiinstallation

Spielen Sie das Framework-Projekt In Projektname / public / javascripts /

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

Installieren Sie drei von. スクリーンショット 2018-10-16 15.35.42.png

Spielen Sie das Framework-Projekt In Projektname / public / stylesheets /

Installieren Sie bootstrap-4 / css / bootstrap.min.css.

main.scala.html

Fügen Sie den folgenden Code zu "" von "main.scala.html" hinzu.

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

Fügen Sie den folgenden Code zu "" von "main.scala.html" hinzu. (In der Reihenfolge von 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 (Volltext)

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

Versuchen Sie es mit einem Bootstrap4-Cheatsheet

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

Fügen Sie Ihre Lieblingsteile in main.scala.html ein.

Ich konnte bestätigen, dass es aktiviert war. Danke für deine harte Arbeit.