mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Drop .btn-block
classes, replace with utilities (#31995)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
5bd7aa365c
commit
fb3a57b7ba
@ -107,18 +107,3 @@
|
||||
.btn-sm {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
+ .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
}
|
||||
|
@ -605,8 +605,6 @@ $btn-link-color: $link-color !default;
|
||||
$btn-link-hover-color: $link-hover-color !default;
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
|
@ -72,13 +72,6 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
|
||||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
{{< /example >}}
|
||||
|
||||
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
|
||||
@ -105,6 +98,44 @@ Disabled buttons using the `<a>` element behave a bit different:
|
||||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
|
||||
{{< /callout >}}
|
||||
|
||||
## 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.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoing, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</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.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button class="btn btn-primary mr-md-2" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Button plugin
|
||||
|
||||
The button plugin allows you to create simple on/off toggle buttons.
|
||||
|
@ -25,6 +25,10 @@ toc: true
|
||||
|
||||
- Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
|
||||
|
||||
### Buttons
|
||||
|
||||
- [**Dropped `.btn-block` in favor of CSS grid utility classes.**]({{< docsref "/components/buttons#block-buttons" >}}) Instead of applying `.btn-block` to individual buttons, a group of buttons now get wrapped in a parent `.d-grid` class and can use `.gap-*` utilities for spacing.
|
||||
|
||||
### Forms
|
||||
|
||||
- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
|
||||
@ -38,6 +42,8 @@ toc: true
|
||||
- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
|
||||
- Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
|
||||
- Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
|
||||
- Added `.d-grid` to display utilities
|
||||
- Added new `gap` utilities (`.gap`) for CSS Grid layouts
|
||||
|
||||
## v5.0.0-alpha2
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user