首页 > 代码库 > Bootstrap 导航栏

Bootstrap 导航栏

Bootstrap 导航栏

  NavBar是对Nav的包含。在Nav之外还做以下内容:

  1、根为 <nav class="navbar navbar-default">

  2、在Nav前添加头 <div class="navbar-header"> <a class="navbar-brand">

  3、Nav的calss改 navbar-nav

  

<nav class="navbar navbar-default">    <div class="container-fluid">    <div class="navbar-header">        <a class="navbar-brand" href="#">菜鸟教程</a>    </div>    <div>        <ul class="nav navbar-nav">            <li class="active"><a href="#">iOS</a></li>            <li><a href="#">SVN</a></li>            <li class="dropdown">                <a href="#" class="dropdown-toggle" data-toggle="dropdown">                    Java                    <b class="caret"></b>                </a>                <ul class="dropdown-menu">                    <li><a href="#">jmeter</a></li>                    <li><a href="#">EJB</a></li>                    <li><a href="#">Jasper Report</a></li>                    <li class="divider"></li>                    <li><a href="#">分离的链接</a></li>                    <li class="divider"></li>                    <li><a href="#">另一个分离的链接</a></li>                </ul>            </li>        </ul>    </div>    </div></nav>

2、折叠的导航

  

参考:http://www.runoob.com/bootstrap/bootstrap-navbar.html

Bootstrap 导航栏