锐客网

  1. 首页 > 睿知 > it技术 > >

bootstrap下拉dropdown

Bootstrap教程bootstrapdro

本文概述

  • Bootstrap下拉示例
  • Bootstrap 4禁用和活动项目
  • 下拉位置
  • Bootstrap 4 Dropup
下拉菜单是可切换的上下文菜单，用于以列表格式显示链接。它方便用户从预定义列表中选择一个值。可以通过下拉JavaScript插件进行交互。
【bootstrap下拉dropdown】你必须在.dropdown类中包装下拉菜单，才能创建Bootstrap Dropdown。
Bootstrap下拉示例
< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Dropdowns< /h2> < p>The .dropdown class is used to indicate a dropdown menu.< /p> < p>Use the .dropdown-menu class to actually build the dropdown menu.< /p> < p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".< /p> < div class="dropdown"> < button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example < span class="caret">< /span>< /button> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li>< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < /ul> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H1I-1.jpg">< /script>< /body> < /html>

Bootstrap下拉分隔线
.divider类用于分隔下拉菜单中的链接：
请参阅以下示例：
< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Dropdowns< /h2> < p>The .divider class is used to separate links inside the dropdown menu:< /p> < div class="dropdown"> < button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials < span class="caret">< /span>< /button> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li>< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < li class="divider">< /li> < li>< a href="http://www.srcmini.com/#">About Us< /a>< /li> < /ul> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H1I-1.jpg">< /script>< /body> < /html>

Bootstrap下拉标题
.dropdown-header类用于在下拉菜单中添加标题。
请参阅以下示例：
< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Dropdowns< /h2> < p>The .dropdown-header class is used to add headers inside the dropdown menu:< /p> < div class="dropdown"> < button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials < span class="caret">< /span>< /button> < ul class="dropdown-menu"> < li class="dropdown-header">Dropdown header 1< /li> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li>< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < li class="divider">< /li> < li class="dropdown-header">Dropdown header 2< /li> < li>< a href="http://www.srcmini.com/#">About Us< /a>< /li> < /ul> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H1I-1.jpg">< /script>< /body> < /html>

Bootstrap下拉列表：禁用项目
使用类.disabled禁用下拉菜单中的项目。
请参阅以下示例：
< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Dropdowns< /h2> < p>Here, CSS is disable.< /p> < div class="dropdown"> < button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials < span class="caret">< /span>< /button> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li class="disabled">< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < li class="divider">< /li> < li>< a href="http://www.srcmini.com/#">About Us< /a>< /li> < /ul> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H1I-1.jpg">< /script>< /body> < /html>

Bootstrap 4禁用和活动项目要使某个项目处于活动状态，请使用.active类突出显示特定的下拉菜单项（活动项目以蓝色背景色显示）。
要禁用下拉菜单中的项目，你必须使用.disabled类（它会显示浅灰色的文本颜色和悬停时带有“禁止停车标志”的图标）。
例：
< !DOCTYPE html> < html> < head> < title>Bootstrap Example< /title> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H644-9.jpg">< /script> < script src="http://img.readke.com/220416/15592K553-10.jpg">< /script> < /head> < body>< div class="container"> < h2>Dropdowns Active and Disable Example< /h2> < div class="dropdown"> < button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button < /button> < div class="dropdown-menu"> < a class="dropdown-item" href="http://www.srcmini.com/#">Normal< /a> < a class="dropdown-item active" href="http://www.srcmini.com/#">Active< /a> < a class="dropdown-item disabled" href="http://www.srcmini.com/#">Disabled< /a> < /div> < /div> < /div>< /body> < /html>

下拉位置用于放置下拉菜单项。默认情况下，下拉菜单位于左侧。你可以通过将.dropdown-menu-right类添加到具有.dropdown-menu的元素来使下拉列表右对齐。
例：
< !DOCTYPE html> < html> < head> < title>Bootstrap Example< /title> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/15592H644-9.jpg">< /script> < script src="http://img.readke.com/220416/15592K553-10.jpg">< /script> < /head> < body>< div class="container"> < h2>Right Aligned Dropdowns< /h2> < div class="dropdown"> < button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button < /button> < div class="dropdown-menu dropdown-menu-right"> < a class="dropdown-item" href="http://www.srcmini.com/#">Link 1< /a> < a class="dropdown-item" href="http://www.srcmini.com/#">Link 2< /a> < a class="dropdown-item" href="http://www.srcmini.com/#">Link 3< /a> < /div> < /div> < /div>< /body> < /html>

Bootstrap 4 Dropup如果你希望下拉菜单向上扩展而不是向下扩展，请更改

    推荐阅读


    上一篇：bootstrap列表组

    下一篇：bootstrap collapse用法