diff options
Diffstat (limited to 'site/content/docs/5.3/components/buttons.md')
| -rw-r--r-- | site/content/docs/5.3/components/buttons.md | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index ae58fca..83a6138 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -129,7 +129,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t ## Block buttons -Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors. +Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors. {{< example >}} <div class="d-grid gap-2"> @@ -156,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F </div> {{< /example >}} -Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked. +Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked. {{< example >}} <div class="d-grid gap-2 d-md-flex justify-content-md-end"> @@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. {{< example >}} -<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button> -<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button> -<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button> +<p class="d-inline-flex gap-1"> + <button type="button" class="btn" data-bs-toggle="button">Toggle button</button> + <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button> + <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button> +</p> +<p class="d-inline-flex gap-1"> + <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button> + <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button> + <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button> +</p> {{< /example >}} {{< example >}} -<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a> -<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a> -<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a> +<p class="d-inline-flex gap-1"> + <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a> + <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a> + <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a> +</p> +<p class="d-inline-flex gap-1"> + <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a> + <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a> + <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a> +</p> {{< /example >}} ### Methods @@ -201,8 +215,8 @@ const bsButton = new bootstrap.Button('#myButton') | Method | Description | | --- | --- | | `dispose` | Destroys an element's button. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. | +| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. | | `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | {{< /bs-table >}} @@ -227,7 +241,7 @@ As part of Bootstrap's evolving CSS variables approach, buttons now use local CS Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins. -Here's an example of building a custom `.btn-*` modifier class like we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables. +Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables. <div class="bd-example"> <button type="button" class="btn btn-bd-primary">Custom button</button> |