}
],
"license": "MIT",
+ "dependencies": {
+ "remark": "^15.0.1",
+ "remark-html": "^16.0.1",
+ "yaml": "^2.7.0"
+ },
"devDependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/markdown-remark": "^6.3.2",
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
- "dev": true,
"license": "ISC",
"bin": {
"yaml": "bin.mjs"
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
+ },
+ "dependencies": {
+ "remark": "^15.0.1",
+ "remark-html": "^16.0.1",
+ "yaml": "^2.7.0"
}
}
--- /dev/null
+---
+interface Props {
+ tabs: {
+ id: string;
+ label: string;
+ content?: string;
+ }[];
+ activeTab?: string;
+}
+
+const { tabs, activeTab } = Astro.props;
+---
+
+<div class="tabs-component">
+ <ul class="nav nav-underline mb-3" role="tablist">
+ {tabs.map((tab) => (
+ <li class="nav-item" role="presentation">
+ <button
+ class={`nav-link ${activeTab === tab.id ? 'active' : ''}`}
+ id={`${tab.id}-tab`}
+ data-bs-toggle="tab"
+ data-bs-target={`#${tab.id}`}
+ type="button"
+ role="tab"
+ aria-controls={tab.id}
+ aria-selected={activeTab === tab.id}
+ >
+ {tab.label}
+ </button>
+ </li>
+ ))}
+ </ul>
+
+ <div class="tab-content">
+ {tabs.map((tab) => (
+ <div
+ class={`tab-pane fade ${activeTab === tab.id ? 'show active' : ''}`}
+ id={tab.id}
+ role="tabpanel"
+ aria-labelledby={`${tab.id}-tab`}
+ >
+ {tab.content || <slot />}
+ </div>
+ ))}
+ </div>
+</div>
+
+<script>
+ // Initialize Bootstrap tabs
+ document.addEventListener('DOMContentLoaded', () => {
+ const triggerTabList = document.querySelectorAll('[data-bs-toggle="tab"]');
+ triggerTabList.forEach(triggerEl => {
+ const tabTrigger = new bootstrap.Tab(triggerEl);
+ triggerEl.addEventListener('click', event => {
+ event.preventDefault();
+ tabTrigger.show();
+ });
+ });
+
+ // Handle URL hash changes
+ const handleHashChange = () => {
+ const hash = window.location.hash.substring(1);
+ if (hash) {
+ const tab = document.querySelector(`[data-bs-target="#${hash}"]`);
+ if (tab) {
+ const tabTrigger = new bootstrap.Tab(tab);
+ tabTrigger.show();
+ }
+ }
+ };
+
+ // Initial hash check
+ handleHashChange();
+
+ // Listen for hash changes
+ window.addEventListener('hashchange', handleHashChange);
+ });
+</script>
+
+<style>
+ .tabs-component {
+ margin-bottom: 2rem;
+ }
+
+ .nav-underline .nav-link {
+ color: var(--bs-body-color);
+ border-bottom: 2px solid transparent;
+ transition: border-color 0.2s ease-in-out;
+ }
+
+ .nav-underline .nav-link:hover {
+ border-bottom-color: var(--bs-primary);
+ }
+
+ .nav-underline .nav-link.active {
+ color: var(--bs-primary);
+ border-bottom-color: var(--bs-primary);
+ }
+
+ .tab-content {
+ padding: 1rem 0;
+ }
+</style>
--- /dev/null
+---
+/*
+ * Outputs badge to identify this as a breaking change from previous major version
+ */
+
+interface Props {
+ version: string
+}
+
+const { version } = Astro.props
+---
+
+<small
+ class="d-inline-flex mb-3 px-2 py-1 fw-semibold bg-danger text-on-danger rounded-3"
+ >Breaking Change</small
+>
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
-<Example class="grid gap-2" style="--bs-columns: 4;" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text">${themeColor.title}</button>`), `
+<Example class="grid gap-2" style="--bs-columns: 4; justify-content: start;" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text justify-self-start">${themeColor.title}</button>`), `
<button type="button" class="btn btn-link">Link</button>`]} />
<Callout name="warning-color-assistive-technologies" />
toc: true
---
+import Tabs from '@components/Tabs.astro';
+
+## CDN
+
+## Install
+
+<Tabs
+ tabs={[
+ { id: 'tab1', label: 'npm', content: 'Default content for tab 2' },
+ { id: 'tab2', label: 'RubyGems', content: 'Default content for tab 3' },
+ { id: 'tab3', label: 'Composer', content: 'Default content for tab 4' },
+ { id: 'tab4', label: 'NuGet', content: 'Default content for tab 5' },
+ ]}
+ activeTab="tab1"
+>
+ <div slot="tab1">
+ Custom content for tab 1
+ </div>
+ <div slot="tab2">
+ Custom content for tab 2
+ </div>
+</Tabs>
+
## Compiled CSS and JS
Download ready-to-use compiled code for **Bootstrap v[[config:current_version]]** to easily drop into your project, which includes:
---
title: Get started with Bootstrap
-description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
+description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in a few minutes.
aliases:
- "/docs/[[config:docs_version]]/getting-started/"
- "/docs/getting-started/"
Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
-<br/>
-
1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) in mobile devices.
```html
---
title: Background
-description: Convey meaning through `background-color` and add decoration with gradients.
+description: Convey meaning through `background-color`, adjust opacity with `color-mix()` utilities, and add decoration with gradients.
toc: true
---
import { getData } from '@libs/data'
-<Callout name="warning-color-assistive-technologies" />
-
## Background color
-Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you’ll want to use `.text-*` [color utilities]([[docsref:/utilities/colors]]).
+Set the `background-color` of an element.
-<Callout>
-Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6.
-</Callout>
+- Colors are generated from the `$new-theme-colors` Sass map with a `theme-color-values()` function that looks up semantic colors based on a particular key from the Bootstrap theme config.
+- Additional colors are generated from the separate `$theme-bgs` Sass map.
+- Background utilities are generated in a two-step process to allow for dynamic alpha transparency changes:
+ - We generate an attribute utility for classes that include `.bg-`, which looks like `[class*="bg-"]`, and set `background-color: var(--bs-bg)`.
+ - Then, our specific color utilities set the `--bs-bg` CSS variable to the color value.
+- Background utilities don't set `color`, so you may need to use `.text-` or `.text-on-*` [color utilities]([[docsref:/utilities/colors]]).
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} ${themeColor.contrast_color ? `text-${themeColor.contrast_color}` : `text-white`}">.bg-${themeColor.name}</div>
-<div class="p-3 mb-2 bg-${themeColor.name}-subtle text-${themeColor.name}-emphasis">.bg-${themeColor.name}-subtle</div>`),
- `<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
-<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
-<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
-<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>`
+ ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-on-${themeColor.name}">.bg-${themeColor.name}</div>
+<div class="p-3 mb-2 bg-subtle-${themeColor.name} text-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
+ `<div class="p-3 mb-2 bg">.bg</div>
+<div class="p-3 mb-2 bg-1">.bg-1</div>
+<div class="p-3 mb-2 bg-2">.bg-2</div>
+<div class="p-3 mb-2 bg-3">.bg-3</div>`
]} />
+Behind the scenes, the utilities come together like this:
+
+```css
+[class*="bg-"] {
+ background-color: var(--bs-bg);
+}
+
+.bg-success {
+ --bs-bg: var(--bs-success);
+}
+```
+
+<Callout name="warning-color-assistive-technologies" />
+
+## Background opacity
+
+<BreakingChange />
+
+**Background opacity utilities have changed in v6** to use `.bg-{number}` instead of `.bg-opacity-{number}`. These new utilities are built with CSS-native `color-mix()` functions that mix the `.bg-{color}`'s CSS variable with `transparent`. This allows for real-time background opacity changes without compilation.
+
+Note that changing the alpha-transparency or opacity of a background color may require you to also update the text color to ensure proper contrast.
+
+<Example code={`<div class="p-2 bg-success text-on-success">.bg-success</div>
+<div class="p-2 bg-success bg-90 text-on-success">.bg-90</div>
+<div class="p-2 bg-success bg-80 text-on-success">.bg-80</div>
+<div class="p-2 bg-success bg-70 text-on-success">.bg-70</div>
+<div class="p-2 bg-success bg-60 text-on-success">.bg-60</div>
+<div class="p-2 bg-success bg-50 text-success">.bg-50</div>
+<div class="p-2 bg-success bg-40 text-success">.bg-40</div>
+<div class="p-2 bg-success bg-30 text-success">.bg-30</div>
+<div class="p-2 bg-success bg-20 text-success">.bg-20</div>
+<div class="p-2 bg-success bg-10 text-success">.bg-10</div>`} />
+
+As mentioned above, this works by combining the power of multiple utilities and CSS `color-mix()`. Here's how the compiled CSS looks:
+
+```css
+[class*="bg-"] {
+ background-color: var(--bs-bg);
+}
+
+.bg-success {
+ --bs-bg: var(--bs-success);
+}
+
+.bg-10 {
+ background-color: color-mix(in srgb, var(--bs-bg) 10%, transparent);
+}
+```
+
## Background gradient
By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
})}
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
+<<<<<<< HEAD
## Opacity
<AddedIn version="5.1.0" />
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>`} />
+=======
+>>>>>>> c719573e0 (More docs stuff and wip edits)
## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]([[docsref:/customize/css-variables]]) (aka CSS variables) for colors and more.
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
+<ScssDocs name="theme-colors" file="scss/_theme.scss" />
+
+<ScssDocs name="utils-bg-color" file="scss/_utilities.scss" />
{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
import { getData } from '@libs/data'
-<Callout name="warning-color-assistive-technologies" />
-
## Colors
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]([[docsref:/helpers/colored-links]]) which have `:hover` and `:focus` states.
-<Callout>
-Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6.
-</Callout>
+- Colors are generated from the `$new-theme-colors` Sass map with a `theme-color-values()` function that looks up semantic colors based on a particular key from the Bootstrap theme config.
+- Additional colors are generated from the separate `$theme-texts` Sass map.
+- Text utilities are generated in a two-step process to allow for dynamic alpha transparency changes:
+ - We generate an attribute utility for classes that include `.text-`, which looks like `[class*="text-"]`, and set `color: var(--bs-text)`.
+ - Then, our specific color utilities set the `--bs-text` CSS variable to the color value.
+- Text utilities don't set `background-color`, so you may need to use `.bg-` [background utilities]([[docsref:/utilities/background]]) for proper contrast.
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</p>
-<p class="text-${themeColor.name}-emphasis">.text-${themeColor.name}-emphasis</p>`),
- `
-<p class="text-body">.text-body</p>
-<p class="text-body-emphasis">.text-body-emphasis</p>
-<p class="text-body-secondary">.text-body-secondary</p>
-<p class="text-body-tertiary">.text-body-tertiary</p>
-
-<p class="text-black bg-white">.text-black</p>
-<p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50 bg-white">.text-black-50</p>
-<p class="text-white-50 bg-dark">.text-white-50</p>`
+ ...getData('theme-colors').map((themeColor) => `<div class="mb-2 text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</div>`),
+ `<div class="mb-2 text-fg">.text-fg</div>
+<div class="mb-2 text-fg-1">.text-fg-1</div>
+<div class="mb-2 text-fg-2">.text-fg-2</div>
+<div class="mb-2 text-fg-3">.text-fg-3</div>
+
+<div class="mb-2 text-black bg-white">.text-black</div>
+<div class="mb-2 text-white bg-black">.text-white</div>`
]} />
-<Callout type="warning">
-**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They’ll be removed in v6.0.0.
-</Callout>
+Behind the scenes, the utilities come together like this:
-<Callout type="warning">
-**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-</Callout>
+```css
+[class*="text-"] {
+ color: var(--bs-text);
+}
+
+.text-primary {
+ --bs-text: var(--bs-primary);
+}
+```
+
+<Callout name="warning-color-assistive-technologies" />
## Opacity
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-{/* <ScssDocs name="color-variables" file="scss/_variables.scss" /> */}
+<ScssDocs name="theme-colors" file="scss/_theme.scss" />
-{/* <ScssDocs name="theme-color-variables" file="scss/_variables.scss" /> */}
+<ScssDocs name="utils-color" file="scss/_utilities.scss" />
Grayscale colors are also available, but only a subset are used to generate any utilities.
{/* <ScssDocs name="gray-color-variables" file="scss/_variables.scss" /> */}
-{/* <ScssDocs name="theme-text-map" file="scss/_maps.scss" /> */}
-
Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
container: zPxSizeOrEmpty
})
.array(),
- colors: zNamedHexColors(13),
+ colors: zNamedHexColors(11),
'core-team': z
.object({
name: z.string(),
*/
export declare global {
export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
+ export const BreakingChange: typeof import('@shortcodes/BreakingChange.astro').default
export const BsTable: typeof import('@shortcodes/BsTable.astro').default
export const Callout: typeof import('@shortcodes/Callout.astro').default
export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default
projects / thirdparty / bootstrap.git / commitdiff
