bootstrap的导航

来源：互联网发布：php无法调用mysql函数编辑：程序博客网时间：2024/06/06 04:11

<div class="nav navbar-default navbar-fixed-top" role="navigation">
           <div class="container-fluid">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>   //屏幕小于678px时显示的图标
                   <a href="" class="navbar-brand"><img src="img/logo.png" height="50px"/></a>
               </div>
               <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav">
                   <li class="active"><a href=""><p>首页</p><span>home</span></a></li>
                   <li><a href=""><p>产品介绍</p><span>product</span></a></li>
                   <li><a href=""><p>新闻动态</p><span>news</span></a></li>
                   <li><a href=""><p>联系我们</p><span>contact</span></a></li>
               </ul>

               <div class="navbar-form navbar-right">
                   <a href="" class="navbar-link">登录</a>
                   <a href="" class="navbar-link">注册</a>
                   <input type="text" placeholder="请输入关键字查询" class="form-control"/>
                   <button class="btn btn-primary">搜索</button>
               </div>

               </div>
           </div>
       </div>

0 0