Bootstrap 下拉菜單
一.一個簡單的下拉菜單css
1.建立一個<div class="dropDown">的容器 //包裹素也可不爲div 但必定要有class .dropDownhtml
2.在容器內添加 <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">jquery
3.在button中加入主名稱 和<span class="caret"></span> <!---下拉三角-->bootstrap
4.在無序列表容器中加入 .dropdown-menuide
注：經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單ui
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
主題<span class="caret"></span> <!---下拉三角-->
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">第一個</a></li>
<li><a tabindex="-1" href="#">第二個</a></li>
<li class="divider">分割線</li>
</ul>
</div>
</body>
</html>spa
二. 按鈕下拉菜單htm
外側div 的class爲 .btn-group 不爲dropdownip
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> 按鈕下拉菜單
</button>
<ul class="dropdown-menu">
<li><a href="#">按鈕下拉菜單一</a></li>
<li><a href="#">按鈕下拉菜單二</a></li>
</ul>
</div>utf-8
三.導航欄中的下拉菜飯
在<li>中插入下拉菜單,將<li>做爲下拉菜單最外側容器 加class .dropdown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">導航</a> <!--導航標題-->
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">笑一下</a></li>
<li ><a href="#">樂一下</a></li>
<li class="dropdown"> <!--下拉菜單部分-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
其餘表情 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">big</a></li>
<li><a href="#">small</a></li>
<li><a href="#">分離</a></li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單
data-toggle="dropdown" 去掉這個就失去的下拉功能
<nav class="navbar navbar-default"> 最外側包裹<nav>標籤
標準導航條樣式 navbar navbar-default，
向 <div> 元素添加一個標題 class .navbar-header， 內部包含 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
- 1. Bootstrap 下拉菜單
- 2. Bootstrap-下拉菜單
- 3. bootstrap下拉菜單
- 4. Bootstrap 下拉菜單（Dropdowns）
- 5. Bootstrap下拉菜單相關
- 6. Bootstrap 按鈕下拉菜單
- 7. bootstrap之dropdown下拉菜單
- 8. Bootstrap 多級下拉菜單
- 9. Bootstrap-Plugin：下拉菜單（Dropdown）插件
- 10. Bootstrap 下拉菜單（Dropdowns）簡介
- 更多相關文章...
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • ionic 下拉刷新 - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。