这一节主要介绍组件中的导航栏、导航条。Navigation。在实际项目中,导航栏是很常见的一种组件。学好这个总没差,早晚用得到。
导航的创建
标签页、胶囊式标签页、两端对齐式标签页、禁用的链接、下拉菜单。
- html代码
<div class="container">
<ul id="myTab" class="nav nav-tabs" role="tablist">
< ! -- Role属性的添加会避免一些不必要的问题。-->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation" ><a href="#">Hello</a></li>
<li role="presentation" ><a href="#">World</a></li>
</ul>
</div>
- js代码
<script src="jquery-3.1.0.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
})
</script>
- 标签页:
class="nav nav-tabs"
- 胶囊式标签页:
class="nav nav-pills"
- 两端式对齐标签页:
class="nav nav-tabs nav-justified"
- 禁止点击:
class="disabled"
下拉菜单Tabs with dropdowns
<div class="container">
<ul id="myTab" class="nav nav-pills nav-justified" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation" ><a href="#">Hello</a></li>
<li role="presentation" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">World <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">A</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">B</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">C</a></li>
</ul>
</li>
</ul>
</div>
导航条的使用
这部分主要了解基本的导航、表单、文本、非导航的链接、组件排列、固定在顶端/底端、反色的导航条以及路径导航等。
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cindy</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="mytab">
<li class="active"><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
<form class="navbar-form navbar-left" role="navigation">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-right navbar-nav">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Click<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Hello1</a></li>
<li><a href="#">Hello2</a></li>
<li><a href="#">Hello3</a></li>
<li><a href="#">Hello4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
- 固定在顶端/底端,使用下面代码设置class
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
- 反色的导航条
<nav class="navbar navbar-inverse" role="navigation">
- 路径导航
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<ol class="breadcrumb">
<li><a href="#">Homex</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</a></li>
</ol>
</nav>
关于导航组件就总结到这里,希望对你有所帮助。记得点赞,么么哒。