Bootstrap 下拉菜单总结（组件）

版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86581489

<div class="dropdown">  
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		网络游戏
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">英雄联盟</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">魔兽世界</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">大话西游</a>
		</li>
		<li role="presentation" class="divider"></li>   <!-- 分界线-->
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">九阴真经</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">英雄联盟</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">梦幻传奇</a>
		</li>
	</ul>
</div>		
</div>

• 通过添加 .pull-right来右对齐下拉菜单
• 使用 .dropdown-header 向下拉菜单的标签区域添加标题（标题的a链接可以去掉，这样效果更好）

注：如果我们对Bootstrap中的样式不满意的可以自己重新在style中定义，默认会直接覆盖原来自带的样式

  

更多类：

.dropdown  指定下拉菜单，下拉菜单都包裹子啊.dropdown里

.dropup  指定向上弹出的下拉菜单（与上面的dropdown方向相反）

.dropdown-menu  创建下拉菜单

.dropdown-menu-right  下拉菜单右对齐

.disabled  下来菜单的禁用选项

.divider   下拉菜单的分割线