源代碼
<!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端
手機端
