diff options
Diffstat (limited to 'site/docs/4.3/components/dropdowns.md')
| -rw-r--r-- | site/docs/4.3/components/dropdowns.md | 86 |
1 files changed, 43 insertions, 43 deletions
diff --git a/site/docs/4.3/components/dropdowns.md b/site/docs/4.3/components/dropdowns.md index 417d9f5eab..865160a5c4 100644 --- a/site/docs/4.3/components/dropdowns.md +++ b/site/docs/4.3/components/dropdowns.md @@ -32,7 +32,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. {% capture example %} <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-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> @@ -48,7 +48,7 @@ And with `<a>` elements: {% capture example %} <div class="dropdown"> - <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false"> Dropdown link </a> @@ -65,7 +65,7 @@ The best part is you can do this with any button variant, too: <div class="bd-example"> <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-expanded="false">Primary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -75,7 +75,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -85,7 +85,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /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-expanded="false">Success</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -95,7 +95,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /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-expanded="false">Info</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -105,7 +105,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /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-expanded="false">Warning</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -115,7 +115,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /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-expanded="false">Danger</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -129,7 +129,7 @@ The best part is you can do this with any button variant, too: {% highlight html %} <!-- Example single danger button --> <div class="btn-group"> - <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-expanded="false"> Action </button> <div class="dropdown-menu"> @@ -151,7 +151,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the <div class="bd-example"> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -164,7 +164,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-secondary">Secondary</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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -177,7 +177,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -190,7 +190,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -203,7 +203,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -216,7 +216,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -233,7 +233,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the <!-- Example split danger button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> - <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -253,7 +253,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <div class="bd-example"> <div class="btn-toolbar" role="toolbar"> <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-expanded="false"> Large button </button> <div class="dropdown-menu"> @@ -266,7 +266,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </div><!-- /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 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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -280,7 +280,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </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"> + <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> Small button </button> <div class="dropdown-menu"> @@ -293,7 +293,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro </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-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -310,7 +310,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro {% highlight html %} <!-- Large button groups (default and split) --> <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-expanded="false"> Large button </button> <div class="dropdown-menu"> @@ -321,7 +321,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <button class="btn btn-secondary btn-lg" type="button"> 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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -331,7 +331,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <!-- Small button groups (default and split) --> <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-expanded="false"> Small button </button> <div class="dropdown-menu"> @@ -342,7 +342,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro <button class="btn btn-secondary btn-sm" type="button"> 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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -359,7 +359,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <div class="bd-example"> <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-expanded="false"> Dropup </button> <div class="dropdown-menu"> @@ -375,7 +375,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <button type="button" class="btn btn-secondary"> Split dropup </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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -391,7 +391,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. {% highlight html %} <!-- Default dropup button --> <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-expanded="false"> Dropup </button> <div class="dropdown-menu"> @@ -404,7 +404,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. <button type="button" class="btn btn-secondary"> Split dropup </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-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -419,7 +419,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <div class="bd-example"> <div class="btn-group dropright"> - <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-expanded="false"> Dropright </button> <div class="dropdown-menu"> @@ -435,7 +435,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <button type="button" class="btn btn-secondary"> Split dropright </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-expanded="false"> <span class="sr-only">Toggle Dropright</span> </button> <div class="dropdown-menu"> @@ -451,7 +451,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th {% highlight html %} <!-- Default dropright button --> <div class="btn-group dropright"> - <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-expanded="false"> Dropright </button> <div class="dropdown-menu"> @@ -464,7 +464,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th <button type="button" class="btn btn-secondary"> Split dropright </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-expanded="false"> <span class="sr-only">Toggle Dropright</span> </button> <div class="dropdown-menu"> @@ -479,7 +479,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the <div class="bd-example"> <div class="btn-group dropleft"> - <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-expanded="false"> Dropleft </button> <div class="dropdown-menu"> @@ -493,7 +493,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the <div class="btn-group"> <div class="btn-group dropleft" role="group"> - <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-expanded="false"> <span class="sr-only">Toggle Dropleft</span> </button> <div class="dropdown-menu"> @@ -513,7 +513,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the {% highlight html %} <!-- Default dropleft button --> <div class="btn-group dropleft"> - <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-expanded="false"> Dropleft </button> <div class="dropdown-menu"> @@ -524,7 +524,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the <!-- Split dropleft button --> <div class="btn-group"> <div class="btn-group dropleft" role="group"> - <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-expanded="false"> <span class="sr-only">Toggle Dropleft</span> </button> <div class="dropdown-menu"> @@ -543,7 +543,7 @@ Historically dropdown menu contents *had* to be links, but that's no longer the {% capture example %} <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-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> @@ -604,7 +604,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al {% capture example %} <div class="btn-group"> - <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-expanded="false"> Right-aligned menu </button> <div class="dropdown-menu dropdown-menu-right"> @@ -624,7 +624,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `. {% capture example %} <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> Left-aligned but right aligned when large screen </button> <div class="dropdown-menu dropdown-menu-lg-right"> @@ -640,7 +640,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d {% capture example %} <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false"> Right-aligned but left aligned when large screen </button> <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left"> @@ -762,7 +762,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. {% capture example %} <div class="d-flex"> <div class="dropdown mr-1"> - <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20"> + <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20"> Offset </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> @@ -773,7 +773,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. </div> <div class="btn-group"> <button type="button" class="btn btn-secondary">Reference</button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuReference"> @@ -803,7 +803,7 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. {% highlight html %} <div class="dropdown"> - <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false"> Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel"> |