本文概述

• 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如果你希望下拉菜单向上扩展而不是向下扩展，请更改

推荐阅读

• 

  五味
• 

  激光能去除肥胖纹吗视频 激光能去除肥胖纹吗
• 

  原味烤肉制作方法 原味烤肉的制作方法
• 

  房间里面有老鼠怎么办
• 

  有没有好点收益高的副业项目？
• 

  年收入是指纯收入，年收入是什么意思
• 

  松下洗衣机烘干为什么出水,首先原因要搞清
• 

  读地图分析,如何读地图获取信息
• 

  3d|2千档高质价比手机推荐：骁龙870+三星屏+65W，真我真牛
• 

  刑事自诉案件的范围是什么
• 

  生理盐水洗鼻子可以预防新冠肺炎吗
• 

  胚芽燕麦粥
• 

  辰辉的寓意
• 

  健康工作远离疼痛现在要坐好
• 

  被子晒多久比较好
• 

  头孢料酒会有反应吗
• 

  鹌鹑鸟怎么养 鹌鹑鸟如何饲养
• 

  人成长分为哪些阶段
• 

  如何鉴别建兰国魂真假 如何鉴别建兰国魂真假
• 

  回归模型结果分析方法,ABC态度模型分析方法和运用

• bootstrap collapse用法
• bootstrap列表组
• bootstrap进度条
• bootstrap轮播组件
• bootstrap glyphicon用法
• bootstrap图像image
• bootstrap pager用法
• bootstrap分页pagination
• bootstrap panel用法