下拉菜单
定义:用于显示链接列表的可切换、有上下文的菜单。(大家都知道哈)
HTML中,可以使用任何的 HTML 元素来打开下拉菜单,我想大家都知道就是<span>,<div> 或 a <button> 元素。
在css中.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown {
position: relative;
display: inline-block;
}
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<a href="#">bootstrap</a>
<a href="#">bootstrap</a>
<a href="#">bootstrap</a>
</div>
这个是我之前学的,要在HTML和CSS俩边都的敲,然后最近在学这个bootstrap,感觉方便的不是一点,http://v3.bootcss.com/components/#dropdowns-example这个是bootstrap的学习网站,言归正传,在bootstrap上的学到的下拉菜单。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
代码案例
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-
labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
对齐
默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
<ul class="dropdown-menu dropdown-menu-right" aria- labelledby="dLabel">
</ul>
分割线
在下拉菜单添加一条分割线,用于将多个链接分组
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
<li role="separator" class="divider"></li>
</ul>
总结
bootstrap中的下拉菜单,差不多就学了这么多。基本还挺简单,如果还有那不懂可以去http://www.bootcss.com/访问哦!