Play Framework 2.6 和 bootstrap 4

Question

我在将 Bootstrap 添加到我的游戏项目时遇到问题。我已经下载了 Bootstrap 4 的源代码并将 css 和 js 文件添加到项目中。

@*
* This template is called from the `index` template. This template
* handles the rendering of the page header and body tags. It takes
* two arguments, a `String` for the title of the page and an `Html`
* object to insert into the body of the page.
*@
@(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
    @* Here's where we render the page title `String`. *@
    <title>@title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/Blackweb.jpg")">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
</body>
@* And here's where we render the `Html` object containing
* the page content. *@
@content
<script src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>
<script src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
</body>
</html>

然而，当我运行并在本地主机上打开页面时，当屏幕尺寸缩小时应该出现的切换图标没有 appear.the 轮廓出现，但没有图标。将 bootstrap 4 集成到游戏框架 project.Here 中的任何想法或更简单的方法是我下面的问题

Answer 1

您bootstrap代码是正确的。该示例在 fiddle 中运行，这意味着问题完全出在 play 框架上的图标加载上。

您没有提到任何错误，但是，内容安全策略似乎有问题。 Play 2.6默认启用了contentSecurityPolicy，Bootstrap 4切换图标的来源为img data:

.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
}

因此您至少需要 img-src 'self' data: * 在安全策略中才能显示带有数据源的图像。

play.filters.headers.contentSecurityPolicy = "default-src 'self'; img-src 'self' data: *"

或者您可以将其关闭：

play.filters.headers.contentSecurityPolicy=null

更多信息：

https://www.playframework.com/documentation/2.6.x/Migration26#securityheadersfilter https://www.playframework.com/documentation/2.6.x/SecurityHeaders https://www.html5rocks.com/en/tutorials/security/content-security-policy/

Play Framework 2.6 和 bootstrap 4

Play Framework 2.6 and bootstrap 4

twitter-bootstrap

playframework

bootstrap-4

playframework-2.6