Bootstrap组件——下拉菜单

一、下拉菜单

1.单一按钮的下拉菜单

1.btn菜单

任何一个 .btn块都可以定义变更为下拉菜单。可以自由引用.btn-prima等颜色及样式类来定义下拉菜单的外在表现

<div class="row mt-5">
	<div class="col-2">
		<div class="dropdown">//dropdown-toggle显示变换小三角，data-toggle="dropdown"显示隐藏转换
			<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
</div>

2.<a>菜单

<div class="row mt-5">
	<div class="col-2">
		<div class="dropdown">
			<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item">深圳</a>
			</div>
		</div>
	</div>
</div>

2.分离式按钮下拉菜单

注意添加了.dropdown-toggle-split -插入此符号为下拉选项作适当的间隔（距）处理。
这个额外的Class样式，将插入符号两边水平padding减少了25%，并移除了为默认下拉菜单添加的 margin-left 属性，这些额外的更改将插入符号集中在分裂式按钮中，并在主按钮旁边提供了适合的点击空间。

<div class="row mt-5">
	<div class="col-3">
		<div class="btn-group dropdown">
			<button class="btn btn-success btn-lg">分离式按钮下拉菜单</button>
			<button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"
				data-toggle="dropdown"></button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item">深圳</a>
			</div>
		</div>
	</div>
</div>

3.菜单尺寸

<div class="row mt-5">
	<div class="col-3 d-flex">
		<div class="dropdown">
			<button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按钮</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
		<div class="dropdown">
			<button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按钮</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
</div>

4.方向

增加.dropup 样式，使下拉菜单向上展开
通过将 .dropright添加到父元素来触发元素左侧的下拉菜单。
通过将 .dropleft 添加到父元素来触发元素左侧的下拉菜单。

<div class="row mt-5">
	<div class="col">
		<div class="dropup">
			<!-- 向上展开时，上方需要足够空间，否则会在底下显示 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropright">
			<!-- 向右展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropdown">
			<!-- 向下展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropleft">
			<!-- 向左展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
</div>

5.菜单项

<div class="row mt-5">
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">菜单项使用了button标签</button>
			<div class="dropdown-menu dropdown-menu-right">
				//dropdown-menu-right右对齐,响应式dropdown-menu{-sm|-md|-lg|-xl}-right
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>//割线
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>

6.非交互式下拉菜单

.dropdown-item-text. 还可以随意使用定制的CSS或文本实用程序进一步设计样式.

.active 让下拉列表中的项 样式为active
.disabled 让下拉列表中的项 样式为不可用

<div class="row mt-5">
	<div class="col">
		<div class="dropdown">
			<div class="dropdown-menu show">
				<span class="dropdown-item-text">非点击的项</span>
				<h4 class="dropdown-header">下拉菜单的标题</h4>
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item active">上海</a> <!-- 当前的选项 -->
				<a href="#" class="dropdown-item disabled">广州</a> <!-- 禁用的选项 -->
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>

7.偏移属性

<div class="row mt-5" style="margin-top: 260px!important;">
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button>
			<div class="dropdown-menu">
				<!-- 右对齐 -->
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button>
			<div class="dropdown-menu" data-reference="parent">
			//data-reference="parent"下拉时找到自己父级
				<!-- 右对齐 -->
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>

8.方法与事件

无论你是采用JavaScript 或者 data-api调用下拉菜单， data-toggle=“dropdown” 总要保留在下拉列表的触发器元素中。

<div class="row mt-5">
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button>
			<div class="dropdown-menu" id="myDropdown" data-reference="parent">
				<!-- 右对齐 -->
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropdown" id="myDropdown1">	<!-- 注意，事件要放在这里！！！ -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button>
			<div class="dropdown-menu" data-reference="parent">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>
<script>
	//方法
	$('#myBtn').click(function () {
		//$('#myDropdown').dropdown('show');
		//$('#myDropdown').dropdown('hide');需在dropdown-menu设置show类名，配合
		//$('#myDropdown').dropdown('toggle');目前无法实现动态开关
		//解决toggle的问题
		$('#myDropdown').toggle(function () {
			$('#myDropdown').dropdown('show');
		}, function () {
			$('#myDropdown').dropdown('hide');
		});
	});
	//事件
	$('#myDropdown1').on('show.bs.dropdown', function () {
		console.log('调用了show方法');
	});
	$('#myDropdown1').on('shown.bs.dropdown', function () {
		console.log('下拉列表完全显示了');
	});

	$('#myDropdown1').on('hide.bs.dropdown', function () {
		console.log('调用了hide方法');
	});
	$('#myDropdown1').on('hidden.bs.dropdown', function () {
		console.log('下拉列表完全隐藏了');
	});
</script>