Bootstrap 左侧导航栏如何实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap 左侧导航栏如何实现相关的知识，希望对你有一定的参考价值。
1.Bootstrap 导航栏
导
航栏是一个很好的功能，是 Bootstrap
网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水
平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
2.默认的导航栏
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
3.下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">ios</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
结果如下所示：
官网文档比如 http://getbootstrap.com/javascript/#affix 就是个活生生的例子本回答被提问者和网友采纳
Bootstrap 4 移动导航栏从左侧滑动
【中文标题】Bootstrap 4 移动导航栏从左侧滑动【英文标题】：Bootstrap 4 mobile nav bar slide from left 【发布时间】：2017-10-11 07:42:35 【问题描述】：我正在使用最新版本的引导程序。我自己尝试了各种事情，之后我想我可能会在 *** 上找到一些东西。但是kind没有得到这个东西。我的意思是它是如何工作的？
这是我的代码。我不会在这里添加任何自定义样式，因为它们实际上并没有那么好，而是产生了一些错误。
我还检查了这篇帖子 Bootstrap - How to slide nav bar from left instead from top 我尝试了那里的所有答案，但它对我不起作用。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Roknil Style</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>【问题讨论】：
Bootstrap - How to slide nav bar from left instead from top的可能重复 我之前检查了帖子，并尝试了那里的答案。但结果并没有那么令人满意。 @shaochuancs 这不是重复的，因为另一个问题是针对 bootstrap 3 【参考方案1】：@media(max-width:768px)
.navbar-collapse
position:fixed;
left: 0%;
padding: 15px;
width:100%;
top:0%;
height:100%;
.navbar-collapse.collapsing
height: auto;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease;
left: -100%;
.navbar-collapse.show
left: 0;
-webkit-transition: left 0.3s ease-in;
-o-transition: left 0.3s ease-in;
-moz-transition: left 0.3s ease-in;
transition: left 0.3s ease-in;
【讨论】：
【参考方案2】：您可以像这样覆盖navbar-collapse 的过渡样式...
Demo
@media (max-width: 992px)
.navbar-collapse
position: fixed;
top: 50px; /* adjust to height of navbar */
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
height: 100%;
.navbar-collapse.collapsing
left: -75%;
transition: height 0s ease;
.navbar-collapse.show
left: 0;
transition: left 300ms ease-in-out;
.navbar-toggler.collapsed ~ .navbar-collapse
transition: left 500ms ease-in-out;
Demo - slide from rightDemo - slide from leftDemo - slide from left (full height)
【讨论】：
实际上我从这段代码中编辑了很多，它可以工作但不太令人满意，所以我会继续尝试，如果可能的话，有人可能会分享一些更好的解决方案。【参考方案3】：上面的 CSS 覆盖确实有效。但是，您必须先等待高度过渡 - 造成一点延迟。下面的代码解决了这个问题。
@media (max-width: 768px)
.navbar-collapse
position: fixed;
top: 0;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
height: 100%;
.navbar-collapse.collapsing
left: -75%;
transition: height 0s ease;
.navbar-collapse.show
left: 0;
transition: left 500ms ease-in-out;
.navbar-toggler.collapsed ~ .navbar-collapse
transition: left 500ms ease-in-out;
【讨论】：
【参考方案4】：其实你可以使用@Hrvoje Golcic 的solution 来实现从左滑动的效果。
我检查了您的代码并修复了一些问题。请检查以下代码 sn-p。您可能需要定义更多的 CSS 规则来设置导航栏的样式。
$(function()
// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function()
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate('width':'toggle', 280);
);
) #navbarCollapse
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 280px; /*example + never use min-width with this solution */
height: 100%;
background: #000;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="slide-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Roknil Style</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>【讨论】：
它可以工作，但请在整页中检查它，您将了解问题所在。谢谢。 @ramzan00 这只是一个演示，显示它在移动模式下工作。如果您全页打开它，它将不会再次处于移动模式。 我想我明白了。我会看看我是否可以用这段代码做得更好。顺便说一句，谢谢以上是关于Bootstrap 左侧导航栏如何实现的主要内容，如果未能解决你的问题，请参考以下文章