您的位置：首页 > Web前端 > BootStrap

bootstrap 导航栏

2015-11-25 20:01 671 查看
导航栏是一个很好的功能，是bootstrap网站一个突出的特点，导航栏在您的应用或网站中作为导航页头的响应式基础组件，导航栏在移动设备中的视图是堆叠的，随着可视窗口的宽度增大，导航栏也会随之水平展开。

默认的导航栏

创建一个默认的导航栏步骤如下：

1、向nav标签添加class.navbar,.navbar-default,然后再添加role="navigation",有助于增加可访问性。

2、向div元素添加一个标题class.navbar-header,内部包含了带有class.navbar-brand的a元素，这会让文本看起来大一号

3、向导航栏添加链接，您只需要简单的添加带有class.nav、.navbar-nav 的无序列表即可。

实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap历练实例：默认的导航栏</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">w3cschool<img src="Images/smiley.gif" class="navbar-nav" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
html5前端
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li class="divider"></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</ul>
</div>
</nav>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航