mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

Rewrite dropdowns

Browse Source 
- Remove nested > selectors for dropdown items
- Update docs examples to use all the new markup
This commit is contained in:
Mark Otto
2015-08-17 11:19:14 -07:00
parent 5d114f8cb4
commit e558f490dd
4 changed files with 222 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
docs/components/button-dropdown.md
View File

@@ -24,63 +24,63 @@ Turn a button into a dropdown toggle with some basic markup changes.
<div class="bd-example"> <div class="bd-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@@ -90,13 +90,13 @@ Turn a button into a dropdown toggle with some basic markup changes.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action Action
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -110,78 +110,78 @@ Similarly, create split button dropdowns with the same markup changes, only with
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@@ -192,13 +192,13 @@ Similarly, create split button dropdowns with the same markup changes, only with
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -212,13 +212,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button Large button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@@ -226,13 +226,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button Small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@@ -240,13 +240,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button Extra small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div><!-- /example --> </div><!-- /example -->
@@ -257,9 +257,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button Large button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
<!-- Small button group --> <!-- Small button group -->
@@ -267,9 +267,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button Small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
<!-- Extra small button group --> <!-- Extra small button group -->
@@ -277,9 +277,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button Extra small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -294,26 +294,26 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
</div> </div>
@@ -324,8 +324,8 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}

82
docs/components/dropdowns.md
View File

@@ -20,17 +20,11 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> <a class="dropdown-item" href="#">Something else here</a>
<li> </div>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</div> </div>
{% endexample %} {% endexample %}
@@ -43,9 +37,9 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcallout %} {% endcallout %}
{% highlight html %} {% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
... ...
</ul> </div>
{% endhighlight %} {% endhighlight %}
## Menu headers ## Menu headers
@@ -53,15 +47,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Add a header to label sections of actions in any dropdown menu. Add a header to label sections of actions in any dropdown menu.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li class="dropdown-header">Dropdown header</li> <h6 class="dropdown-header">Dropdown header</h6>
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> </div>
<li>
<a href="#">Another action</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Menu dividers ## Menu dividers
@@ -69,39 +59,25 @@ Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider. Separate groups of related menu items with a divider.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> <a class="dropdown-item" href="#">Something else here</a>
<li> <div class="dropdown-divider"></div>
<a href="#">Another action</a> <a class="dropdown-item" href="#">Separated link</a>
</li> </div>
<li>
<a href="#">Something else here</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Disabled menu items ## Disabled menu items
Add `.disabled` to a `<li>` in the dropdown to disable the link. Add `.disabled` to items in the dropdown to **style them as disabled**.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#">Regular link</a>
<a href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
</li> <a class="dropdown-item" href="#">Another link</a>
<li class="disabled"> </div>
<a href="#">Disabled link</a>
</li>
<li>
<a href="#">Another link</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Usage ## Usage
@@ -121,9 +97,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger Dropdown trigger
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dLabel"> <div class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -135,9 +111,9 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
Dropdown trigger Dropdown trigger
</a> </a>
<ul class="dropdown-menu" aria-labelledby="dLabel"> <div class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}

40
docs/components/navs.md
View File

@@ -123,13 +123,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
@@ -149,13 +149,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
@@ -182,14 +182,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> <a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</li> </div>
<li>
<a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div id="myTabContent" class="tab-content">

72
scss/_dropdown.scss
View File

@@ -53,54 +53,50 @@
.dropdown-divider { .dropdown-divider {
@include nav-divider($dropdown-divider-bg); @include nav-divider($dropdown-divider-bg);
} }
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
} }
// Hover/Focus state // Links, buttons, and more within the dropdown menu
.dropdown-menu > li > a { .dropdown-item {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
@include hover-focus { @include hover-focus {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-hover-bg; background-color: $dropdown-link-hover-bg;
} }
}
// Active state // Active state
.dropdown-menu > .active > a { &.active {
@include plain-hover-focus { @include plain-hover-focus {
color: $dropdown-link-active-color; color: $dropdown-link-active-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-active-bg; background-color: $dropdown-link-active-bg;
outline: 0; outline: 0;
} }
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
@include plain-hover-focus {
color: $dropdown-link-disabled-color;
} }
// Nuke hover/focus effects // Disabled state
@include hover-focus { //
text-decoration: none; // Gray out text and ensure the hover/focus state remains gray
cursor: $cursor-disabled; &.disabled {
background-color: transparent; @include plain-hover-focus {
background-image: none; // Remove CSS gradient color: $dropdown-link-disabled-color;
@include reset-filter(); }
// Nuke hover/focus effects
@include hover-focus {
text-decoration: none;
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
}
} }
} }