Bootstrap学习笔记(三)-----导航条

一、基础导航

<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
     </ul>
</div>

外围div有两个类navbarnavbar-default,内部ul有两个类navnavbar-nav,当前li给个类active

二、导航条标题、二级导航、导航条状态

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">慕课网</a>
   </div>
    <ul class="nav navbar-nav">
         <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>

 

posted @ 2016-04-07 22:22  Leo的日记本  阅读(196)  评论(0编辑  收藏  举报