mirror of https://github.com/twbs/bootstrap.git
More docs stuff and wip edits
This commit is contained in:
Mark Otto
parent
e09539933c
commit
785c31f79b
|
|
@ -18,6 +18,11 @@
|
|||
}
|
||||
],
|
||||
"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",
|
||||
|
|
@ -19398,7 +19403,6 @@
|
|||
"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"
|
||||
|
|
|
|||
|
|
@ -205,5 +205,10 @@
|
|||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"remark": "^15.0.1",
|
||||
"remark-html": "^16.0.1",
|
||||
"yaml": "^2.7.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
/*
|
||||
* 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
|
||||
>
|
||||
|
|
@ -22,7 +22,7 @@ If you are using the `.btn` class on its own, remember to at least define some e
|
|||
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,29 @@ description: Download Bootstrap to get the compiled CSS and JavaScript, source c
|
|||
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:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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/"
|
||||
|
|
@ -12,8 +12,6 @@ toc: true
|
|||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,32 +1,80 @@
|
|||
---
|
||||
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.
|
||||
|
|
@ -40,6 +88,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
|
|||
})}
|
||||
<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
## Opacity
|
||||
|
||||
<AddedIn version="5.1.0" />
|
||||
|
|
@ -74,6 +123,8 @@ Or, choose from any of the `.bg-opacity` utilities:
|
|||
<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.
|
||||
|
|
@ -82,7 +133,9 @@ In addition to the following Sass functionality, consider reading about our incl
|
|||
|
||||
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" /> */}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,38 +6,41 @@ toc: true
|
|||
|
||||
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>
|
||||
...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>
|
||||
|
||||
<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>`
|
||||
<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
|
||||
|
||||
|
|
@ -84,16 +87,14 @@ In addition to the following Sass functionality, consider reading about our incl
|
|||
|
||||
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" /> */}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const dataDefinitions = {
|
|||
container: zPxSizeOrEmpty
|
||||
})
|
||||
.array(),
|
||||
colors: zNamedHexColors(13),
|
||||
colors: zNamedHexColors(11),
|
||||
'core-team': z
|
||||
.object({
|
||||
name: z.string(),
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
*/
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue