首页 > 代码库 > Bootstrap下拉菜单

Bootstrap下拉菜单

使用下拉菜单(Dropdown)插件,能够向不论什么组件(比方导航栏、标签页、胶囊式导航菜单、button等)加入下拉菜单。

假设想要单独引用该插件的功能,那么须要引用 dropdown.js。或者能够引入bootstrap.js或压缩版的bootstrap.min.js。

使用方法:

通过 data 属性:向链接或button加入 data-toggle="dropdown" 来切换下拉菜单


<!doctype html>
<html lang="en">
<head>
	<!--站点编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="Keywords" content="关键词一,关键词二">
	<meta name="Description" content="站点描写叙述内容">
	<meta name="Author" content="Yvette Lau">
	<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
	<title>BootstrapDemo</title>
	<!--css js 文件的引入-->
	<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../bootstrap-3.3.5-dist/css/bootstrap.min.css">>

技术分享

我们不使用a标签时,能够看出,排版和使用了a标签是不一样的,通过审查元素能够看出,css中对.dropdown-menu>li>a是设置了样式的。
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

切割线:


给li加上class = "divider"


<body style="padding: 20px;">
    <div class="dropdown">
    	<button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单
			<span class = "caret"></span>
    	</button>
    	<!-- aria-labelledby一般用在区域元素上。相应的id一般为相应的标题或是标签元素的id.关系型属性 -->
    	<ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">
    		<!-- role = "presentation"表示陈述 -->
    		<li role = "presentation"><a href=http://www.mamicode.com/"#">測试project师	    		>

技术分享

对齐:


通过给.dropdown-menu 加上class pill-right能够使其向右对齐。


<body style="padding: 20px;">
    <div class="dropdown">
    	<button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单
			<span class = "caret"></span>
    	</button>
    	<!-- aria-labelledby一般用在区域元素上,相应的id一般为相应的标题或是标签元素的id.关系型属性 -->
    	<ul class="dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu">
    		<!-- role = "presentation"表示陈述 -->
    		<li role = "presentation"><a href=http://www.mamicode.com/"#">測试project师	    		>
技术分享

下拉菜单标题:


通过给li加入class dropdown-header给下拉菜单的标签区域加入标题(注意,li中不嵌套a标签)


<body style="padding: 20px;">
    <div class="dropdown">
    	<button type = "button"  class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" id = "dropdownMenu">下拉菜单
			<span class = "caret"></span>
    	</button>
    	<!-- aria-labelledby一般用在区域元素上,相应的id一般为相应的标题或是标签元素的id.关系型属性 -->
    	<ul class="dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu">
    		<!-- role = "presentation"表示陈述 -->
    		<li role = "presentation" class="dropdown-header">下拉菜单标题</li>
    		<li role = "presentation"><a href=http://www.mamicode.com/"#">測试project师	    		>

技术分享





Bootstrap下拉菜单