TaoBye

bootstrap导航菜单,手机和PC端自适应

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width"/>
    <meta charset="UTF-8">
    <title>淘拜网</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">导航条</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="padding: 10px 15px;" href="">
                <img alt="百度" style="width:80px;height: 26px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif"/>
            </a>
            <ul class="nav navbar-nav collapse navbar-collapse" id="nav-list">
                <li class="active"><a target="_blank" href="https://www.baidu.com/">百度</a></li>
                <li><a target="_blank" href="http://www.taobye.com/">淘拜网</a></li>
                <li><a target="_blank" href="http://ai.taobye.com/">淘拜商城</a></li>
                <li><a target="_blank" href="http://www.baidu.com/">百度</a></li>
                <li><a target="_blank" href="http://hengshi.taobye.com/">横市</a></li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>
阅读：6522   发布：2017-08-31 16:54:02
正在加载评论...