mirror of
https://github.com/twbs/bootstrap.git
synced 2025-07-22 00:02:06 -04:00
Compare commits
No commits in common. "930867b09a75a7164f322f3e9d1d04683f173837" and "7d52cf793f8d3256589466c176194ae04994ae50" have entirely different histories.
930867b09a
...
7d52cf793f
@ -13,25 +13,21 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav class="navbar navbar-full navbar-dark bg-dark">
|
||||||
<div class="container-fluid">
|
<button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
<div class="collapse navbar-expand-md" id="navbarResponsive">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
||||||
</button>
|
<ul class="navbar-nav">
|
||||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
<li class="nav-item">
|
||||||
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
||||||
<ul class="navbar-nav">
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
</ul>
|
||||||
<a class="nav-link" href="#">Link</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
48
package-lock.json
generated
48
package-lock.json
generated
@ -27,7 +27,7 @@
|
|||||||
"@rollup/plugin-commonjs": "^25.0.4",
|
"@rollup/plugin-commonjs": "^25.0.4",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.1",
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
||||||
"@rollup/plugin-replace": "^5.0.2",
|
"@rollup/plugin-replace": "^5.0.2",
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.15",
|
||||||
"bundlewatch": "^0.3.3",
|
"bundlewatch": "^0.3.3",
|
||||||
"clean-css-cli": "^5.6.2",
|
"clean-css-cli": "^5.6.2",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
@ -56,7 +56,7 @@
|
|||||||
"lockfile-lint": "^4.12.1",
|
"lockfile-lint": "^4.12.1",
|
||||||
"nodemon": "^3.0.1",
|
"nodemon": "^3.0.1",
|
||||||
"npm-run-all2": "^6.0.6",
|
"npm-run-all2": "^6.0.6",
|
||||||
"postcss": "^8.4.31",
|
"postcss": "^8.4.30",
|
||||||
"postcss-cli": "^10.1.0",
|
"postcss-cli": "^10.1.0",
|
||||||
"rollup": "^3.29.3",
|
"rollup": "^3.29.3",
|
||||||
"rollup-plugin-istanbul": "^4.0.0",
|
"rollup-plugin-istanbul": "^4.0.0",
|
||||||
@ -2879,9 +2879,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/autoprefixer": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.16",
|
"version": "10.4.15",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
|
||||||
"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
|
"integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@ -2899,8 +2899,8 @@
|
|||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"browserslist": "^4.21.10",
|
"browserslist": "^4.21.10",
|
||||||
"caniuse-lite": "^1.0.30001538",
|
"caniuse-lite": "^1.0.30001520",
|
||||||
"fraction.js": "^4.3.6",
|
"fraction.js": "^4.2.0",
|
||||||
"normalize-range": "^0.1.2",
|
"normalize-range": "^0.1.2",
|
||||||
"picocolors": "^1.0.0",
|
"picocolors": "^1.0.0",
|
||||||
"postcss-value-parser": "^4.2.0"
|
"postcss-value-parser": "^4.2.0"
|
||||||
@ -3507,9 +3507,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/caniuse-lite": {
|
"node_modules/caniuse-lite": {
|
||||||
"version": "1.0.30001547",
|
"version": "1.0.30001534",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
|
||||||
"integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
|
"integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@ -8579,9 +8579,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/postcss": {
|
"node_modules/postcss": {
|
||||||
"version": "8.4.31",
|
"version": "8.4.30",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@ -13461,14 +13461,14 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"autoprefixer": {
|
"autoprefixer": {
|
||||||
"version": "10.4.16",
|
"version": "10.4.15",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
|
||||||
"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
|
"integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"browserslist": "^4.21.10",
|
"browserslist": "^4.21.10",
|
||||||
"caniuse-lite": "^1.0.30001538",
|
"caniuse-lite": "^1.0.30001520",
|
||||||
"fraction.js": "^4.3.6",
|
"fraction.js": "^4.2.0",
|
||||||
"normalize-range": "^0.1.2",
|
"normalize-range": "^0.1.2",
|
||||||
"picocolors": "^1.0.0",
|
"picocolors": "^1.0.0",
|
||||||
"postcss-value-parser": "^4.2.0"
|
"postcss-value-parser": "^4.2.0"
|
||||||
@ -13890,9 +13890,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001547",
|
"version": "1.0.30001534",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
|
||||||
"integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
|
"integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"chainsaw": {
|
"chainsaw": {
|
||||||
@ -17593,9 +17593,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"version": "8.4.31",
|
"version": "8.4.30",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"nanoid": "^3.3.6",
|
"nanoid": "^3.3.6",
|
||||||
|
|||||||
@ -111,7 +111,7 @@
|
|||||||
"@rollup/plugin-commonjs": "^25.0.4",
|
"@rollup/plugin-commonjs": "^25.0.4",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.1",
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
||||||
"@rollup/plugin-replace": "^5.0.2",
|
"@rollup/plugin-replace": "^5.0.2",
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.15",
|
||||||
"bundlewatch": "^0.3.3",
|
"bundlewatch": "^0.3.3",
|
||||||
"clean-css-cli": "^5.6.2",
|
"clean-css-cli": "^5.6.2",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
@ -140,7 +140,7 @@
|
|||||||
"lockfile-lint": "^4.12.1",
|
"lockfile-lint": "^4.12.1",
|
||||||
"nodemon": "^3.0.1",
|
"nodemon": "^3.0.1",
|
||||||
"npm-run-all2": "^6.0.6",
|
"npm-run-all2": "^6.0.6",
|
||||||
"postcss": "^8.4.31",
|
"postcss": "^8.4.30",
|
||||||
"postcss-cli": "^10.1.0",
|
"postcss-cli": "^10.1.0",
|
||||||
"rollup": "^3.29.3",
|
"rollup": "^3.29.3",
|
||||||
"rollup-plugin-istanbul": "^4.0.0",
|
"rollup-plugin-istanbul": "^4.0.0",
|
||||||
|
|||||||
@ -17,7 +17,6 @@
|
|||||||
// Insert copy to clipboard button before .highlight
|
// Insert copy to clipboard button before .highlight
|
||||||
const btnTitle = 'Copy to clipboard'
|
const btnTitle = 'Copy to clipboard'
|
||||||
const btnEdit = 'Edit on StackBlitz'
|
const btnEdit = 'Edit on StackBlitz'
|
||||||
// const btnTheme = 'Toggle local theme'
|
|
||||||
|
|
||||||
const btnHtml = [
|
const btnHtml = [
|
||||||
'<div class="bd-code-snippet">',
|
'<div class="bd-code-snippet">',
|
||||||
@ -52,7 +51,6 @@
|
|||||||
|
|
||||||
snippetButtonTooltip('.btn-clipboard', btnTitle)
|
snippetButtonTooltip('.btn-clipboard', btnTitle)
|
||||||
snippetButtonTooltip('.btn-edit', btnEdit)
|
snippetButtonTooltip('.btn-edit', btnEdit)
|
||||||
// snippetButtonTooltip('.btn-theme', btnTheme)
|
|
||||||
|
|
||||||
const clipboard = new ClipboardJS('.btn-clipboard', {
|
const clipboard = new ClipboardJS('.btn-clipboard', {
|
||||||
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
|
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
|
||||||
|
|||||||
@ -18,8 +18,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-clipboard,
|
.btn-clipboard,
|
||||||
.btn-edit,
|
.btn-edit {
|
||||||
.btn-theme > .dropdown-toggle {
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|||||||
@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
|
|||||||
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
|
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
|
||||||
|
|
||||||
// setContent example
|
// setContent example
|
||||||
popover.setContent({
|
myPopover.setContent({
|
||||||
'.popover-header': 'another title',
|
'.popover-header': 'another title',
|
||||||
'.popover-body': 'another content'
|
'.popover-body': 'another content'
|
||||||
})
|
})
|
||||||
|
|||||||
@ -22,7 +22,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
|
|||||||
{{< colors.inline >}}
|
{{< colors.inline >}}
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
{{- range (index $.Site.Data "theme-colors") }}
|
||||||
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
|
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
|
||||||
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
|
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{< /colors.inline >}}
|
{{< /colors.inline >}}
|
||||||
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
|
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
|
||||||
|
|||||||
@ -31,8 +31,13 @@
|
|||||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
|
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
|
||||||
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
|
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
|
||||||
<div class="d-flex ms-auto">
|
<div class="d-flex ms-auto">
|
||||||
<div class="btn-theme dropdown" title="Toggle local theme">
|
<div class="position-relative">
|
||||||
<button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
|
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
|
||||||
|
type="button"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
data-bs-display="static"
|
||||||
|
aria-label="Toggle theme (auto)">
|
||||||
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
|
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
|
||||||
|
|||||||
@ -19,29 +19,27 @@
|
|||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||||
}
|
}
|
||||||
|
|
||||||
const setTheme = (theme, element = document.documentElement) => {
|
const setTheme = theme => {
|
||||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
element.setAttribute('data-bs-theme', 'dark')
|
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||||
} else {
|
} else {
|
||||||
element.setAttribute('data-bs-theme', theme)
|
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setTheme(getPreferredTheme())
|
setTheme(getPreferredTheme())
|
||||||
|
|
||||||
const showActiveTheme = (theme, focus = false, selectedToggler = document.querySelector('#bd-theme')) => {
|
const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => {
|
||||||
const themeSwitcher = selectedToggler.closest('.dropdown')
|
|
||||||
if (!themeSwitcher) {
|
if (!themeSwitcher) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const themeSwitcherButton = themeSwitcher.querySelector('.dropdown-toggle')
|
|
||||||
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
||||||
const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active use')
|
const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use')
|
||||||
const btnToActive = themeSwitcher.querySelector(`[data-bs-theme-value="${theme}"]`)
|
const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||||
|
|
||||||
themeSwitcher.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||||
element.classList.remove('active')
|
element.classList.remove('active')
|
||||||
element.setAttribute('aria-pressed', 'false')
|
element.setAttribute('aria-pressed', 'false')
|
||||||
})
|
})
|
||||||
@ -50,10 +48,10 @@
|
|||||||
btnToActive.setAttribute('aria-pressed', 'true')
|
btnToActive.setAttribute('aria-pressed', 'true')
|
||||||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}`
|
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}`
|
||||||
themeSwitcherButton.setAttribute('aria-label', themeSwitcherLabel)
|
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||||||
|
|
||||||
if (focus) {
|
if (focus) {
|
||||||
themeSwitcherButton.focus()
|
themeSwitcher.focus()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,8 +70,8 @@
|
|||||||
toggle.addEventListener('click', () => {
|
toggle.addEventListener('click', () => {
|
||||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||||
|
|
||||||
if (toggle.closest('.bd-code-snippet')) {
|
if (toggle.closest('.highlight-toolbar')) {
|
||||||
setTheme(theme, toggle.closest('.bd-code-snippet').firstChild)
|
toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme)
|
||||||
showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling)
|
showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling)
|
||||||
} else {
|
} else {
|
||||||
setStoredTheme(theme)
|
setStoredTheme(theme)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user