mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00
Code Issues Releases Wiki Activity

Merge branch 'main' into jo-docs-thanks-page

Browse Source
This commit is contained in:
Julien Déramond
2024-02-25 09:09:10 +01:00
committed by GitHub
parent de442982b3 4f1fb5094f
commit d57006a3da
473 changed files with 15204 additions and 11563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
site/.eslintrc.json
View File

@@ -1,55 +0,0 @@
{
"extends": "../.eslintrc.json",
"env": {
"browser": true,
"node": false
},
"parserOptions": {
"sourceType": "script"
},
"plugins": [
"markdown"
],
"rules": {
"no-new": "off",
"strict": "error",
"unicorn/no-array-for-each": "off",
"unicorn/numeric-separators-style": "off",
"unicorn/prefer-node-protocol": "off"
},
"overrides": [
{
// 2. Enable the Markdown processor for all .md files.
"files": [
"./**/*.md"
],
"processor": "markdown/markdown"
},
{
// In v2, configuration for fenced code blocks is separate from the
// containing Markdown file. Each code block has a virtual filename
// appended to the Markdown file's path.
"files": [
"./**/*.md/*.js"
],
// Configuration for fenced code blocks goes with the override for
// the code block's virtual filename, for example:
"parserOptions": {
"ecmaFeatures": {
"impliedStrict": true
}
},
"rules": {
"no-array-for-each": "off",
"no-labels": "off",
"no-redeclare": "off",
"no-undef": "off",
"no-unused-expressions": "off",
"no-unused-labels": "off",
"no-unused-vars": "off",
"unicorn/no-array-for-each": "off",
"unicorn/numeric-separators-style": "off"
}
}
]
}

7
site/assets/js/application.js
View File

@@ -4,7 +4,7 @@
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
@@ -14,9 +14,10 @@
// Scroll the active sidebar link into view
const sidenav = document.querySelector('.bd-sidebar')
if (sidenav) {
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
if (sidenav && sidenavActiveLink) {
const sidenavHeight = sidenav.clientHeight
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
const viewportTop = sidenavActiveLinkTop

21
site/assets/js/code-examples.js
View File

@@ -4,7 +4,7 @@
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
@@ -13,24 +13,26 @@
(() => {
'use strict'
// Insert copy to clipboard button before .highlight
const btnTitle = 'Copy to clipboard'
const btnEdit = 'Edit on StackBlitz'
const btnHtml = [
'<div class="bd-code-snippet">',
' <div class="bd-clipboard">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
' </div>',
' <div class="bd-clipboard">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
' </div>',
'</div>'
].join('')
// wrap programmatically code blocks and add copy btn.
// Wrap programmatically code blocks and add copy btn.
document.querySelectorAll('.highlight')
.forEach(element => {
if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
// Ignore examples made by shortcode
if (!element.closest('.bd-example-snippet')) {
element.insertAdjacentHTML('beforebegin', btnHtml)
element.previousElementSibling.append(element)
}
@@ -51,7 +53,8 @@
snippetButtonTooltip('.btn-edit', btnEdit)
const clipboard = new ClipboardJS('.btn-clipboard', {
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight')
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd()
})
clipboard.on('success', event => {

4
site/assets/js/search.js
View File

@@ -40,8 +40,6 @@
return item
})
},
// Set debug to `true` if you want to inspect the dropdown
debug: false
}
})
})()

16
site/assets/js/snippets.js
View File

@@ -6,7 +6,7 @@
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
@@ -60,6 +60,7 @@
})
// Instantiate all toasts in docs pages only
// js-docs-start live-toast
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
@@ -69,14 +70,15 @@
toastBootstrap.show()
})
}
// js-docs-end live-toast
// -------------------------------
// Alerts
// -------------------------------
// Used in 'Show live toast' example in docs or StackBlitz
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const alertTrigger = document.getElementById('liveAlertBtn')
// Used in 'Show live alert' example in docs or StackBlitz
// js-docs-start live-alert
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
@@ -89,11 +91,13 @@
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Nice, you triggered this alert message!', 'success')
})
}
// js-docs-end live-alert
// --------
// Carousels
@@ -130,6 +134,7 @@
// Modal
// -------------------------------
// Modal 'Varying modal content' example in docs and StackBlitz
// js-docs-start varying-modal-content
const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', event => {
@@ -137,6 +142,8 @@
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an Ajax request here
// and then do the updating in a callback.
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
@@ -146,6 +153,7 @@
modalBodyInput.value = recipient
})
}
// js-docs-end varying-modal-content
// -------------------------------
// Offcanvas

2
site/assets/scss/_callouts.scss
View File

@@ -33,7 +33,7 @@
// Variations
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
--bd-callout-color: var(--bs-#{$variant}-text);
--bd-callout-color: var(--bs-#{$variant}-text-emphasis);
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
}

2
site/assets/scss/_clipboard-js.scss
View File

@@ -39,6 +39,6 @@
.btn-clipboard {
position: relative;
z-index: 2;
margin-top: .75rem;
margin-top: 1.25rem;
margin-right: .75rem;
}

1
site/assets/scss/_colors.scss
View File

@@ -41,7 +41,6 @@
}
// stylelint-disable declaration-block-single-line-max-declarations
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }

79
site/assets/scss/_component-examples.scss
View File

@@ -2,12 +2,16 @@
// Docs examples
//
.bd-example-snippet {
.bd-code-snippet {
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
margin-right: 0;
margin-left: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
}
}
@@ -16,7 +20,7 @@
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
@@ -27,13 +31,7 @@
margin-right: 0;
margin-left: 0;
border-width: 1px;
@include border-top-radius(var(--bs-border-radius));
}
+ .bd-code-snippet {
@include border-top-radius(0);
border: solid var(--bs-border-color);
border-width: 0 1px 1px;
@include border-radius(var(--bs-border-radius));
}
+ p {
@@ -222,15 +220,16 @@
// scss-docs-start custom-tooltip
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
--bs-tooltip-bg: var(--bd-violet-bg);
--bs-tooltip-color: var(--bs-white);
}
// scss-docs-end custom-tooltip
// scss-docs-start custom-popovers
.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-border-color: var(--bd-violet-bg);
--bs-popover-header-bg: var(--bd-violet-bg);
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
@@ -350,19 +349,24 @@
.highlight {
position: relative;
padding: .75rem ($bd-gutter-x * .5);
margin-bottom: 1rem;
background-color: var(--bd-pre-bg);
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
@include border-radius(var(--bs-border-radius));
@include border-radius(calc(var(--bs-border-radius) - 1px));
}
@include media-breakpoint-up(lg) {
pre {
margin-right: 1.875rem;
}
}
pre {
padding: 0;
margin-top: .625rem;
margin-right: 1.875rem;
margin-bottom: .625rem;
padding: .25rem 0 .875rem;
margin-top: .8125rem;
margin-bottom: 0;
overflow: overlay;
white-space: pre;
background-color: transparent;
border: 0;
@@ -375,37 +379,26 @@
}
}
.bd-code-snippet {
margin: 0 ($bd-gutter-x * -.5) $spacer;
.highlight {
margin-bottom: 0;
@include border-top-radius(0);
}
.bd-example {
margin: 0;
border: 0;
}
@include media-breakpoint-up(md) {
margin-right: 0;
margin-left: 0;
@include border-radius($border-radius);
}
.bd-example-snippet .highlight pre {
margin-right: 0;
}
.highlight-toolbar {
background-color: var(--bd-pre-bg);
}
.bd-scss-docs {
.highlight-toolbar {
@include border-top-radius(calc(var(--bs-border-radius) + 1px));
+ .highlight {
@include border-top-radius(0);
}
}
.focused {
outline: 0;
box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
.bd-file-ref {
.highlight-toolbar {
@include media-breakpoint-up(md) {
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
}
}
}
.bd-content .bd-code-snippet {
margin-bottom: 1rem;
}

7
site/assets/scss/_content.scss
View File

@@ -3,18 +3,13 @@
//
.bd-content {
// Offset content from fixed navbar when jumping to headings
> :target {
padding-top: 5rem;
margin-top: -5rem;
}
> h2,
> h3,
> h4 {
--bs-heading-color: var(--bs-emphasis-color);
}
// Offset content from fixed navbar when jumping to headings
> h2:not(:first-child) {
margin-top: 3rem;
}

25
site/assets/scss/_masthead.scss
View File

@@ -10,6 +10,7 @@
// stylelint-enable
h1 {
--bs-heading-color: var(--bs-emphasis-color);
@include font-size(4rem);
}
@@ -21,6 +22,8 @@
.bd-code-snippet {
margin: 0;
border-color: var(--bs-border-color-translucent);
border-width: 1px;
@include border-radius(.5rem);
}
@@ -31,15 +34,21 @@
text-overflow: ellipsis;
white-space: nowrap;
background-color: rgba(var(--bs-body-color-rgb), .075);
@include border-radius(.5rem);
@include border-radius(calc(.5rem - 1px));
@include media-breakpoint-up(lg) {
padding-right: 4rem;
}
pre {
padding: 0;
margin: .625rem 0;
overflow: hidden;
}
}
.btn-clipboard {
position: absolute;
top: -.125rem;
top: -.625rem;
right: 0;
background-color: transparent;
}
@@ -56,12 +65,14 @@
}
.masthead-followup {
.lead {
@include font-size(1rem);
h2,
h3,
h4 {
--bs-heading-color: var(--bs-emphasis-color);
}
.highlight {
@include border-radius(.5rem);
.lead {
@include font-size(1rem);
}
@include media-breakpoint-up(md) {
@@ -91,7 +102,7 @@
.animate-img {
> img {
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
@include transition(transform .2s ease-in-out);
}
&:hover > img {

4
site/assets/scss/_navbar.scss
View File

@@ -39,7 +39,7 @@
.navbar-brand {
color: $white;
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
@include transition(transform .2s ease-in-out);
&:hover {
transform: rotate(-5deg) scale(1.1);
@@ -73,7 +73,7 @@
border-left: 0;
@include media-breakpoint-down(lg) {
box-shadow: $box-shadow-lg;
box-shadow: var(--bs-box-shadow-lg);
}
}

16
site/assets/scss/_scrolling.scss Normal file
View File

@@ -0,0 +1,16 @@
// When navigating with the keyboard, prevent focus from landing behind the sticky header
main {
a,
button,
input,
select,
textarea,
h2,
h3,
h4,
[tabindex="0"] {
scroll-margin-top: 80px;
scroll-margin-bottom: 100px;
}
}

2
site/assets/scss/_sidebar.scss
View File

@@ -15,7 +15,7 @@
@include media-breakpoint-down(lg) {
.offcanvas-lg {
border-right-color: var(--bs-border-color);
box-shadow: $box-shadow-lg;
box-shadow: var(--bs-box-shadow-lg);
}
}
}

9
site/assets/scss/_syntax.scss
View File

@@ -35,6 +35,13 @@
--base0D: #{$blue-300}; // #61afef
--base0E: #{$indigo-200}; // #c678dd
--base0F: #{$red-300}; // #be5046
.language-diff .gd {
color: $red-400;
}
.language-diff .gi {
color: $green-400;
}
}
.hl { background-color: var(--base02); }
@@ -53,7 +60,7 @@
.ge { font-style: italic; }
.gh {
font-weight: 600;
color: #fff;
color: var(--base0A);
}
.gi { color: var(--bs-success); }
.gp {

12
site/assets/scss/_toc.scss
View File

@@ -1,4 +1,4 @@
// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
// stylelint-disable selector-max-type, selector-no-qualifying-type
.bd-toc {
@include media-breakpoint-up(lg) {
@@ -16,22 +16,16 @@
ul {
padding-left: 0;
margin-bottom: 0;
margin-left: -.75rem;
list-style: none;
ul {
padding-left: 1rem;
margin-left: -1rem;
a {
padding-left: 1.375rem;
}
}
}
a {
display: block;
padding: .125rem 0 .125rem .625rem;
padding: .125rem 0 .125rem .75rem;
color: inherit;
text-decoration: none;
border-left: .125rem solid transparent;
@@ -86,7 +80,7 @@
.bd-toc-collapse {
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem;
padding: 1.25rem 1.25rem 1.25rem 1rem;
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));

4
site/assets/scss/_variables.scss
View File

@@ -1,10 +1,8 @@
// stylelint-disable scss/dollar-variable-default
// Local docs variables
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-accent: #ffe484;
$bd-accent: #ffe484;
$bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;

7
site/assets/scss/docs.scss
View File

@@ -1,6 +1,6 @@
/*!
* Bootstrap Docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
@@ -28,8 +28,8 @@
@import "../../../scss/mixins";
// fusv-disable
$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
$enable-grid-classes: false;
$enable-cssgrid: true;
// fusv-enable
@import "../../../scss/grid";
@@ -53,6 +53,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
@import "colors";
@import "clipboard-js";
@import "placeholder-img";
@import "scrolling";
// Load docs dependencies
@import "syntax";

6
site/content/docs/5.3/components/accordion.md
View File

@@ -11,7 +11,7 @@ toc: true
## How it works
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible.
{{< callout info >}}
{{< partial "callouts/info-prefersreducedmotion.md" >}}
@@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally
Click the accordions below to expand/collapse the accordion content.
To render an accordion that's expanded by default:
- add the `.show` class on the `.accordion-collapse` element.
- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
{{< example >}}
<div class="accordion" id="accordionExample">
<div class="accordion-item">

35
site/content/docs/5.3/components/alerts.md
View File

@@ -11,7 +11,7 @@ toc: true
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
{{< callout info >}}
**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
{{< /callout >}}
{{< example >}}
@@ -38,28 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
We use the following JavaScript to trigger our live alert demo:
```js
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const alert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
alert('Nice, you triggered this alert message!', 'success')
})
}
```
{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}}
### Link color
@@ -105,7 +84,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
{{< example >}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
@@ -179,17 +158,15 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
### Sass mixin
### Sass mixins
{{< deprecated-in "5.3.0" >}}
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
### Sass loop
### Sass loops
Loop that generates the modifier classes with the `alert-variant()` mixin.
Loop that generates the modifier classes with an overriding of CSS variables.
{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}

12
site/content/docs/5.3/components/badge.md
View File

@@ -13,12 +13,12 @@ Badges scale to match the size of the immediate parent element by using relative
### Headings
{{< example >}}
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
{{< /example >}}
### Buttons

10
site/content/docs/5.3/components/button-group.md
View File

@@ -190,8 +190,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
{{< /example >}}
@@ -208,9 +206,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -219,7 +215,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<div class="btn-group dropend" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -228,7 +224,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>

42
site/content/docs/5.3/components/buttons.md
View File

@@ -14,15 +14,15 @@ Bootstrap has a base `.btn` class that sets up basic styles such as padding and
<button type="button" class="btn">Base class</button>
{{< /example >}}
The `.btn` class is intended to be used in conjunction with our additional predefined button styles, or to serve as a basis for your own custom styles.
The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.
{{< callout warning >}}
If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles.
{{< /callout >}}
## Predefined styles
## Variants
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
{{< example >}}
{{< buttons.inline >}}
@@ -129,7 +129,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
## Block buttons
Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
{{< example >}}
<div class="d-grid gap-2">
@@ -156,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F
</div>
{{< /example >}}
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked.
{{< example >}}
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
@@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
{{< example >}}
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
<p class="d-inline-flex gap-1">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
{{< /example >}}
{{< example >}}
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
<p class="d-inline-flex gap-1">
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
{{< /example >}}
### Methods
@@ -201,8 +215,8 @@ const bsButton = new bootstrap.Button('#myButton')
| Method | Description |
| --- | --- |
| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
{{< /bs-table >}}
@@ -227,7 +241,7 @@ As part of Bootstrap's evolving CSS variables approach, buttons now use local CS
Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
Here's an example of building a custom `.btn-*` modifier class like 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.
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>

6
site/content/docs/5.3/components/card.md
View File

@@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
### Images
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{{< example >}}
<div class="card" style="width: 18rem;">
@@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
@@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>

4
site/content/docs/5.3/components/close-button.md
View File

@@ -24,7 +24,9 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
## Dark variant
{{< callout info >}}
{{< deprecated-in "5.3.0" >}}
{{< callout warning >}}
**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
{{< /callout >}}

4
site/content/docs/5.3/components/collapse.md
View File

@@ -25,7 +25,7 @@ Click the buttons below to show and hide another element via class changes:
Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
{{< example >}}
<p>
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
@@ -69,7 +69,7 @@ A `<button>` or `<a>` element can show and hide multiple elements by referencing
Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
{{< example >}}
<p>
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>

4
site/content/docs/5.3/components/dropdowns.md
View File

@@ -661,7 +661,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
{{< example >}}
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
{{< /example >}}
@@ -1025,7 +1025,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:
{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
### Mixins
### Sass mixins
Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.

20
site/content/docs/5.3/components/list-group.md
View File

@@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
<a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>
{{< /example >}}
@@ -117,21 +117,21 @@ These work great with custom content as well.
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
</ol>
{{< /example >}}
@@ -157,7 +157,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
## Variants
{{< callout info >}}
**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
{{< /callout >}}
Use contextual classes to style list items with a stateful background and color.
@@ -200,15 +200,15 @@ Add badges to any list group item to show unread counts, activity, and more with
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
<span class="badge text-bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
<span class="badge text-bg-primary rounded-pill">1</span>
</li>
</ul>
{{< /example >}}
@@ -321,11 +321,9 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
{{< deprecated-in "5.3.0" >}}
Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
### Sass loop
### Sass loops
Loop that generates the modifier classes with an overriding of CSS variables.

27
site/content/docs/5.3/components/modal.md
View File

@@ -202,7 +202,7 @@ When modals become too long for the user's viewport or device, they scroll indep
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="min-height: 1500px">
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -218,7 +218,7 @@ When modals become too long for the user's viewport or device, they scroll indep
</button>
</div>
You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
@@ -481,24 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
</div>
{{< /example >}}
```js
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
const button = event.relatedTarget
// Extract info from data-bs-* attributes
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an Ajax request here
// and then do the updating in a callback.
//
// Update the modal's content.
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = `New message to ${recipient}`
modalBodyInput.value = recipient
})
```
{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}}
### Toggle between modals
@@ -643,7 +626,7 @@ Another override is the option to pop up a modal that covers the user viewport,
{{< bs-table >}}
| Class | Availability |
| --- | --- | --- |
| --- | --- |
| `.modal-fullscreen` | Always |
| `.modal-fullscreen-sm-down` | `576px` |
| `.modal-fullscreen-md-down` | `768px` |
@@ -786,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS
{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
### Loop
### Sass loops
[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.

26
site/content/docs/5.3/components/navbar.md
View File

@@ -63,7 +63,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -157,7 +157,7 @@ Please note that you should also add the `aria-current` attribute on the active
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
@@ -179,7 +179,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
@@ -328,10 +328,10 @@ Mix and match with other components and utilities as needed.
**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
{{< /callout >}}
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-*` utilities.
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-body-secondary" data-bs-theme="dark">
<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">
@@ -420,7 +420,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
```html
<nav class="navbar bg-dark" data-bs-theme="dark">
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
@@ -538,7 +538,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
<a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -578,7 +578,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -608,7 +608,7 @@ With a brand name shown on the left and toggler on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -638,7 +638,7 @@ With a toggler on the left and brand name on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -655,9 +655,9 @@ With a toggler on the left and brand name on the right:
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done!
{{< example >}}
<div class="collapse" id="navbarToggleExternalContent">
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<h5 class="text-body-emphasis h4">Collapsed content</h5>
<span class="text-body-secondary">Toggleable via the navbar brand.</span>
</div>
</div>
@@ -810,7 +810,7 @@ Variables for the [dark navbar](#color-schemes):
{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
### Sass loop
### Sass loops
[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.

38
site/content/docs/5.3/components/navs-tabs.md
View File

@@ -31,7 +31,7 @@ To convey the active state to assistive technologies, use the `aria-current` att
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -43,7 +43,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -53,7 +53,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
### Horizontal alignment
Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.
Centered with `.justify-content-center`:
@@ -69,7 +69,7 @@ Centered with `.justify-content-center`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -88,7 +88,7 @@ Right-aligned with `.justify-content-end`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -109,7 +109,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -121,7 +121,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -141,7 +141,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -162,7 +162,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -183,14 +183,14 @@ Take that same HTML, but use `.nav-underline` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
### Fill and justify
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
{{< example >}}
<ul class="nav nav-pills nav-fill">
@@ -204,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -216,7 +216,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -234,7 +234,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -246,7 +246,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -259,7 +259,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -294,7 +294,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -320,7 +320,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -567,7 +567,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab. The <kbd>Home</kbd> and <kbd>End</kbd> keys activate the first and last tabs, respectively. The plugin will change the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
{{< callout warning >}}
In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.

3
site/content/docs/5.3/components/offcanvas.md
View File

@@ -144,7 +144,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
{{< callout warning >}}
Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
{{< /callout >}}
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
@@ -328,6 +328,7 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
| `dispose` | Destroys an element's offcanvas. |
| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. |
| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. |
| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). |

10
site/content/docs/5.3/components/placeholders.md
View File

@@ -38,7 +38,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
</div>
@@ -67,7 +67,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
```
@@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
<span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
{{< /example >}}
{{< callout info >}}
@@ -138,8 +138,8 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
</p>
{{< /example >}}
## Sass
## CSS
### Variables
### Sass variables
{{< scss-docs name="placeholders" file="scss/_variables.scss" >}}

8
site/content/docs/5.3/components/popovers.md
View File

@@ -187,7 +187,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. |
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
@@ -198,8 +198,8 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
| `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
{{< /bs-table >}}
@@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
// setContent example
myPopover.setContent({
popover.setContent({
'.popover-header': 'another title',
'.popover-body': 'another content'
})

4
site/content/docs/5.3/components/progress.md
View File

@@ -15,7 +15,7 @@ toc: true
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
- We use the inner `.progress-bar` purely for the visual bar and label.
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.
@@ -57,7 +57,7 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util
You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
{{< example >}}
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">

2
site/content/docs/5.3/components/scrollspy.md
View File

@@ -12,7 +12,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access.
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access.
- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`

20
site/content/docs/5.3/components/spinners.md
View File

@@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
<strong role="status">Loading...</strong>
<div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>
{{< /example >}}
@@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
{{< /example >}}
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
{{< /example >}}

12
site/content/docs/5.3/components/toasts.md
View File

@@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low
We use the following JavaScript to trigger our live toast demo:
```js
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
toastTrigger.addEventListener('click', () => {
toastBootstrap.show()
})
}
```
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
### Translucent

10
site/content/docs/5.3/components/tooltips.md
View File

@@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
{{< callout warning >}}
**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
{{< /callout >}}
```html
@@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip bs-tooltip-auto" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
@@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
<div class="tooltip-demo">
{{< example >}}
{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
{{< /example >}}
</div>
### Options
@@ -214,7 +212,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
| `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
{{< /bs-table >}}

4
site/content/docs/5.3/content/images.md
View File

@@ -54,9 +54,9 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
</picture>
```
## Sass
## CSS
### Variables
### Sass variables
Variables are available for image thumbnails.

2
site/content/docs/5.3/content/reboot.md
View File

@@ -64,7 +64,7 @@ $font-family-sans-serif:
// Android
Roboto,
// older macOS and iOS
"Helvetica Neue"
"Helvetica Neue",
// Linux
"Noto Sans",
"Liberation Sans",

10
site/content/docs/5.3/content/tables.md
View File

@@ -227,8 +227,8 @@ Highlight a table row or cell by adding a `.table-active` class.
For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow.
- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
- Text and border colors are generated the same way, and their colors are inherited by default.
@@ -427,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
</div>
```html
<table class="table table-striped">
<table class="table table-striped table-bordered">
<thead>
...
</thead>
@@ -549,7 +549,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
<div class="bd-example">
<table class="table">
<thead class="table-light">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
@@ -829,7 +829,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
### Sass loop
### Sass loops
{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}

125
site/content/docs/5.3/customize/color-modes.md
View File

@@ -7,6 +7,10 @@ toc: true
added: "5.3"
---
{{< callout >}}
**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
{{< /callout >}}
## Dark mode
**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
@@ -62,73 +66,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
## Nesting color modes
Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
{{< example class="p-0" >}}
<div data-bs-theme="dark" class="p-3 text-body bg-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item active" aria-current="page">Dark</li>
</ol>
</nav>
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="dropdown mb-4">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div data-bs-theme="light" class="p-3 text-body bg-body rounded">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
<li class="breadcrumb-item"><a href="#">Dark</a></li>
<li class="breadcrumb-item active" aria-current="page">Light</li>
</ol>
</nav>
<p>This should be shown in a <strong>light</strong> theme at all times.</p>
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
Light dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
{{< /example >}}
## Usage
### Enable dark mode
@@ -159,7 +96,7 @@ Our new dark mode option is available to use for all users of Bootstrap, but it'
We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output.
```scss
$color-mode-type: data;
@@ -244,7 +181,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
{{< example lang="js" show_preview="false" >}}
{{< js.inline >}}
@@ -252,6 +189,54 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc
{{< /js.inline >}}
{{< /example >}}
## Adding theme colors
Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.
```scss
// Required
@import "functions";
@import "variables";
@import "variables-dark";
// Add a custom color to $theme-colors
$custom-colors: (
"custom-color": #712cf9
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "maps";
@import "mixins";
@import "utilities";
// Add a custom color to new theme maps
// Light mode
$custom-colors-text: ("custom-color": #712cf9);
$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
$custom-colors-border-subtle: ("custom-color": #bfa1fc);
$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
// Dark mode
$custom-colors-text-dark: ("custom-color": #e1d2f2);
$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);
$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
// Remainder of Bootstrap imports
@import "root";
@import "reboot";
// etc
```
## CSS
### Variables
@@ -266,7 +251,7 @@ CSS variables for our dark color mode are partially generated from dark mode spe
{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
### Sass mixin
### Sass mixins
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.

672
site/content/docs/5.3/customize/color.md
View File

@@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
{{< /callout >}}
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-success">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-danger">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-warning">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-info">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-light">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-dark">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="2">
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-success">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-danger">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-warning">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-info">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-light">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
</td>
</tr>
<tr>
<td rowspan="4">
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
</td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-dark">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
</td>
<td>
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
</td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td>
{{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
</td>
</tr>
</tbody>
</table>
</div>
### Using the new colors

2
site/content/docs/5.3/customize/components.md
View File

@@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
## Creating your own

74
site/content/docs/5.3/customize/sass.md
View File

@@ -14,23 +14,25 @@ Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means
```text
your-project/
├── scss
├── scss/
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
│ └── bootstrap/
│ ├── js/
│ └── scss/
└── index.html
```
If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
```text
your-project/
├── scss
├── scss/
│ └── custom.scss
└── bootstrap/
├── js
└── scss
├── bootstrap/
│ ├── js/
│ └── scss/
└── index.html
```
## Importing
@@ -85,6 +87,45 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
## Compiling
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
```shell
# Install Sass globally
npm install -g sass
# Watch your custom Sass for changes and compile it to CSS
sass --watch ./scss/custom.scss ./css/custom.css
```
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
{{< callout info >}}
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
{{< /callout >}}
## Including
Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Bootstrap</title>
<link href="/css/custom.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
```
## Variable defaults
Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
@@ -203,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.
{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
In practice, you'd call the function and pass in the color and weight parameters.
@@ -215,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters
.custom-element-2 {
color: shade-color($danger, 30%);
}
.custom-element-3 {
color: shift-color($success, 40%);
background-color: shift-color($success, -60%);
}
```
### Color contrast
@@ -297,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
### Color schemes
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
```scss
.custom-element {
@include color-scheme(light) {
// Insert light mode styles here
}
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}
```

49
site/content/docs/5.3/docsref.md Normal file
View File

@@ -0,0 +1,49 @@
---
layout: docs
title: Docs reference
description: Examples of Bootstrap's documentation-specific components and styles.
aliases: "/docsref/"
toc: true
robots: noindex,follow
sitemap_exclude: true
---
## Buttons
<button class="btn btn-bd-primary">Primary button</button>
<button class="btn btn-bd-accent">Accent button</button>
<button class="btn btn-bd-light">Light button</button>
## Callouts
{{< callout >}}
Default callout
{{< /callout >}}
{{< callout warning >}}
Warning callout
{{< /callout >}}
{{< callout danger >}}
Danger callout
{{< /callout >}}
## Code example
```scss
.test {
--color: blue;
}
```
<div class="bd-example">
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
{{< example >}}
<div class="test">This is a test.</div>
{{< /example >}}
{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}

15
site/content/docs/5.3/examples/.stylelintrc
View File

@@ -1,15 +0,0 @@
{
"extends": [
"stylelint-config-twbs-bootstrap"
],
"rules": {
"at-rule-no-vendor-prefix": null,
"comment-empty-line-before": null,
"media-feature-name-no-vendor-prefix": null,
"property-disallowed-list": null,
"property-no-vendor-prefix": null,
"selector-no-qualifying-type": null,
"selector-no-vendor-prefix": null,
"value-no-vendor-prefix": null
}
}

10
site/content/docs/5.3/examples/_index.md
View File

@@ -23,16 +23,20 @@ aliases: "/examples/"
{{ if (eq $i 0) }}<div class="row">{{ end }}
{{ if $entry.external }}
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
<svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
<div>
<h3 class="h5 mb-1">
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank">
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank" rel="noopener">
{{ $example.name }}
</a>
</h3>
<p class="text-body-secondary">{{ $example.description }}</p>
<p>
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank">
{{- $indexPath := "index.html" -}}
{{- if $example.indexPath -}}
{{- $indexPath = $example.indexPath -}}
{{- end }}
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
Edit in StackBlitz
</a>

8
site/content/docs/5.3/examples/album-rtl/index.html
View File

@@ -4,16 +4,16 @@ title: مثال الألبوم
direction: rtl
---
<header>
<div class="collapse bg-dark" id="navbarHeader">
<header data-bs-theme="dark">
<div class="collapse text-bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">حول</h4>
<h4>حول</h4>
<p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">تواصل معي</h4>
<h4>تواصل معي</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
<li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>

8
site/content/docs/5.3/examples/album/index.html
View File

@@ -3,16 +3,16 @@ layout: examples
title: Album example
---
<header>
<div class="collapse bg-dark" id="navbarHeader">
<header data-bs-theme="dark">
<div class="collapse text-bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<h4>About</h4>
<p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<h4>Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>

3
site/content/docs/5.3/examples/badges/badges.css Normal file
View File

@@ -0,0 +1,3 @@
.badge > a {
color: inherit;
}

149
site/content/docs/5.3/examples/badges/index.html Normal file
View File

@@ -0,0 +1,149 @@
---
layout: examples
title: Badges
extra_css:
- "badges.css"
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</symbol>
</svg>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge text-bg-primary rounded-pill">Primary</span>
<span class="badge text-bg-secondary rounded-pill">Secondary</span>
<span class="badge text-bg-success rounded-pill">Success</span>
<span class="badge text-bg-danger rounded-pill">Danger</span>
<span class="badge text-bg-warning rounded-pill">Warning</span>
<span class="badge text-bg-info rounded-pill">Info</span>
<span class="badge text-bg-light rounded-pill">Light</span>
<span class="badge text-bg-dark rounded-pill">Dark</span>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
<span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
<span class="badge bg-success-subtle text-success-emphasis rounded-pill">Success</span>
<span class="badge bg-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
<span class="badge bg-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
<span class="badge bg-info-subtle text-info-emphasis rounded-pill">Info</span>
<span class="badge bg-light-subtle text-light-emphasis rounded-pill">Light</span>
<span class="badge bg-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
<span class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
<span class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill">Success</span>
<span class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
<span class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
<span class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill">Info</span>
<span class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill">Light</span>
<span class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Primary
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Secondary
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Success
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Danger
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Warning
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Info
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Light
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Dark
</span>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
<span class="px-1">Primary</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
<span class="px-1">Primary</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<span class="px-1">Primary</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Primary
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Secondary
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Success
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Danger
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Warning
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Info
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Light
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Dark
<span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
</span>
</div>

115
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@@ -5,17 +5,29 @@ direction: rtl
extra_css:
- "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
- "../blog/blog.rtl.css"
include_js: false
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<div class="container">
<header class="blog-header lh-1 py-3">
<header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">كبير</a>
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="بحث">
@@ -26,30 +38,30 @@ include_js: false
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 link-secondary" href="#">العالم</a>
<a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
<a class="p-2 link-secondary" href="#">التقنية</a>
<a class="p-2 link-secondary" href="#">التصميم</a>
<a class="p-2 link-secondary" href="#">الحضارة</a>
<a class="p-2 link-secondary" href="#">المال والأعمال</a>
<a class="p-2 link-secondary" href="#">السياسة</a>
<a class="p-2 link-secondary" href="#">الرأي العام</a>
<a class="p-2 link-secondary" href="#">العلوم</a>
<a class="p-2 link-secondary" href="#">الصحة</a>
<a class="p-2 link-secondary" href="#">الموضة</a>
<a class="p-2 link-secondary" href="#">السفر</a>
<div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav nav-underline justify-content-between">
<a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a>
<a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a>
<a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
<a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
<a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
<a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a>
<a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
<a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a>
<a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
<a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
<a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
<a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
</nav>
</div>
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
<div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
<p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p>
</div>
</div>
@@ -57,11 +69,14 @@ include_js: false
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">العالم</strong>
<strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong>
<h3 class="mb-0">مشاركة مميزة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 12</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -71,11 +86,14 @@ include_js: false
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
<strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong>
<h3 class="mb-0">عنوان الوظيفة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 11</div>
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@@ -84,20 +102,20 @@ include_js: false
</div>
</div>
<div class="row">
<div class="row g-5">
<div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
من Firehose
</h3>
<article class="blog-post">
<h2 class="blog-post-title mb-1">مثال على تدوينة</h2>
<h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2>
<p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
<hr>
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
<blockquote>
<blockquote class="blockquote">
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
</blockquote>
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
@@ -126,7 +144,7 @@ include_js: false
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">تدوينة أخرى</h2>
<h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2>
<p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
<p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@@ -138,7 +156,7 @@ include_js: false
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">ميزة جديدة</h2>
<h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>
<p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
<p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@@ -154,7 +172,7 @@ include_js: false
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
<a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">تدوينات أحدث</a>
</nav>
</div>
@@ -166,6 +184,39 @@ include_js: false
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
</div>
<div>
<h4 class="fst-italic">المشاركات الاخيرة</h4>
<ul class="list-unstyled">
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
<small class="text-body-secondary">15 يناير 2024</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
<small class="text-body-secondary">14 يناير 2024</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
<small class="text-body-secondary">13 يناير 2024</small>
</div>
</a>
</li>
</ul>
</div>
<div class="p-4">
<h4 class="fst-italic">الأرشيف</h4>
<ol class="list-unstyled mb-0">
@@ -198,9 +249,9 @@ include_js: false
</main>
<footer class="blog-footer">
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
<p>
<p class="mb-0">
<a href="#">عد إلى الأعلى</a>
</p>
</footer>

32
site/content/docs/5.3/examples/blog/blog.css
View File

@@ -1,8 +1,4 @@
/* stylelint-disable selector-list-comma-newline-after */
.blog-header {
border-bottom: 1px solid #e5e5e5;
}
/* stylelint-disable @stylistic/selector-list-comma-newline-after */
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.flex-auto {
flex: 0 0 auto;
}
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #727272;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}

32
site/content/docs/5.3/examples/blog/blog.rtl.css
View File

@@ -1,8 +1,4 @@
/* stylelint-disable selector-list-comma-newline-after */
.blog-header {
border-bottom: 1px solid #e5e5e5;
}
/* stylelint-disable @stylistic/selector-list-comma-newline-after */
.blog-header-logo {
font-family: Amiri, Georgia, "Times New Roman", serif;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: Amiri, Georgia, "Times New Roman", serif;
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.flex-auto {
flex: 0 0 auto;
}
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #727272;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}

111
site/content/docs/5.3/examples/blog/index.html
View File

@@ -4,17 +4,29 @@ title: Blog Template
extra_css:
- "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
- "blog.css"
include_js: false
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<div class="container">
<header class="blog-header lh-1 py-3">
<header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="link-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-body-emphasis" href="#">Large</a>
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
@@ -25,30 +37,30 @@ include_js: false
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">U.S.</a>
<a class="p-2 link-secondary" href="#">Technology</a>
<a class="p-2 link-secondary" href="#">Design</a>
<a class="p-2 link-secondary" href="#">Culture</a>
<a class="p-2 link-secondary" href="#">Business</a>
<a class="p-2 link-secondary" href="#">Politics</a>
<a class="p-2 link-secondary" href="#">Opinion</a>
<a class="p-2 link-secondary" href="#">Science</a>
<a class="p-2 link-secondary" href="#">Health</a>
<a class="p-2 link-secondary" href="#">Style</a>
<a class="p-2 link-secondary" href="#">Travel</a>
<div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav nav-underline justify-content-between">
<a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
<a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
</nav>
</div>
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
<div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
<p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
</div>
</div>
@@ -56,11 +68,14 @@ include_js: false
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-body-secondary">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -70,11 +85,14 @@ include_js: false
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-body-secondary">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -90,7 +108,7 @@ include_js: false
</h3>
<article class="blog-post">
<h2 class="blog-post-title mb-1">Sample blog post</h2>
<h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -144,7 +162,7 @@ include_js: false
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">Another blog post</h2>
<h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -192,7 +210,7 @@ include_js: false
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">New feature</h2>
<h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -206,7 +224,7 @@ include_js: false
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
<a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
</nav>
</div>
@@ -218,6 +236,39 @@ include_js: false
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div>
<div>
<h4 class="fst-italic">Recent posts</h4>
<ul class="list-unstyled">
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">Example blog post title</h6>
<small class="text-body-secondary">January 15, 2024</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">This is another blog post title</h6>
<small class="text-body-secondary">January 14, 2024</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
<small class="text-body-secondary">January 13, 2024</small>
</div>
</a>
</li>
</ul>
</div>
<div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
@@ -250,9 +301,9 @@ include_js: false
</main>
<footer class="blog-footer">
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<p class="mb-0">
<a href="#">Back to top</a>
</p>
</footer>

50
site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css Normal file
View File

@@ -0,0 +1,50 @@
.breadcrumb-chevron {
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
display: flex;
gap: inherit;
align-items: center;
padding-left: 0;
line-height: 1;
}
.breadcrumb-chevron .breadcrumb-item::before {
gap: inherit;
float: none;
width: 1rem;
height: 1rem;
}
.breadcrumb-custom .breadcrumb-item {
position: relative;
flex-grow: 1;
padding: .75rem 3rem;
}
.breadcrumb-custom .breadcrumb-item::before {
display: none;
}
.breadcrumb-custom .breadcrumb-item::after {
position: absolute;
top: 50%;
right: -25px;
z-index: 1;
display: inline-block;
width: 50px;
height: 50px;
margin-top: -25px;
content: "";
background-color: var(--bs-tertiary-bg);
border-top-right-radius: .5rem;
box-shadow: 1px -1px var(--bs-border-color);
transform: scale(.707) rotate(45deg);
}
.breadcrumb-custom .breadcrumb-item:first-child {
padding-left: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child {
padding-right: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child::after {
display: none;
}

88
site/content/docs/5.3/examples/breadcrumbs/index.html Normal file
View File

@@ -0,0 +1,88 @@
---
layout: examples
title: Breadcrumbs
extra_css:
- "breadcrumbs.css"
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="house-door-fill" viewBox="0 0 16 16">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
</symbol>
</svg>
<div class="container my-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<div class="b-example-divider"></div>
<div class="container my-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
</li>
</ol>
</nav>
</div>
<div class="b-example-divider"></div>
<div class="container my-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
</li>
</ol>
</nav>
</div>
<div class="b-example-divider"></div>
<div class="container my-5">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
Home
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
</li>
</ol>
</nav>
</div>
<div class="b-example-divider"></div>

88
site/content/docs/5.3/examples/buttons/index.html Normal file
View File

@@ -0,0 +1,88 @@
---
layout: examples
title: Buttons
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
</symbol>
<symbol id="x-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
</symbol>
</svg>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
<button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
<button class="btn btn-success rounded-pill px-3" type="button">Success</button>
<button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
<button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
<button class="btn btn-info rounded-pill px-3" type="button">Info</button>
<button class="btn btn-light rounded-pill px-3" type="button">Light</button>
<button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
<button class="btn btn-link rounded-pill px-3" type="button">Link</button>
</div>
<div class="b-example-divider"></div>
<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
<div class="d-grid gap-2">
<button class="btn btn-outline-secondary" type="button">Secondary action</button>
<button class="btn btn-primary" type="button">Primary action</button>
</div>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
Primary icon
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
Secondary icon
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="b-example-divider"></div>

26
site/content/docs/5.3/examples/carousel-rtl/index.html
View File

@@ -6,7 +6,7 @@ extra_css:
- "../carousel/carousel.rtl.css"
---
<header>
<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">شرائح العرض</a>
@@ -22,7 +22,7 @@ extra_css:
<a class="nav-link" href="#">حلقة الوصل</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">رابط غير مفعل</a>
<a class="nav-link disabled" aria-disabled="true">رابط غير مفعل</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -36,7 +36,7 @@ extra_css:
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -44,17 +44,17 @@ extra_css:
</div>
<div class="carousel-inner">
<div class="carousel-item active">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-start">
<h1>عنوان المثال.</h1>
<p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
<p class="opacity-75">تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
</div>
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption">
<h1>عنوان مثال آخر.</h1>
@@ -64,7 +64,7 @@ extra_css:
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-end">
<h1>واحد أكثر لقياس جيد.</h1>
@@ -94,19 +94,19 @@ extra_css:
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">عنوان</h2>
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">عنوان آخر</h2>
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
@@ -124,7 +124,7 @@ extra_css:
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -136,7 +136,7 @@ extra_css:
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
</div>
<div class="col-md-5 order-md-1">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -148,7 +148,7 @@ extra_css:
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>

2
site/content/docs/5.3/examples/carousel/carousel.css
View File

@@ -5,7 +5,7 @@
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
color: rgb(var(--bs-tertiary-color-rgb));
}

2
site/content/docs/5.3/examples/carousel/carousel.rtl.css
View File

@@ -5,7 +5,7 @@
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
color: rgb(var(--bs-tertiary-color-rgb));
}

26
site/content/docs/5.3/examples/carousel/index.html
View File

@@ -5,7 +5,7 @@ extra_css:
- "carousel.css"
---
<header>
<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
@@ -21,7 +21,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -35,7 +35,7 @@ extra_css:
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -43,17 +43,17 @@ extra_css:
</div>
<div class="carousel-inner">
<div class="carousel-item active">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
@@ -63,7 +63,7 @@ extra_css:
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-end">
<h1>One more for good measure.</h1>
@@ -93,19 +93,19 @@ extra_css:
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
@@ -123,7 +123,7 @@ extra_css:
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -135,7 +135,7 @@ extra_css:
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div class="col-md-5 order-md-1">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -147,7 +147,7 @@ extra_css:
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>

14
site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View File

@@ -23,7 +23,7 @@ direction: rtl
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li>
@@ -32,7 +32,7 @@ direction: rtl
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li>
@@ -43,7 +43,7 @@ direction: rtl
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li>
@@ -1170,7 +1170,7 @@ direction: rtl
<a class="nav-link active" aria-current="page" href="#">نشط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</nav>
{{< /example >}}
@@ -1207,7 +1207,7 @@ direction: rtl
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
{{< /example >}}
@@ -1250,7 +1250,7 @@ direction: rtl
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -1289,7 +1289,7 @@ direction: rtl
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">

15
site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
View File

@@ -12,7 +12,7 @@ body {
height: 1em;
margin-right: .25rem;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-size: 1em;
}
@@ -26,29 +26,29 @@ body {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: .3125rem;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
@@ -59,7 +59,7 @@ body {
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
/* rtl:raw:
@@ -149,7 +149,6 @@ body {
/* rtl:end:ignore */
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
}
.bd-cheatsheet article,

15
site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
View File

@@ -12,7 +12,7 @@ body {
height: 1em;
margin-left: .25rem;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-size: 1em;
}
@@ -26,29 +26,29 @@ body {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-right: .3125rem;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
@@ -59,7 +59,7 @@ body {
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform: rotate(180deg) translateX(-2px);
transform-origin: .5em 50%;
@@ -142,7 +142,6 @@ body {
left: 0;
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
}
.bd-cheatsheet article,

14
site/content/docs/5.3/examples/cheatsheet/index.html
View File

@@ -22,7 +22,7 @@ body_class: "bg-body-tertiary"
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li>
@@ -31,7 +31,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li>
@@ -42,7 +42,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
<button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li>
@@ -1169,7 +1169,7 @@ body_class: "bg-body-tertiary"
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@@ -1206,7 +1206,7 @@ body_class: "bg-body-tertiary"
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@@ -1249,7 +1249,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@@ -1288,7 +1288,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

1
site/content/docs/5.3/examples/cover/index.html
View File

@@ -5,7 +5,6 @@ extra_css:
- "cover.css"
html_class: "h-100"
body_class: "d-flex h-100 text-center text-bg-dark"
include_js: false
---
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

20
site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
View File

@@ -1,10 +1,8 @@
/* globals Chart:false, feather:false */
/* globals Chart:false */
(() => {
'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs
const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
@@ -38,15 +36,13 @@
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
plugins: {
legend: {
display: false
},
tooltip: {
boxPadding: 3
}
}
}
})

258
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@@ -3,105 +3,185 @@ layout: examples
title: قالب لوحة القيادة
direction: rtl
extra_css:
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
- "../dashboard/dashboard.rtl.css"
extra_js:
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
- src: "dashboard.js"
---
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">تسجيل الخروج</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="calendar3" viewBox="0 0 16 16">
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
<symbol id="door-closed" viewBox="0 0 16 16">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</symbol>
<symbol id="file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</symbol>
<symbol id="file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</symbol>
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
</symbol>
<symbol id="graph-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
</symbol>
<symbol id="house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</symbol>
<symbol id="list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
</symbol>
<symbol id="plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="puzzle" viewBox="0 0 16 16">
<path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
</symbol>
<symbol id="search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</symbol>
</svg>
<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">اسم الشركة</a>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
<svg class="bi"><use xlink:href="#search"/></svg>
</button>
</li>
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<svg class="bi"><use xlink:href="#list"/></svg>
</button>
</li>
</ul>
<div id="navbarSearch" class="navbar-search w-100 collapse">
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
لوحة القيادة
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file" class="align-text-bottom"></span>
الطلبات
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart" class="align-text-bottom"></span>
المنتجات
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users" class="align-text-bottom"></span>
الزبائن
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2" class="align-text-bottom"></span>
التقارير
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers" class="align-text-bottom"></span>
التكاملات
</a>
</li>
</ul>
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="يغلق"></button>
</div>
<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg>
لوحة القيادة
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
الطلبات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg>
المنتجات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg>
الزبائن
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg>
التقارير
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg>
التكاملات
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<span data-feather="plus-circle" class="align-text-bottom"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
الشهر الحالي
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
الربع الأخير
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
التفاعل الإجتماعي
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
مبيعات نهاية العام
</a>
</li>
</ul>
</h6>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام
</a>
</li>
</ul>
<hr class="my-3">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg>
خروج
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
@@ -111,8 +191,8 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar" class="align-text-bottom"></span>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع
</button>
</div>
@@ -121,7 +201,7 @@ extra_js:
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>عنوان القسم</h2>
<div class="table-responsive">
<div class="table-responsive small">
<table class="table table-striped table-sm">
<thead>
<tr>

70
site/content/docs/5.3/examples/dashboard/dashboard.css
View File

@@ -1,61 +1,33 @@
body {
font-size: .875rem;
}
.feather {
width: 16px;
height: 16px;
.bi {
display: inline-block;
width: 1rem;
height: 1rem;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
@media (min-width: 768px) {
.sidebar .offcanvas-lg {
position: -webkit-sticky;
position: sticky;
top: 48px;
}
.navbar-search {
display: block;
}
}
.sidebar-sticky {
height: calc(100vh - 48px);
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-size: .875rem;
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
}
@@ -71,22 +43,6 @@ body {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

20
site/content/docs/5.3/examples/dashboard/dashboard.js
View File

@@ -1,10 +1,8 @@
/* globals Chart:false, feather:false */
/* globals Chart:false */
(() => {
'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs
const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
@@ -38,15 +36,13 @@
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false
plugins: {
legend: {
display: false
},
tooltip: {
boxPadding: 3
}
}
}
})

66
site/content/docs/5.3/examples/dashboard/dashboard.rtl.css
View File

@@ -1,57 +1,33 @@
body {
font-size: .875rem;
}
.feather {
width: 16px;
height: 16px;
.bi {
display: inline-block;
width: 1rem;
height: 1rem;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
@media (min-width: 768px) {
.sidebar .offcanvas-lg {
position: -webkit-sticky;
position: sticky;
top: 48px;
}
.navbar-search {
display: block;
}
}
.sidebar-sticky {
height: calc(100vh - 48px);
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-size: .875rem;
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-left: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
}
@@ -67,22 +43,6 @@ body {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
left: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

258
site/content/docs/5.3/examples/dashboard/index.html
View File

@@ -2,105 +2,185 @@
layout: examples
title: Dashboard Template
extra_css:
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
- "dashboard.css"
extra_js:
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
- src: "dashboard.js"
---
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="calendar3" viewBox="0 0 16 16">
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
<symbol id="door-closed" viewBox="0 0 16 16">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</symbol>
<symbol id="file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</symbol>
<symbol id="file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</symbol>
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
</symbol>
<symbol id="graph-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
</symbol>
<symbol id="house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</symbol>
<symbol id="list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
</symbol>
<symbol id="plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="puzzle" viewBox="0 0 16 16">
<path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
</symbol>
<symbol id="search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</symbol>
</svg>
<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Company name</a>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
<svg class="bi"><use xlink:href="#search"/></svg>
</button>
</li>
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi"><use xlink:href="#list"/></svg>
</button>
</li>
</ul>
<div id="navbarSearch" class="navbar-search w-100 collapse">
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file" class="align-text-bottom"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart" class="align-text-bottom"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users" class="align-text-bottom"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2" class="align-text-bottom"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers" class="align-text-bottom"></span>
Integrations
</a>
</li>
</ul>
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle" class="align-text-bottom"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
Current month
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text" class="align-text-bottom"></span>
Year-end sale
</a>
</li>
</ul>
</h6>
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale
</a>
</li>
</ul>
<hr class="my-3">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg>
Sign out
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
@@ -110,8 +190,8 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar" class="align-text-bottom"></span>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg>
This week
</button>
</div>
@@ -120,7 +200,7 @@ extra_js:
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
<div class="table-responsive small">
<table class="table table-striped table-sm">
<thead>
<tr>

2
site/content/docs/5.3/examples/dropdowns/index.html
View File

@@ -6,7 +6,7 @@ extra_css:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="film" viewBox="0 0 16 16">
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
</symbol>

46
site/content/docs/5.3/examples/features/index.html
View File

@@ -6,7 +6,7 @@ extra_css:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -25,9 +25,6 @@ body_class: ""
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</symbol>
<symbol id="collection" viewBox="0 0 16 16">
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
</symbol>
@@ -35,9 +32,6 @@ body_class: ""
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
</symbol>
<symbol id="cpu-fill" viewBox="0 0 16 16">
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
@@ -74,7 +68,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
@@ -85,7 +79,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
@@ -96,7 +90,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
@@ -116,7 +110,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -128,7 +122,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -140,7 +134,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
<div>
<h3 class="fs-2">Featured title</h3>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary">
Primary button
@@ -230,56 +224,56 @@ body_class: ""
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
@@ -293,7 +287,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="col d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div>
@@ -306,7 +300,7 @@ body_class: ""
<use xlink:href="#collection" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
@@ -316,7 +310,7 @@ body_class: ""
<use xlink:href="#gear-fill" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
@@ -326,7 +320,7 @@ body_class: ""
<use xlink:href="#speedometer" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
@@ -336,7 +330,7 @@ body_class: ""
<use xlink:href="#table" />
</svg>
</div>
<h4 class="fw-semibold mb-0">Featured title</h4>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>

BIN
site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

BIN
site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

2
site/content/docs/5.3/examples/footers/index.html
View File

@@ -4,7 +4,7 @@ title: Footers
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>

1
site/content/docs/5.3/examples/grid/index.html
View File

@@ -4,7 +4,6 @@ title: Grid Template
extra_css:
- "grid.css"
body_class: "py-4"
include_js: false
---
<main>

2
site/content/docs/5.3/examples/headers/headers.css
View File

@@ -10,6 +10,6 @@
font-size: 85%;
}
.dropdown-toggle {
.dropdown-toggle:not(:focus) {
outline: 0;
}

30
site/content/docs/5.3/examples/headers/index.html
View File

@@ -6,7 +6,7 @@ extra_css:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -68,9 +68,11 @@ body_class: ""
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
<div class="col-md-3 mb-2 mb-md-0">
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
<svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
</div>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
@@ -137,7 +139,7 @@ body_class: ""
</form>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small">
@@ -177,7 +179,7 @@ body_class: ""
</form>
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow">
@@ -208,15 +210,15 @@ body_class: ""
<nav class="py-2 bg-body-tertiary border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
</ul>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
</ul>
</div>
</nav>
@@ -235,7 +237,7 @@ body_class: ""
<div class="b-example-divider"></div>
<header>
<div class="px-3 py-2 text-bg-dark">
<div class="px-3 py-2 text-bg-dark border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">

BIN
site/content/docs/5.3/examples/heroes/bootstrap-docs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 363 KiB

After

Width:  |  Height:  |  Size: 361 KiB

3
site/content/docs/5.3/examples/jumbotron/index.html
View File

@@ -1,13 +1,12 @@
---
layout: examples
title: Jumbotron example
include_js: false
---
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Jumbotron example</span>
</a>

82
site/content/docs/5.3/examples/jumbotrons/index.html Normal file
View File

@@ -0,0 +1,82 @@
---
layout: examples
title: Jumbotrons
extra_css:
- "jumbotrons.css"
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
</symbol>
<symbol id="check2-circle" viewBox="0 0 16 16">
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
</symbol>
</svg>
<div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
</p>
<div class="d-inline-flex gap-2 mb-5">
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
Call to action
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
</button>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1>
<p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
</p>
<button class="btn btn-primary px-5 mb-5" type="button">
Call to action
</button>
</div>
</div>
<div class="b-example-divider"></div>
<div class="my-5">
<div class="p-5 text-center bg-body-tertiary">
<div class="container py-5">
<h1 class="text-body-emphasis">Full-width jumbotron</h1>
<p class="col-lg-8 mx-auto lead">
This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.
</p>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3">
<h1 class="text-body-emphasis">Basic jumbotron</h1>
<p class="lead">
This is a simple Bootstrap jumbotron that sits within a <code>.container</code>, recreated with built-in utility classes.
</p>
</div>
</div>
<div class="b-example-divider"></div>

1
site/content/docs/5.3/examples/jumbotrons/jumbotrons.css Normal file
View File

@@ -0,0 +1 @@
.border-dashed { --bs-border-style: dashed; }

7
site/content/docs/5.3/examples/list-groups/index.html
View File

@@ -6,12 +6,7 @@ extra_css:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="calendar-event" viewBox="0 0 16 16">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>

24
site/content/docs/5.3/examples/modals/index.html
View File

@@ -6,25 +6,7 @@ extra_css:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="check2-circle" viewBox="0 0 16 16">
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
</symbol>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bookmark-star" viewBox="0 0 16 16">
<path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
@@ -34,10 +16,6 @@ body_class: ""
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</symbol>
<symbol id="stars" viewBox="0 0 16 16">
<path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
</symbol>
<symbol id="film" viewBox="0 0 16 16">
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
</symbol>

2
site/content/docs/5.3/examples/navbar-bottom/index.html
View File

@@ -25,7 +25,7 @@ title: Bottom navbar example
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>

2
site/content/docs/5.3/examples/navbar-fixed/index.html
View File

@@ -20,7 +20,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

2
site/content/docs/5.3/examples/navbar-static/index.html
View File

@@ -20,7 +20,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

24
site/content/docs/5.3/examples/navbars/index.html
View File

@@ -22,7 +22,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -79,7 +79,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -113,7 +113,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -147,7 +147,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -181,7 +181,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -215,7 +215,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -249,7 +249,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -283,7 +283,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -320,7 +320,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -352,7 +352,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -385,7 +385,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@@ -416,7 +416,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>

15
site/content/docs/5.3/examples/pricing/index.html
View File

@@ -3,10 +3,9 @@ layout: examples
title: Pricing example
extra_css:
- "pricing.css"
include_js: false
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check" viewBox="0 0 16 16">
<title>Check</title>
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
@@ -16,21 +15,21 @@ include_js: false
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Pricing example</span>
</a>
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a>
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a>
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a>
<a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a>
</nav>
</div>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1>
<h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
<p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div>
</header>

2
site/content/docs/5.3/examples/pricing/pricing.css
View File

@@ -1,5 +1,5 @@
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
}
.container {

111
site/content/docs/5.3/examples/product/index.html
View File

@@ -5,27 +5,68 @@ extra_css:
- "product.css"
---
<header class="site-header sticky-top py-1">
<nav class="container d-flex flex-column flex-md-row justify-content-between">
<a class="py-2" href="#" aria-label="Product">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand d-md-none" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
Aperture
</a>
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
<a class="py-2 d-none d-md-inline-block" href="#">Product</a>
<a class="py-2 d-none d-md-inline-block" href="#">Features</a>
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
</nav>
</header>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
</a></li>
</ul>
</div>
</div>
</div>
</nav>
<main>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 fw-normal">Punny headline</h1>
<p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
<div class="col-md-6 p-lg-5 mx-auto my-5">
<h1 class="display-3 fw-bold">Designed for engineers</h1>
<h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
<div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#">
Learn more
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
<a class="icon-link" href="#">
Buy
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
@@ -109,39 +150,39 @@ extra_css:
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Cool stuff</a></li>
<li><a class="link-secondary" href="#">Random feature</a></li>
<li><a class="link-secondary" href="#">Team feature</a></li>
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
<li><a class="link-secondary" href="#">Another one</a></li>
<li><a class="link-secondary" href="#">Last time</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Resource name</a></li>
<li><a class="link-secondary" href="#">Resource</a></li>
<li><a class="link-secondary" href="#">Another resource</a></li>
<li><a class="link-secondary" href="#">Final resource</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Business</a></li>
<li><a class="link-secondary" href="#">Education</a></li>
<li><a class="link-secondary" href="#">Government</a></li>
<li><a class="link-secondary" href="#">Gaming</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Team</a></li>
<li><a class="link-secondary" href="#">Locations</a></li>
<li><a class="link-secondary" href="#">Privacy</a></li>
<li><a class="link-secondary" href="#">Terms</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
</ul>
</div>
</div>

5
site/content/docs/5.3/examples/product/product.css
View File

@@ -2,6 +2,11 @@
max-width: 960px;
}
.icon-link > .bi {
width: .75em;
height: .75em;
}
/*
* Custom translucent site header
*/

45
site/content/docs/5.3/examples/sidebars/index.html
View File

@@ -8,7 +8,7 @@ extra_js:
body_class: ""
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
@@ -30,41 +30,6 @@ body_class: ""
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</symbol>
<symbol id="collection" viewBox="0 0 16 16">
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
</symbol>
<symbol id="calendar3" viewBox="0 0 16 16">
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
</symbol>
<symbol id="cpu-fill" viewBox="0 0 16 16">
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
</symbol>
<symbol id="gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
</symbol>
<symbol id="speedometer" viewBox="0 0 16 16">
<path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
<path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
</symbol>
<symbol id="toggles2" viewBox="0 0 16 16">
<path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
<path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
<path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
</symbol>
<symbol id="tools" viewBox="0 0 16 16">
<path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
<symbol id="geo-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
</symbol>
</svg>
<main class="d-flex flex-nowrap">
@@ -281,10 +246,10 @@ body_class: ""
</button>
<div class="collapse" id="account-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New...</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Sign out</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a></li>
</ul>
</div>
</li>

12
site/content/docs/5.3/examples/sign-in/index.html
View File

@@ -3,8 +3,7 @@ layout: examples
title: Signin Template
extra_css:
- "sign-in.css"
body_class: "text-center"
include_js: false
body_class: "d-flex align-items-center py-4 bg-body-tertiary"
---
<main class="form-signin w-100 m-auto">
@@ -21,12 +20,13 @@ include_js: false
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
<div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
</form>
</main>

Some files were not shown because too many files have changed in this diff Show More