mirror of https://github.com/twbs/bootstrap.git
Docs: use `Example` shortcode instead of divs with only `.bd-example` class (#41556)
BrowserStack / browserstack (push) Has been cancelled
Details
Bundlewatch / bundlewatch (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details
cspell / cspell (push) Has been cancelled
Details
CSS / css (push) Has been cancelled
Details
Docs / docs (push) Has been cancelled
Details
JS Tests / JS Tests (push) Has been cancelled
Details
Lint / lint (push) Has been cancelled
Details
CSS (node-sass) / css (push) Has been cancelled
Details
Release notes / update_release_draft (push) Has been cancelled
Details
BrowserStack / browserstack (push) Has been cancelled
Details
Bundlewatch / bundlewatch (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details
cspell / cspell (push) Has been cancelled
Details
CSS / css (push) Has been cancelled
Details
Docs / docs (push) Has been cancelled
Details
JS Tests / JS Tests (push) Has been cancelled
Details
Lint / lint (push) Has been cancelled
Details
CSS (node-sass) / css (push) Has been cancelled
Details
Release notes / update_release_draft (push) Has been cancelled
Details
This commit is contained in:
Julien Déramond
GitHub
parent
094fb64680
commit
b851a994bd
|
|
@ -1418,7 +1418,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
|
||||
<a class="navbar-brand" href="#">شريط التنقل</a>
|
||||
<ul class="nav nav-pills">
|
||||
|
|
@ -1452,7 +1452,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
|
|||
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
|
||||
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="spinners">
|
||||
|
|
|
|||
|
|
@ -1394,7 +1394,7 @@ export const body_class = 'bg-body-tertiary'
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
|
|
@ -1427,7 +1427,7 @@ export const body_class = 'bg-body-tertiary'
|
|||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="spinners">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import Code from '@shortcodes/Code.astro'
|
||||
import Example from '@shortcodes/Example.astro'
|
||||
import * as tableContent from '@shortcodes/TableContent.md'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -20,12 +21,12 @@ const { class: className, simplified = true } = Astro.props
|
|||
const tableCode = `<table${className ? ` class="${className}"` : ''}>
|
||||
${simplified ? ' ...' : await tableContent.compiledContent()}
|
||||
</table>`
|
||||
|
||||
const exampleCode = `<table${className ? ` class="${className}"` : ''}>
|
||||
${await tableContent.compiledContent()}
|
||||
</table>`
|
||||
---
|
||||
|
||||
<div class="bd-example">
|
||||
<table class={className}>
|
||||
<tableContent.Content />
|
||||
</table>
|
||||
</div>
|
||||
<Example showMarkup={false} code={exampleCode} />
|
||||
|
||||
<Code code={tableCode} lang="html" />
|
||||
|
|
|
|||
|
|
@ -200,9 +200,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
|
|||
|
||||
Here’s an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-bd-primary">Custom button</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-bd-primary">Custom button</button>
|
||||
`} />
|
||||
|
||||
<ScssDocs name="btn-css-vars-example" file="site/src/scss/_buttons.scss" />
|
||||
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@ Toggle a working modal demo by clicking the button below. It will slide down and
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<!-- Button trigger modal -->
|
||||
|
|
@ -152,9 +152,9 @@ When backdrop is set to static, the modal will not close when clicking outside o
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<!-- Button trigger modal -->
|
||||
|
|
@ -204,9 +204,9 @@ When modals become too long for the user’s viewport or device, they scroll ind
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
|
||||
`} />
|
||||
|
||||
You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
|
||||
|
||||
|
|
@ -230,9 +230,9 @@ You can also create a scrollable modal that allows scrolling the modal body by a
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<!-- Scrollable modal -->
|
||||
|
|
@ -383,9 +383,9 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#gridSystemModal">Launch demo modal</button>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="modal-body">
|
||||
|
|
|
|||
|
|
@ -302,8 +302,8 @@ Mix and match with other components and utilities as needed.
|
|||
|
||||
Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||
<Example showMarkup={false} code={`
|
||||
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -330,9 +330,9 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -359,9 +359,9 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -388,8 +388,8 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||
|
|
|
|||
|
|
@ -325,8 +325,8 @@ On the `.nav-underline` modifier class:
|
|||
|
||||
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
|
||||
<Example showMarkup={false} code={`
|
||||
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
|
||||
</li>
|
||||
|
|
@ -339,8 +339,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
|||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
|
|
@ -353,8 +353,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
|||
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
|
|
@ -381,16 +381,16 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
|||
|
||||
To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using `<nav>`, you shouldn’t add `role="tablist"` directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav>
|
||||
<Example showMarkup={false} code={`
|
||||
<nav>
|
||||
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
||||
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
|
||||
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
|
||||
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
|
||||
<button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
|
|
@ -403,8 +403,8 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
|
|||
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<nav>
|
||||
|
|
@ -425,8 +425,8 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
|
|||
|
||||
The tabs plugin also works with pills.
|
||||
|
||||
<div class="bd-example">
|
||||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||
<Example showMarkup={false} code={`
|
||||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
|
||||
</li>
|
||||
|
|
@ -439,8 +439,8 @@ The tabs plugin also works with pills.
|
|||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
|
|
@ -453,8 +453,8 @@ The tabs plugin also works with pills.
|
|||
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
|
||||
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
||||
|
|
@ -481,8 +481,8 @@ The tabs plugin also works with pills.
|
|||
|
||||
And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
|
||||
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
|
||||
|
|
@ -507,8 +507,8 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
|
|||
<p>This is some placeholder content the <strong>Settings tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="d-flex align-items-start">
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
|||
|
||||
Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
|
||||
<nav class="nav nav-pills flex-column">
|
||||
|
|
@ -152,8 +152,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
|
|
@ -214,8 +214,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
|||
|
||||
Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
|
|
@ -236,8 +236,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
|
|||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
|
|
@ -268,8 +268,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
|
|||
|
||||
Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
|
||||
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
|
||||
|
|
@ -293,8 +293,8 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
|
|||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@ Click the button below to show a toast (positioned with our utilities in the low
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
|
|||
|
||||
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
|
||||
|
||||
<div class="bd-example">
|
||||
<dl>
|
||||
<Example showMarkup={false} code={`
|
||||
<dl>
|
||||
<dt>Description lists</dt>
|
||||
<dd>A description list is perfect for defining terms.</dd>
|
||||
<dt>Term</dt>
|
||||
|
|
@ -156,8 +156,8 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
|
|||
<dd>A second definition for the same term.</dd>
|
||||
<dt>Another term</dt>
|
||||
<dd>Definition for this other term.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</dl>
|
||||
`} />
|
||||
|
||||
## Inline code
|
||||
|
||||
|
|
@ -408,25 +408,25 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
|
|||
|
||||
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
|
||||
|
||||
<div class="bd-example">
|
||||
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
|
||||
`} />
|
||||
|
||||
### Summary
|
||||
|
||||
The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
|
||||
|
||||
<div class="bd-example">
|
||||
<details>
|
||||
<Example showMarkup={false} code={`
|
||||
<details>
|
||||
<summary>Some details</summary>
|
||||
<p>More info about the details.</p>
|
||||
</details>
|
||||
</details>
|
||||
|
||||
<details open>
|
||||
<details open>
|
||||
<summary>Even more details</summary>
|
||||
<p>Here are even more details about the details.</p>
|
||||
</details>
|
||||
</div>
|
||||
</details>
|
||||
`} />
|
||||
|
||||
## HTML5 `[hidden]` attribute
|
||||
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@ These hoverable rows can also be combined with the striped rows variant:
|
|||
|
||||
Highlight a table row or cell by adding a `.table-active` class.
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
|
|
@ -135,8 +135,8 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</table>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
|
|
@ -160,8 +160,8 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
</table>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-dark">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
|
|
@ -190,8 +190,8 @@ Highlight a table row or cell by adding a `.table-active` class.
|
|||
<td class="table-active">@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</table>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table table-dark">
|
||||
|
|
@ -296,8 +296,8 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
|
|||
|
||||
Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -328,8 +328,8 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="table-responsive">
|
||||
|
|
@ -361,7 +361,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
|
|||
|
||||
Border styles, active styles, and table variants are not inherited by nested tables.
|
||||
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -416,7 +416,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table table-striped table-bordered">
|
||||
|
|
@ -449,7 +449,7 @@ Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be
|
|||
|
||||
Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
|
||||
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
|
|
@ -480,7 +480,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
|
|
@ -493,7 +493,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</table>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
|
|
@ -524,7 +524,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
|
|
@ -539,7 +539,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
|
||||
### Table foot
|
||||
|
||||
<div class="bd-example">
|
||||
<Example showMarkup={false} code={`
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -578,7 +578,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
|
|||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
|
|
@ -665,8 +665,8 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
|||
|
||||
Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="table-responsive">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -721,8 +721,8 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="table-responsive">
|
||||
|
|
|
|||
|
|
@ -62,14 +62,14 @@ Use the included utility classes to recreate the small secondary heading text fr
|
|||
|
||||
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
|
||||
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
|
||||
<div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
|
||||
<div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
|
||||
<div class="display-6">Display 6</div>
|
||||
</div>
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
|
||||
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
|
||||
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
|
||||
<div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
|
||||
<div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
|
||||
<div class="display-6">Display 6</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<h1 class="display-1">Display 1</h1>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@ For more information and examples on how to modify our Sass maps and variables,
|
|||
|
||||
We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bd-callout my-0">
|
||||
<Example showMarkup={false} code={`
|
||||
<div class="bd-callout my-0">
|
||||
<strong>This is a callout.</strong> We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.
|
||||
</div>
|
||||
</div>
|
||||
`} />
|
||||
|
||||
```html
|
||||
<div class="callout">...</div>
|
||||
|
|
|
|||
|
|
@ -34,9 +34,7 @@ robots: noindex,follow
|
|||
}
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
|
||||
</div>
|
||||
<Example showMarkup={false} code={`The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.`} />
|
||||
|
||||
<Example code={`<div class="test">This is a test.</div>`} />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue