（項目實戰一）響應式導航
阿新 • • 發佈：2018-06-18
源碼 資訊 AC 大屏幕 targe eight data- container 首頁
- 源碼如下：
<%-- Created by IntelliJ IDEA. User: shyroke Date: 2018/6/13 0013 Time: 17:18 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <title>boostrap</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css"> <style> </style> </head> <body > <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="padding:0;"><img height="50" width="179" src="<%=path%>/img/logo.jpg"alt="shyroke博客"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top:0"> <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-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav> <script src="<%=path%>/script/jquery-3.2.1.min.js"></script> <script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
- 如果是大屏幕，則顯示導航欄。如下圖
- 如果屏幕長度不夠顯示導航欄，則收起導航欄，如下圖
（項目實戰一）響應式導航