BootStrap学习笔记之nav导航栏和面包屑导航
nav导航栏
<navrole="navigation"class="navbarnavbar-default"> <divclass="container-fluid"></div> <divclass="navbar-header"> <ahref="#"class="navbar-brand">大大的logo</a> </div> <div> <ulclass="navnavbar-nav"> <li><ahref="#">分类</a></li> <li><ahref="#">分类</a></li> <li><ahref="#">分类<spanclass="caret"/></a></li> </ul> </div> </nav>
响应式的导航栏
<navclass="navbarnavbar-default"> <divclass="container-fluid"> <divclass="navbar-header"> <buttonclass="navbar-toggle"data-toggle="collapse"data-target="#one"> <spanclass="sr-only">切换导航</span> <spanclass="icon-bar"/> <spanclass="icon-bar"/> <spanclass="icon-bar"/> </button> <ahref="#"class="navbar-brand">BigLogo</a> </div> <divclass="collapsenavbar-collapse"id="one"> <ulclass="navnavbar-nav"> <li><ahref="#">分类1</a></li> <li><ahref="#">分类2</a></li> <li><ahref="#">分类3</a></li> <li><ahref="#">分类4</a></li> </ul> </div> </div> </nav>
具有不同对齐风格和固定的导航栏
<navclass="navbarnavbar-defaultnavbar-fixed-top"role="navigation"> <divclass="container-fluid"> <divclass="navbar-header"> <ahref="#"class="navbar-brand">前端万岁</a> </div> <div> <ulclass="navnavbar-navnavbar-right"> <li><ahref="#"><spanclass="glyphiconglyphicon-user"/>注册</a></li> <li><ahref="#"><spanclass="glyphiconglyphicon-log-in"/>登录</a></li> </ul> <ulclass="navnavbar-navnavbar-left"> <li><ahref="#"><spanclass="glyphiconglyphicon-user"/>注册</a></li> <li><ahref="#"><spanclass="glyphiconglyphicon-log-in"/>登录</a></li> </ul> </div> </div> </nav>
面包屑导航(BreadCrumb)
<olclass="breadcrumb"> <li><ahref='#'>首页</a></li> <li><ahef="#">Java</a></li> <liclass=active"><ahref="#">Xxx文章</a></li> </ol>
层次导航,让我想起UC的极速模式的X级页面
以上所述是小编给大家介绍的BootStrap学习笔记之nav导航栏和面包屑导航，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！