mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 05:19:15 +02:00
Code Issues Releases Wiki Activity

Convert navbar to CSS variables

Browse Source 
Co-Authored-By: Gaël Poupard <ffoodd@users.noreply.github.com>
This commit is contained in:
Mark Otto
2021-07-06 19:34:12 -07:00
committed by Mark Otto
parent 8f11c52919
commit c9cec89764
4 changed files with 130 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.1/customize/css-variables.md
View File

@@ -30,11 +30,17 @@ Here are the variables we include (note that the `:root` is required) that can b
## Component variables
We're also beginning to make use of custom properties as local variables for various components. This way we can reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}).
Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.
We're also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.
Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and it's sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
## Prefix
Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
## Examples