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

Bootstrap下拉菜单

2024-10-11 03:59:02   218人阅读

使用下拉菜单（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下拉菜单


联系
我们