bootstrap導航菜單，手機和PC端

時間  2019-11-10
標籤 bootstrap 導航 菜單 手機 欄目 Bootstarp 简体版
原文   原文鏈接

 源代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width"/>
    <meta charset="UTF-8">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <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>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="nav-list">
                <li class="active"><a target="_blank" href="https://www.baidu.com/">百度</a></li>
                <li><a target="_blank" href="http://www.zhaopin.com/">智聯招聘</a></li>
                <li><a target="_blank" href="http://www.iqiyi.com/">愛奇藝</a></li>
                <li><a target="_blank" href="http://www.youku.com/">優酷</a></li>
                <li><a target="_blank" href="http://www.ifeng.com/">鳳凰網</a></li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

 

效果圖

PC端css

手機端html

 

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程