Question

我在frondend很糟糕，我需要制作这个导航栏。

这是我到目前为止的代码：

    <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
            <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 active" href="#">Secret Agent Service</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="${activeItem == 'home' ? 'active' : ''}"><a
                    href="${pageContext.request.contextPath}/">Home</a></li>
            <li class="${activeItem == 'mission' ? 'active' : ''}"><a
                    href="${pageContext.request.contextPath}/missions">Missions</a></li>
            <li class="${activeItem == 'country' ? 'active' : ''}"><a
                    href="${pageContext.request.contextPath}/country">Countries</a></li>
            <li class="${activeItem == 'agent' ? 'active' : ''}"><a
                    href="${pageContext.request.contextPath}/agent">Agents</a></li>
            <li>
                <form method="post" action="${pageContext.request.contextPath}/logout">
                    <button class="nav navbar-btn ${activeItem == 'logout' ? 'logout' : ''}">Logout</button>
                </form>
            </li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

问题是post logout按钮没有继承bootstrap样式，不明白为什么......

有什么想法吗？感谢。

Answer 1

我不相信＆＃34; nav navbar-btn＆＃34;是一个有效的引导类来设置按钮的样式。使用像

这样的东西

<button class="btn btn-primary ${activeItem == 'logout' ? 'logout' : ''}">Logout</button>

或者，您可以从此列表中进行选择。

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

如何组合get和post按钮的样式？

1 个答案: