Bootstrap组件_下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap组件_下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下拉菜單<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" ><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown pull-right"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" ><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
標題在任何下拉菜單中均可通過添加標題來標明一組動作。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown pull-right"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu" ><li><a href="#">Action</a></li><li class="dropdown-header">標題</li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
分割線為下拉菜單添加一條分割線，用于將多個鏈接分組。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
禁用的菜單項為下拉菜單中的 <li> 元素添加 .disabled 類，從而禁用相應的菜單項。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜單</title><link rel="stylesheet" href="bootstrap.min.css"><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">地鐵線路<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li class="disabled"><a href="#">2</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div></div>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap组件_下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap组件1_字体图标
- 下一篇： Bootstrap组件_按钮组