详解Bootstrap下拉菜单组件

bootstrap框架中之下拉菜单组件是一个独自的零件,根据不同之本,他对应的文本:

less
对应之源码文件为:dropdowns.less

sass对应之源码文件也:_dropdowns.scss

在利用bootstrap矿建的下拉菜单时,必须调用bootstrap框架提供的bootstrap.js文件。对于非编译版本,可以当js下找到一个曰也dropdown.js的公文,也可调用这个文件。也可以调用压缩好之文书bootstrap.min.js

出于bootstrap组件交互作用都是借助让jQuery库写的插件,所以当采取bootstrap.min.js之前一定要是先期加载jQuery.min.js

官网上之演示:

<div
class=”dropdown”> <button
class=”btn btn-default dropdown-toggle” type=”button”
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” class=”divider”></li> <li
role=”presentation”><a
role=”menuitem”
tabindex=”-1″ href=”#”>下拉菜单项</a></li> </ul> </div>

详解:

1、使用一个称作也dropdown的容器包裹了百分之百下拉菜单元素

<div
class=”dropdown”></div>

2、使用了<button>按钮作为父菜单,并且定义类名dropdown-toggle和由定义data-toggle属性,且值必须与最好外容器类名一致

data-toggle=“dropdown”

3、下拉菜单项用了一个ul列表,并且定义一个类名为dropdown-menu

<ul
class=”dropdown-menu”></ul>

bootstrap中的下拉菜单项默认是藏匿的,dropdown-menu设置了display:none

.dropdown-menu {

  position

:
absolute;/*安装绝对定位,相对于父元素div.dropdown*/

  top

:
100%;/*于下拉菜单项在父菜单项底部,如果父元素不安装相对固定,该因素相对于body元素*/

  left

:
0;

  z-index

:
1000;/*深受下拉菜单项无叫另外因素遮盖住*/

  display

:
none;/*默认隐藏下拉菜单项*/

  float

:
left;

  min-width

:
160px;

  padding

: 5px
0;

  margin

: 2px 0
0;

  font-size

:
14px;

  list-style

:
none;

  background-color

:
#fff;

  background-clip

:
padding-box;

  border

: 1px
solid #ccc;

  border

: 1px
solid rgba(0, 0, 0, .15);

  border-radius

:
4px;

  -webkit-box-shadow

: 0 6px
12px rgba(0, 0, 0, .175);

  box-shadow

: 0 6px
12px rgba(0, 0, 0, .175); }

当用户点击父级菜单时,下拉菜单会展示出,再次点击时下拉菜单将持续隐藏

图片 1

图片 2

详解:

经js给父级容器div.dropdown添加或同一远在open来控制下拉菜单显示或隐蔽,也就是说,默认情况,div.dropdown没有接近名open,当用户率先不善点击时,div.dropdown会添加类名open,当用户更点击时,div.dropdown容器中之类名会被移除

.open
> .dropdown-menu {

  display

:
block; }

下拉分隔线

万一下拉菜单来半点独组,那么组以及组之间可经丰富一个空的<li>,并且让这li添加类名.dividerl来实现增长下拉分隔线的职能

.dropdown-menu .divider {

  height

:
1px;

  margin

: 9px
0;

  overflow

:
hidden;

  background-color

:
#e5e5e5; }

图片 3

 

 

 

 

 

 

 

 

 

菜单标题

为让这个分组更明了,还好于每个组添加一个满头标题。

<div
class=”dropdown”> <button
class=”btn btn-default dropdown-toggle” type=”button”
id=”dropdownMenu1″ data-toggle=”dropdown”>

下拉菜单

<span
class=”caret”></span> </button> <ul
class=”dropdown-menu” role=”menu”
aria-labelledby=”dropdownMenu1″> <li
role=”presentation” class=”dropdown-header”>第一部分食谱头部</li> <li
role=”presentation”><a
role=”menuitem”
tabindex=”-1″ href=”#”>下拉菜单项</a></li>

<li
role=”presentation” class=”divider”></li> <li
role=”presentation” class=”dropdown-header”>第二部分食谱头部</li>

<li
role=”presentation”><a
role=”menuitem”
tabindex=”-1″ href=”#”>下拉菜单项</a></li> </ul> </div>

css样式:

.dropdown-header {

  display

:
block;

  padding

: 3px
20px;

  font-size

:
12px;

  line-height

:
1.42857143;

  color

:
#999; }

 

bootstrap框架中下拉菜单默认是不当对共同,如果一旦下拉菜单相对于父级容器右对一头,可以于dropdown-menu上上加一个类.dropdown-menu-right,注意,从v3.1.0版本开始,不再建议对下拉菜单使用.pull-right类

<div
class=”dropdown”> <button
class=”btn btn-default dropdown-toggle” type=”button”
id=”dropdownMenu1″ data-toggle=”dropdown”>

  下拉菜单

<span
class=”caret”></span> </button> <ul
class=”dropdown-menu dropdown-menu-right” role=”menu”
aria-labelledby=”dropdownMenu1″>

</ul> </div>

.dropdown-menu-right {

  right

:
0;

  left

:
auto; }

.dropdown

{

  float

:
left; }

 

小菜单项状态

下拉菜单的默认状态有浮动状态:hover和要害状态:focus

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {

  color

:
#262626;

  text-decoration

:
none;

  background-color

:
#f5f5f5; }

下拉菜单还有当前状态与剥夺状态,这半栽状态下方式就待以对应之菜系项达到加上对应的类名

<div
class=”dropdown”> <button
class=”btn btn-default dropdown-toggle” type=”button”
id=”dropdownMenu1″ data-toggle=”dropdown”>

  下拉菜单

<span
class=”caret”></span> </button> <ul
class=”dropdown-menu” role=”menu”
aria-labelledby=”dropdownMenu1″> <li
role=”presentation” class=”active”><a
role=”menuitem”
tabindex=”-1″ href=”#”>下拉菜单项</a></li>

    ….

<li
role=”presentation” class=”disabled”><a
role=”menuitem”
tabindex=”-1″ href=”#”>下拉菜单项</a></li> </ul> </div>

CSS:

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active
> a:focus {

  color

:
#fff;

  text-decoration

:
none;

  background-color

:
#428bca;

  outline

:
0; }

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 

{

  color

:
#999; }

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 

{

  text-decoration

:
none;

  cursor

:
not-allowed;

  background-color

:
transparent;

  background-image

:
none;

  filter

:
progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

 

相关文章