Question

我正在尝试使用百万美元布局创建一个典型的用户面板。

正如您在下面的预期结果图片中看到的那样，布局由标题和左侧菜单组成。从菜单中选择的内容显示在子部分中：

但是，我得到的结果就是这个：

这是我的“固定部分”代码，其中标题是“标题”片段，菜单是“菜单”片段：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>

<div id="wrapper">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
    <nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/></a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>

</body>
</html>

这是我的“子”页面，我在其中导入标题和菜单片段：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>

<div>
    my page content
</div>


<script>
    function test() {
        alert("TEST");
    }
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>

您可以在此链接中找到包含示例代码的gitHub存储库： https://github.com/MichaelKnight/thymeleafLayout

Answer 1

Bootstrap Dashboard

此Bootstrap Dashboard示例展示了如何实现三个组件页面。

顶部导航栏
补充工具栏导航菜单
内容区

顶部导航栏是<body>内的根组件。补充工具栏和内容区域是位于<div class="col-xs-*">行内的<div class="row">列，位于<div class="container-fluid">容器中。

访问上面的链接和view-source以查看HTML的结构。从根本上说这是一个CSS问题，因为您当前的GitHub项目包含所有元素，它们只是位于视图之外。添加适当的Bootstrap类将解决该问题。

正确包括了Thymeleaf碎片。

Answer 2

将布局示例上传到我的gitHub存储库，您可以在问题描述的末尾找到它。

顶栏：

<div layout:fragment="header">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
</div>

侧边菜单：

<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

然后你必须创建布局页面：

<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

使用百里香时，布局显示不完整

2 个答案:

Bootstrap Dashboard