以下是头部导航的代码,我只简要的对个别常用属性进行解释
总效果如图所示:
代码如下:
<nav> //navbar-inverse 设置背景 //navbar-fixed-top 设置头部固定在顶部,因此需要给body设置顶部padding,一般设置为padding-top:60px <div> //container-fluid设置导航条内容是否有一定的内间距,如果class="container-fluid"则没有内间距,内容紧贴左侧 //如果设置class="container",则内容有一定的内间距,内容对称居中 <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> //这里是响应式的写法,在小屏幕上回显示三杆,无需改动 <a href="#" >某管理系统</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div> <ul> <li><a href="#" >首页 <span>(current)</span></a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span></span></a> <ul> <li >业务功能</li> <li><a href="#" >信息建立</a></li> <li><a href="#" >信息查询</a></li> <li><a href="#" >信息管理</a></li> <li role="separator"></li> <li >系统功能</li> <li><a href="#" >设置</a></li> <li role="separator"></li> </ul> </li> <li><a href="#" >帮助</a></li> </ul> <form> <div> <input type="text" placeholder="username..."> <input type="password" placeholder="password..."> </div> <button type="submit">Login</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
您可能感兴趣的文章: