Bootstrap历练实例:响应式导航栏
2015-11-25 20:03
585 查看
响应式的导航栏
为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为.nav-collapse <div> 中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。下面的实例演示了这点:
<!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-widht,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">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">w3cschool</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</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="#">JavaScript</a></li>
<li><a href="#">jQuery</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>
</ul>
</li>
</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>
相关文章推荐
- bootstrap 导航栏
- bootstrap 中 input输入框与其他样式的组合
- Bootstrap历练实例:带有下拉菜单的标签和胶囊导航
- bootstrap历练实例: 导航元素中禁用的链接
- bootstrap 两端对齐的导航
- bootstrap历练实例: 垂直胶囊式的导航菜单
- bootstrap历练实例: 基本胶囊式的导航菜单
- bootstrap历练实例:标签式的导航菜单
- 如何在requirejs下引用bootstrap
- Bootstrap按钮组件
- Bootstrap学习------按钮
- Bootstrap历练实例:基本输入框组
- Bootstrap历练实例:输入框组的大小
- bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀
- bootstrap历练实例:按钮作为输入框组前缀或后缀
- bootstrap学习和使用的经验总结
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
- bootstrap的pages控件分页获取数据
- Bootstrap每天必学之下拉菜单
- Bootstrap每天必学之栅格系统(布局)