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

Backport #31861

Browse Source 
* Split up dropdown sizing docs to improve rendering

- Drop the included .btn-toolbar, no need
- Split large and small button examples
This commit is contained in:
XhmikosR
2020-10-30 15:43:19 +02:00
parent 76d4f728a0
commit f808026e5b
1 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
site/docs/4.5/components/dropdowns.md
View File

@@ -251,7 +251,6 @@ We use this extra class to reduce the horizontal `padding` on either side of the
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div class="bd-example"> <div class="bd-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<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
@@ -263,8 +262,8 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<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><!-- /btn-group --> </div>
<div class="btn-group ml-2"> <div class="btn-group">
<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>
@@ -276,36 +275,8 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<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><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div><!-- /btn-group --> </div>
<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 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div><!-- /example -->
{% highlight html %} {% highlight html %}
<!-- Large button groups (default and split) --> <!-- Large button groups (default and split) -->
@@ -328,7 +299,37 @@ Button dropdowns work with buttons of all sizes, including default and split dro
... ...
</div> </div>
</div> </div>
{% endhighlight %}
<div class="bd-example">
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<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">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
{% highlight html %}
<!-- Small button groups (default and split) --> <!-- Small button groups (default and split) -->
<div class="btn-group"> <div class="btn-group">
<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">