mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 03:40:10 +00:00
Code Issues Projects Releases Wiki Activity

Split up dropdown sizing docs to improve rendering (#31861)

Browse Source 
- Drop the included .btn-toolbar, no need
- Split large and small button examples

Closes #31841

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2020-10-13 05:14:55 -07:00 committed by GitHub
parent b81f1309c7
commit 4c3c552f93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
site/content/docs/5.0/components/dropdowns.md
View File

@ -247,7 +247,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-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button Large button
@ -259,8 +258,8 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul> </ul>
</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-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
@ -272,35 +271,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </div>
</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-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /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 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> </div>
{{< highlight html >}} {{< highlight html >}}
@ -324,8 +295,37 @@ Button dropdowns work with buttons of all sizes, including default and split dro
... ...
</ul> </ul>
</div> </div>
{{< /highlight >}}
<!-- Small button groups (default and split) --> <div class="bd-example">
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
{{< highlight html >}}
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button Small button