Html - Bootstrap 头部

Posted 2020-06-29

响应式头部Nav

 

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">品牌LOGO</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cy_tp_ul">
                    <span class="icon-bar"></span>        
                    <span class="icon-bar"></span>            
                    <span class="icon-bar"></span>            
                </button>
            </div>        
            <div class="collapse navbar-collapse" id="cy_tp_ul">
                <ul class="nav navbar-nav navbar-right" style="margin-top: 0px;">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list"></span> 咨询</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span> 关于</a></li>
                </ul>
            </div>
        </div>
    </nav>