diff options
Diffstat (limited to 'site/content/docs/5.2/components')
-rw-r--r-- | site/content/docs/5.2/components/button-group.md | 20 | ||||
-rw-r--r-- | site/content/docs/5.2/components/dropdowns.md | 60 | ||||
-rw-r--r-- | site/content/docs/5.2/components/navbar.md | 16 | ||||
-rw-r--r-- | site/content/docs/5.2/components/offcanvas.md | 4 |
4 files changed, 50 insertions, 50 deletions
diff --git a/site/content/docs/5.2/components/button-group.md b/site/content/docs/5.2/components/button-group.md index e72855d5a9..8f7d2d6a9e 100644 --- a/site/content/docs/5.2/components/button-group.md +++ b/site/content/docs/5.2/components/button-group.md @@ -173,10 +173,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi <button type="button" class="btn btn-primary">2</button> <div class="btn-group" role="group"> - <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> @@ -204,10 +204,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> @@ -215,28 +215,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary">Button</button> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Dropdown link</a></li> <li><a class="dropdown-item" href="#">Dropdown link</a></li> </ul> diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index 8b8514b95b..ec7e584b5b 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> + <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> @@ -45,11 +45,11 @@ And with `<a>` elements: {{< example >}} <div class="dropdown"> - <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </a> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> + <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> @@ -353,10 +353,10 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> - <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2"> + <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item active" 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> @@ -378,10 +378,10 @@ And putting it to use in a navbar: <div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> - <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> + <ul class="dropdown-menu dropdown-menu-dark"> <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> @@ -406,10 +406,10 @@ Make the dropdown menu centered below the toggle with `.dropdown-center` on the {{< example >}} <div class="dropdown-center"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Centered dropdown </button> - <ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action three</a></li> @@ -482,10 +482,10 @@ Make the dropup menu centered above the toggle with `.dropup-center` on the pare {{< example >}} <div class="dropup-center dropup"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Centered dropup </button> - <ul class="dropdown-menu" aria-labelledby="dropupCenterBtn"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action two</a></li> <li><a class="dropdown-item" href="#">Action three</a></li> @@ -617,10 +617,10 @@ You can use `<a>` or `<button>` elements as dropdown items. {{< example >}} <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> + <ul class="dropdown-menu"> <li><button class="dropdown-item" type="button">Action</button></li> <li><button class="dropdown-item" type="button">Another action</button></li> <li><button class="dropdown-item" type="button">Something else here</button></li> @@ -728,10 +728,10 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari {{< example >}} <div class="btn-group"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> @@ -913,10 +913,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo {{< example >}} <div class="d-flex"> <div class="dropdown me-1"> - <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20"> Offset </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset"> + <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> @@ -924,10 +924,10 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo </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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <span class="visually-hidden">Toggle Dropdown</span> </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference"> + <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> @@ -944,10 +944,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop {{< example >}} <div class="btn-group"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> Default dropdown </button> - <ul class="dropdown-menu" aria-labelledby="defaultDropdown"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> @@ -955,10 +955,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <div class="btn-group"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> Clickable outside </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> @@ -966,10 +966,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <div class="btn-group"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> Clickable inside </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> @@ -977,10 +977,10 @@ By default, the dropdown menu is closed when clicking inside or outside the drop </div> <div class="btn-group"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> Manual close </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> <li><a class="dropdown-item" href="#">Menu item</a></li> @@ -1036,10 +1036,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ```html <div class="dropdown"> - <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + <button type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown trigger </button> - <ul class="dropdown-menu" aria-labelledby="dLabel"> + <ul class="dropdown-menu"> ... </ul> </div> diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md index 392531160d..c5f1fa389e 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.2/components/navbar.md @@ -52,10 +52,10 @@ Here's an example of all the sub-components included in a responsive light-theme <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> @@ -207,10 +207,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown link </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> + <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> @@ -523,10 +523,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Link </a> - <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> @@ -695,10 +695,10 @@ In the example below, to create an offcanvas navbar that is always collapsed acr <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> - <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index 00aec2d99f..cba75ac216 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -66,10 +66,10 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div> <div class="dropdown mt-3"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> Dropdown button </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <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> |