BootStrap学习笔记之nav导航栏和面包屑导航
nav导航栏
<nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的logo </a> </div> <div > <ul class="nav navbar-nav"> <li> <a href="#" > 分类 </a> </li> <li> <a href="#" > 分类 </a> </li> <li> <a href="#" > 分类 <span class="caret"/> </a> </li> </ul> </div> </nav>
响应式的导航栏
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#one"> <span class="sr-only">切换导航</span> <span class="icon-bar"/> <span class="icon-bar"/> <span class="icon-bar"/> </button> <a href="#" class="navbar-brand"> BigLogo </a> </div> <div class="collapse navbar-collapse" id="one"> <ul class="nav navbar-nav"> <li> <a href="#"> 分类1 </a> </li> <li> <a href="#"> 分类2 </a> </li> <li> <a href="#"> 分类3 </a> </li> <li> <a href="#"> 分类4 </a> </li> </ul> </div> </div> </nav>
具有不同对齐风格和固定的导航栏
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand"> 前端万岁 </a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注册</a></li> <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登录</a></li> </ul> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注册</a></li> <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登录</a></li> </ul> </div> </div> </nav>
面包屑导航(BreadCrumb)
<ol class="breadcrumb"> <li> <a href='#' > 首页 </a> </li> <li> <a hef="#" > Java </a> </li> <li class=active"> <a href="#"> Xxx文章 </a> </li> </ol>
层次导航,让我想起UC的极速模式的 X 级页面
相关推荐
乔乔 2017-11-23
soulis 2017-07-31
hllinc 2019-05-09
iChangebaobao 2017-01-06
hllinc 2016-11-28
lixia 2016-07-01
wuchangjian 2016-05-30
DJPLH 2016-05-30
wuchangjian 2016-03-08
DJPLH 2015-12-28
Chinahdy 2015-12-28