本文主要是介绍bootstrap3-标签页 nav, tabs and pills，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
basic tab based Navigation
basic pills based Navigation
<div class="container"><div class="row"><!-- 横向TAB导航 --><div class="col-lg-6"><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Practice Editor </a></li><li><a href="#">Gallery</a></li><li><a href="#">Contact</a></li></ul></div><!-- 横向pill导航 --><div class="col-lg-6"><ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Practice Editor </a></li><li><a href="#">Gallery</a></li><li><a href="#">Contact</a></li></ul></div></div></div>
Stacked or vertical tabs
Stacked or vertical pills
<div class="container"><div class="row"><!-- 垂直TAB导航 --><div class="col-lg-6"><ul class="nav nav-tabs nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Practice Editor </a></li><li><a href="#">Gallery</a></li><li><a href="#">Contact</a></li></ul></div><!-- 垂直pill导航 --><div class="col-lg-6"><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Practice Editor </a></li><li><a href="#">Gallery</a></li><li><a href="#">Contact</a></li></ul></div></div></div>
Tab based Dropdowns
Pills based Dropdowns
<div class="container"><div class="row"><!-- Tab based Dropdowns --><div class="col-lg-6"><ul class="nav nav-tabs"><!-- TAB1 --><li class="active"><a href="#">Home</a></li><!-- TAB2 --><li><a href="#">About</a></li><!-- TAB3 --><!-- 封装一个下拉菜单 --><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a><!-- 封装下拉项 ,pull-right指定下拉框靠左对齐--><ul class="dropdown-menu pull-left"><li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <!-- 分割线 --> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul></li><!-- TAB4 --><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a><!-- 下拉框靠右对齐 --><ul class="dropdown-menu pull-right"><li><a href="#">PHP</a></li><li><a href="#">MySQL</a></li><li><a href="#">PostgreSQL</a></li><li class="divider"></li><li><a href="#">Live Demos</a></li></ul></li></ul></div><!-- Pills based Dropdowns --><div class="col-lg-6"><ul class="nav nav-pills"><!-- TAB1 --><li class="active"><a href="#">Home</a></li><!-- TAB2 --><li><a href="#">About</a></li><!-- TAB3 --><!-- 封装一个下拉菜单 --><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a><!-- 封装下拉项 --><ul class="dropdown-menu pull-left"><li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <!-- 分割线 --> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul></li><!-- TAB4 --><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a><ul class="dropdown-menu pull-right"><li><a href="#">PHP</a></li><li><a href="#">MySQL</a></li><li><a href="#">PostgreSQL</a></li><li class="divider"></li><li><a href="#">Live Demos</a></li></ul></li></ul></div></div></div>
Using nav list for stacked navigation with optional headers
垂直导航加Header进行分组
<div class="container"><div class="row"><div class="col-lg-6"><!-- 使用nav-list显示导航 --><ul class="nav nav-list"><!-- 为一组元素添加Header，分组 --><li class="nav-header"><b>First Header</b></li><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li><a href="#">Applications</a></li><!-- 为一组元素添加Header，分组 --><li class="nav-header"><b>Second Header</b></li><li><a href="#">Profile</a></li><li><a href="#">Settings</a></li><li><a href="#">Help</a></li></ul></div></div></div>
Using nav list for stacked navigation with icons
垂直导航列表加图标
<div class="container"><div class="row"><div class="col-lg-6"><!-- 使用nav-list显示导航 --><ul class="nav nav-list"><!-- 为一组元素添加Header，分组 --><li class="nav-header"><b>First Header</b></li><li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li><li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li><li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li><!-- 为一组元素添加Header，分组 --><li class="nav-header"><b>Second Header</b></li><li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li><li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li><li><a href="#"><span class="glyphicon glyphicon-star-empty"></span> Help</a></li></ul></div></div></div>
这篇关于bootstrap3-标签页 nav, tabs and pills的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
