Bootstrap下拉菜单

320 阅读1分钟
  • 需要两层div,最外层div需要.dropdown,用来包裹按钮和下拉菜单里的内容
  • 按钮层的按钮和向下箭头可合在一起或分开写
  • 可通过.bt-*设置按钮颜色
  • 向下箭头需添加.dropdown-toggle属性进行箭头的显示
  • 如果按钮和箭头分开写,需要添加.btn-group进行合并显示
  • 可添加.dropdown-toggle-split把按钮和箭头进行紧凑显示
  • 下拉菜单项需要放在一个div里,并添加.dropdown-menu属性
  • 每个下拉菜单项可是一个超链接,需添加.dropdown-item属性
  • 每个下拉菜单项可添加.active.disabled进行选中或不可选
  • 可添加<div class="dropdown-divider"></div>对每个下拉菜单项进行分隔
  • 可添加.btn-lg.btn-sm对按钮进行设置大小
  • 可在外层div里添加.dropup.dropleft.dropright设置箭头的方向
  • 可对包含菜单项的div添加.dropdown-menu-right设置菜单项的对齐方式,默认左对齐 练习:
		<div class="dropdown btn-group">
			<!--<button class="btn btn-success dropdown-toggle " data-toggle="dropdown">下拉菜单</button>-->
			<button class="btn btn-success btn-lg">下拉菜单</button>
			<button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item active">选项一</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item">选项二</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item disabled">选项三</a>
			</div>
		</div>
		<br /><br />
		<div class="dropdown btn-group dropup">
			<!--<button class="btn btn-success dropdown-toggle " data-toggle="dropdown">下拉菜单</button>-->
			<button class="btn btn-info btn-lg">下拉菜单(箭头向上)</button>
			<button class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
			<div class="dropdown-menu dropdown-menu-right">
				<a href="#" class="dropdown-item active">选项一</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item">选项二</a>
				<div class="dropdown-divider"></div>
				<a href="#" class="dropdown-item disabled">选项三</a>
			</div>
		</div>