bootstrap實現下拉選單需要的連結引入
阿新 • • 發佈：2019-01-03
我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。
我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。
但是最初在匯入bootstrap時也遇到了很多問題。我是按照菜鳥教程http://www.runoob.com/bootstrap/bootstrap-environment-setup.html上環境安裝的教程來下載部署的，但是按照上面教程匯入後，發現下拉選單不能下拉，有的樣式也不完整。然後百度這個問題，有人回答需要Flat-UI的包。於是匯入了Flat-UI的包，這時候樣式比較完整了，但依然不能下拉選單。關於下拉選單不能正常顯示這個問題，說的最多的原因是jquery和bootstrap的匯入順序錯誤，因為bootstrap的實現是依賴於jQuery的，所以要先匯入jquery再匯入bootstrap，這一點我記住了，不過我的匯入順序是沒有錯的，我的問題不在這裡。最終是在百度知道看到一個回答，那個人貼出了他的html程式碼，說實驗過是可以實現下拉選單的，我適用了他的程式碼也是可以的。就沿用了他匯入的程式碼。這裡想記錄一下。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://cdn.bootcss.com/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="">會議室管理系統</a> </div> <div> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 會議室管理 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="">新增會議室</a></li> <li><a href="#">刪除會議室</a></li> <li><a href="#">修改會議室</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 使用者管理 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">新增使用者</a></li> <li><a href="#">刪除使用者</a></li> <li><a href="#">修改使用者</a></li> </ul> </li> <li><a href="#">會議室預訂記錄</a></li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href=""></span> 登出</a></li> </ul> </div> </nav>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://cdn.bootcss.com/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet"> </head>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>第一次寫部落格，不會排版，技術性也不高，邏輯也不清晰。
希望能堅持寫部落格，能寫的越來越好！