mirror of
https://github.com/twbs/bootstrap.git
synced 2025-11-08 00:25:12 -05:00
fixes
This commit is contained in:
Mark Otto
parent
bcd54e1ea9
commit
0742493209
@ -704,12 +704,14 @@ $utilities: map.merge(
|
||||
class: text,
|
||||
values: wrap nowrap balance pretty,
|
||||
),
|
||||
// scss-docs-start utils-text-break
|
||||
"word-wrap": (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (break: break-word),
|
||||
rtl: false
|
||||
),
|
||||
// scss-docs-end utils-text-break
|
||||
// scss-docs-end utils-text
|
||||
// scss-docs-start utils-color
|
||||
// "color-attr": (
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
import { join } from 'node:path';
|
||||
|
||||
interface ReferenceItem {
|
||||
class: string;
|
||||
@ -31,9 +30,8 @@ const referenceData = reference || data || [];
|
||||
// Parse CSS variables from _root.scss at build time
|
||||
function parseCSSVariables(): Record<string, string> {
|
||||
try {
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
const rootScssPath = join(__dirname, '../../../scss/_root.scss');
|
||||
const projectRoot = process.cwd();
|
||||
const rootScssPath = join(projectRoot, 'scss/_root.scss');
|
||||
const scssContent = readFileSync(rootScssPath, 'utf-8');
|
||||
|
||||
const cssVarValues: Record<string, string> = {};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
---
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
import { join } from 'node:path';
|
||||
|
||||
interface Props {
|
||||
utility: string | string[]; // The utility key(s) from the metadata (e.g., "font-size" or ["font-size", "text-size"])
|
||||
@ -19,9 +18,8 @@ const utilities = Array.isArray(utility) ? utility : [utility];
|
||||
// Parse CSS variables from _root.scss at build time
|
||||
function parseCSSVariables(): Record<string, string> {
|
||||
try {
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
const rootScssPath = join(__dirname, '../../../scss/_root.scss');
|
||||
const projectRoot = process.cwd();
|
||||
const rootScssPath = join(projectRoot, 'scss/_root.scss');
|
||||
const scssContent = readFileSync(rootScssPath, 'utf-8');
|
||||
|
||||
const cssVarValues: Record<string, string> = {};
|
||||
@ -49,9 +47,8 @@ function parseCSSVariables(): Record<string, string> {
|
||||
// Load utilities metadata
|
||||
function loadUtilitiesMetadata(): any {
|
||||
try {
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
const metadataPath = join(__dirname, '../../../dist/css/bootstrap-utilities.metadata.json');
|
||||
const projectRoot = process.cwd();
|
||||
const metadataPath = join(projectRoot, 'dist/css/bootstrap-utilities.metadata.json');
|
||||
const metadataContent = readFileSync(metadataPath, 'utf-8');
|
||||
return JSON.parse(metadataContent);
|
||||
} catch (error) {
|
||||
@ -63,9 +60,8 @@ function loadUtilitiesMetadata(): any {
|
||||
// Parse compiled CSS to extract styles for given class selectors
|
||||
function parseCompiledCSS(classNames: string[]): Record<string, string[]> {
|
||||
try {
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
const bootstrapCssPath = join(__dirname, '../../../dist/css/bootstrap.css');
|
||||
const projectRoot = process.cwd();
|
||||
const bootstrapCssPath = join(projectRoot, 'dist/css/bootstrap.css');
|
||||
const cssContent = readFileSync(bootstrapCssPath, 'utf-8');
|
||||
|
||||
const classStyles: Record<string, string[]> = {};
|
||||
|
||||
@ -28,7 +28,7 @@ import Code from '@shortcodes/Code.astro'
|
||||
Apply any of our included utility classes to our components to customize their appearance, like the navigation
|
||||
example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}
|
||||
>positioning</a
|
||||
> and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a
|
||||
> and <a href={getVersionedDocsPath('utilities/width')}>sizing</a> to <a
|
||||
href={getVersionedDocsPath('utilities/colors')}>colors</a
|
||||
> and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
|
||||
even more control.
|
||||
|
||||
126
site/src/components/shortcodes/DETAILS_README.md
Normal file
126
site/src/components/shortcodes/DETAILS_README.md
Normal file
@ -0,0 +1,126 @@
|
||||
# Details Component
|
||||
|
||||
The Details component is an expandable/collapsible content component that looks similar to the Callout component but requires a click to reveal the full content. It uses the native HTML `<details>` and `<summary>` elements under the hood.
|
||||
|
||||
## Features
|
||||
|
||||
- **Expandable/Collapsible**: Content is hidden by default and expands when the summary is clicked
|
||||
- **Markdown Support**: Can reference external `.md` files using the `name` prop
|
||||
- **Flexible Content**: Accepts inline content via slot or named markdown files
|
||||
- **Simple Styling**: Single, unified design that works everywhere
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage with Inline Content
|
||||
|
||||
```astro
|
||||
<Details summary="Click to expand">
|
||||
This is the content that will be hidden until the user clicks the summary.
|
||||
</Details>
|
||||
```
|
||||
|
||||
### With Named Content (External Markdown File)
|
||||
|
||||
Create a markdown file in `site/src/content/details/` with a `title` in the frontmatter:
|
||||
|
||||
```markdown
|
||||
<!-- site/src/content/details/my-example.md -->
|
||||
---
|
||||
title: Click to see more
|
||||
---
|
||||
|
||||
**This is the content** from an external markdown file.
|
||||
|
||||
It supports full markdown formatting including:
|
||||
- Lists
|
||||
- Links
|
||||
- **Bold** and *italic* text
|
||||
```
|
||||
|
||||
Then use it in your component (the title from frontmatter will be used as the summary):
|
||||
|
||||
```astro
|
||||
<Details name="my-example" />
|
||||
```
|
||||
|
||||
You can also override the title with a custom summary:
|
||||
|
||||
```astro
|
||||
<Details summary="Custom summary text" name="my-example" />
|
||||
```
|
||||
|
||||
### With Markdown Formatting in Slot
|
||||
|
||||
```astro
|
||||
<Details summary="Advanced usage">
|
||||
You can use **markdown** formatting, including:
|
||||
|
||||
- Lists
|
||||
- [Links](#)
|
||||
- `code`
|
||||
- And more!
|
||||
</Details>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `summary` | `string` | *Optional* | The text displayed in the summary (always visible). If not provided, uses the `title` from the markdown frontmatter when `name` is set. |
|
||||
| `name` | `string` | `undefined` | Reference to a markdown file in `src/content/details/` |
|
||||
|
||||
**Note:** Either `summary` must be provided, or `name` must reference a markdown file with a `title` in its frontmatter.
|
||||
|
||||
## Creating Named Content Files
|
||||
|
||||
1. Create a new `.md` file in `site/src/content/details/`
|
||||
2. Add a `title` in the frontmatter for the summary text
|
||||
3. Write your markdown content
|
||||
4. Reference it using the `name` prop (without the `.md` extension)
|
||||
|
||||
Example:
|
||||
|
||||
```bash
|
||||
# Create the file
|
||||
cat > site/src/content/details/api-notes.md << EOF
|
||||
---
|
||||
title: API Authentication Notes
|
||||
---
|
||||
|
||||
**API Note:** This endpoint requires authentication.
|
||||
EOF
|
||||
```
|
||||
|
||||
```astro
|
||||
<!-- Use it (title from frontmatter is used automatically) -->
|
||||
<Details name="api-notes" />
|
||||
|
||||
<!-- Or override the title with a custom summary -->
|
||||
<Details summary="Custom summary" name="api-notes" />
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
The Details component has a simple, unified style:
|
||||
- `.bd-details` - Base class with neutral, theme-aware styling
|
||||
- Uses Bootstrap's tertiary background color
|
||||
- Automatically adapts to light and dark modes
|
||||
|
||||
The styling is defined in `site/src/scss/_details.scss`.
|
||||
|
||||
## Examples
|
||||
|
||||
See the [Docs Reference](/docsref/) page for live examples of the Details component in action.
|
||||
|
||||
## When to Use
|
||||
|
||||
**Use Details when:**
|
||||
- Content is supplementary and doesn't need to be immediately visible
|
||||
- You want to reduce visual clutter on the page
|
||||
- Information is relevant but not critical to understanding the main content
|
||||
- You're documenting edge cases, advanced tips, or optional information
|
||||
|
||||
**Use Callout instead when:**
|
||||
- Information must be immediately visible
|
||||
- Content is critical to user success
|
||||
- You want to draw immediate attention to important information
|
||||
@ -208,7 +208,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
||||
|
||||
### Using utilities
|
||||
|
||||
Use our handful of [available sizing utilities]([[docsref:/utilities/sizing]]) to quickly set a card’s width.
|
||||
Use our handful of [available sizing utilities]([[docsref:/utilities/width]]) to quickly set a card’s width.
|
||||
|
||||
<Example code={`<div class="card w-75 mb-3">
|
||||
<div class="card-body">
|
||||
@ -240,7 +240,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text#text-alignment]]).
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text-alignment]]).
|
||||
|
||||
<Example code={`<div class="card mb-3" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
|
||||
@ -36,7 +36,7 @@ Generally, we recommend using a `<button>` with the `data-bs-target` attribute.
|
||||
|
||||
## Horizontal
|
||||
|
||||
The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]([[docsref:/utilities/sizing]]).
|
||||
The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]([[docsref:/utilities/width]]).
|
||||
|
||||
<Callout>
|
||||
Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
|
||||
|
||||
@ -75,7 +75,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
|
||||
```
|
||||
|
||||
<Callout>
|
||||
In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]([[docsref:/utilities/text#font-size]]) to control the heading’s appearance. All the following live examples use this approach.
|
||||
In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]([[docsref:/utilities/font-size]]) to control the heading’s appearance. All the following live examples use this approach.
|
||||
</Callout>
|
||||
|
||||
### Live demo
|
||||
|
||||
@ -36,7 +36,7 @@ Put that all together, and you have the following examples.
|
||||
|
||||
### Width
|
||||
|
||||
Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/sizing]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
|
||||
Bootstrap provides a handful of [utilities for setting width]([[docsref:/utilities/width]]). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
|
||||
|
||||
<Example code={`<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar w-75"></div>
|
||||
|
||||
@ -62,7 +62,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
|
||||
|
||||
### Placement
|
||||
|
||||
Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
|
||||
Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text-alignment] utilities to place spinners exactly where you need them in any situation.
|
||||
|
||||
#### Flex
|
||||
|
||||
@ -165,8 +165,8 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
|
||||
|
||||
<ScssDocs name="spinner-grow-keyframes" file="scss/_spinners.scss" />
|
||||
|
||||
[color]: [[docsref:/utilities/colors]]
|
||||
[flex]: [[docsref:/utilities/flex]]
|
||||
[float]: [[docsref:/utilities/float]]
|
||||
[margin]: [[docsref:/utilities/margin]]
|
||||
[text]: [[docsref:/utilities/text]]
|
||||
[color]: [[docsref:/utilities/colors]]
|
||||
[flex]: [[docsref:/utilities/flex]]
|
||||
[float]: [[docsref:/utilities/float]]
|
||||
[margin]: [[docsref:/utilities/margin]]
|
||||
[text-alignment]: [[docsref:/utilities/text-alignment]]
|
||||
|
||||
@ -13,7 +13,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
|
||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||
</figure>`} />
|
||||
|
||||
Aligning the figure’s caption is easy with our [text utilities]([[docsref:/utilities/text#text-alignment]]).
|
||||
Aligning the figure’s caption is easy with our [text utilities]([[docsref:/utilities/text-alignment]]).
|
||||
|
||||
<Example code={`<figure class="figure">
|
||||
<Placeholder width="400" height="300" class="figure-img img-fluid rounded" />
|
||||
|
||||
@ -18,7 +18,7 @@ In addition to our [border-radius utilities]([[docsref:/utilities/border]]), you
|
||||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text#text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/margin#horizontal-centering]]).
|
||||
Align images with the [helper float classes]([[docsref:/utilities/float]]) or [text alignment classes]([[docsref:/utilities/text-alignment]]). `block`-level images can be centered using [the `.mx-auto` margin utility class]([[docsref:/utilities/margin#horizontal-centering]]).
|
||||
|
||||
<Example code={`<Placeholder width="200" height="200" class="rounded float-start" />
|
||||
<Placeholder width="200" height="200" class="rounded float-end" />`} />
|
||||
|
||||
@ -6,7 +6,7 @@ toc: true
|
||||
|
||||
## Global settings
|
||||
|
||||
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]([[docsref:/utilities/text]]).
|
||||
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out our text utilities.
|
||||
|
||||
- Use a [native font stack]([[docsref:/content/reboot#native-font-stack]]) that selects the best `font-family` for each OS and device.
|
||||
- For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
|
||||
@ -104,7 +104,7 @@ Utility classes are available for most common text-related CSS properties.
|
||||
- [Text wrapping]([[docsref:/utilities/text-wrapping])
|
||||
- [Vertical alignment]([[docsref:/utilities/vertical-align]])
|
||||
|
||||
Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]([[docsref:/utilities/text]]) and [color utilities]([[docsref:/utilities/colors]]).
|
||||
Change text alignment, transform, style, weight, line-height, decoration and color with our text and [color utilities]([[docsref:/utilities/colors]]).
|
||||
|
||||
## Abbreviations
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ You can find and customize these variables for key global options in Bootstrap
|
||||
| `$enable-button-pointers` | `true` (default) or `false` | Add “hand” cursor to non-disabled button elements. |
|
||||
| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |
|
||||
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
|
||||
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/margins#negative-margin]]). |
|
||||
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/margin#negative-margin]]). |
|
||||
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
|
||||
| `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]([[docsref:/getting-started/accessibility#reduced-motion]]) |
|
||||
</BsTable>
|
||||
|
||||
@ -32,12 +32,6 @@ robots: noindex,follow
|
||||
This is inline details content. It supports **markdown** formatting and will be hidden until clicked.
|
||||
</Details>
|
||||
|
||||
<Details name="info-example" />
|
||||
|
||||
<Details name="warning-example" />
|
||||
|
||||
<Details name="danger-example" />
|
||||
|
||||
## Code example
|
||||
|
||||
```scss
|
||||
|
||||
@ -85,7 +85,7 @@ Output:
|
||||
|
||||
Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
|
||||
|
||||
As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text#text-decoration]]):
|
||||
As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text-decoration]]):
|
||||
|
||||
```scss
|
||||
values: none underline line-through
|
||||
|
||||
@ -6,7 +6,6 @@ alias:
|
||||
- /docs/5.3/utilities/border-color/
|
||||
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
|
||||
utility:
|
||||
- border-attr
|
||||
- border-color
|
||||
- border-color-subtle
|
||||
- border-opacity
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
---
|
||||
title: Sizing
|
||||
description: Easily make an element as wide or as tall with our width and height utilities.
|
||||
toc: true
|
||||
utility:
|
||||
- width
|
||||
- height
|
||||
- max-width
|
||||
- max-height
|
||||
- min-width
|
||||
- min-height
|
||||
- viewport-width
|
||||
- viewport-height
|
||||
- min-viewport-width
|
||||
- min-viewport-height
|
||||
---
|
||||
|
||||
## Relative to the parent
|
||||
|
||||
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
|
||||
|
||||
<Example class="bd-example-flex" code={`<div class="w-25 p-3">Width 25%</div>
|
||||
<div class="w-50 p-3">Width 50%</div>
|
||||
<div class="w-75 p-3">Width 75%</div>
|
||||
<div class="w-100 p-3">Width 100%</div>
|
||||
<div class="w-auto p-3">Width auto</div>`} />
|
||||
|
||||
<Example class="bd-example-flex" code={`<div style="height: 100px;">
|
||||
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
|
||||
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
|
||||
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
|
||||
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
|
||||
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
|
||||
</div>`} />
|
||||
|
||||
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
|
||||
|
||||
<Example class="bd-example-flex" code={`<div style="width: 50%; height: 100px;">
|
||||
<div class="max-w-100" style="width: 200%;">Max-width 100%</div>
|
||||
</div>`} />
|
||||
|
||||
<Example class="bd-example-flex" code={`<div style="height: 100px;">
|
||||
<div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
|
||||
</div>`} />
|
||||
|
||||
## Relative to the viewport
|
||||
|
||||
You can also use utilities to set the width and height relative to the viewport.
|
||||
|
||||
```html
|
||||
<div class="min-vw-100">Min-width 100vw</div>
|
||||
<div class="min-vh-100">Min-height 100vh</div>
|
||||
<div class="vw-100">Width 100vw</div>
|
||||
<div class="vh-100">Height 100vh</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
||||
|
||||
<ScssDocs name="utils-sizing" file="scss/_utilities.scss" />
|
||||
@ -3,7 +3,7 @@ title: Word break
|
||||
description: Prevent long strings of text from breaking your components' layout by using word break utilities.
|
||||
toc: true
|
||||
utility:
|
||||
- text-break
|
||||
- word-wrap
|
||||
---
|
||||
|
||||
Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user