kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

fixes #21454 by revamping some docs styles for dropdowns

This commit is contained in:
Mark Otto 2017-01-03 19:24:24 -08:00
parent 8b5c5408bb
commit f3d0fee91e
2 changed files with 29 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/assets/scss/_component-examples.scss
View File

@ -251,17 +251,6 @@
} }
} }
// Example dropdowns
.bd-example > .dropdown > .dropdown-toggle {
float: left;
}
.bd-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: .25rem;
clear: left;
}
// Example tabbable tabs // Example tabbable tabs
.bd-example-tabs .nav-tabs { .bd-example-tabs .nav-tabs {
margin-bottom: 1rem; margin-bottom: 1rem;

60
docs/components/dropdowns.md
View File

@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements: Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
{% example html %} {% example html %}
<div class="dropdown show"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
@ -252,7 +252,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group ml-2">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button> <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
@ -279,7 +279,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group ml-2">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button> <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
@ -344,34 +344,32 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Trigger dropdown menus above elements by adding `.dropup` to the parent element. Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<div class="bd-example"> <div class="bd-example">
<div class="btn-toolbar" role="toolbar"> <div class="btn-group dropup">
<div class="btn-group dropup"> <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"> Dropup
Dropup </button>
</button> <div class="dropdown-menu">
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div> </div>
</div>
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-secondary"> <button type="button" class="btn btn-secondary">
Split dropup Split dropup
</button> </button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" 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>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -407,7 +405,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s. Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
{% example html %} {% example html %}
<div class="dropdown show"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
@ -510,7 +508,7 @@ $('.dropdown-toggle').dropdown()
{% endhighlight %} {% endhighlight %}
{% callout info %} {% callout info %}
#### `data-toggle="dropdown"` still required ##### `data-toggle="dropdown"` still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
{% endcallout %} {% endcallout %}