<nav role="navigation"> <div></div> <div> <a href="#"> 大大的logo </a> </div> <div > <ul> <li> <a href="#" > 分类 </a> </li> <li> <a href="#" > 分类 </a> </li> <li> <a href="#" > 分类 <span/> </a> </li> </ul> </div> </nav>
响应式的导航栏
<nav> <div> <div> <button data-toggle="collapse" data-target="#one"> <span>切换导航</span> <span/> <span/> <span/> </button> <a href="#"> BigLogo </a> </div> <div> <ul> <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 role="navigation"> <div> <div> <a href="#"> 前端万岁 </a> </div> <div> <ul> <li> <a href="#" > <span/>注册</a></li> <li> <a href="#" > <span/>登录</a></li> </ul> <ul> <li> <a href="#" > <span/>注册</a></li> <li> <a href="#" > <span/>登录</a></li> </ul> </div> </div> </nav>
面包屑导航(BreadCrumb)
<ol> <li> <a href='#' > 首页 </a> </li> <li> <a hef="#" > Java </a> </li> <li class=active"> <a href="#"> Xxx文章 </a> </li> </ol>
层次导航,让我想起UC的极速模式的 X 级页面
以上所述是小编给大家介绍的BootStrap学习笔记之nav导航栏和面包屑导航，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: