Convert added in badges to shortcode (#36007)
This commit is contained in:
Mark Otto
GitHub
parent
1936e0c5ea
commit
7c966f5848
|
|
@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ buttons.forEach(function (button) {
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -991,7 +991,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'),
|
|||
|
||||
### Custom popovers
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ Hover over the links below to see tooltips:
|
|||
|
||||
### Custom tooltips
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ With an SVG:
|
|||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
|
|||
|
||||
## CSS variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ Here's how you can use these in your Sass:
|
|||
|
||||
## Generating utilities
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
|
||||
{{< added-in "5.1.0" >}}
|
||||
|
||||
Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
|
|||
|
||||
## Opacity
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
|
||||
{{< added-in "5.1.0" >}}
|
||||
|
||||
As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Change the border color using utilities built on our theme colors.
|
|||
|
||||
## Opacity
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
|
|||
|
||||
## Opacity
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
|
||||
{{< added-in "5.1.0" >}}
|
||||
|
||||
As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{{- /* Outputs badge to identify the first version something was added */ -}}
|
||||
|
||||
{{- $version := .Get 0 -}}
|
||||
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>
|
||||
Loading…
Reference in New Issue