Merging upstream version 5.3.0+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
a87fc4fcc7
commit
e92720b6a7
GPG key ID:
FBB4F0E80A80222F
605 changed files with 15320 additions and 9495 deletions
|
|
@ -1,54 +0,0 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": false
|
||||
},
|
||||
"plugins": [
|
||||
"markdown"
|
||||
],
|
||||
"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-undef": "off",
|
||||
"no-unused-vars": "off",
|
||||
"unicorn/no-array-for-each": "off",
|
||||
"unicorn/numeric-separators-style": "off",
|
||||
"no-unused-expressions": "off",
|
||||
"no-unused-labels": "off",
|
||||
"no-labels": "off",
|
||||
"no-redeclare": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"parserOptions": {
|
||||
"sourceType": "script"
|
||||
},
|
||||
"extends": "../.eslintrc.json",
|
||||
"rules": {
|
||||
"no-new": "off",
|
||||
"prefer-template": "error",
|
||||
"strict": "error",
|
||||
"unicorn/no-array-for-each": "off",
|
||||
"unicorn/numeric-separators-style": "off",
|
||||
"unicorn/prefer-node-protocol": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
@ -15,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
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
@ -14,6 +13,7 @@
|
|||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Insert copy to clipboard button before .highlight
|
||||
const btnTitle = 'Copy to clipboard'
|
||||
const btnEdit = 'Edit on StackBlitz'
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
'</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
|
||||
|
|
@ -52,11 +52,12 @@
|
|||
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 => {
|
||||
const iconFirstChild = event.trigger.querySelector('.bi').firstChild
|
||||
const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
|
||||
const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
|
||||
const namespace = 'http://www.w3.org/1999/xlink'
|
||||
const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@
|
|||
|
||||
return item
|
||||
})
|
||||
},
|
||||
// Set debug to `true` if you want to inspect the dropdown
|
||||
debug: false
|
||||
}
|
||||
})
|
||||
})()
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
// --------
|
||||
// Tooltips
|
||||
// --------
|
||||
// Instantiate all tooltips in a docs or StackBlitz page
|
||||
// Instantiate all tooltips in a docs or StackBlitz
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip)
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
// --------
|
||||
// Popovers
|
||||
// --------
|
||||
// Instantiate all popovers in a docs or StackBlitz page
|
||||
// Instantiate all popovers in docs or StackBlitz
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
.forEach(popover => {
|
||||
new bootstrap.Popover(popover)
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
// Instantiate all toasts in a docs page only
|
||||
// Instantiate all toasts in docs pages only
|
||||
document.querySelectorAll('.bd-example .toast')
|
||||
.forEach(toastNode => {
|
||||
const toast = new bootstrap.Toast(toastNode, {
|
||||
|
|
@ -60,24 +59,26 @@
|
|||
toast.show()
|
||||
})
|
||||
|
||||
// Instantiate all toasts in a docs page only
|
||||
// Instantiate all toasts in docs pages only
|
||||
// js-docs-start live-toast
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
if (toastTrigger) {
|
||||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
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 = [
|
||||
|
|
@ -90,11 +91,22 @@
|
|||
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
|
||||
// --------
|
||||
// Instantiate all non-autoplaying carousels in docs or StackBlitz
|
||||
document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
|
||||
.forEach(carousel => {
|
||||
bootstrap.Carousel.getOrCreateInstance(carousel)
|
||||
})
|
||||
|
||||
// -------------------------------
|
||||
// Checks & Radios
|
||||
|
|
@ -122,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 => {
|
||||
|
|
@ -129,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')
|
||||
|
|
@ -138,6 +153,7 @@
|
|||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
// js-docs-end varying-modal-content
|
||||
|
||||
// -------------------------------
|
||||
// Offcanvas
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: $gray-100;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
|
||||
a {
|
||||
color: $gray-800;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: $gray-700 !important;
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
// Individual items
|
||||
.bd-brand-item {
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
+ .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid $white;
|
||||
border-left: 1px solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,8 @@
|
|||
.btn-bd-primary {
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bd-violet);
|
||||
--bs-btn-border-radius: .5rem;
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
|
||||
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
|
||||
|
|
@ -33,13 +32,21 @@
|
|||
}
|
||||
|
||||
.btn-bd-light {
|
||||
--btn-custom-color: #{mix($bd-violet, $white, 75%)};
|
||||
|
||||
--bs-btn-color: var(--bs-gray-600);
|
||||
--bs-btn-border-color: var(--bs-gray-400);
|
||||
--bs-btn-hover-color: var(--bd-violet);
|
||||
--bs-btn-hover-border-color: var(--bd-violet);
|
||||
--bs-btn-active-color: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bs-border-color);
|
||||
--bs-btn-hover-color: var(--btn-custom-color);
|
||||
--bs-btn-hover-border-color: var(--btn-custom-color);
|
||||
--bs-btn-active-color: var(--btn-custom-color);
|
||||
--bs-btn-active-bg: var(--bs-white);
|
||||
--bs-btn-active-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-border-color: var(--bd-violet);
|
||||
--bs-btn-active-border-color: var(--btn-custom-color);
|
||||
--bs-btn-focus-border-color: var(--btn-custom-color);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
--bs-btn-border-radius: .5rem;
|
||||
|
||||
padding: .8125rem 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,13 @@
|
|||
//
|
||||
|
||||
.bd-callout {
|
||||
--#{$prefix}link-color-rgb: var(--bd-callout-link);
|
||||
--#{$prefix}code-color: var(--bd-callout-code-color);
|
||||
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--bd-callout-color, inherit);
|
||||
background-color: var(--bd-callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
|
||||
|
||||
|
|
@ -29,7 +33,8 @@
|
|||
// Variations
|
||||
@each $variant in $bd-callout-variants {
|
||||
.bd-callout-#{$variant} {
|
||||
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
|
||||
--bd-callout-color: var(--bs-#{$variant}-text-emphasis);
|
||||
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
|
||||
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
display: block;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
background-color: $gray-100;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bd-pre-bg);
|
||||
border: 0;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -39,6 +39,6 @@
|
|||
.btn-clipboard {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: .75rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example-snippet {
|
||||
border: solid $border-color;
|
||||
.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,8 +20,8 @@
|
|||
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
border: solid $border-color;
|
||||
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 $border-color;
|
||||
border-width: 0 1px 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ p {
|
||||
|
|
@ -58,7 +56,8 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
> :last-child,
|
||||
> nav:last-child .breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -115,11 +114,12 @@
|
|||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cssgrid .grid > * {
|
||||
.bd-example-cols [class^="col"] > *,
|
||||
.bd-example-cssgrid [class*="grid"] > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .25);
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
.bd-example-row .row + .row,
|
||||
|
|
@ -129,12 +129,12 @@
|
|||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
}
|
||||
|
||||
.bd-example-flex div {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
.bd-example-flex div:not(.vr) {
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
|
|
@ -176,9 +176,9 @@
|
|||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
|
@ -208,8 +208,14 @@
|
|||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
.tooltip-demo {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
|
|
@ -253,7 +259,7 @@
|
|||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,13 +275,13 @@
|
|||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
background-color: var(--bs-body-color);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
|
@ -302,6 +308,39 @@
|
|||
min-height: 240px;
|
||||
}
|
||||
|
||||
.bd-example-zindex-levels {
|
||||
min-height: 15rem;
|
||||
|
||||
> div {
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bd-violet);
|
||||
border: 1px solid var(--bd-purple);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
top: 3rem;
|
||||
left: 3rem;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
top: 4.5rem;
|
||||
left: 4.5rem;
|
||||
}
|
||||
> :nth-child(4) {
|
||||
top: 6rem;
|
||||
left: 6rem;
|
||||
}
|
||||
> :nth-child(5) {
|
||||
top: 7.5rem;
|
||||
left: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
|
@ -309,19 +348,24 @@
|
|||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
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;
|
||||
|
|
@ -329,31 +373,27 @@
|
|||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
color: var(--bs-body-color); // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) $spacer;
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0;
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
+ .highlight {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +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;
|
||||
}
|
||||
|
|
@ -32,6 +33,9 @@
|
|||
// Override Bootstrap defaults
|
||||
> .table,
|
||||
> .table-responsive .table {
|
||||
--bs-table-border-color: var(--bs-border-color);
|
||||
|
||||
max-width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
@include font-size(.875rem);
|
||||
|
||||
|
|
@ -60,6 +64,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
// Prevent breaking of code
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
th,
|
||||
|
|
@ -80,7 +92,18 @@
|
|||
min-width: 280px;
|
||||
}
|
||||
|
||||
.table-swatches {
|
||||
th {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
td code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
@include font-size(3rem);
|
||||
}
|
||||
|
||||
|
|
@ -89,38 +112,52 @@
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bd-bg-violet {
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -.125em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-color: rgba($primary, .5);
|
||||
text-underline-offset: .5rem;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.bi {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bi {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-lg-start {
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-left: $border-width solid $border-color;
|
||||
border-left: var(--bs-border-width) solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
.bd-summary-link {
|
||||
color: var(--bs-link-color);
|
||||
|
||||
&:hover,
|
||||
details[open] > & {
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
// scss-docs-start custom-color-mode
|
||||
[data-bs-theme="blue"] {
|
||||
--bs-body-color: var(--bs-white);
|
||||
--bs-body-color-rgb: #{to-rgb($white)};
|
||||
--bs-body-bg: var(--bs-blue);
|
||||
--bs-body-bg-rgb: #{to-rgb($blue)};
|
||||
--bs-tertiary-bg: #{$blue-600};
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
|
||||
--bs-dropdown-link-active-bg: #{$blue-700};
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
|
||||
--bs-btn-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
|
||||
--bs-btn-hover-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
|
||||
--bs-btn-active-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
// scss-docs-end custom-color-mode
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
.bd-footer {
|
||||
a {
|
||||
color: $gray-700;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
color: var(--bs-link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,18 +10,20 @@
|
|||
// stylelint-enable
|
||||
|
||||
h1 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
border-color: var(--bs-border-color-translucent);
|
||||
border-width: 1px;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
|
|
@ -32,22 +34,27 @@
|
|||
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;
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
|
@ -58,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) {
|
||||
|
|
@ -73,10 +82,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
padding: .8rem 2rem;
|
||||
}
|
||||
|
||||
.masthead-followup-icon {
|
||||
padding: 1rem;
|
||||
color: rgba(var(--bg-rgb), 1);
|
||||
|
|
@ -86,7 +91,7 @@
|
|||
mix-blend-mode: darken;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 1px 1px #fff);
|
||||
filter: drop-shadow(0 1px 1px var(--bs-body-bg));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,3 +99,21 @@
|
|||
background-color: var(--bd-accent);
|
||||
box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
|
||||
}
|
||||
|
||||
.animate-img {
|
||||
> img {
|
||||
@include transition(transform .2s ease-in-out);
|
||||
}
|
||||
|
||||
&:hover > img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
[data-bs-theme="dark"] {
|
||||
.masthead-followup-icon {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
.bd-navbar {
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
}
|
||||
|
||||
.bd-navbar-toggle {
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
|
@ -30,7 +38,8 @@
|
|||
}
|
||||
|
||||
.navbar-brand {
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
color: $white;
|
||||
@include transition(transform .2s ease-in-out);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-5deg) scale(1.1);
|
||||
|
|
@ -60,7 +69,7 @@
|
|||
}
|
||||
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet);
|
||||
background-color: var(--bd-violet-bg);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
|
@ -75,17 +84,46 @@
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-min-width: 12rem;
|
||||
--#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$prefix}dropdown-font-size);
|
||||
--bs-dropdown-min-width: 12rem;
|
||||
--bs-dropdown-padding-x: .25rem;
|
||||
--bs-dropdown-padding-y: .25rem;
|
||||
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
|
||||
@include rfs(.875rem, --bs-dropdown-font-size);
|
||||
@include font-size(.875rem);
|
||||
@include border-radius(.5rem);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
|
||||
li + li {
|
||||
margin-top: .125rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:active {
|
||||
.bi {
|
||||
color: inherit !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
|
||||
.bi {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
.dropdown-menu-end {
|
||||
--bs-dropdown-min-width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.bd-navbar {
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
site/assets/scss/_scrolling.scss
Normal file
13
site/assets/scss/_scrolling.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// When navigating with the keyboard, prevent focus from landing behind the sticky header
|
||||
|
||||
main {
|
||||
a,
|
||||
button,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
[tabindex="0"] {
|
||||
scroll-margin-top: 80px;
|
||||
scroll-margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,30 @@
|
|||
// stylelint-disable selector-class-pattern
|
||||
|
||||
:root {
|
||||
--docsearch-primary-color: var(--bd-violet);
|
||||
--docsearch-logo-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
// From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
|
||||
// in html[data-theme="dark"] selector
|
||||
// and are slightly modified for formatting purpose
|
||||
--docsearch-text-color: #f5f6f7;
|
||||
--docsearch-container-background: rgba(9, 10, 17, .8);
|
||||
--docsearch-modal-background: #15172a;
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
|
||||
--docsearch-searchbox-background: #090a11;
|
||||
--docsearch-searchbox-focus-background: #000;
|
||||
--docsearch-hit-color: #bec3c9;
|
||||
--docsearch-hit-shadow: none;
|
||||
--docsearch-hit-background: #090a11;
|
||||
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
|
||||
--docsearch-footer-background: #1e2136;
|
||||
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
|
||||
--docsearch-muted-color: #7f8497;
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -19,7 +44,7 @@
|
|||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
--docsearch-muted-color: #{$text-muted};
|
||||
--docsearch-muted-color: var(--bs-secondary-color);
|
||||
--docsearch-hit-shadow: none;
|
||||
|
||||
z-index: 2000; // Make sure to be over all components showcased in the documentation
|
||||
|
|
@ -139,3 +164,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Fix --docsearch-logo-color that doesn't do anything
|
||||
.DocSearch-Logo svg .cls-1,
|
||||
.DocSearch-Logo svg .cls-2 {
|
||||
fill: var(--docsearch-logo-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,17 @@
|
|||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.offcanvas-lg {
|
||||
border-right-color: var(--bs-border-color);
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links-heading {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
|
|
@ -35,16 +46,16 @@
|
|||
.bd-links-link {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1rem;
|
||||
color: rgba($black, .65);
|
||||
margin-left: 1.125rem;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: rgba($black, .85);
|
||||
color: var(--bs-emphasis-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
background-color: var(--bd-sidebar-link-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,49 @@
|
|||
:root {
|
||||
--base00: #fff;
|
||||
--base01: #f5f5f5;
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// --base00: #fff;
|
||||
// --base01: #f5f5f5;
|
||||
--base02: #c8c8fa;
|
||||
--base03: #565c64;
|
||||
--base04: #030303;
|
||||
--base04: #666;
|
||||
--base05: #333;
|
||||
--base06: #fff;
|
||||
--base07: #9a6700;
|
||||
--base08: #bc4c00;
|
||||
--base09: #087990;
|
||||
--base0A: #795da3;
|
||||
--base0B: #183691;
|
||||
--base0C: #183691;
|
||||
--base0D: #795da3;
|
||||
--base0E: #a71d5d;
|
||||
--base07: #{$teal-700}; // #9a6700
|
||||
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
|
||||
--base09: #{$cyan-700}; // #087990
|
||||
--base0A: #{$purple-500}; // #795da3
|
||||
--base0B: #{$blue-700}; // #183691
|
||||
--base0C: #{$blue-700}; // #183691
|
||||
--base0D: #{$purple-500}; // #795da3
|
||||
--base0E: #{$pink-600}; // #a71d5d
|
||||
--base0F: #333;
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
// --base00: #282c34;
|
||||
// --base01: #353b45;
|
||||
--base02: #3e4451;
|
||||
--base03: #868e96;
|
||||
--base04: #868e96;
|
||||
--base05: #abb2bf;
|
||||
--base06: #b6bdca;
|
||||
--base07: #{$orange-300}; // #d19a66
|
||||
--base08: #{$cyan-300};
|
||||
--base09: #{$orange-300}; // #d19a66
|
||||
--base0A: #{$yellow-200}; // #e5c07b
|
||||
--base0B: #{$teal-300}; // #98c379
|
||||
--base0C: #{$teal-300}; // #56b6c2
|
||||
--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); }
|
||||
.c { color: var(--base03); }
|
||||
.err { color: var(--base08); }
|
||||
|
|
@ -33,7 +60,7 @@
|
|||
.ge { font-style: italic; }
|
||||
.gh {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: var(--base0A);
|
||||
}
|
||||
.gi { color: var(--bs-success); }
|
||||
.gp {
|
||||
|
|
@ -101,14 +128,14 @@
|
|||
.language-bash,
|
||||
.language-sh {
|
||||
.line::before {
|
||||
color: #777;
|
||||
color: var(--base03);
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
color: var(--base0C);
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// stylelint-disable selector-max-type
|
||||
// stylelint-disable selector-max-type, selector-no-qualifying-type
|
||||
|
||||
.bd-toc {
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
|
@ -20,19 +20,24 @@
|
|||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .125rem 0 .125rem .75rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-left: .125rem solid transparent;
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--bd-toc-color);
|
||||
border-left-color: var(--bd-toc-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -52,15 +57,16 @@
|
|||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.4rem);
|
||||
color: var(--bs-body-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&[aria-expanded="true"] {
|
||||
color: var(--bd-violet);
|
||||
background-color: $white;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
|
|
@ -74,10 +80,10 @@
|
|||
.bd-toc-collapse {
|
||||
@include media-breakpoint-down(md) {
|
||||
nav {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
// 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;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$bd-accent: #ffe484;
|
||||
|
||||
$bd-gutter-x: 3rem;
|
||||
$bd-callout-variants: info, warning, danger !default;
|
||||
|
||||
:root {
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
--bd-purple: #{$bd-purple};
|
||||
--bd-violet: #{$bd-violet};
|
||||
--bd-accent: #{$bd-accent};
|
||||
|
|
@ -18,6 +16,20 @@ $bd-callout-variants: info, warning, danger !default;
|
|||
--bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
--bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
--bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
--docsearch-primary-color: var(--bd-violet);
|
||||
--docsearch-logo-color: var(--bd-violet);
|
||||
--bd-violet-bg: var(--bd-violet);
|
||||
--bd-toc-color: var(--bd-violet);
|
||||
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bd-callout-link: #{to-rgb($blue-600)};
|
||||
--bd-callout-code-color: #{$pink-600};
|
||||
--bd-pre-bg: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
--bd-violet: #{mix($bd-violet, $white, 75%)};
|
||||
--bd-violet-bg: #{$bd-violet};
|
||||
--bd-toc-color: var(--#{$prefix}emphasis-color);
|
||||
--bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
|
||||
--bd-callout-link: #{to-rgb($blue-300)};
|
||||
--bd-callout-code-color: #{$pink-300};
|
||||
--bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
@ -29,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 +52,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";
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: redirect
|
||||
sitemap_exclude: true
|
||||
redirect: "/docs/5.2/getting-started/introduction/"
|
||||
---
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Close button
|
||||
description: A generic close button for dismissing content like modals and alerts.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## White variant
|
||||
|
||||
Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
|
||||
|
||||
{{< example class="bg-dark" >}}
|
||||
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
### Variables
|
||||
|
||||
{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Progress
|
||||
description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
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.
|
||||
- We use the inner `.progress-bar` to indicate the progress so far.
|
||||
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
|
||||
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
|
||||
|
||||
Put that all together, and you have the following examples.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Labels
|
||||
|
||||
Add labels to your progress bars by placing text within the `.progress-bar`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Height
|
||||
|
||||
We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" style="height: 1px;">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Backgrounds
|
||||
|
||||
Use background utility classes to change the appearance of individual progress bars.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Multiple bars
|
||||
|
||||
Include multiple progress bars in a progress component if you need.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Striped
|
||||
|
||||
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Animated stripes
|
||||
|
||||
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
{{< scss-docs name="progress-css-vars" file="scss/_progress.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Keyframes
|
||||
|
||||
Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
|
||||
|
||||
{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Color
|
||||
description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
|
||||
group: customize
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Theme colors
|
||||
|
||||
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
|
||||
|
||||
<div class="row">
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /theme-colors.inline >}}
|
||||
</div>
|
||||
|
||||
All these colors are available as a Sass map, `$theme-colors`.
|
||||
|
||||
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
|
||||
|
||||
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
|
||||
|
||||
## All colors
|
||||
|
||||
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
|
||||
|
||||
Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
|
||||
|
||||
<div class="row font-monospace">
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range $color := $.Site.Data.colors }}
|
||||
{{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
|
||||
<strong class="d-block">${{ $color.name }}</strong>
|
||||
{{ $color.hex }}
|
||||
</div>
|
||||
{{ range (seq 100 100 900) }}
|
||||
<div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-gray-500">
|
||||
<strong class="d-block">$gray-500</strong>
|
||||
#adb5bd
|
||||
</div>
|
||||
{{- range $.Site.Data.grays }}
|
||||
<div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{< /theme-colors.inline >}}
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 bd-black text-white">
|
||||
<strong class="d-block">$black</strong>
|
||||
#000
|
||||
</div>
|
||||
<div class="p-3 mb-2 bd-white border">
|
||||
<strong class="d-block">$white</strong>
|
||||
#fff
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Notes on Sass
|
||||
|
||||
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
|
||||
|
||||
Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
|
||||
|
||||
Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
|
||||
|
||||
## Color Sass maps
|
||||
|
||||
Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
|
||||
|
||||
- `$colors` lists all our available base (`500`) colors
|
||||
- `$theme-colors` lists all semantically named theme colors (shown below)
|
||||
- `$grays` lists all tints and shades of gray
|
||||
|
||||
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
|
||||
|
||||
{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
|
||||
|
||||
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
|
||||
|
||||
### Example
|
||||
|
||||
Here's how you can use these in your Sass:
|
||||
|
||||
```scss
|
||||
.alpha { color: $purple; }
|
||||
.beta {
|
||||
color: $yellow-300;
|
||||
background-color: $indigo-900;
|
||||
}
|
||||
```
|
||||
|
||||
[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
|
||||
|
||||
## Generating utilities
|
||||
|
||||
{{< added-in "5.1.0" >}}
|
||||
|
||||
Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
|
||||
|
||||
1. To start, make sure you've imported our functions, variables, mixins, and utilities.
|
||||
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
|
||||
3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
|
||||
|
||||
Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"color": map-merge(
|
||||
map-get($utilities, "color"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "color"), "values"),
|
||||
(
|
||||
$all-colors
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
```
|
||||
|
||||
This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
---
|
||||
layout: single
|
||||
title: Examples
|
||||
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
aliases: "/examples/"
|
||||
---
|
||||
|
||||
{{< list-examples.inline >}}
|
||||
{{ range $entry := $.Site.Data.examples -}}
|
||||
<div class="row g-lg-5 mb-5">
|
||||
<div class="bd-content col-lg-3">
|
||||
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
||||
<p>{{ $entry.description }}</p>
|
||||
{{ if eq $entry.category "RTL" -}}
|
||||
<div class="bd-callout bd-callout-warning small">
|
||||
<p>
|
||||
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||
</p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
|
||||
</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-9">
|
||||
{{ range $i, $example := $entry.examples -}}
|
||||
{{- $len := len $entry.examples -}}
|
||||
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
||||
<div class="col-sm-6 col-md-4 mb-3">
|
||||
<a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
|
||||
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
|
||||
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
|
||||
alt=""
|
||||
width="480" height="300"
|
||||
loading="lazy">
|
||||
<h3 class="h5 mb-1">{{ $example.name }}</h3>
|
||||
</a>
|
||||
<p class="text-muted">{{ $example.description }}</p>
|
||||
</div>
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||
{{ end -}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /list-examples.inline >}}
|
||||
|
|
@ -1,253 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: قالب لوحة القيادة
|
||||
direction: rtl
|
||||
extra_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: "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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light 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>
|
||||
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted 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>
|
||||
الشهر الحالي
|
||||
</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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<h1 class="h2">لوحة القيادة</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
|
||||
|
||||
<h2>عنوان القسم</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>الجدول</td>
|
||||
<td>بيانات</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>تثري</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>مبهة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تصميم</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>بيانات</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
height: calc(100vh - 48px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
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);
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
height: calc(100vh - 48px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
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);
|
||||
}
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Dashboard Template
|
||||
extra_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: "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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light 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>
|
||||
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted 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
|
||||
</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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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">
|
||||
<h1 class="h2">Dashboard</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<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>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
|
||||
|
||||
<h2>Section title</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>text</td>
|
||||
<td>random</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>placeholder</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>irrelevant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>visual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>random</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,338 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Dropdowns
|
||||
extra_css:
|
||||
- "dropdowns.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>
|
||||
|
||||
<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"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="grid-fill" 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-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>
|
||||
|
||||
<symbol id="joystick" viewBox="0 0 16 16">
|
||||
<path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
|
||||
<path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="music-note-beamed" viewBox="0 0 16 16">
|
||||
<path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
|
||||
<path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
|
||||
<path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="files" viewBox="0 0 16 16">
|
||||
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="image-fill" viewBox="0 0 16 16">
|
||||
<path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="trash" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="question-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="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-left-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
|
||||
</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>
|
||||
</svg>
|
||||
|
||||
<div class="d-flex gap-5 justify-content-center">
|
||||
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px">
|
||||
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
<ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px">
|
||||
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex gap-5 justify-content-center">
|
||||
<div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
|
||||
<form class="p-2 mb-2 bg-light border-bottom">
|
||||
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
|
||||
</form>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-success rounded-circle p-1"></span>
|
||||
Action
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-primary rounded-circle p-1"></span>
|
||||
Another action
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-danger rounded-circle p-1"></span>
|
||||
Something else here
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-info rounded-circle p-1"></span>
|
||||
Separated link
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
|
||||
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
|
||||
<input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
|
||||
</form>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-success rounded-circle p-1"></span>
|
||||
Action
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-primary rounded-circle p-1"></span>
|
||||
Another action
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-danger rounded-circle p-1"></span>
|
||||
Something else here
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
|
||||
<span class="d-inline-block bg-info rounded-circle p-1"></span>
|
||||
Separated link
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex gap-5 justify-content-center">
|
||||
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
|
||||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option selected value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-muted">
|
||||
<div class="cal-weekday">Sun</div>
|
||||
<div class="cal-weekday">Mon</div>
|
||||
<div class="cal-weekday">Tue</div>
|
||||
<div class="cal-weekday">Wed</div>
|
||||
<div class="cal-weekday">Thu</div>
|
||||
<div class="cal-weekday">Fri</div>
|
||||
<div class="cal-weekday">Sat</div>
|
||||
</div>
|
||||
<div class="cal-days">
|
||||
<button class="btn cal-btn" disabled type="button">30</button>
|
||||
<button class="btn cal-btn" disabled type="button">31</button>
|
||||
|
||||
<button class="btn cal-btn" type="button">1</button>
|
||||
<button class="btn cal-btn" type="button">2</button>
|
||||
<button class="btn cal-btn" type="button">3</button>
|
||||
<button class="btn cal-btn" type="button">4</button>
|
||||
<button class="btn cal-btn" type="button">5</button>
|
||||
<button class="btn cal-btn" type="button">6</button>
|
||||
<button class="btn cal-btn" type="button">7</button>
|
||||
|
||||
<button class="btn cal-btn" type="button">8</button>
|
||||
<button class="btn cal-btn" type="button">9</button>
|
||||
<button class="btn cal-btn" type="button">10</button>
|
||||
<button class="btn cal-btn" type="button">11</button>
|
||||
<button class="btn cal-btn" type="button">12</button>
|
||||
<button class="btn cal-btn" type="button">13</button>
|
||||
<button class="btn cal-btn" type="button">14</button>
|
||||
|
||||
<button class="btn cal-btn" type="button">15</button>
|
||||
<button class="btn cal-btn" type="button">16</button>
|
||||
<button class="btn cal-btn" type="button">17</button>
|
||||
<button class="btn cal-btn" type="button">18</button>
|
||||
<button class="btn cal-btn" type="button">19</button>
|
||||
<button class="btn cal-btn" type="button">20</button>
|
||||
<button class="btn cal-btn" type="button">21</button>
|
||||
|
||||
<button class="btn cal-btn" type="button">22</button>
|
||||
<button class="btn cal-btn" type="button">23</button>
|
||||
<button class="btn cal-btn" type="button">24</button>
|
||||
<button class="btn cal-btn" type="button">25</button>
|
||||
<button class="btn cal-btn" type="button">26</button>
|
||||
<button class="btn cal-btn" type="button">27</button>
|
||||
<button class="btn cal-btn" type="button">28</button>
|
||||
|
||||
<button class="btn cal-btn" type="button">29</button>
|
||||
<button class="btn cal-btn" type="button">30</button>
|
||||
<button class="btn cal-btn" type="button">31</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
|
||||
<nav class="d-grid gap-2 col-8">
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Features</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="col-4">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.themed-grid-col {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .2);
|
||||
}
|
||||
|
||||
.themed-container {
|
||||
padding: .75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: rgba(0, 123, 255, .15);
|
||||
border: 1px solid rgba(0, 123, 255, .2);
|
||||
}
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: List groups
|
||||
extra_css:
|
||||
- "list-groups.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="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"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="alarm" viewBox="0 0 16 16">
|
||||
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
|
||||
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="list-check" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="list-group w-auto">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">List group item heading</h6>
|
||||
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">now</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Another title here</h6>
|
||||
<p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">3d</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Third heading</h6>
|
||||
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">1w</small>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex gap-5 justify-content-center">
|
||||
<div class="list-group mx-0 w-auto">
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
|
||||
<span>
|
||||
First checkbox
|
||||
<small class="d-block text-muted">With support text underneath to add more detail</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="">
|
||||
<span>
|
||||
Second checkbox
|
||||
<small class="d-block text-muted">Some other text goes here</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="">
|
||||
<span>
|
||||
Third checkbox
|
||||
<small class="d-block text-muted">And we end with another snippet of text</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="list-group mx-0 w-auto">
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
|
||||
<span>
|
||||
First radio
|
||||
<small class="d-block text-muted">With support text underneath to add more detail</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
|
||||
<span>
|
||||
Second radio
|
||||
<small class="d-block text-muted">Some other text goes here</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
|
||||
<span>
|
||||
Third radio
|
||||
<small class="d-block text-muted">And we end with another snippet of text</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="list-group w-auto">
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
|
||||
<span class="pt-1 form-checked-content">
|
||||
<strong>Finish sales report</strong>
|
||||
<small class="d-block text-muted">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
1:00–2:00pm
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
|
||||
<span class="pt-1 form-checked-content">
|
||||
<strong>Weekly All Hands</strong>
|
||||
<small class="d-block text-muted">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
2:00–2:30pm
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
|
||||
<span class="pt-1 form-checked-content">
|
||||
<strong>Out of office</strong>
|
||||
<small class="d-block text-muted">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
|
||||
Tomorrow
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3 bg-light">
|
||||
<input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
|
||||
<span class="pt-1 form-checked-content">
|
||||
<span contenteditable="true" class="w-100">Add new task...</span>
|
||||
<small class="d-block text-muted">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
|
||||
Choose list...
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
|
||||
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
|
||||
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
|
||||
First radio
|
||||
<span class="d-block small opacity-50">With support text underneath to add more detail</span>
|
||||
</label>
|
||||
|
||||
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
|
||||
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
|
||||
Second radio
|
||||
<span class="d-block small opacity-50">Some other text goes here</span>
|
||||
</label>
|
||||
|
||||
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
|
||||
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
|
||||
Third radio
|
||||
<span class="d-block small opacity-50">And we end with another snippet of text</span>
|
||||
</label>
|
||||
|
||||
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
|
||||
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
|
||||
Fourth disabled radio
|
||||
<span class="d-block small opacity-50">This option is disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto">
|
||||
<div class="position-relative">
|
||||
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
|
||||
<strong class="fw-semibold">First radio</strong>
|
||||
<span class="d-block small opacity-75">With support text underneath to add more detail</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
|
||||
<strong class="fw-semibold">Second radio</strong>
|
||||
<span class="d-block small opacity-75">Some other text goes here</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
|
||||
<strong class="fw-semibold">Third radio</strong>
|
||||
<span class="d-block small opacity-75">And we end with another snippet of text</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="position-relative">
|
||||
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
|
||||
<strong class="fw-semibold">Fourth disabled radio</strong>
|
||||
<span class="d-block small opacity-75">This option is disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
body {
|
||||
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Product example
|
||||
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>
|
||||
</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>
|
||||
|
||||
<main>
|
||||
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div class="text-bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="text-bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<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 mb-2" 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>
|
||||
<small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Starter Template
|
||||
extra_css:
|
||||
- "starter-template.css"
|
||||
---
|
||||
|
||||
<div class="col-lg-8 mx-auto p-4 py-md-5">
|
||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-dark 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">Starter template</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>Get started with Bootstrap</h1>
|
||||
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
||||
|
||||
<div class="mb-5">
|
||||
<a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
|
||||
</div>
|
||||
|
||||
<hr class="col-3 col-md-2 mb-5">
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6">
|
||||
<h2>Starter projects</h2>
|
||||
<p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
|
||||
<ul class="icon-list ps-0">
|
||||
<li class="d-flex align-items-start mb-1"><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
|
||||
<li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h2>Guides</h2>
|
||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
||||
<ul class="icon-list ps-0">
|
||||
<li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
|
||||
<li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
|
||||
<li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
|
||||
<li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/vite" >}}">Bootstrap Vite guide</a></li>
|
||||
<li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-5 my-5 text-muted border-top">
|
||||
Created by the Bootstrap team · © {{< year >}}
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.icon-list li::before {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-right: .5rem;
|
||||
content: "";
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Colored links
|
||||
description: Colored links with hover states
|
||||
group: helpers
|
||||
toc: false
|
||||
---
|
||||
|
||||
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
|
||||
|
||||
{{< example >}}
|
||||
{{< colored-links.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
|
||||
{{- end -}}
|
||||
{{< /colored-links.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
|
||||
{{< /callout >}}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Overflow
|
||||
description: Use these shorthand utilities for quickly configuring how content overflows an element.
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
|
||||
</div>
|
||||
<div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="overflow-auto">...</div>
|
||||
<div class="overflow-hidden">...</div>
|
||||
<div class="overflow-visible">...</div>
|
||||
<div class="overflow-scroll">...</div>
|
||||
```
|
||||
|
||||
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
|
||||
|
||||
## Sass
|
||||
|
||||
### Utilities API
|
||||
|
||||
Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
|
||||
|
||||
{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Sizing
|
||||
description: Easily make an element as wide or as tall with our width and height utilities.
|
||||
group: utilities
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Relative to the parent
|
||||
|
||||
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
|
||||
|
||||
{{< example >}}
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
|
||||
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
|
||||
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
|
||||
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
|
||||
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,.1);">
|
||||
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Relative to the viewport
|
||||
|
||||
You can also use utilities to set the width and height relative to the viewport.
|
||||
|
||||
```html
|
||||
<div class="min-vw-100">Min-width 100vw</div>
|
||||
<div class="min-vh-100">Min-height 100vh</div>
|
||||
<div class="vw-100">Width 100vw</div>
|
||||
<div class="vh-100">Height 100vh</div>
|
||||
```
|
||||
|
||||
## Sass
|
||||
|
||||
### Utilities API
|
||||
|
||||
Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
|
||||
|
||||
{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
|
||||
5
site/content/docs/5.3/_index.html
Normal file
5
site/content/docs/5.3/_index.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: redirect
|
||||
sitemap_exclude: true
|
||||
redirect: "/docs/5.3/getting-started/introduction/"
|
||||
---
|
||||
|
|
@ -10,15 +10,15 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
|
|||
|
||||
## Logo
|
||||
|
||||
When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
|
||||
When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects.
|
||||
|
||||
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
|
||||
<div class="bd-brand-item px-2 py-5 mb-3 border rounded-3">
|
||||
<img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
|
||||
</div>
|
||||
|
||||
Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
|
||||
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-3 overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100 px-2 py-5">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
|
||||
</div>
|
||||
|
|
@ -29,19 +29,15 @@ Our logo mark is also available in black and white. All rules for our primary lo
|
|||
|
||||
## Name
|
||||
|
||||
Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
|
||||
Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
|
||||
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100 px-2 py-5">
|
||||
<div class="h3">Bootstrap</div>
|
||||
<strong class="text-success">Correct</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="h3 text-muted">BootStrap</div>
|
||||
<strong class="text-danger">Incorrect</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="h3 text-muted">Twitter Bootstrap</div>
|
||||
<div class="bd-brand-item w-100 px-2 py-5">
|
||||
<div class="h3 text-body-secondary">BootStrap</div>
|
||||
<strong class="text-danger">Incorrect</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@ description: Commonly asked questions about Bootstrap's open source license.
|
|||
group: about
|
||||
---
|
||||
|
||||
Bootstrap is released under the MIT license and is copyright {{< year >}} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
|
||||
Bootstrap is released under the MIT license and is copyright {{< year >}}. Boiled down to smaller chunks, it can be described with the following conditions.
|
||||
|
||||
## It requires you to:
|
||||
|
||||
|
|
@ -23,8 +23,8 @@ Bootstrap is released under the MIT license and is copyright {{< year >}} Twitte
|
|||
- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
|
||||
- Hold the creators or copyright holders of Bootstrap liable
|
||||
- Redistribute any piece of Bootstrap without proper attribution
|
||||
- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
|
||||
- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
|
||||
- Use any marks owned by Bootstrap in any way that might state or imply that Bootstrap endorses your distribution
|
||||
- Use any marks owned by Bootstrap in any way that might state or imply that you created the Bootstrap software in question
|
||||
|
||||
## It does not require you to:
|
||||
|
||||
|
|
@ -5,7 +5,7 @@ description: Learn more about the team maintaining Bootstrap, how and why the pr
|
|||
group: about
|
||||
aliases:
|
||||
- "/about/"
|
||||
- "/docs/5.2/about/"
|
||||
- "/docs/5.3/about/"
|
||||
---
|
||||
|
||||
## Team
|
||||
|
|
@ -5,7 +5,7 @@ description: Build vertically collapsing accordions in combination with our Coll
|
|||
group: components
|
||||
aliases:
|
||||
- "/components/"
|
||||
- "/docs/5.2/components/"
|
||||
- "/docs/5.3/components/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ toc: true
|
|||
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`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
|
@ -24,36 +24,36 @@ Click the accordions below to expand/collapse the accordion content.
|
|||
{{< example >}}
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
|
|
@ -64,37 +64,37 @@ Click the accordions below to expand/collapse the accordion content.
|
|||
|
||||
### Flush
|
||||
|
||||
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
|
||||
Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example class="bg-body-secondary" >}}
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingTwo">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingThree">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,36 +108,36 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
|
|||
{{< example >}}
|
||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
|
|
@ -10,6 +10,10 @@ 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 [a Sass loop](#sass-loops).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
{{< alerts.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
|
|
@ -20,7 +24,7 @@ Alerts are available for any length of text, as well as an optional close button
|
|||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Live example
|
||||
|
|
@ -34,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
|
||||
|
||||
|
|
@ -175,13 +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.
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
|
|||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Pill badges
|
||||
|
|
@ -54,11 +54,8 @@ $breadcrumb-divider: quote(">");
|
|||
|
||||
It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
|
||||
|
||||
|
||||
{{< callout info >}}
|
||||
### Using embedded SVG
|
||||
|
||||
Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
|
||||
**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
|
|
@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Ensure correct `role` and provide a label
|
||||
|
||||
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
|
||||
|
||||
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
|
||||
{{< callout info >}}
|
||||
Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
|
||||
{{< /callout >}}
|
||||
|
||||
These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}).
|
||||
|
|
@ -145,21 +141,21 @@ Instead of applying button sizing classes to every button in a group, just add `
|
|||
|
||||
{{< example >}}
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||
<button type="button" class="btn btn-outline-primary">Left</button>
|
||||
<button type="button" class="btn btn-outline-primary">Middle</button>
|
||||
<button type="button" class="btn btn-outline-primary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||
<button type="button" class="btn btn-outline-primary">Left</button>
|
||||
<button type="button" class="btn btn-outline-primary">Middle</button>
|
||||
<button type="button" class="btn btn-outline-primary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-outline-dark">Left</button>
|
||||
<button type="button" class="btn btn-outline-dark">Middle</button>
|
||||
<button type="button" class="btn btn-outline-dark">Right</button>
|
||||
<button type="button" class="btn btn-outline-primary">Left</button>
|
||||
<button type="button" class="btn btn-outline-primary">Middle</button>
|
||||
<button type="button" class="btn btn-outline-primary">Right</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -190,12 +186,12 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
|||
|
||||
{{< example >}}
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-dark">Button</button>
|
||||
<button type="button" class="btn btn-dark">Button</button>
|
||||
<button type="button" class="btn btn-dark">Button</button>
|
||||
<button type="button" class="btn btn-dark">Button</button>
|
||||
<button type="button" class="btn btn-dark">Button</button>
|
||||
<button type="button" class="btn btn-dark">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>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -6,9 +6,23 @@ group: components
|
|||
toc: true
|
||||
---
|
||||
|
||||
## Examples
|
||||
## Base class
|
||||
|
||||
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
|
||||
Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn">Base class</button>
|
||||
{{< /example >}}
|
||||
|
||||
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 >}}
|
||||
|
||||
## Variants
|
||||
|
||||
Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
|
||||
|
||||
{{< example >}}
|
||||
{{< buttons.inline >}}
|
||||
|
|
@ -21,7 +35,7 @@ Bootstrap includes several predefined button styles, each serving its own semant
|
|||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Disable text wrapping
|
||||
|
|
@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
|
|||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
|
|
@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
|||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
<div class="card-footer text-body-secondary">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -207,7 +207,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
|||
|
||||
{{< example >}}
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
|
|
@ -233,7 +233,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
|||
Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing" >}}) to quickly set a card's width.
|
||||
|
||||
{{< example >}}
|
||||
<div class="card w-75">
|
||||
<div class="card w-75 mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
|
|
@ -269,7 +269,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
|||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card mb-3" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
|
|
@ -277,7 +277,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center" style="width: 18rem;">
|
||||
<div class="card text-center mb-3" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
|
|
@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
|
||||
</div>
|
||||
|
|
@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -436,7 +436,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
|
|||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Border
|
||||
|
|
@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
|
@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
|
@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
|
|||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
|
@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
|
|||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
|
@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
|
|||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
|
|||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
|
|||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
|
|||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -8,28 +8,24 @@ toc: true
|
|||
|
||||
## How it works
|
||||
|
||||
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
|
||||
- The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
|
||||
|
||||
In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
|
||||
- For performance reasons, **carousels must be manually initialized** using the [carousel constructor method](#methods). Without initialization, some of the event listeners (specifically, the events needed touch/swipe support) will not be registered until a user has explicitly activated a control or indicator.
|
||||
|
||||
The only exception are [autoplaying carousels](#autoplaying-carousels) with the `data-bs-ride="carousel"` attribute as these are initialized automatically on page load. If you're using autoplaying carousels with the data attribute, **don't explicitly initialize the same carousels with the constructor method.**
|
||||
|
||||
- Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
|
||||
## Basic examples
|
||||
|
||||
## Example
|
||||
|
||||
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
|
||||
|
||||
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
|
||||
|
||||
### Slides only
|
||||
|
||||
Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
|
||||
Here is a basic example of a carousel with three slides. Note the previous/next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div id="carouselExample" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
|
|
@ -41,43 +37,27 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
|
|||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### With controls
|
||||
|
||||
Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### With indicators
|
||||
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
|
||||
|
||||
You can also add the indicators to the carousel, alongside the controls, too.
|
||||
**You must add the `.active` class to one of the slides**, otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
|
||||
|
||||
### Indicators
|
||||
|
||||
You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
|
||||
<div id="carouselExampleIndicators" class="carousel slide">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
|
|
@ -105,12 +85,12 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### With captions
|
||||
### Captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
|
||||
<div id="carouselExampleCaptions" class="carousel slide">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
|
|
@ -155,7 +135,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
|||
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add `.bg-body` or some custom CSS to the `.carousel-item`s for proper crossfading.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
|
|
@ -178,6 +158,66 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Autoplaying carousels
|
||||
|
||||
You can make your carousels autoplay on page load by setting the `ride` option to `carousel`. Autoplaying carousels automatically pause while hovered with the mouse. This behavior can be controlled with the `pause` option. In browsers that support the [Page Visibility API](https://www.w3.org/TR/page-visibility/), the carousel will stop cycling when the webpage is not visible to the user (such as when the browser tab is inactive, or when the browser window is minimized).
|
||||
|
||||
{{< callout info >}}
|
||||
For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
|
||||
|
||||
See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
When the `ride` option is set to `true`, rather than `carousel`, the carousel won't automatically start to cycle on page load. Instead, it will only start after the first user interaction.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Individual `.carousel-item` interval
|
||||
|
||||
Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
|
||||
|
|
@ -206,9 +246,29 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Disable touch swiping
|
||||
### Autoplaying carousels without controls
|
||||
|
||||
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute so it doesn't autoplay.
|
||||
Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Disable touch swiping
|
||||
|
||||
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the `touch` option to `false`.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
|
||||
|
|
@ -236,10 +296,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
|
|||
|
||||
## Dark variant
|
||||
|
||||
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
|
||||
{{< deprecated-in "5.3.0" >}}
|
||||
|
||||
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
|
||||
|
||||
{{< callout-deprecated-dark-variants "carousel" >}}
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
|
||||
<div id="carouselExampleDark" class="carousel carousel-dark slide">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
|
|
@ -283,9 +347,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
|
|||
|
||||
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`).
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
### Sass variables
|
||||
|
||||
Variables for all carousels:
|
||||
|
||||
|
|
@ -301,8 +365,6 @@ Variables for the [dark carousel](#dark-variant):
|
|||
|
||||
Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`.
|
||||
|
||||
The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
|
||||
|
||||
### Via JavaScript
|
||||
|
||||
Call carousel manually with:
|
||||
|
|
@ -331,28 +393,29 @@ const carousel = new bootstrap.Carousel('#myCarousel')
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
|
||||
You can create a carousel instance with the carousel constructor, and pass on any additional options. For example, to manually initialize an autoplaying carousel (assuming you're not using the `data-bs-ride="carousel"` attribute in the markup itself) with a specific interval and with touch support disabled, you can use:
|
||||
|
||||
```js
|
||||
const myCarouselElement = document.querySelector('#myCarousel')
|
||||
|
||||
const carousel = new bootstrap.Carousel(myCarouselElement, {
|
||||
interval: 2000,
|
||||
wrap: false
|
||||
touch: false
|
||||
})
|
||||
```
|
||||
|
||||
{{< bs-table >}}
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `cycle` | Cycles through the carousel items from left to right. |
|
||||
| `cycle` | Starts cycling through the carousel items from left to right. |
|
||||
| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
|
||||
| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`. |
|
||||
| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`. |
|
||||
| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element. You can use it like this: `bootstrap.Carousel.getInstance(element)`. |
|
||||
| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element, or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`. |
|
||||
| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||
| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown**. |
|
||||
| `nextWhenVisible` | Don't cycle carousel to next when the page, the carousel, or the carousel's parent aren't visible. **Returns to the caller before the target item has been shown**. |
|
||||
| `pause` | Stops the carousel from cycling through items. |
|
||||
| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||
| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
|
||||
54
site/content/docs/5.3/components/close-button.md
Normal file
54
site/content/docs/5.3/components/close-button.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Close button
|
||||
description: A generic close button for dismissing content like modals and alerts.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## Dark variant
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
|
||||
|
||||
{{< example class="bg-dark" >}}
|
||||
<div data-bs-theme="dark">
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
|
||||
|
|
@ -11,7 +11,7 @@ toc: true
|
|||
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
|
@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes:
|
|||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.show` shows content
|
||||
|
||||
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 a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
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>
|
||||
|
|
@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil
|
|||
|
||||
## Horizontal
|
||||
|
||||
The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
|
||||
The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
|
||||
|
||||
{{< callout info >}}
|
||||
Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
|
||||
|
|
@ -63,10 +63,10 @@ Please note that while the example below has a `min-height` set to avoid excessi
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple targets
|
||||
## Multiple toggles and targets
|
||||
|
||||
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute.
|
||||
Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute
|
||||
A `<button>` or `<a>` element can show and hide multiple elements by referencing them with a selector in its `data-bs-target` or `href` attribute.
|
||||
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>
|
||||
|
|
@ -100,9 +100,9 @@ If your control element is targeting a single collapsible element – i.e. the `
|
|||
|
||||
Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript.
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Co
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a collapsible element. Accepts an optional options `object`.
|
||||
|
|
@ -18,15 +18,15 @@ The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessib
|
|||
|
||||
Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
|
||||
|
||||
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>ESC</kbd> key.
|
||||
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual `.dropdown-item` elements using the cursor keys and close the menu with the <kbd>Esc</kbd> key.
|
||||
|
||||
## Examples
|
||||
|
||||
Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
|
||||
Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Ideally, you should use a `<button>` element as the dropdown trigger, but the plugin will work with `<a>` elements as well. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported.
|
||||
|
||||
### Single button
|
||||
|
||||
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
|
||||
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with `<button>` elements:
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown">
|
||||
|
|
@ -41,7 +41,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
And with `<a>` elements:
|
||||
While `<button>` is the recommended control for a dropdown toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control's purpose to assistive technologies such as screen readers.
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown">
|
||||
|
|
@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
|||
|
||||
## Dark dropdowns
|
||||
|
||||
{{< deprecated-in "5.3.0" >}}
|
||||
|
||||
Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
|
||||
|
||||
{{< callout-deprecated-dark-variants "dropdown-menu" >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
|
|
@ -378,9 +382,9 @@ And putting it to use in a navbar:
|
|||
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
|
|
@ -396,8 +400,7 @@ And putting it to use in a navbar:
|
|||
## Directions
|
||||
|
||||
{{< callout info >}}
|
||||
#### RTL
|
||||
Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side.
|
||||
**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
|
||||
{{< /callout >}}
|
||||
|
||||
### Centered
|
||||
|
|
@ -838,7 +841,7 @@ Separate groups of related menu items with a divider.
|
|||
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
|
||||
<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
|
|
@ -956,7 +959,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
|
|||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
|
||||
Clickable outside
|
||||
Clickable inside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
|
|
@ -967,7 +970,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
|
|||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
||||
Clickable inside
|
||||
Clickable outside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
|
|
@ -998,6 +1001,12 @@ As part of Bootstrap's evolving CSS variables approach, dropdowns now use local
|
|||
|
||||
{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
|
||||
|
||||
{{< callout info >}}
|
||||
Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
|
||||
|
||||
- `--bs-dropdown-item-border-radius`
|
||||
{{< /callout >}}
|
||||
|
||||
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
|
||||
|
||||
{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
|
||||
|
|
@ -1016,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`.
|
||||
|
||||
|
|
@ -1047,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
|
|||
|
||||
### Via JavaScript
|
||||
|
||||
{{< callout warning >}}
|
||||
Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api.
|
||||
{{< /callout >}}
|
||||
|
||||
Call the dropdowns via JavaScript:
|
||||
|
||||
```js
|
||||
|
|
@ -1054,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
|
|||
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
##### `data-bs-toggle="dropdown"` still required
|
||||
|
||||
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
|
||||
{{< /callout >}}
|
||||
|
||||
### Options
|
||||
|
||||
{{< markdown >}}
|
||||
|
|
@ -1069,7 +1076,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
|
|||
{{< bs-table "table" >}}
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown: <ul class="my-2"><li>`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.</li><li>`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li><li>`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> <li>`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.</li></ul> Note: the dropdown can always be closed with the <kbd>ESC</kbd> key. |
|
||||
| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown: <ul class="my-2"><li>`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.</li><li>`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>Esc</kbd> key)</li><li>`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> <li>`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.</li></ul> Note: the dropdown can always be closed with the <kbd>Esc</kbd> key. |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (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). |
|
||||
| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
|
||||
| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
|
|
@ -154,7 +154,11 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
|
|||
{{< /list-group.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Contextual classes
|
||||
## 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 [a Sass loop](#sass-loops).
|
||||
{{< /callout >}}
|
||||
|
||||
Use contextual classes to style list items with a stateful background and color.
|
||||
|
||||
|
|
@ -169,7 +173,9 @@ Use contextual classes to style list items with a stateful background and color.
|
|||
</ul>
|
||||
{{< /example >}}
|
||||
|
||||
Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
|
||||
### For links and buttons
|
||||
|
||||
Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
|
||||
|
||||
{{< example >}}
|
||||
<div class="list-group">
|
||||
|
|
@ -183,7 +189,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
|
|||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## With badges
|
||||
|
|
@ -224,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
|
|||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
<small class="text-body-secondary">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
<small class="text-body-secondary">And some muted small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
<small class="text-body-secondary">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
<small class="text-body-secondary">And some muted small print.</small>
|
||||
</a>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -311,15 +317,17 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
|
|||
|
||||
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
### Sass mixins
|
||||
|
||||
Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
|
||||
{{< 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" >}}
|
||||
|
||||
### Loop
|
||||
### Sass loops
|
||||
|
||||
Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
|
||||
Loop that generates the modifier classes with an overriding of CSS variables.
|
||||
|
||||
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
|
||||
|
||||
|
|
@ -443,7 +451,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a tab element.
|
||||
|
|
@ -27,7 +27,7 @@ myModal.addEventListener('shown.bs.modal', () => {
|
|||
```
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Keep reading for demos and usage guidelines.
|
||||
|
|
@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines.
|
|||
|
||||
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
|
||||
|
||||
<div class="bd-example bg-light">
|
||||
<div class="bd-example bg-body-tertiary">
|
||||
<div class="modal position-static d-block" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
|
@ -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>
|
||||
|
|
@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<h2 class="fs-5">Popover in a modal</h2>
|
||||
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
|
||||
<p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</button> triggers a popover on click.</p>
|
||||
<hr>
|
||||
<h2 class="fs-5">Tooltips in a modal</h2>
|
||||
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
|
||||
|
|
@ -351,7 +351,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|||
```html
|
||||
<div class="modal-body">
|
||||
<h2 class="fs-5">Popover in a modal</h2>
|
||||
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
|
||||
<p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
|
||||
<hr>
|
||||
<h2 class="fs-5">Tooltips in a modal</h2>
|
||||
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -537,7 +520,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
|
||||
{{< /example >}}
|
||||
|
||||
### Change animation
|
||||
|
|
@ -576,7 +559,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
|
|||
| Size | Class | Modal max-width
|
||||
| --- | --- | --- |
|
||||
| Small | `.modal-sm` | `300px` |
|
||||
| Default | <span class="text-muted">None</span> | `500px` |
|
||||
| Default | <span class="text-body-secondary">None</span> | `500px` |
|
||||
| Large | `.modal-lg` | `800px` |
|
||||
| Extra large | `.modal-xl` | `1140px` |
|
||||
{{< /bs-table >}}
|
||||
|
|
@ -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`.
|
||||
|
||||
|
|
@ -841,7 +824,7 @@ const myModalAlternative = new bootstrap.Modal('#myModal', options)
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
#### Passing options
|
||||
|
|
@ -858,8 +841,8 @@ const myModal = new bootstrap.Modal('#myModal', {
|
|||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
|
||||
| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
|
||||
| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
|
||||
| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. |
|
||||
| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
|
||||
| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
|
||||
| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
|
||||
| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. |
|
||||
|
|
@ -19,7 +19,7 @@ Here's what you need to know before getting started with the navbar:
|
|||
- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Supported content
|
||||
|
|
@ -37,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
|
|||
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
|
||||
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
|
||||
|
||||
### Brand
|
||||
|
||||
|
|
@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.
|
|||
|
||||
{{< example >}}
|
||||
<!-- As a link -->
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</div>
|
||||
|
|
@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class.
|
|||
You can replace the text within the `.navbar-brand` with an `<img>`.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
|
||||
|
|
@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
|
|||
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
|
||||
|
|
@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
|
|||
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
|
|||
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
|
|||
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
|
|||
Place various form controls and components within a navbar:
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
|
|
@ -240,7 +240,7 @@ Place various form controls and components within a navbar:
|
|||
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand">Navbar</a>
|
||||
<form class="d-flex" role="search">
|
||||
|
|
@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
|
|||
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<form class="container-fluid">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
|
|
@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
|
|||
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<form class="container-fluid justify-content-start">
|
||||
<button class="btn btn-outline-success me-2" type="button">Main button</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
|
||||
|
|
@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
|
|||
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
|
|
@ -292,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
|
|||
Mix and match with other components and utilities as needed.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar w/ text</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -321,13 +321,17 @@ Mix and match with other components and utilities as needed.
|
|||
## Color schemes
|
||||
|
||||
{{< callout warning >}}
|
||||
**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`.
|
||||
**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
|
||||
|
||||
---
|
||||
|
||||
**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 `.navbar-dark` 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 navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" 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">
|
||||
|
|
@ -356,7 +360,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -385,7 +389,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -416,11 +420,11 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
</div>
|
||||
|
||||
```html
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<nav class="navbar bg-primary" data-bs-theme="dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
|
|
@ -435,7 +439,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
|
||||
{{< example >}}
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
|
|
@ -446,7 +450,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
Use any of the responsive containers to change how wide the content in your navbar is presented.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-md">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
|
|
@ -460,7 +464,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
|
|||
Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light">
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Default</a>
|
||||
</div>
|
||||
|
|
@ -468,7 +472,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
|
|||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar fixed-top bg-light">
|
||||
<nav class="navbar fixed-top bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Fixed top</a>
|
||||
</div>
|
||||
|
|
@ -476,7 +480,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
|
|||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar fixed-bottom bg-light">
|
||||
<nav class="navbar fixed-bottom bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Fixed bottom</a>
|
||||
</div>
|
||||
|
|
@ -484,7 +488,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
|
|||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar sticky-top bg-light">
|
||||
<nav class="navbar sticky-top bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Sticky top</a>
|
||||
</div>
|
||||
|
|
@ -492,7 +496,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
|
|||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar sticky-bottom bg-light">
|
||||
<nav class="navbar sticky-bottom bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Sticky bottom</a>
|
||||
</div>
|
||||
|
|
@ -508,7 +512,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
|
|||
Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar scroll</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -559,7 +563,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
|
|||
With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -589,7 +593,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
|
|||
With a brand name shown on the left and toggler on the right:
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -619,7 +623,7 @@ With a brand name shown on the left and toggler on the right:
|
|||
With a toggler on the left and brand name on the right:
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
|
@ -651,10 +655,10 @@ 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>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
<h5 class="text-body-emphasis h4">Collapsed content</h5>
|
||||
<span class="text-body-secondary">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
|
|
@ -675,10 +679,10 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the
|
|||
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar bg-light fixed-top">
|
||||
<nav class="navbar bg-body-tertiary fixed-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Offcanvas navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
|
||||
|
|
@ -721,9 +725,9 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
|
|||
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
|
||||
|
||||
```html
|
||||
<nav class="navbar navbar-expand-lg bg-light fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
|
||||
<a class="navbar-brand" href="#">Offcanvas navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
|
||||
|
|
@ -738,7 +742,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
|
|||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Offcanvas dark navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
|
||||
|
|
@ -806,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`.
|
||||
|
||||
|
|
@ -3,7 +3,7 @@ layout: docs
|
|||
title: Navs and tabs
|
||||
description: Documentation and examples for how to use Bootstrap's included navigation components.
|
||||
group: components
|
||||
aliases: "/docs/5.2/components/navs/"
|
||||
aliases: "/docs/5.3/components/navs/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
|
@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead:
|
|||
</ul>
|
||||
{{< /example >}}
|
||||
|
||||
### Underline
|
||||
|
||||
Take that same HTML, but use `.nav-underline` instead:
|
||||
|
||||
{{< example >}}
|
||||
<ul class="nav nav-underline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">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.
|
||||
|
|
@ -324,6 +345,12 @@ On the `.nav-pills` modifier class:
|
|||
|
||||
{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
On the `.nav-underline` modifier class:
|
||||
|
||||
{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
|
||||
|
|
@ -622,7 +649,7 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a tab element.
|
||||
|
|
@ -11,14 +11,14 @@ toc: true
|
|||
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
|
||||
|
||||
- Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
|
||||
- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
|
||||
- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
|
||||
- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
|
||||
- Similar to modals, only one offcanvas can be shown at a time.
|
||||
|
||||
**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
|
|
@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
|
|||
|
||||
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
|
||||
|
|
@ -139,11 +139,15 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
|
|||
|
||||
## Dark offcanvas
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
{{< deprecated-in "5.3.0" >}} {{< added-in "5.2.0" >}}
|
||||
|
||||
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`.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
{{< 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.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
|
||||
|
|
@ -310,7 +314,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as an offcanvas element. Accepts an optional options `object`.
|
||||
|
|
@ -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"></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"></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"></a>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
|
|
@ -126,7 +126,7 @@ The size of `.placeholder`s are based on the typographic style of the parent ele
|
|||
|
||||
### Animation
|
||||
|
||||
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being _actively_ loaded.
|
||||
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being *actively* loaded.
|
||||
|
||||
{{< example >}}
|
||||
<p class="placeholder-glow">
|
||||
|
|
@ -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" >}}
|
||||
|
|
@ -22,11 +22,11 @@ Things to know when using the popover plugin:
|
|||
- Popovers can be triggered thanks to an element inside a shadow DOM.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-sanitizer.md" >}}
|
||||
{{< partial "callouts/info-sanitizer.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Keep reading to see how popovers work with some examples.
|
||||
|
|
@ -47,7 +47,7 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra
|
|||
We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`.
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
|
||||
{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example stackblitz_add_js="true" >}}
|
||||
|
|
@ -111,12 +111,10 @@ You can customize the appearance of popovers using [CSS variables](#variables).
|
|||
|
||||
### Dismiss on next click
|
||||
|
||||
Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
|
||||
Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element.
|
||||
|
||||
{{< callout danger >}}
|
||||
#### Specific markup required for dismiss-on-next-click
|
||||
|
||||
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
|
||||
**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example stackblitz_add_js="true" >}}
|
||||
|
|
@ -165,13 +163,11 @@ const popover = new bootstrap.Popover(exampleEl, options)
|
|||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
### Making popovers work for keyboard and assistive technology users
|
||||
**Keep popovers 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 popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users.
|
||||
|
||||
To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.
|
||||
Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to be announced to assistive technology users as one long, uninterrupted stream.
|
||||
|
||||
While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream.
|
||||
|
||||
Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.
|
||||
Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead.
|
||||
{{< /callout >}}
|
||||
|
||||
### Options
|
||||
|
|
@ -191,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). |
|
||||
|
|
@ -203,7 +199,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, 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. |
|
||||
| `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 >}}
|
||||
|
||||
|
|
@ -228,7 +224,7 @@ const popover = new bootstrap.Popover(element, {
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
|
@ -238,7 +234,7 @@ const popover = new bootstrap.Popover(element, {
|
|||
| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
|
||||
| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
|
||||
| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
|
||||
| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. |
|
||||
| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. |
|
||||
| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
|
||||
| `setContent` | Gives a way to change the popover's content after its initialization. |
|
||||
| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
|
||||
202
site/content/docs/5.3/components/progress.md
Normal file
202
site/content/docs/5.3/components/progress.md
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Progress
|
||||
description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< callout info >}}
|
||||
**New markup in v5.3.0 —** We've deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what's changed in our migration guide.]({{< docsref "/migration#improved-markup-for-progress-bars" >}})
|
||||
{{< /callout >}}
|
||||
|
||||
## How it works
|
||||
|
||||
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="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.
|
||||
|
||||
Put that all together, and you have the following examples.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="progress" 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="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 50%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 75%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 100%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Bar sizing
|
||||
|
||||
### Width
|
||||
|
||||
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring the width of the `.progress-bar`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar w-75"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Height
|
||||
|
||||
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-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">
|
||||
<div class="progress-bar" style="width: 25%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Labels
|
||||
|
||||
Add labels to your progress bars by placing text within the `.progress-bar`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 25%">25%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Backgrounds
|
||||
|
||||
Use background utility classes to change the appearance of individual progress bars.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success" style="width: 25%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info" style="width: 50%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-warning" style="width: 75%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger" style="width: 100%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success" style="width: 25%">25%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger" style="width: 100%">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple bars
|
||||
|
||||
You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress-stacked">
|
||||
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
|
||||
<div class="progress-bar bg-success"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
|
||||
<div class="progress-bar bg-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Striped
|
||||
|
||||
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Animated stripes
|
||||
|
||||
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
{{< scss-docs name="progress-css-vars" file="scss/_progress.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Keyframes
|
||||
|
||||
Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
|
||||
|
||||
{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
|
||||
|
|
@ -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>`
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
|
|||
Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3 rounded-2">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
|
|
@ -45,7 +45,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
|
||||
<div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
|
@ -60,7 +60,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
|||
</div>
|
||||
|
||||
```html
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
|
|
@ -80,7 +80,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
|
@ -13,7 +13,7 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The
|
|||
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Border spinner
|
||||
|
|
@ -205,9 +205,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
|
|||
|
||||
|
||||
[color]: {{< docsref "/utilities/colors" >}}
|
||||
[display]: {{< docsref "/utilities/display" >}}
|
||||
[flex]: {{< docsref "/utilities/flex" >}}
|
||||
[float]: {{< docsref "/utilities/float" >}}
|
||||
[margin]: {{< docsref "/utilities/spacing" >}}
|
||||
[sizing]: {{< docsref "/utilities/sizing" >}}
|
||||
[text]: {{< docsref "/utilities/text" >}}
|
||||
|
|
@ -16,7 +16,7 @@ Things to know when using the toast plugin:
|
|||
- Toasts will automatically hide if you do not specify `autohide: false`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
|
|
@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
|
|||
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
|
|
@ -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) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
```
|
||||
{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
|
||||
|
||||
### Translucent
|
||||
|
||||
|
|
@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them.
|
|||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">11 mins ago</small>
|
||||
<small class="text-body-secondary">11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
|
@ -121,13 +111,13 @@ Toasts are slightly translucent to blend in with what's below them.
|
|||
|
||||
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast-container position-static">
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<small class="text-body-secondary">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
|
@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
|
|||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<small class="text-body-secondary">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
|
@ -153,7 +143,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
|
|||
|
||||
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
|
|
@ -166,7 +156,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
|
|||
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
|
|
@ -182,7 +172,7 @@ Alternatively, you can also add additional controls and components to toasts.
|
|||
|
||||
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
|
|
@ -215,7 +205,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
|||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
|
||||
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
|
||||
<div class="toast-container p-3" id="toastPlacement">
|
||||
<div class="toast">
|
||||
<div class="toast-header">
|
||||
|
|
@ -233,7 +223,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
|||
|
||||
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
|
||||
|
||||
{{< example class="bg-dark bd-example-toasts p-0" >}}
|
||||
{{< example class="bd-example-toasts p-0" >}}
|
||||
<div aria-live="polite" aria-atomic="true" class="position-relative">
|
||||
<!-- Position it: -->
|
||||
<!-- - `.toast-container` for spacing between toasts -->
|
||||
|
|
@ -246,7 +236,7 @@ For systems that generate more notifications, consider using a wrapping element
|
|||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">just now</small>
|
||||
<small class="text-body-secondary">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
|
@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element
|
|||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
<strong class="me-auto">Bootstrap</strong>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<small class="text-body-secondary">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
|
@ -271,7 +261,7 @@ For systems that generate more notifications, consider using a wrapping element
|
|||
|
||||
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
|
||||
|
||||
{{< example class="bg-dark bd-example-toasts d-flex" >}}
|
||||
{{< example class="bd-example-toasts d-flex" >}}
|
||||
<!-- Flexbox container for aligning the toasts -->
|
||||
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
|
||||
|
||||
|
|
@ -308,7 +298,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
|
|||
|
||||
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
|
|
@ -368,7 +358,7 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
|
@ -23,11 +23,11 @@ Things to know when using the tooltip plugin:
|
|||
Got all that? Great, let's see how they work with some examples.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-sanitizer.md" >}}
|
||||
{{< partial "callouts/info-sanitizer.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
|
|
@ -46,12 +46,11 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra
|
|||
Hover over the links below to see tooltips:
|
||||
|
||||
{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
|
||||
</p>
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
|
||||
{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Custom tooltips
|
||||
|
|
@ -136,9 +135,7 @@ As part of Bootstrap’s evolving CSS variables approach, tooltips now use local
|
|||
|
||||
## Usage
|
||||
|
||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
|
||||
|
||||
Trigger the tooltip via JavaScript:
|
||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
|
||||
|
||||
```js
|
||||
const exampleEl = document.getElementById('example')
|
||||
|
|
@ -146,9 +143,7 @@ const tooltip = new bootstrap.Tooltip(exampleEl, options)
|
|||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Overflow `auto` and `scroll`
|
||||
|
||||
Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
|
||||
Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
|
||||
|
||||
```js
|
||||
const tooltip = new bootstrap.Tooltip('#example', {
|
||||
|
|
@ -162,9 +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 >}}
|
||||
##### Making tooltips work for keyboard and assistive technology users
|
||||
|
||||
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips 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 theme impossible to trigger for keyboard users.
|
||||
{{< /callout >}}
|
||||
|
||||
```html
|
||||
|
|
@ -221,7 +214,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 >}}
|
||||
|
||||
|
|
@ -246,7 +239,7 @@ const tooltip = new bootstrap.Tooltip(element, {
|
|||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
|
@ -274,7 +267,7 @@ tooltip.setContent({ '.tooltip-inner': 'another title' })
|
|||
```
|
||||
|
||||
{{< callout info >}}
|
||||
The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
|
||||
The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
|
||||
{{< /callout >}}
|
||||
|
||||
### Events
|
||||
|
|
@ -283,10 +276,10 @@ The `setContent` method accepts an `object` argument, where each property-key is
|
|||
| Event | Description |
|
||||
| --- | --- |
|
||||
| `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
|
||||
| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||
| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
|
||||
| `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
|
||||
| `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
|
||||
| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
|
||||
| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
|
|
@ -26,8 +26,8 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
|
|||
</figure>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
|
||||
|
|
@ -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.
|
||||
|
||||
|
|
@ -3,7 +3,7 @@ layout: docs
|
|||
title: Reboot
|
||||
description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
|
||||
group: content
|
||||
aliases: "/docs/5.2/content/"
|
||||
aliases: "/docs/5.3/content/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
|
@ -80,9 +80,9 @@ Note that because the font stack includes emoji fonts, many common symbol/dingba
|
|||
|
||||
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
|
||||
|
||||
## Headings and paragraphs
|
||||
## Headings
|
||||
|
||||
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
|
||||
All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
| Heading | Example |
|
||||
|
|
@ -95,6 +95,35 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
|
|||
| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
|
||||
{{< /bs-table >}}
|
||||
|
||||
## Paragraphs
|
||||
|
||||
All `<p>` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
|
||||
|
||||
{{< example >}}
|
||||
<p>This is an example paragraph.</p>
|
||||
{{< /example >}}
|
||||
|
||||
## Links
|
||||
|
||||
Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
|
||||
|
||||
{{< example >}}
|
||||
<a href="#">This is an example link</a>
|
||||
{{< /example >}}
|
||||
|
||||
As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
|
||||
|
||||
{{< example >}}
|
||||
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
|
||||
|
||||
{{< example >}}
|
||||
<a>This is a placeholder link</a>
|
||||
{{< /example >}}
|
||||
|
||||
## Horizontal rules
|
||||
|
||||
The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
|
||||
|
|
@ -176,7 +205,7 @@ Use the `<kbd>` to indicate input that is typically entered via keyboard.
|
|||
|
||||
{{< example >}}
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
{{< /example >}}
|
||||
|
||||
## Sample output
|
||||
|
|
@ -240,6 +269,10 @@ Various form elements have been rebooted for simpler base styles. Here are some
|
|||
|
||||
These changes, and more, are demonstrated below.
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callouts/warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
<form class="bd-example">
|
||||
<fieldset>
|
||||
<legend>Example legend</legend>
|
||||
|
|
@ -362,10 +395,6 @@ These changes, and more, are demonstrated below.
|
|||
</fieldset>
|
||||
</form>
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Pointers on buttons
|
||||
|
||||
Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
|
||||
|
|
@ -382,8 +411,8 @@ The `<address>` element is updated to reset the browser default `font-style` fro
|
|||
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
1355 Market St, Suite 900<br>
|
||||
<strong>ACME Corporation</strong><br>
|
||||
1123 Fictional St,<br>
|
||||
San Francisco, CA 94103<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
|
@ -437,10 +466,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
|
|||
<input type="text" hidden>
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
##### jQuery incompatibility
|
||||
|
||||
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||
{{< callout info >}}
|
||||
Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
|
||||
{{< /callout >}}
|
||||
|
||||
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
|
||||
|
|
@ -18,6 +18,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
|
|||
|
||||
Use contextual classes to color tables, table rows or individual cells.
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
|
||||
{{< /callout >}}
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -69,7 +73,7 @@ Use contextual classes to color tables, table rows or individual cells.
|
|||
{{< /highlight >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Accented tables
|
||||
|
|
@ -223,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.
|
||||
|
||||
|
|
@ -423,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>
|
||||
|
|
@ -819,13 +823,13 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
|
|||
{{< /tables.inline >}}
|
||||
{{< /highlight >}}
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Loop
|
||||
### Sass loops
|
||||
|
||||
{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr
|
|||
{{< example >}}
|
||||
<h3>
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
<small class="text-body-secondary">With faded secondary text</small>
|
||||
</h3>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -269,9 +269,9 @@ Align terms and descriptions horizontally by using our grid system's predefined
|
|||
|
||||
In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
|
||||
|
||||
## Sass
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
### Sass variables
|
||||
|
||||
Headings have some dedicated variables for sizing and spacing.
|
||||
|
||||
|
|
@ -281,6 +281,6 @@ Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/con
|
|||
|
||||
{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
### Sass mixins
|
||||
|
||||
There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
|
||||
258
site/content/docs/5.3/customize/color-modes.md
Normal file
258
site/content/docs/5.3/customize/color-modes.md
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Color modes
|
||||
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
|
||||
group: customize
|
||||
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.
|
||||
|
||||
Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
|
||||
|
||||
## Example
|
||||
|
||||
For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
|
||||
|
||||
{{< example class="d-flex justify-content-between" >}}
|
||||
<div class="dropdown" data-bs-theme="light">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
|
||||
<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 class="dropdown" data-bs-theme="dark">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dark dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
|
||||
<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>
|
||||
{{< /example >}}
|
||||
|
||||
## How it works
|
||||
|
||||
- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `<html>` element, or to any other element or Bootstrap component. If applied to the `<html>` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
|
||||
|
||||
- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
|
||||
|
||||
```scss
|
||||
// Color mode variables in _root.scss
|
||||
@include color-mode(dark) {
|
||||
// CSS variable overrides here...
|
||||
}
|
||||
```
|
||||
|
||||
- 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.
|
||||
|
||||
## Usage
|
||||
|
||||
### Enable dark mode
|
||||
|
||||
Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `<html>` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap demo</title>
|
||||
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
|
||||
|
||||
### Building with Sass
|
||||
|
||||
Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
|
||||
|
||||
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 its compiled CSS output.
|
||||
|
||||
```scss
|
||||
$color-mode-type: data;
|
||||
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Outputs to:
|
||||
|
||||
```css
|
||||
[data-bs-theme=dark] .element {
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
```
|
||||
|
||||
And when setting to `media-query`:
|
||||
|
||||
```scss
|
||||
$color-mode-type: media-query;
|
||||
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Outputs to:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Custom color modes
|
||||
|
||||
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
|
||||
|
||||
For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
|
||||
|
||||
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
|
||||
|
||||
<div class="bd-example text-body bg-body" data-bs-theme="blue">
|
||||
<div class="h4">Example blue theme</div>
|
||||
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
|
||||
<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>
|
||||
|
||||
```html
|
||||
<div data-bs-theme="blue">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## JavaScript
|
||||
|
||||
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. 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 >}}
|
||||
{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
|
||||
{{< /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
|
||||
|
||||
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
|
||||
|
||||
{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
|
||||
|
||||
{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
|
||||
|
||||
### 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.
|
||||
|
||||
{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
|
||||
510
site/content/docs/5.3/customize/color.md
Normal file
510
site/content/docs/5.3/customize/color.md
Normal file
|
|
@ -0,0 +1,510 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Color
|
||||
description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
|
||||
group: customize
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Colors
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
|
||||
|
||||
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
|
||||
|
||||
{{< callout warning>}}
|
||||
**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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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);"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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"> </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)"> </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"> </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>
|
||||
|
||||
### Using the new colors
|
||||
|
||||
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
|
||||
|
||||
{{< example >}}
|
||||
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
|
||||
Example element with utilities
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Theme colors
|
||||
|
||||
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
|
||||
|
||||
<div class="row">
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /theme-colors.inline >}}
|
||||
</div>
|
||||
|
||||
All these colors are available as a Sass map, `$theme-colors`.
|
||||
|
||||
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
|
||||
|
||||
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
|
||||
|
||||
### All colors
|
||||
|
||||
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
|
||||
|
||||
Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
|
||||
|
||||
<div class="row font-monospace">
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range $color := $.Site.Data.colors }}
|
||||
{{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
|
||||
<strong class="d-block">${{ $color.name }}</strong>
|
||||
{{ $color.hex }}
|
||||
</div>
|
||||
{{ range (seq 100 100 900) }}
|
||||
<div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 position-relative swatch-gray-500">
|
||||
<strong class="d-block">$gray-500</strong>
|
||||
#adb5bd
|
||||
</div>
|
||||
{{- range $.Site.Data.grays }}
|
||||
<div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{< /theme-colors.inline >}}
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="p-3 mb-2 bd-black text-white">
|
||||
<strong class="d-block">$black</strong>
|
||||
#000
|
||||
</div>
|
||||
<div class="p-3 mb-2 bd-white border">
|
||||
<strong class="d-block">$white</strong>
|
||||
#fff
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Notes on Sass
|
||||
|
||||
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.
|
||||
|
||||
Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
|
||||
|
||||
Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
|
||||
|
||||
## Color Sass maps
|
||||
|
||||
Bootstrap's source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
|
||||
|
||||
- `$colors` lists all our available base (`500`) colors
|
||||
- `$theme-colors` lists all semantically named theme colors (shown below)
|
||||
- `$grays` lists all tints and shades of gray
|
||||
|
||||
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
|
||||
|
||||
{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
|
||||
|
||||
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
|
||||
|
||||
### Example
|
||||
|
||||
Here's how you can use these in your Sass:
|
||||
|
||||
```scss
|
||||
.alpha { color: $purple; }
|
||||
.beta {
|
||||
color: $yellow-300;
|
||||
background-color: $indigo-900;
|
||||
}
|
||||
```
|
||||
|
||||
[Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
|
||||
|
||||
## Generating utilities
|
||||
|
||||
{{< added-in "5.1.0" >}}
|
||||
|
||||
Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
|
||||
|
||||
1. To start, make sure you've imported our functions, variables, mixins, and utilities.
|
||||
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
|
||||
3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
|
||||
|
||||
Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"color": map-merge(
|
||||
map-get($utilities, "color"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "color"), "values"),
|
||||
(
|
||||
$all-colors
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
```
|
||||
|
||||
This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -14,10 +14,14 @@ Bootstrap includes many [CSS custom properties (variables)](https://developer.mo
|
|||
|
||||
Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
|
||||
|
||||
### Default
|
||||
|
||||
These CSS variables are available everywhere, regardless of color mode.
|
||||
|
||||
```css
|
||||
{{< root.inline >}}
|
||||
{{- $css := readFile "dist/css/bootstrap.css" -}}
|
||||
{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
|
||||
{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
|
||||
|
||||
{{- if (eq (len $match) 0) -}}
|
||||
{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
|
||||
|
|
@ -28,6 +32,21 @@ Here are the variables we include (note that the `:root` is required) that can b
|
|||
{{< /root.inline >}}
|
||||
```
|
||||
|
||||
### Dark mode
|
||||
|
||||
These variables are scoped to our built-in dark mode.
|
||||
|
||||
```css
|
||||
{{< root.inline >}}
|
||||
{{- $css := readFile "dist/css/bootstrap.css" -}}
|
||||
{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
|
||||
{{- if (eq (len $match) 0) -}}
|
||||
{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
|
||||
{{- end -}}
|
||||
{{- index $match 0 -}}
|
||||
{{< /root.inline >}}
|
||||
```
|
||||
|
||||
## Component variables
|
||||
|
||||
Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
|
||||
|
|
@ -55,6 +74,20 @@ a {
|
|||
}
|
||||
```
|
||||
|
||||
## Focus variables
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
|
||||
|
||||
In our Sass, we set default values that can be customized before compiling.
|
||||
|
||||
{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
|
||||
|
||||
{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
|
||||
|
||||
## Grid breakpoints
|
||||
|
||||
While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.
|
||||
|
|
@ -42,14 +42,11 @@ import 'bootstrap/js/dist/modal';
|
|||
This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
|
||||
|
||||
{{< callout info >}}
|
||||
### Default Exports
|
||||
|
||||
Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following:
|
||||
**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
|
||||
|
||||
<!-- eslint-skip -->
|
||||
```js
|
||||
import Modal from 'bootstrap/js/dist/modal'
|
||||
|
||||
const modal = new Modal(document.getElementById('myModal'))
|
||||
```
|
||||
{{< /callout >}}
|
||||
|
|
@ -13,6 +13,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
|||
| Variable | Values | Description |
|
||||
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
|
||||
| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
|
|
@ -4,7 +4,7 @@ title: Customize
|
|||
description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
|
||||
group: customize
|
||||
toc: false
|
||||
aliases: "/docs/5.2/customize/"
|
||||
aliases: "/docs/5.3/customize/"
|
||||
sections:
|
||||
- title: Sass
|
||||
description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
|
||||
|
|
@ -12,6 +12,8 @@ sections:
|
|||
description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
|
||||
- title: Color
|
||||
description: Learn about and customize the color systems that support the entire toolkit.
|
||||
- title: Color modes
|
||||
description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
|
||||
- title: Components
|
||||
description: Learn how we build nearly all our components responsively and with base and modifier classes.
|
||||
- title: CSS variables
|
||||
|
|
@ -57,8 +57,9 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
|
|||
|
||||
// 2. Include any default variable overrides here
|
||||
|
||||
// 3. Include remainder of required Bootstrap stylesheets
|
||||
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
// 4. Include any default map overrides here
|
||||
|
||||
|
|
@ -104,6 +105,7 @@ $body-color: #111;
|
|||
|
||||
// Required
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
@import "../node_modules/bootstrap/scss/maps";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
|
|
@ -117,7 +119,7 @@ $body-color: #111;
|
|||
Repeat as necessary for any variable in Bootstrap, including the global options below.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-npm-starter.md" >}}
|
||||
{{< partial "callouts/info-npm-starter.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Maps and loops
|
||||
|
|
@ -166,6 +168,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw
|
|||
// Required
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
|
||||
|
||||
|
|
@ -294,7 +297,7 @@ 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.
|
||||
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.
|
||||
|
||||
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
|
||||
|
||||
49
site/content/docs/5.3/docsref.md
Normal file
49
site/content/docs/5.3/docsref.md
Normal 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" >}}
|
||||
66
site/content/docs/5.3/examples/_index.md
Normal file
66
site/content/docs/5.3/examples/_index.md
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
layout: single
|
||||
title: Examples
|
||||
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
aliases: "/examples/"
|
||||
---
|
||||
|
||||
{{< list-examples.inline >}}
|
||||
{{ range $entry := $.Site.Data.examples -}}
|
||||
<div class="bd-content">
|
||||
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
||||
<p>{{ $entry.description }}</p>
|
||||
{{ if eq $entry.category "RTL" -}}
|
||||
<div class="bd-callout bd-callout-warning small">
|
||||
<p>
|
||||
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||
</p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ range $i, $example := $entry.examples -}}
|
||||
{{- $len := len $entry.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 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" rel="noopener">
|
||||
{{ $example.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
<p>
|
||||
{{- $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>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="col-sm-6 col-md-3 mb-3">
|
||||
<a class="d-block link-offset-1" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
|
||||
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
|
||||
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
|
||||
alt=""
|
||||
width="480" height="300"
|
||||
loading="lazy">
|
||||
<h3 class="h5 mb-1">
|
||||
{{ $example.name }}
|
||||
</h3>
|
||||
</a>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /list-examples.inline >}}
|
||||
|
|
@ -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>
|
||||
<p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
|
||||
<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>
|
||||
|
|
@ -42,7 +42,7 @@ direction: rtl
|
|||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="fw-light">مثال الألبوم</h1>
|
||||
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
|
||||
<p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
|
||||
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
|
||||
|
|
@ -51,7 +51,7 @@ direction: rtl
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="album py-5 bg-body-tertiary">
|
||||
<div class="container">
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
|
|
@ -65,7 +65,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,7 +80,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +95,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,7 +111,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,7 +126,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,7 +141,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -172,7 +172,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,7 +187,7 @@ direction: rtl
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
|
||||
</div>
|
||||
<small class="text-muted">9 دقائق</small>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,7 +198,7 @@ direction: rtl
|
|||
|
||||
</main>
|
||||
|
||||
<footer class="text-muted py-5">
|
||||
<footer class="text-body-secondary py-5">
|
||||
<div class="container">
|
||||
<p class="float-end mb-1">
|
||||
<a href="#">عد إلى الأعلى</a>
|
||||
|
|
@ -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>
|
||||
<p class="text-muted">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>
|
||||
<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>
|
||||
|
|
@ -41,7 +41,7 @@ title: Album example
|
|||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="fw-light">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
||||
<p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||||
|
|
@ -50,7 +50,7 @@ title: Album example
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="album py-5 bg-body-tertiary">
|
||||
<div class="container">
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
|
|
@ -64,7 +64,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -110,7 +110,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,7 +125,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,7 +140,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -156,7 +156,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -171,7 +171,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -186,7 +186,7 @@ title: Album example
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -197,7 +197,7 @@ title: Album example
|
|||
|
||||
</main>
|
||||
|
||||
<footer class="text-muted py-5">
|
||||
<footer class="text-body-secondary py-5">
|
||||
<div class="container">
|
||||
<p class="float-end mb-1">
|
||||
<a href="#">Back to top</a>
|
||||
3
site/content/docs/5.3/examples/badges/badges.css
Normal file
3
site/content/docs/5.3/examples/badges/badges.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.badge > a {
|
||||
color: inherit;
|
||||
}
|
||||
149
site/content/docs/5.3/examples/badges/index.html
Normal file
149
site/content/docs/5.3/examples/badges/index.html
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Badges
|
||||
extra_css:
|
||||
- "badges.css"
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: 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>
|
||||
|
|
@ -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" style="display: 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-muted">نوفمبر 12</div>
|
||||
<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-muted">نوفمبر 11</div>
|
||||
<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>
|
||||
|
|
@ -161,11 +179,44 @@ include_js: false
|
|||
|
||||
<div class="col-md-4">
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<div class="p-4 mb-3 bg-body-tertiary rounded">
|
||||
<h4 class="fst-italic">حول</h4>
|
||||
<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 يناير 2023</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 يناير 2023</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 يناير 2023</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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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" style="display: 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-dark" 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-muted">Nov 12</div>
|
||||
<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-muted">Nov 11</div>
|
||||
<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>
|
||||
|
|
@ -213,11 +231,44 @@ include_js: false
|
|||
|
||||
<div class="col-md-4">
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<div class="p-4 mb-3 bg-body-tertiary rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<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, 2023</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, 2023</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, 2023</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
50
site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css
Normal 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
88
site/content/docs/5.3/examples/breadcrumbs/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Breadcrumbs
|
||||
extra_css:
|
||||
- "breadcrumbs.css"
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: 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
88
site/content/docs/5.3/examples/buttons/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
layout: examples
|
||||
title: Buttons
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: 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" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">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...
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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" data-bs-theme="light">
|
||||
<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>
|
||||
|
|
@ -120,11 +120,11 @@ extra_css:
|
|||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
|
||||
<h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-body-secondary"> سيذهل عقلك. </span></h2>
|
||||
<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>
|
||||
|
||||
|
|
@ -132,11 +132,11 @@ extra_css:
|
|||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
|
||||
<h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-body-secondary"> شاهد بنفسك. </span></h2>
|
||||
<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>
|
||||
|
||||
|
|
@ -144,11 +144,11 @@ extra_css:
|
|||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
|
||||
<h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span></h2>
|
||||
<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>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue