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工程配置文件没有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。