Bootstrap 导航栏,按钮看起来像菜单折叠按钮
Bootstrap navbar, button to look like the menu collapse button
我的网站有一个 Bootstrap 导航栏作为我的菜单。它仅用于移动设备,因此菜单总是折叠成标准的导航栏折叠按钮。这是正确对齐的;我想要的是同一个导航栏中的后退按钮,它看起来就像菜单折叠按钮,只是带有不同的字形(人字形左),左对齐。关于如何实现这一点有什么想法吗?
这是菜单代码:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="meistro.html">Meistro</a></li>
<li><a href="deelnemers.html">Deelnemers</a></li>
<li><a href="jury.html">Jury</a></li>
<li><a href="orkest.html">Het orkest</a></li>
<li><a href="deharmonie.html">De Harmonie</a></li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li><a href="#" data-toggle="modal" data-target=".bs-nieuwsbrief">Nieuwsbrief</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
下面是一个工作示例:http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
在其他按钮的正上方添加一个新按钮:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
请注意,我添加了一个名为 navbar-left
的新 class。您可以将其重命名为您想要的任何名称(例如后退按钮)。我还使用默认情况下 Bootstrap 附带的 glyphicon left chevron,如果你使用 FontAwesome 或其他东西,你可以更改它。
添加CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
应该是 - 从那里调整它以适合您的目的。希望这有帮助。
我的网站有一个 Bootstrap 导航栏作为我的菜单。它仅用于移动设备,因此菜单总是折叠成标准的导航栏折叠按钮。这是正确对齐的;我想要的是同一个导航栏中的后退按钮,它看起来就像菜单折叠按钮,只是带有不同的字形(人字形左),左对齐。关于如何实现这一点有什么想法吗?
这是菜单代码:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="meistro.html">Meistro</a></li>
<li><a href="deelnemers.html">Deelnemers</a></li>
<li><a href="jury.html">Jury</a></li>
<li><a href="orkest.html">Het orkest</a></li>
<li><a href="deharmonie.html">De Harmonie</a></li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li><a href="#" data-toggle="modal" data-target=".bs-nieuwsbrief">Nieuwsbrief</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
下面是一个工作示例:http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
在其他按钮的正上方添加一个新按钮:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
请注意,我添加了一个名为 navbar-left
的新 class。您可以将其重命名为您想要的任何名称(例如后退按钮)。我还使用默认情况下 Bootstrap 附带的 glyphicon left chevron,如果你使用 FontAwesome 或其他东西,你可以更改它。
添加CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
应该是 - 从那里调整它以适合您的目的。希望这有帮助。