使用 Bootstrap 设置下拉菜单

也可以将菜单构建为下拉菜单,而不是下拉菜单。为此,只需将.dropup添加到父.btn-group容器中。

 您可以尝试运行以下代码集菜单以进行下拉-

示例

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap Example</title>

      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">

      <script src = "/scripts/jquery.min.js"></script>

      <script src = "/bootstrap/js/bootstrap.min.js"></script>

   </head>

   <body>

      <p>Dropdown</p>

      <div class = "btn-group" style = "margin-left:50px; margin-top:10px">

         <button type = "button" class = "btn btn-default dropdown-toggle btn-xs" data-toggle = "dropdown">

            Subject

               <span class = "caret"></span>

         </button>

         <ul class = "dropdown-menu" role = "menu">

            <li><a href = "#">Programming</a></li>

            <li><a href = "#">Web Dev</a></li>

            <li><a href = "#">Database</a></li>

            <li><a href = "#">Networking</a></li>

         </ul>

      </div>

      <p>Dropup</p>

      <div class = "row" style = "margin-left:50px; margin-top:120px">

         <div class = "btn-group dropup">

            <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">

               Subject

                  <span class = "caret"></span>

            </button>

            <ul class = "dropdown-menu" role = "menu">

               <li><a href = "#">Programming</a></li>

               <li><a href = "#">Web Dev</a></li>

               <li><a href = "#">Database</a></li>

               <li><a href = "#">Networking</a></li>

            </ul>

         </div>

      </div>

   </body>

</html>

以上是 使用 Bootstrap 设置下拉菜单 的全部内容, 来源链接: utcz.com/z/327240.html

回到顶部