bootstrap3 - 按鈕下拉菜單

時間 2019-11-11

標籤 bootstrap3 bootstrap 按鈕下拉菜單欄目 Bootstarp 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按鈕下拉菜單</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">按鈕下拉菜單項</a></li>
      <li><a href="#">按鈕下拉菜單項</a></li>
      <li><a href="#">按鈕下拉菜單項</a></li>
      <li><a href="#">按鈕下拉菜單項</a></li>
    </ul>
  </div>
</div>
  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是同樣的。不一樣的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。css

按鈕下拉菜單其實就是普通的下拉菜單，只不過把「<button>」標籤元素換成了「<a>」標籤元素。惟一不一樣的是外部容器「div.dropdown」換成了「div.btn-group」。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。