mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
docs: migration to Astro
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
This commit is contained in:
Julien Déramond
parent
53171ad564
commit
94e14591d5
8
.github/workflows/browserstack.yml
vendored
8
.github/workflows/browserstack.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: BrowserStack
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- "**"
|
||||
- "!dependabot/**"
|
||||
#push:
|
||||
# branches:
|
||||
# - "**"
|
||||
# - "!dependabot/**"
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
8
.github/workflows/bundlewatch.yml
vendored
8
.github/workflows/bundlewatch.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: Bundlewatch
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
#pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
13
.github/workflows/calibreapp-image-actions.yml
vendored
13
.github/workflows/calibreapp-image-actions.yml
vendored
@ -1,12 +1,13 @@
|
||||
name: Compress Images
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- '**.jpg'
|
||||
- '**.jpeg'
|
||||
- '**.png'
|
||||
- '**.webp'
|
||||
#pull_request:
|
||||
# paths:
|
||||
# - '**.jpg'
|
||||
# - '**.jpeg'
|
||||
# - '**.png'
|
||||
# - '**.webp'
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
24
.github/workflows/codeql.yml
vendored
24
.github/workflows/codeql.yml
vendored
@ -1,18 +1,18 @@
|
||||
name: "CodeQL"
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- v4-dev
|
||||
- "!dependabot/**"
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
- v4-dev
|
||||
- "!dependabot/**"
|
||||
schedule:
|
||||
- cron: "0 2 * * 4"
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
# - v4-dev
|
||||
# - "!dependabot/**"
|
||||
#pull_request:
|
||||
# branches:
|
||||
# - main
|
||||
# - v4-dev
|
||||
# - "!dependabot/**"
|
||||
#schedule:
|
||||
# - cron: "0 2 * * 4"
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
|
||||
8
.github/workflows/cspell.yml
vendored
8
.github/workflows/cspell.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: cspell
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
#pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
8
.github/workflows/css.yml
vendored
8
.github/workflows/css.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: CSS
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
#pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
4
.github/workflows/docs.yml
vendored
4
.github/workflows/docs.yml
vendored
@ -38,8 +38,8 @@ jobs:
|
||||
- name: Build docs
|
||||
run: npm run docs-build
|
||||
|
||||
- name: Validate HTML
|
||||
run: npm run docs-vnu
|
||||
#- name: Validate HTML
|
||||
# run: npm run docs-vnu
|
||||
|
||||
- name: Run linkinator
|
||||
uses: JustinBeckwith/linkinator-action@v1
|
||||
|
||||
8
.github/workflows/js.yml
vendored
8
.github/workflows/js.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: JS Tests
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
#pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
8
.github/workflows/lint.yml
vendored
8
.github/workflows/lint.yml
vendored
@ -1,10 +1,10 @@
|
||||
name: Lint
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
#pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
|
||||
6
.github/workflows/release-notes.yml
vendored
6
.github/workflows/release-notes.yml
vendored
@ -1,9 +1,9 @@
|
||||
name: Release notes
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
#push:
|
||||
# branches:
|
||||
# - main
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
@ -1,8 +1,5 @@
|
||||
# Ignore docs files
|
||||
/_site/
|
||||
# Hugo files
|
||||
/resources/
|
||||
/.hugo_build.lock
|
||||
|
||||
# Numerous always-ignore extensions
|
||||
*.diff
|
||||
@ -41,3 +38,9 @@ Thumbs.db
|
||||
/dist-sass/
|
||||
/js/coverage/
|
||||
/node_modules/
|
||||
|
||||
# Site
|
||||
/site/dist
|
||||
/site/node_modules
|
||||
/site/.astro
|
||||
/site/public
|
||||
|
||||
12
.prettierignore
Normal file
12
.prettierignore
Normal file
@ -0,0 +1,12 @@
|
||||
# Prettier is only used for the website
|
||||
|
||||
site/.astro
|
||||
site/dist
|
||||
site/public
|
||||
site/src/assets
|
||||
site/src/scss
|
||||
site/src/pages/**/*.md
|
||||
site/src/pages/**/*.mdx
|
||||
site/src/content/**/*.mdx
|
||||
site/src/layouts/RedirectLayout.astro
|
||||
site/static
|
||||
@ -141,18 +141,18 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:
|
||||
|
||||
## Documentation
|
||||
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
|
||||
Bootstrap's documentation, included in this repo in the root directory, is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
|
||||
|
||||
Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/).
|
||||
|
||||
### Running documentation locally
|
||||
|
||||
1. Run `npm install` to install the Node.js dependencies, including Hugo (the site builder).
|
||||
1. Run `npm install` to install the Node.js dependencies, including Astro (the site builder).
|
||||
2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
|
||||
3. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
|
||||
4. Open `http://localhost:9001/` in your browser, and voilà.
|
||||
|
||||
Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
|
||||
Learn more about using Astro by reading its [documentation](https://docs.astro.build/en/getting-started/).
|
||||
|
||||
### Documentation for previous releases
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-r
|
||||
// These are the files we only care about replacing the version
|
||||
const FILES = [
|
||||
'README.md',
|
||||
'hugo.yml',
|
||||
'config.yml',
|
||||
'js/src/base-component.js',
|
||||
'package.js',
|
||||
'scss/mixins/_banner.scss',
|
||||
|
||||
@ -19,11 +19,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
sh.config.fatal = true
|
||||
|
||||
const configFile = path.join(__dirname, '../hugo.yml')
|
||||
const configFile = path.join(__dirname, '../config.yml')
|
||||
|
||||
// Array of objects which holds the files to generate SRI hashes for.
|
||||
// `file` is the path from the root folder
|
||||
// `configPropertyName` is the hugo.yml variable's name of the file
|
||||
// `configPropertyName` is the config.yml variable's name of the file
|
||||
const files = [
|
||||
{
|
||||
file: 'dist/css/bootstrap.min.css',
|
||||
|
||||
59
config.yml
Normal file
59
config.yml
Normal file
@ -0,0 +1,59 @@
|
||||
title: "Bootstrap"
|
||||
baseURL: "https://getbootstrap.com"
|
||||
|
||||
docsDir: "site"
|
||||
|
||||
# TODO(Astro migration) Check if still relevant, update Astro config and prolly remove this value from here
|
||||
publishDir: "_site"
|
||||
|
||||
subtitle: "The most popular HTML, CSS, and JS library in the world."
|
||||
description: "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
|
||||
authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
|
||||
current_version: "5.3.3"
|
||||
current_ruby_version: "5.3.3"
|
||||
docs_version: "5.3"
|
||||
rfs_version: "v10.0.0"
|
||||
github_org: "https://github.com/twbs"
|
||||
repo: "https://github.com/twbs/bootstrap"
|
||||
twitter: "getbootstrap"
|
||||
opencollective: "https://opencollective.com/bootstrap"
|
||||
blog: "https://blog.getbootstrap.com/"
|
||||
themes: "https://themes.getbootstrap.com/"
|
||||
icons: "https://icons.getbootstrap.com/"
|
||||
swag: "https://cottonbureau.com/people/bootstrap"
|
||||
|
||||
analytics:
|
||||
fathom_site: "ITUSEYJG"
|
||||
|
||||
algolia:
|
||||
app_id: "AK7KMZKZHQ"
|
||||
api_key: "3151f502c7b9e9dafd5e6372b691a24e"
|
||||
index_name: "bootstrap"
|
||||
|
||||
download:
|
||||
source: "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
|
||||
dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
css_hash: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"
|
||||
css_rtl_hash: "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"
|
||||
js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
|
||||
js_hash: "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
|
||||
|
||||
anchors:
|
||||
min: 2
|
||||
max: 5
|
||||
|
||||
toc:
|
||||
min: 2
|
||||
max: 6
|
||||
102
hugo.yml
102
hugo.yml
@ -1,102 +0,0 @@
|
||||
languageCode: "en"
|
||||
title: "Bootstrap"
|
||||
baseURL: "https://getbootstrap.com"
|
||||
|
||||
security:
|
||||
enableInlineShortcodes: true
|
||||
funcs:
|
||||
getenv:
|
||||
- ^HUGO_
|
||||
- NETLIFY
|
||||
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
tableOfContents:
|
||||
startLevel: 2
|
||||
endLevel: 6
|
||||
|
||||
build:
|
||||
noJSConfigInAssets: true
|
||||
|
||||
buildDrafts: true
|
||||
buildFuture: true
|
||||
|
||||
enableRobotsTXT: true
|
||||
metaDataFormat: "yaml"
|
||||
disableKinds: ["404", "taxonomy", "term", "RSS"]
|
||||
|
||||
publishDir: "_site"
|
||||
|
||||
module:
|
||||
mounts:
|
||||
- source: dist
|
||||
target: static/docs/5.3/dist
|
||||
- source: site/assets
|
||||
target: assets
|
||||
- source: site/content
|
||||
target: content
|
||||
- source: site/data
|
||||
target: data
|
||||
- source: site/layouts
|
||||
target: layouts
|
||||
- source: site/static
|
||||
target: static
|
||||
- source: node_modules/@docsearch/css
|
||||
target: assets/scss/@docsearch/css
|
||||
- source: site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png
|
||||
target: static/apple-touch-icon.png
|
||||
- source: site/static/docs/5.3/assets/img/favicons/favicon.ico
|
||||
target: static/favicon.ico
|
||||
|
||||
params:
|
||||
subtitle: "The most popular HTML, CSS, and JS library in the world."
|
||||
description: "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
|
||||
authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
|
||||
current_version: "5.3.3"
|
||||
current_ruby_version: "5.3.3"
|
||||
docs_version: "5.3"
|
||||
rfs_version: "v10.0.0"
|
||||
github_org: "https://github.com/twbs"
|
||||
repo: "https://github.com/twbs/bootstrap"
|
||||
twitter: "getbootstrap"
|
||||
opencollective: "https://opencollective.com/bootstrap"
|
||||
blog: "https://blog.getbootstrap.com/"
|
||||
themes: "https://themes.getbootstrap.com/"
|
||||
icons: "https://icons.getbootstrap.com/"
|
||||
swag: "https://cottonbureau.com/people/bootstrap"
|
||||
|
||||
analytics:
|
||||
fathom_site: "ITUSEYJG"
|
||||
|
||||
algolia:
|
||||
appId: "AK7KMZKZHQ"
|
||||
apiKey: "3151f502c7b9e9dafd5e6372b691a24e"
|
||||
indexName: "bootstrap"
|
||||
|
||||
download:
|
||||
source: "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
|
||||
dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
css_hash: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"
|
||||
css_rtl_hash: "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"
|
||||
js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
|
||||
js_hash: "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
|
||||
|
||||
anchors:
|
||||
min: 2
|
||||
max: 5
|
||||
8950
package-lock.json
generated
8950
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
47
package.json
47
package.json
@ -52,8 +52,8 @@
|
||||
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
|
||||
"css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
|
||||
"css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/content/**/*.css\"",
|
||||
"css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
|
||||
"css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"",
|
||||
"css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/src/assets/examples/\" --ext \".rtl.css\" --base \"site/src/assets/examples/\" \"site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
|
||||
"css-test": "jasmine --config=scss/tests/jasmine.js",
|
||||
"js": "npm-run-all js-compile js-minify",
|
||||
"js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
|
||||
@ -75,11 +75,13 @@
|
||||
"js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
|
||||
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
|
||||
"docs": "npm-run-all docs-build docs-lint",
|
||||
"docs-build": "hugo --cleanDestinationDir --printUnusedTemplates",
|
||||
"docs-build": "npm run astro-build",
|
||||
"docs-compile": "npm run docs-build",
|
||||
"docs-vnu": "node build/vnu-jar.mjs",
|
||||
"docs-lint": "npm run docs-vnu",
|
||||
"docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates",
|
||||
"docs-lint": "npm-run-all docs-prettier-check",
|
||||
"docs-prettier-check": "prettier --config site/.prettierrc.json -c --cache site",
|
||||
"docs-prettier-format": "prettier --config site/.prettierrc.json --write --cache site",
|
||||
"docs-serve": "npm run astro-dev",
|
||||
"docs-serve-only": "npx sirv-cli _site --port 9001",
|
||||
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
|
||||
"update-deps": "ncu -u -x eslint,eslint-config-xo,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
|
||||
@ -90,19 +92,27 @@
|
||||
"release-zip-examples": "node build/zip-examples.mjs",
|
||||
"dist": "npm-run-all --aggregate-output --parallel css js",
|
||||
"test": "npm-run-all lint dist js-test docs-build docs-lint",
|
||||
"netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build",
|
||||
"netlify": "npm-run-all dist release-sri astro-build",
|
||||
"watch": "npm-run-all --parallel watch-*",
|
||||
"watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
|
||||
"watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
|
||||
"watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
|
||||
"watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
|
||||
"watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
|
||||
"watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
|
||||
"watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
|
||||
"astro-dev": "astro dev --root site",
|
||||
"astro-build": "astro build --root site && rm -rf _site && cp -r site/dist _site",
|
||||
"astro-preview": "astro preview --root site"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@astrojs/markdown-remark": "^6.2.0",
|
||||
"@astrojs/mdx": "^4.1.0",
|
||||
"@astrojs/prism": "^3.2.0",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@babel/cli": "^7.26.4",
|
||||
"@babel/core": "^7.26.9",
|
||||
"@babel/preset-env": "^7.26.9",
|
||||
@ -113,6 +123,13 @@
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"@stackblitz/sdk": "^1.11.0",
|
||||
"@types/bootstrap": "^5.2.6",
|
||||
"@types/google.analytics": "^0.0.42",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/mime": "^3.0.1",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"astro": "^5.4.0",
|
||||
"astro-auto-import": "^0.4.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bundlewatch": "^0.4.0",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
@ -125,12 +142,15 @@
|
||||
"eslint-plugin-markdown": "^5.1.0",
|
||||
"eslint-plugin-unicorn": "^55.0.0",
|
||||
"find-unused-sass-variables": "^6.0.0",
|
||||
"github-slugger": "^2.0.0",
|
||||
"globby": "^14.1.0",
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.142.0",
|
||||
"htmlparser2": "^8.0.1",
|
||||
"image-size": "^1.0.2",
|
||||
"ip": "^2.0.1",
|
||||
"jasmine": "^5.6.0",
|
||||
"jquery": "^3.7.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"karma": "^6.4.4",
|
||||
"karma-browserstack-launcher": "1.4.0",
|
||||
"karma-chrome-launcher": "^3.2.0",
|
||||
@ -141,10 +161,14 @@
|
||||
"karma-jasmine-html-reporter": "^2.1.0",
|
||||
"karma-rollup-preprocessor": "7.0.7",
|
||||
"lockfile-lint": "^4.14.0",
|
||||
"mime": "^3.0.0",
|
||||
"nodemon": "^3.1.9",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"prettier": "^2.8.4",
|
||||
"prettier-plugin-astro": "^0.8.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rollup": "^4.34.9",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"rtlcss": "^4.3.0",
|
||||
@ -154,7 +178,9 @@
|
||||
"stylelint": "^16.15.0",
|
||||
"stylelint-config-twbs-bootstrap": "^15.1.0",
|
||||
"terser": "^5.39.0",
|
||||
"vnu-jar": "24.10.17"
|
||||
"unist-util-visit": "^4.1.2",
|
||||
"vnu-jar": "24.10.17",
|
||||
"zod": "^3.20.6"
|
||||
},
|
||||
"files": [
|
||||
"dist/{css,js}/*.{css,js,map}",
|
||||
@ -163,9 +189,6 @@
|
||||
"scss/**/*.scss",
|
||||
"!scss/tests/**"
|
||||
],
|
||||
"hugo-bin": {
|
||||
"buildTags": "extended"
|
||||
},
|
||||
"jspm": {
|
||||
"registry": "npm",
|
||||
"main": "js/bootstrap",
|
||||
|
||||
8
site/.prettierrc.json
Normal file
8
site/.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "http://json.schemastore.org/prettierrc",
|
||||
"arrowParens": "always",
|
||||
"printWidth": 120,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2025 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global bootstrap: false */
|
||||
|
||||
import ClipboardJS from 'clipboard'
|
||||
|
||||
export default () => {
|
||||
// Insert copy to clipboard button before .highlight
|
||||
const btnTitle = 'Copy to clipboard'
|
||||
const btnEdit = 'Edit on StackBlitz'
|
||||
|
||||
const btnHtml = [
|
||||
'<div class="bd-code-snippet">',
|
||||
' <div class="bd-clipboard">',
|
||||
' <button type="button" class="btn-clipboard">',
|
||||
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
|
||||
' </button>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
// Wrap programmatically code blocks and add copy btn.
|
||||
document.querySelectorAll('.highlight')
|
||||
.forEach(element => {
|
||||
// Ignore examples made by shortcode
|
||||
if (!element.closest('.bd-example-snippet')) {
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
element.previousElementSibling.append(element)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} selector
|
||||
* @param {string} title
|
||||
*/
|
||||
function snippetButtonTooltip(selector, title) {
|
||||
document.querySelectorAll(selector).forEach(btn => {
|
||||
bootstrap.Tooltip.getOrCreateInstance(btn, { title })
|
||||
})
|
||||
}
|
||||
|
||||
snippetButtonTooltip('.btn-clipboard', btnTitle)
|
||||
snippetButtonTooltip('.btn-edit', btnEdit)
|
||||
|
||||
const clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
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').firstElementChild
|
||||
const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
|
||||
const namespace = 'http://www.w3.org/1999/xlink'
|
||||
const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
|
||||
const originalTitle = event.trigger.title
|
||||
const isCheckIconVisible = originalXhref === '#check2'
|
||||
|
||||
if (isCheckIconVisible) {
|
||||
return
|
||||
}
|
||||
|
||||
tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
|
||||
event.trigger.addEventListener('hidden.bs.tooltip', () => {
|
||||
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
|
||||
}, { once: true })
|
||||
event.clearSelection()
|
||||
iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
|
||||
|
||||
setTimeout(() => {
|
||||
iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
|
||||
event.trigger.title = originalTitle
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
clipboard.on('error', event => {
|
||||
const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
const fallbackMsg = `Press ${modifierKey}C to copy`
|
||||
const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
|
||||
|
||||
tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
|
||||
event.trigger.addEventListener('hidden.bs.tooltip', () => {
|
||||
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
|
||||
}, { once: true })
|
||||
})
|
||||
}
|
||||
30
site/astro.config.ts
Normal file
30
site/astro.config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineConfig } from 'astro/config'
|
||||
|
||||
import { bootstrap } from './src/libs/astro'
|
||||
import { getConfig } from './src/libs/config'
|
||||
import { algoliaPlugin } from './src/plugins/algolia-plugin'
|
||||
import { stackblitzPlugin } from './src/plugins/stackblitz-plugin'
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
|
||||
const site = isDev
|
||||
? // In development mode, use the local dev server.
|
||||
'http://localhost:4321'
|
||||
: process.env.DEPLOY_PRIME_URL !== undefined
|
||||
? // If deploying on Netlify, use the `DEPLOY_PRIME_URL` environment variable.
|
||||
process.env.DEPLOY_PRIME_URL
|
||||
: // Otherwise, use the `baseURL` value defined in the `config.yml` file.
|
||||
getConfig().baseURL
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [bootstrap()],
|
||||
markdown: {
|
||||
smartypants: false,
|
||||
syntaxHighlight: 'prism',
|
||||
},
|
||||
site,
|
||||
vite: {
|
||||
plugins: [algoliaPlugin(), stackblitzPlugin()],
|
||||
},
|
||||
})
|
||||
@ -1,14 +0,0 @@
|
||||
---
|
||||
title: "404 - File not found"
|
||||
layout: 404
|
||||
description: ""
|
||||
url: /404.html
|
||||
robots: noindex,follow
|
||||
sitemap:
|
||||
disable: true
|
||||
---
|
||||
|
||||
<div class="text-center py-5">
|
||||
<h1 class="display-1">404</h1>
|
||||
<h2>File not found</h2>
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
layout: redirect
|
||||
sitemap:
|
||||
disable: true
|
||||
redirect: "/docs/5.3/getting-started/introduction/"
|
||||
---
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Team
|
||||
description: An overview of the founding team and core contributors to Bootstrap.
|
||||
group: about
|
||||
---
|
||||
|
||||
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
|
||||
|
||||
{{< team.inline >}}
|
||||
<div class="list-group mb-3">
|
||||
{{- range (index $.Site.Data "core-team") }}
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ .user }}">
|
||||
<img src="https://github.com/{{ .user }}.png" alt="@{{ .user }}" width="32" height="32" class="rounded me-2" loading="lazy">
|
||||
<span>
|
||||
<strong>{{ .name }}</strong> @{{ .user }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{< /team.inline >}}
|
||||
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
@ -1,63 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Images
|
||||
description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
|
||||
group: content
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Responsive images
|
||||
|
||||
Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Image thumbnails
|
||||
|
||||
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-start" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-end" >}}
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="text-center">
|
||||
{{< placeholder width="200" height="200" class="rounded" >}}
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
## Picture
|
||||
|
||||
If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source srcset="..." type="image/svg+xml">
|
||||
<img src="..." class="img-fluid img-thumbnail" alt="...">
|
||||
</picture>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass variables
|
||||
|
||||
Variables are available for image thumbnails.
|
||||
|
||||
{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}
|
||||
@ -1,6 +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/"
|
||||
---
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Color and background
|
||||
description: Set a background color with contrasting foreground color.
|
||||
group: helpers
|
||||
toc: true
|
||||
added:
|
||||
version: "5.2"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
|
||||
|
||||
{{< callout warning >}}
|
||||
**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
{{< text-bg.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
|
||||
{{- end -}}
|
||||
{{< /text-bg.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## With components
|
||||
|
||||
Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):
|
||||
|
||||
{{< example >}}
|
||||
<span class="badge text-bg-primary">Primary</span>
|
||||
<span class="badge text-bg-info">Info</span>
|
||||
{{< /example >}}
|
||||
|
||||
Or on [cards]({{< docsref "/components/card#background-and-color" >}}):
|
||||
|
||||
{{< example >}}
|
||||
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -1,43 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Colored links
|
||||
description: Colored links with hover states
|
||||
group: helpers
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Link colors
|
||||
|
||||
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. 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 info >}}
|
||||
**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
{{< colored-links.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p>
|
||||
{{- end -}}
|
||||
{{< /colored-links.inline >}}
|
||||
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Link utilities
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}).
|
||||
|
||||
{{< example >}}
|
||||
{{< colored-links.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
|
||||
{{- end -}}
|
||||
{{< /colored-links.inline >}}
|
||||
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
|
||||
{{< /example >}}
|
||||
@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Utilities for layout
|
||||
description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
|
||||
group: layout
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Changing `display`
|
||||
|
||||
Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
|
||||
|
||||
## Flexbox options
|
||||
|
||||
Bootstrap is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{< docsref "/components/alerts" >}}) are built with flexbox enabled.
|
||||
|
||||
Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.
|
||||
|
||||
## Margin and padding
|
||||
|
||||
Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1rem` —in LTR— starting at the `md` breakpoint).
|
||||
|
||||
## Toggle `visibility`
|
||||
|
||||
When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
|
||||
@ -1,194 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Borders
|
||||
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
|
||||
group: utilities
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Border
|
||||
|
||||
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
|
||||
|
||||
### Additive
|
||||
|
||||
Add borders to custom elements:
|
||||
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-end"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-start"></span>
|
||||
{{< /example >}}
|
||||
|
||||
### Subtractive
|
||||
|
||||
Or remove borders:
|
||||
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
<span class="border border-0"></span>
|
||||
<span class="border border-top-0"></span>
|
||||
<span class="border border-end-0"></span>
|
||||
<span class="border border-bottom-0"></span>
|
||||
<span class="border border-start-0"></span>
|
||||
{{< /example >}}
|
||||
|
||||
## Color
|
||||
|
||||
{{< callout info >}}
|
||||
Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
|
||||
{{< /callout >}}
|
||||
|
||||
Change the border color using utilities built on our theme colors.
|
||||
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
{{< border.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<span class="border border-{{ .name }}"></span>
|
||||
<span class="border border-{{ .name }}-subtle"></span>
|
||||
{{- end -}}
|
||||
{{< /border.inline >}}
|
||||
<span class="border border-black"></span>
|
||||
<span class="border border-white"></span>
|
||||
{{< /example >}}
|
||||
|
||||
Or modify the default `border-color` of a component:
|
||||
|
||||
{{< example >}}
|
||||
<div class="mb-4">
|
||||
<label for="exampleFormControlInput1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||
</div>
|
||||
|
||||
<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
|
||||
Dangerous heading
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
|
||||
Changing border color and width
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Opacity
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
|
||||
|
||||
### How it works
|
||||
|
||||
Consider our default `.border-success` utility.
|
||||
|
||||
```css
|
||||
.border-success {
|
||||
--bs-border-opacity: 1;
|
||||
border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
|
||||
}
|
||||
```
|
||||
|
||||
We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
|
||||
|
||||
### Example
|
||||
|
||||
To change that opacity, override `--bs-border-opacity` via custom styles or inline styles.
|
||||
|
||||
{{< example >}}
|
||||
<div class="border border-success p-2 mb-2">This is default success border</div>
|
||||
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>
|
||||
{{< /example >}}
|
||||
|
||||
Or, choose from any of the `.border-opacity` utilities:
|
||||
|
||||
{{< example >}}
|
||||
<div class="border border-success p-2 mb-2">This is default success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
|
||||
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
|
||||
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Width
|
||||
|
||||
{{< example class="bd-example-border-utils" >}}
|
||||
<span class="border border-1"></span>
|
||||
<span class="border border-2"></span>
|
||||
<span class="border border-3"></span>
|
||||
<span class="border border-4"></span>
|
||||
<span class="border border-5"></span>
|
||||
{{< /example >}}
|
||||
|
||||
## Radius
|
||||
|
||||
Add classes to an element to easily round its corners.
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
|
||||
|
||||
{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
|
||||
|
||||
### Sass maps
|
||||
|
||||
Color mode adaptive border colors are also available as a Sass map:
|
||||
|
||||
{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}
|
||||
|
||||
{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}
|
||||
|
||||
### Sass mixins
|
||||
|
||||
{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
Border 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-borders" file="scss/_utilities.scss" >}}
|
||||
|
||||
{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Object fit
|
||||
description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
|
||||
group: utilities
|
||||
toc: true
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
|
||||
|
||||
Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values:
|
||||
|
||||
- `contain`
|
||||
- `cover`
|
||||
- `fill`
|
||||
- `scale` (for scale-down)
|
||||
- `none`
|
||||
|
||||
## Examples
|
||||
|
||||
Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
|
||||
|
||||
{{< example class="d-flex overflow-auto" >}}
|
||||
{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
|
||||
|
||||
{{< example class="d-flex overflow-auto" >}}
|
||||
{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Video
|
||||
|
||||
The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` elements.
|
||||
|
||||
```html
|
||||
<video src="..." class="object-fit-contain" autoplay></video>
|
||||
<video src="..." class="object-fit-cover" autoplay></video>
|
||||
<video src="..." class="object-fit-fill" autoplay></video>
|
||||
<video src="..." class="object-fit-scale" autoplay></video>
|
||||
<video src="..." class="object-fit-none" autoplay></video>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
### Sass utilities API
|
||||
|
||||
Object fit 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-object-fit" file="scss/_utilities.scss" >}}
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
layout: redirect
|
||||
sitemap:
|
||||
disable: true
|
||||
redirect: "/docs/5.3/getting-started/introduction/"
|
||||
---
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Versions
|
||||
description: An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v5.
|
||||
---
|
||||
|
||||
{{< list-versions.inline >}}
|
||||
<div class="row">
|
||||
{{- range $release := sort (index $.Site.Data "docs-versions") "group" "desc" }}
|
||||
<div class="col-md-6 col-lg-4 col-xl mb-4">
|
||||
<h2>{{ $release.group }}</h2>
|
||||
<p>{{ $release.description }}</p>
|
||||
{{- $versions := sort $release.versions "" "desc" -}}
|
||||
{{- range $i, $version := $versions }}
|
||||
{{- $len := len $versions -}}
|
||||
{{ if (eq $i 0) }}<div class="list-group">{{ end }}
|
||||
<a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
|
||||
{{ $version }}
|
||||
{{ if (eq $version $.Site.Params.docs_version) -}}
|
||||
<span class="badge text-bg-primary">Latest</span>
|
||||
{{- end }}
|
||||
</a>
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{< /list-versions.inline >}}
|
||||
@ -1,8 +1,8 @@
|
||||
- breakpoint: xs
|
||||
abbr: ""
|
||||
abbr: ''
|
||||
name: X-Small
|
||||
min-width: 0px
|
||||
container: ""
|
||||
container: ''
|
||||
|
||||
- breakpoint: sm
|
||||
abbr: -sm
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
- name: blue
|
||||
hex: "#0d6efd"
|
||||
hex: '#0d6efd'
|
||||
- name: indigo
|
||||
hex: "#6610f2"
|
||||
hex: '#6610f2'
|
||||
- name: purple
|
||||
hex: "#6f42c1"
|
||||
hex: '#6f42c1'
|
||||
- name: pink
|
||||
hex: "#d63384"
|
||||
hex: '#d63384'
|
||||
- name: red
|
||||
hex: "#dc3545"
|
||||
hex: '#dc3545'
|
||||
- name: orange
|
||||
hex: "#fd7e14"
|
||||
hex: '#fd7e14'
|
||||
- name: yellow
|
||||
hex: "#ffc107"
|
||||
hex: '#ffc107'
|
||||
- name: green
|
||||
hex: "#198754"
|
||||
hex: '#198754'
|
||||
- name: teal
|
||||
hex: "#20c997"
|
||||
hex: '#20c997'
|
||||
- name: cyan
|
||||
hex: "#0dcaf0"
|
||||
hex: '#0dcaf0'
|
||||
- name: white
|
||||
hex: "#fff"
|
||||
hex: '#fff'
|
||||
- name: gray
|
||||
hex: "#6c757d"
|
||||
hex: '#6c757d'
|
||||
- name: gray-dark
|
||||
hex: "#343a40"
|
||||
hex: '#343a40'
|
||||
|
||||
@ -1,56 +1,56 @@
|
||||
- group: v1.x
|
||||
baseurl: "https://getbootstrap.com"
|
||||
description: "Every minor and patch release from v1 is listed below."
|
||||
baseurl: 'https://getbootstrap.com'
|
||||
description: 'Every minor and patch release from v1 is listed below.'
|
||||
versions:
|
||||
- "1.0.0"
|
||||
- "1.1.0"
|
||||
- "1.1.1"
|
||||
- "1.2.0"
|
||||
- "1.3.0"
|
||||
- "1.4.0"
|
||||
- '1.0.0'
|
||||
- '1.1.0'
|
||||
- '1.1.1'
|
||||
- '1.2.0'
|
||||
- '1.3.0'
|
||||
- '1.4.0'
|
||||
|
||||
- group: v2.x
|
||||
baseurl: "https://getbootstrap.com"
|
||||
description: "Every minor and patch release from v2 is listed below."
|
||||
baseurl: 'https://getbootstrap.com'
|
||||
description: 'Every minor and patch release from v2 is listed below.'
|
||||
versions:
|
||||
- "2.0.0"
|
||||
- "2.0.1"
|
||||
- "2.0.2"
|
||||
- "2.0.3"
|
||||
- "2.0.4"
|
||||
- "2.1.0"
|
||||
- "2.1.1"
|
||||
- "2.2.0"
|
||||
- "2.2.1"
|
||||
- "2.2.2"
|
||||
- "2.3.0"
|
||||
- "2.3.1"
|
||||
- "2.3.2"
|
||||
- '2.0.0'
|
||||
- '2.0.1'
|
||||
- '2.0.2'
|
||||
- '2.0.3'
|
||||
- '2.0.4'
|
||||
- '2.1.0'
|
||||
- '2.1.1'
|
||||
- '2.2.0'
|
||||
- '2.2.1'
|
||||
- '2.2.2'
|
||||
- '2.3.0'
|
||||
- '2.3.1'
|
||||
- '2.3.2'
|
||||
|
||||
- group: v3.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Every minor release from v3 is listed below. Last update was v3.4.1."
|
||||
baseurl: 'https://getbootstrap.com/docs'
|
||||
description: 'Every minor release from v3 is listed below. Last update was v3.4.1.'
|
||||
versions:
|
||||
- "3.3"
|
||||
- "3.4"
|
||||
- '3.3'
|
||||
- '3.4'
|
||||
|
||||
- group: v4.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Our previous major release with its minor releases. Last update was v4.6.2."
|
||||
baseurl: 'https://getbootstrap.com/docs'
|
||||
description: 'Our previous major release with its minor releases. Last update was v4.6.2.'
|
||||
versions:
|
||||
- "4.0"
|
||||
- "4.1"
|
||||
- "4.2"
|
||||
- "4.3"
|
||||
- "4.4"
|
||||
- "4.5"
|
||||
- "4.6"
|
||||
- '4.0'
|
||||
- '4.1'
|
||||
- '4.2'
|
||||
- '4.3'
|
||||
- '4.4'
|
||||
- '4.5'
|
||||
- '4.6'
|
||||
|
||||
- group: v5.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Current major release. Last update was v5.3.3."
|
||||
baseurl: 'https://getbootstrap.com/docs'
|
||||
description: 'Current major release. Last update was v5.3.3.'
|
||||
versions:
|
||||
- "5.0"
|
||||
- "5.1"
|
||||
- "5.2"
|
||||
- "5.3"
|
||||
- '5.0'
|
||||
- '5.1'
|
||||
- '5.2'
|
||||
- '5.3'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
- category: Starters
|
||||
external: true
|
||||
description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz."
|
||||
description: 'Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.'
|
||||
examples:
|
||||
- name: CDN starter
|
||||
description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN."
|
||||
@ -21,7 +21,6 @@
|
||||
description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel."
|
||||
url: /examples/tree/main/parcel
|
||||
indexPath: src/index.html
|
||||
indexPath: src/index.html
|
||||
- name: React
|
||||
description: "Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap."
|
||||
url: /examples/tree/main/react-nextjs
|
||||
@ -38,86 +37,86 @@
|
||||
indexPath: src/index.html
|
||||
|
||||
- category: Snippets
|
||||
description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
|
||||
description: 'Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.'
|
||||
examples:
|
||||
- name: Headers
|
||||
description: "Display your branding, navigation, search, and more with these header components"
|
||||
description: 'Display your branding, navigation, search, and more with these header components'
|
||||
- name: Heroes
|
||||
description: "Set the stage on your homepage with heroes that feature clear calls to action."
|
||||
description: 'Set the stage on your homepage with heroes that feature clear calls to action.'
|
||||
- name: Features
|
||||
description: "Explain the features, benefits, or other details in your marketing content."
|
||||
description: 'Explain the features, benefits, or other details in your marketing content.'
|
||||
- name: Sidebars
|
||||
description: "Common navigation patterns ideal for offcanvas or multi-column layouts."
|
||||
description: 'Common navigation patterns ideal for offcanvas or multi-column layouts.'
|
||||
- name: Footers
|
||||
description: "Finish every page strong with an awesome footer, big or small."
|
||||
description: 'Finish every page strong with an awesome footer, big or small.'
|
||||
- name: Dropdowns
|
||||
description: "Enhance your dropdowns with filters, icons, custom styles, and more."
|
||||
description: 'Enhance your dropdowns with filters, icons, custom styles, and more.'
|
||||
- name: List groups
|
||||
description: "Extend list groups with utilities and custom styles for any content."
|
||||
description: 'Extend list groups with utilities and custom styles for any content.'
|
||||
- name: Modals
|
||||
description: "Transform modals to serve any purpose, from feature tours to dialogs."
|
||||
description: 'Transform modals to serve any purpose, from feature tours to dialogs.'
|
||||
- name: Badges
|
||||
description: "Make badges work with custom inner HTML and new looks."
|
||||
description: 'Make badges work with custom inner HTML and new looks.'
|
||||
- name: Breadcrumbs
|
||||
description: "Integrate custom icons and create stepper components."
|
||||
description: 'Integrate custom icons and create stepper components.'
|
||||
- name: Buttons
|
||||
description: "Create custom buttons for just about any use case with utilities."
|
||||
description: 'Create custom buttons for just about any use case with utilities.'
|
||||
- name: Jumbotrons
|
||||
description: "Create modernized versions of the classic Bootstrap component."
|
||||
description: 'Create modernized versions of the classic Bootstrap component.'
|
||||
|
||||
- category: Custom Components
|
||||
description: "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
|
||||
description: 'Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.'
|
||||
examples:
|
||||
- name: Album
|
||||
description: "Simple one-page template for photo galleries, portfolios, and more."
|
||||
description: 'Simple one-page template for photo galleries, portfolios, and more.'
|
||||
- name: Pricing
|
||||
description: "Example pricing page built with Cards and featuring a custom header and footer."
|
||||
description: 'Example pricing page built with Cards and featuring a custom header and footer.'
|
||||
- name: Checkout
|
||||
description: "Custom checkout form showing our form components and their validation features."
|
||||
description: 'Custom checkout form showing our form components and their validation features.'
|
||||
- name: Product
|
||||
description: "Lean product-focused marketing page with extensive grid and image work."
|
||||
description: 'Lean product-focused marketing page with extensive grid and image work.'
|
||||
- name: Cover
|
||||
description: "A one-page template for building simple and beautiful home pages."
|
||||
description: 'A one-page template for building simple and beautiful home pages.'
|
||||
- name: Carousel
|
||||
description: "Customize the navbar and carousel, then add some new components."
|
||||
description: 'Customize the navbar and carousel, then add some new components.'
|
||||
- name: Blog
|
||||
description: "Magazine like blog template with header, navigation, featured content."
|
||||
description: 'Magazine like blog template with header, navigation, featured content.'
|
||||
- name: Dashboard
|
||||
description: "Basic admin dashboard shell with fixed sidebar and navbar."
|
||||
description: 'Basic admin dashboard shell with fixed sidebar and navbar.'
|
||||
- name: Sign-in
|
||||
description: "Custom form layout and design for a simple sign in form."
|
||||
description: 'Custom form layout and design for a simple sign in form.'
|
||||
- name: Sticky footer
|
||||
description: "Attach a footer to the bottom of the viewport when page content is short."
|
||||
description: 'Attach a footer to the bottom of the viewport when page content is short.'
|
||||
- name: Sticky footer navbar
|
||||
description: "Attach a footer to the bottom of the viewport with a fixed top navbar."
|
||||
description: 'Attach a footer to the bottom of the viewport with a fixed top navbar.'
|
||||
- name: Jumbotron
|
||||
description: "Use utilities to recreate and enhance Bootstrap 4's jumbotron."
|
||||
|
||||
- category: Framework
|
||||
description: "Examples that focus on implementing uses of built-in components provided by Bootstrap."
|
||||
description: 'Examples that focus on implementing uses of built-in components provided by Bootstrap.'
|
||||
examples:
|
||||
- name: "Starter template"
|
||||
description: "Nothing but the basics: compiled CSS and JavaScript."
|
||||
- name: 'Starter template'
|
||||
description: 'Nothing but the basics: compiled CSS and JavaScript.'
|
||||
- name: Grid
|
||||
description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
|
||||
description: 'Multiple examples of grid layouts with all four tiers, nesting, and more.'
|
||||
- name: Cheatsheet
|
||||
description: "Kitchen sink of Bootstrap components."
|
||||
description: 'Kitchen sink of Bootstrap components.'
|
||||
- name: Cheatsheet RTL
|
||||
description: "Kitchen sink of Bootstrap components, RTL."
|
||||
description: 'Kitchen sink of Bootstrap components, RTL.'
|
||||
|
||||
- category: Navbars
|
||||
description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
|
||||
description: 'Taking the default navbar component and showing how it can be moved, placed, and extended.'
|
||||
examples:
|
||||
- name: Navbars
|
||||
description: "Demonstration of all responsive and container options for the navbar."
|
||||
description: 'Demonstration of all responsive and container options for the navbar.'
|
||||
- name: Navbars offcanvas
|
||||
description: "Same as the Navbars example, but with our offcanvas component."
|
||||
description: 'Same as the Navbars example, but with our offcanvas component.'
|
||||
- name: Navbar static
|
||||
description: "Single navbar example of a static top navbar along with some additional content."
|
||||
description: 'Single navbar example of a static top navbar along with some additional content.'
|
||||
- name: Navbar fixed
|
||||
description: "Single navbar example with a fixed top navbar along with some additional content."
|
||||
description: 'Single navbar example with a fixed top navbar along with some additional content.'
|
||||
- name: Navbar bottom
|
||||
description: "Single navbar example with a bottom navbar along with some additional content."
|
||||
description: 'Single navbar example with a bottom navbar along with some additional content.'
|
||||
- name: Offcanvas navbar
|
||||
description: "Turn your expandable navbar into a sliding offcanvas menu (doesn't use our offcanvas component)."
|
||||
|
||||
@ -125,18 +124,18 @@
|
||||
description: "See Bootstrap's RTL version in action with these modified Custom Components examples."
|
||||
examples:
|
||||
- name: Album RTL
|
||||
description: "Simple one-page template for photo galleries, portfolios, and more."
|
||||
description: 'Simple one-page template for photo galleries, portfolios, and more.'
|
||||
- name: Checkout RTL
|
||||
description: "Custom checkout form showing our form components and their validation features."
|
||||
description: 'Custom checkout form showing our form components and their validation features.'
|
||||
- name: Carousel RTL
|
||||
description: "Customize the navbar and carousel, then add some new components."
|
||||
description: 'Customize the navbar and carousel, then add some new components.'
|
||||
- name: Blog RTL
|
||||
description: "Magazine like blog template with header, navigation, featured content."
|
||||
description: 'Magazine like blog template with header, navigation, featured content.'
|
||||
- name: Dashboard RTL
|
||||
description: "Basic admin dashboard shell with fixed sidebar and navbar."
|
||||
description: 'Basic admin dashboard shell with fixed sidebar and navbar.'
|
||||
|
||||
- category: Integrations
|
||||
description: "Integrations with external libraries."
|
||||
description: 'Integrations with external libraries.'
|
||||
examples:
|
||||
- name: "Masonry"
|
||||
description: "Combine the powers of the Bootstrap grid and the Masonry layout."
|
||||
- name: 'Masonry'
|
||||
description: 'Combine the powers of the Bootstrap grid and the Masonry layout.'
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
- name: 100
|
||||
hex: "#f8f9fa"
|
||||
hex: '#f8f9fa'
|
||||
- name: 200
|
||||
hex: "#e9ecef"
|
||||
hex: '#e9ecef'
|
||||
- name: 300
|
||||
hex: "#dee2e6"
|
||||
hex: '#dee2e6'
|
||||
- name: 400
|
||||
hex: "#ced4da"
|
||||
hex: '#ced4da'
|
||||
- name: 500
|
||||
hex: "#adb5bd"
|
||||
hex: '#adb5bd'
|
||||
- name: 600
|
||||
hex: "#868e96"
|
||||
hex: '#868e96'
|
||||
- name: 700
|
||||
hex: "#495057"
|
||||
hex: '#495057'
|
||||
- name: 800
|
||||
hex: "#343a40"
|
||||
hex: '#343a40'
|
||||
- name: 900
|
||||
hex: "#212529"
|
||||
hex: '#212529'
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
- name: primary
|
||||
hex: "#0d6efd"
|
||||
hex: '#0d6efd'
|
||||
- name: secondary
|
||||
hex: "#6c757d"
|
||||
hex: '#6c757d'
|
||||
- name: success
|
||||
hex: "#28a745"
|
||||
hex: '#28a745'
|
||||
- name: danger
|
||||
hex: "#dc3545"
|
||||
hex: '#dc3545'
|
||||
- name: warning
|
||||
hex: "#ffc107"
|
||||
hex: '#ffc107'
|
||||
contrast_color: dark
|
||||
- name: info
|
||||
hex: "#17a2b8"
|
||||
hex: '#17a2b8'
|
||||
contrast_color: dark
|
||||
- name: light
|
||||
hex: "#f8f9fa"
|
||||
hex: '#f8f9fa'
|
||||
contrast_color: dark
|
||||
- name: dark
|
||||
hex: "#343a40"
|
||||
hex: '#343a40'
|
||||
contrast_color: white
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
code: zh-CN
|
||||
description: Bootstrap 5 中文文档
|
||||
url: https://v5.bootcss.com/
|
||||
|
||||
|
||||
- name: Spanish
|
||||
code: es
|
||||
description: Bootstrap 5 Español
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{{ define "body_override" }}<body class="d-flex flex-column min-vh-100">{{ end }}
|
||||
{{ define "main" }}
|
||||
<main class="my-auto p-5" id="content">
|
||||
{{ .Content }}
|
||||
</main>
|
||||
{{ end }}
|
||||
@ -1,7 +0,0 @@
|
||||
{{- $id := .Anchor | safeURL -}}
|
||||
{{- $text := .Text | safeHTML -}}
|
||||
<h{{ .Level }} id="{{ $id }}">{{ $text }}
|
||||
{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
|
||||
<a class="anchor-link" href="#{{ $id }}" aria-label="Link to this section: {{ $text }}"></a>
|
||||
{{- end -}}
|
||||
</h{{ .Level }}>
|
||||
@ -1,8 +0,0 @@
|
||||
{{- $originalSrc := .Destination | safeURL -}}
|
||||
{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
|
||||
{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
|
||||
{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
|
||||
{{- $config := imageConfig $localImgPath -}}
|
||||
{{- $classes := "d-block img-fluid" -}}
|
||||
|
||||
<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">
|
||||
@ -1,21 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
{{ partial "header" . }}
|
||||
</head>
|
||||
{{ block "body_override" . }}<body>{{ end }}
|
||||
{{ partial "skippy" . }}
|
||||
{{ partial "icons" . }}
|
||||
|
||||
{{ partial "docs-navbar" . }}
|
||||
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer" . }}
|
||||
{{ partial "scripts" . }}
|
||||
|
||||
{{ block "footer" . }}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,73 +0,0 @@
|
||||
{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
|
||||
{{ define "main" }}
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<div class="mb-3 mb-md-0 d-flex text-nowrap">
|
||||
{{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
|
||||
{{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added.version }}</small>
|
||||
{{- end -}}
|
||||
<a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
|
||||
</div>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
{{ partial "ads" . }}
|
||||
</div>
|
||||
|
||||
{{ if (eq .Page.Params.toc true) }}
|
||||
<div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
|
||||
<button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
|
||||
On this page
|
||||
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
|
||||
</button>
|
||||
<strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong>
|
||||
<hr class="d-none d-md-block my-2 ms-3">
|
||||
<div class="collapse bd-toc-collapse" id="tocContents">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="bd-content ps-lg-2">
|
||||
{{ if .Page.Params.sections }}
|
||||
<div class="row g-3">
|
||||
{{ range .Page.Params.sections }}
|
||||
<div class="col-md-6">
|
||||
<a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
|
||||
<strong class="d-block h5 mb-0">{{ .title }}</strong>
|
||||
<span class="text-secondary">{{ .description }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ define "footer" }}
|
||||
{{ range .Page.Params.extra_js -}}
|
||||
<script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script>
|
||||
{{- end -}}
|
||||
<div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div>
|
||||
{{ end }}
|
||||
@ -1,131 +0,0 @@
|
||||
<!doctype html>
|
||||
<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="{{ .Site.Params.authors }}">
|
||||
<meta name="generator" content="Hugo {{ hugo.Version }}">
|
||||
<title>{{ .Page.Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}</title>
|
||||
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
{{ with .Params.robots -}}
|
||||
<meta name="robots" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
|
||||
<script src="{{ $colorModeJS }}"></script>
|
||||
|
||||
{{ partial "stylesheet" . }}
|
||||
{{ partial "favicons" . }}
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: solid rgba(0, 0, 0, .15);
|
||||
border-width: 1px 0;
|
||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--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: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{ range .Page.Params.extra_css -}}
|
||||
{{ "<!-- Custom styles for this template -->" | safeHTML }}
|
||||
<link href="{{ . }}" rel="stylesheet">
|
||||
{{- end }}
|
||||
</head>
|
||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
||||
{{ partial "examples/icons" . }}
|
||||
|
||||
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
|
||||
{{ partial "theme-toggler" . }}
|
||||
</div>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
{{- if hugo.IsProduction -}}
|
||||
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
|
||||
{{- else -}}
|
||||
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
|
||||
{{- end }}
|
||||
|
||||
{{ range .Page.Params.extra_js -}}
|
||||
<script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
|
||||
{{- end -}}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,16 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
{{ partial "home/masthead" . }}
|
||||
<div class="container-xxl bd-gutter masthead-followup">
|
||||
{{ partial "home/get-started" . }}
|
||||
{{ partial "home/customize" . }}
|
||||
{{ partial "home/css-variables" . }}
|
||||
{{ partial "home/components-utilities" . }}
|
||||
{{ partial "home/plugins" . }}
|
||||
{{ partial "home/icons" . }}
|
||||
{{ partial "home/themes" . }}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
@ -1 +0,0 @@
|
||||
{{ partial "redirect" (.Page.Params.redirect | absURL) }}
|
||||
@ -1,37 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<header class="py-5 border-bottom">
|
||||
<div class="container-xxl bd-gutter pt-md-1 pb-md-4">
|
||||
<div class="row">
|
||||
<div class="col-xl-8">
|
||||
<h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
{{ if eq .Title "Examples" -}}
|
||||
<div class="d-flex flex-column flex-md-row gap-3">
|
||||
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
|
||||
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
||||
Download examples
|
||||
</a>
|
||||
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary">
|
||||
Download source code
|
||||
</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
|
||||
{{ partial "ads" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="bd-content order-1 py-5" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
{{ .Content }}
|
||||
|
||||
{{ if eq .Title "Examples" -}}
|
||||
{{ partial "examples/main" . }}
|
||||
{{ partial "examples/bs-themes" . }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
@ -1 +0,0 @@
|
||||
{{ partial "redirect" .Permalink }}
|
||||
@ -1 +0,0 @@
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
@ -1 +0,0 @@
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="{{ .Site.Params.analytics.fathom_site }}"></script>
|
||||
@ -1,92 +0,0 @@
|
||||
<header class="navbar navbar-expand-lg bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
{{- if eq .Layout "docs" }}
|
||||
<div class="bd-navbar-toggle">
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
|
||||
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
|
||||
<span class="d-none fs-6 pe-1">Browse</span>
|
||||
</button>
|
||||
</div>
|
||||
{{- else }}
|
||||
<div class="d-lg-none" style="width: 4.25rem;"></div>
|
||||
{{- end }}
|
||||
|
||||
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
|
||||
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
|
||||
</a>
|
||||
|
||||
<div class="d-flex">
|
||||
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
|
||||
|
||||
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body p-4 pt-0 p-lg-0">
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="d-lg-none text-white-50">
|
||||
|
||||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
|
||||
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
||||
<small class="d-lg-none ms-2">GitHub</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
|
||||
{{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
|
||||
{{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
|
||||
<small class="d-lg-none ms-2">Open Collective</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none my-2 text-white-50">
|
||||
</li>
|
||||
|
||||
{{ partial "docs-versions" . }}
|
||||
|
||||
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
|
||||
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
|
||||
<hr class="d-lg-none my-2 text-white-50">
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
{{ partial "theme-toggler" . }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@ -1,47 +0,0 @@
|
||||
<nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation">
|
||||
{{- $url := split .Permalink "/" -}}
|
||||
{{- $page_slug := index $url (sub (len $url) 2) -}}
|
||||
|
||||
<ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
|
||||
{{- range $group := .Site.Data.sidebar -}}
|
||||
{{- $link := $group.title -}}
|
||||
{{- $link_slug := $link | urlize -}}
|
||||
|
||||
{{- if $group.pages -}}
|
||||
{{- $link = index $group.pages 0 -}}
|
||||
{{- $link_slug = $link.title | urlize -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $group_slug := $group.title | urlize -}}
|
||||
{{- $is_active_group := eq $.Page.Params.group $group_slug -}}
|
||||
|
||||
{{- if $group.pages }}
|
||||
<li class="bd-links-group py-2">
|
||||
<strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
|
||||
{{- if $group.icon }}
|
||||
<svg class="bi me-2"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
|
||||
{{- end }}
|
||||
{{ $group.title }}
|
||||
</strong>
|
||||
|
||||
<ul class="list-unstyled fw-normal pb-2 small">
|
||||
{{- range $doc := $group.pages -}}
|
||||
{{- $doc_slug := $doc.title | urlize -}}
|
||||
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
|
||||
{{- $href := urls.JoinPath "/docs" $.Site.Params.docs_version $group_slug $doc_slug "/" }}
|
||||
<li><a href="{{ $href }}" class="bd-links-link d-inline-block rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</li>
|
||||
{{- else }}
|
||||
<li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
|
||||
<li class="bd-links-span-all">
|
||||
{{- $href := urls.JoinPath "/docs" $.Site.Params.docs_version $group_slug "/" }}
|
||||
<a href="{{ $href }}" class="bd-links-link d-inline-block rounded small{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</nav>
|
||||
@ -1,58 +0,0 @@
|
||||
{{- $url := split .Permalink "/" -}}
|
||||
{{- $page_version := index $url (sub (len $url) 4) -}}
|
||||
{{- $group_slug := index $url (sub (len $url) 3) -}}
|
||||
{{- $page_slug := index $url (sub (len $url) 2) -}}
|
||||
|
||||
{{- $versions_link := "" -}}
|
||||
{{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}}
|
||||
{{- $versions_link = urls.JoinPath $group_slug $page_slug "/" -}}
|
||||
{{- else if (eq .Layout "single") -}}
|
||||
{{- $versions_link = urls.JoinPath $page_slug "/" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $added_in_51 := eq (string .Page.Params.added.version) "5.1" -}}
|
||||
{{- $added_in_52 := eq (string .Page.Params.added.version) "5.2" -}}
|
||||
{{- $added_in_53 := eq (string .Page.Params.added.version) "5.3" -}}
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
|
||||
Latest ({{ .Site.Params.docs_version }}.x)
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{{- if ($added_in_53) }}
|
||||
<div class="dropdown-item disabled">v5.2.3</div>
|
||||
{{- else }}
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/{{ $versions_link }}">v5.2.3</a>
|
||||
{{- end }}
|
||||
</li>
|
||||
<li>
|
||||
{{- if (or $added_in_52 $added_in_53) }}
|
||||
<div class="dropdown-item disabled">v5.1.3</div>
|
||||
{{- else }}
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $versions_link }}">v5.1.3</a>
|
||||
{{- end }}
|
||||
</li>
|
||||
<li>
|
||||
{{- if (or $added_in_51 $added_in_52 $added_in_53) }}
|
||||
<div class="dropdown-item disabled">v5.0.2</div>
|
||||
{{- else }}
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $versions_link }}">v5.0.2</a>
|
||||
{{- end }}
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><h6 class="dropdown-header">Previous releases</h6></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -1,17 +0,0 @@
|
||||
<hr class="my-5">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
|
||||
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
|
||||
</div>
|
||||
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
|
||||
<p class="col-md-10 col-lg-8 mx-auto lead">
|
||||
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
||||
</p>
|
||||
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
|
||||
</div>
|
||||
{{ partial "responsive-img" (dict "context" .
|
||||
"imgPath" "/assets/img/bootstrap-themes-collage.png"
|
||||
"alt" "Bootstrap Themes"
|
||||
"classes" "d-block mt-3") }}
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<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="circle-half" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
||||
<path d="M10.794 3.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-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.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-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,63 +0,0 @@
|
||||
{{ 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="{{ urls.JoinPath $.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 -}}
|
||||
<article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
|
||||
<svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
||||
<div>
|
||||
<h3 class="h5 mb-1">
|
||||
<a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener" id="starter-{{ $i }}">
|
||||
{{ $example.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
<p>
|
||||
{{- $indexPath := default "index.html" $example.indexPath -}}
|
||||
{{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
|
||||
<a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener" aria-labelledby="edit-{{ $i }} starter-{{ $i }}">
|
||||
<svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
|
||||
<span id="edit-{{ $i }}">Edit in StackBlitz</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
{{ else -}}
|
||||
<article class="col-sm-6 col-md-3 mb-3">
|
||||
{{- $exampleNameUrlized := $example.name | urlize -}}
|
||||
{{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
|
||||
<a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
||||
{{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}}
|
||||
{{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}}
|
||||
{{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s@2x.png" $exampleNameUrlized) -}}
|
||||
{{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
|
||||
<img class="img-thumbnail mb-3"
|
||||
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
|
||||
src="{{ $imgPath }}"
|
||||
alt=""
|
||||
width="{{ .Width }}"
|
||||
height="{{ .Height }}"
|
||||
loading="lazy">
|
||||
{{- end }}
|
||||
<h3 class="h5 mb-1">
|
||||
{{ $example.name }}
|
||||
</h3>
|
||||
</a>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
</article>
|
||||
{{- end }}
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end -}}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
@ -1,7 +0,0 @@
|
||||
<link rel="apple-touch-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
|
||||
<link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#712cf9">
|
||||
@ -1,59 +0,0 @@
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
|
||||
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 mb-3">
|
||||
<a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap">
|
||||
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
|
||||
<span class="fs-5">Bootstrap</span>
|
||||
</a>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
<h5>Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/">Home</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener">Swag Store</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Guides</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
|
||||
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Projects</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples" target="_blank" rel="noopener">Examples repo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
<h5>Community</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener">Issues</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a></li>
|
||||
<li class="mb-2"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">Open Collective</a></li>
|
||||
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,3 +0,0 @@
|
||||
<hr class="my-5">
|
||||
|
||||
_See something wrong or out of date here? Please [open an issue on GitHub]({{ .Site.Params.repo }}/issues/new/choose). Need help troubleshooting? [Search or start a discussion]({{ .Site.Params.repo }}/discussions) on GitHub._
|
||||
@ -1,28 +0,0 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
|
||||
<meta name="author" content="{{ .Site.Params.authors }}">
|
||||
<meta name="generator" content="Hugo {{ hugo.Version }}">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">
|
||||
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
{{ if (ne .Page.Layout "examples") -}}
|
||||
<link rel="preconnect" href="https://{{ .Site.Params.algolia.appId | lower }}-dsn.algolia.net" crossorigin>
|
||||
{{- end }}
|
||||
|
||||
<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
|
||||
|
||||
{{ with .Params.robots -}}
|
||||
<meta name="robots" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}}
|
||||
<script src="{{ $colorModeJS }}"></script>
|
||||
|
||||
{{ partial "stylesheet" . }}
|
||||
{{ partial "favicons" . }}
|
||||
{{ partial "social" . }}
|
||||
{{ partial "analytics" . }}
|
||||
@ -1,88 +0,0 @@
|
||||
<section class="pb-md-5 mb-5">
|
||||
<div class="col-lg-8 mb-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
</div>
|
||||
<svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility API</h2>
|
||||
<p class="lead fw-normal">
|
||||
New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row gx-md-5">
|
||||
<div class="col-lg-6">
|
||||
<h3 class="fw-semibold">Quickly customize components</h3>
|
||||
<p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href="/docs/{{ .Site.Params.docs_version }}/utilities/position/">positioning</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/sizing/">sizing</a> to <a href="/docs/{{ .Site.Params.docs_version }}/utilities/colors/">colors</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/shadows/">effects</a>. Mix them with CSS variable overrides for even more control.</p>
|
||||
<div class="p-4 border rounded-3 mb-4">
|
||||
<ul class="nav nav-pills mb-4" id="pillNav" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ highlight (printf `<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
|
||||
</li>
|
||||
</ul>
|
||||
`) "html" "" }}
|
||||
<p class="d-flex mb-md-0">
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
|
||||
Explore customized components
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="fw-semibold">Create and extend utilities</h3>
|
||||
<p>Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.</p>
|
||||
{{ highlight (printf `@import "bootstrap/scss/bootstrap";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
class: cursor,
|
||||
responsive: true,
|
||||
values: auto pointer grab,
|
||||
)
|
||||
)
|
||||
);
|
||||
`) "scss" "" }}
|
||||
|
||||
<p class="d-flex mb-md-0">
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
|
||||
Explore the utility API
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,58 +0,0 @@
|
||||
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you want</h2>
|
||||
<p class="lead fw-normal">
|
||||
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
|
||||
</p>
|
||||
<p class="d-flex justify-content-md-center lead fw-normal">
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
|
||||
Read installation docs
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
|
||||
<div class="col-lg-6 py-lg-4 pe-lg-5">
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
||||
<h3 class="fw-semibold">Install via package manager</h3>
|
||||
<p class="pe-lg-5">
|
||||
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
|
||||
</p>
|
||||
{{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }}
|
||||
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
|
||||
<p>
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
<h3 class="fw-semibold">Include via CDN</h3>
|
||||
<p class="pe-lg-5">
|
||||
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
|
||||
</p>
|
||||
{{ highlight (printf (`<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
|
||||
{{ highlight (printf (`<script src="%s" integrity=%q crossorigin="anonymous"></script>`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
<h4 class="fw-semibold">Read our getting started guides</h4>
|
||||
<p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
|
||||
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">
|
||||
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
|
||||
<span class="text-body-secondary">Webpack</span>
|
||||
</a>
|
||||
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">
|
||||
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
|
||||
<span class="text-body-secondary">Parcel</span>
|
||||
</a>
|
||||
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">
|
||||
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
|
||||
<span class="text-body-secondary">Vite</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,23 +0,0 @@
|
||||
<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
|
||||
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap Icons</h2>
|
||||
<p class="lead fw-normal">
|
||||
<a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
|
||||
</p>
|
||||
<p class="d-flex lead fw-normal mb-md-0">
|
||||
<a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
|
||||
Get Bootstrap Icons
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{{ partial "responsive-img" (dict "context" .
|
||||
"imgPath" "/assets/img/bootstrap-icons.png"
|
||||
"alt" "Bootstrap Icons"
|
||||
"classes" "d-block mt-3") }}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,38 +0,0 @@
|
||||
<div class="bd-masthead mb-3" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
|
||||
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
|
||||
Get Security Updates for Bootstrap 3 & 4
|
||||
<svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
{{ partial "responsive-img" (dict "context" .
|
||||
"imgPath" "/assets/brand/bootstrap-logo-shadow.png"
|
||||
"alt" "Bootstrap"
|
||||
"classes" "d-none d-sm-block mb-3"
|
||||
"lazyload" false) }}
|
||||
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with Bootstrap</h1>
|
||||
<p class="lead mb-4">
|
||||
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
|
||||
<div class="d-inline-block v-align-middle fs-5">
|
||||
{{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }}
|
||||
</div>
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
|
||||
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-body-secondary mb-0">
|
||||
Currently <strong>v{{ .Site.Params.current_version }}</strong>
|
||||
<span class="px-1">·</span>
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
|
||||
<span class="px-1">·</span>
|
||||
<a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
|
||||
</p>
|
||||
{{ partial "ads" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
|
||||
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
|
||||
<p class="lead fw-normal">
|
||||
Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
||||
</p>
|
||||
<p class="d-flex lead fw-normal mb-md-0">
|
||||
<a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
|
||||
Browse Bootstrap Themes
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{{ partial "responsive-img" (dict "context" .
|
||||
"imgPath" "/assets/img/bootstrap-themes.png"
|
||||
"alt" "Bootstrap Themes"
|
||||
"classes" "d-block mt-3") }}
|
||||
</div>
|
||||
</section>
|
||||
@ -1,84 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</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 8"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
<symbol id="box-seam" viewBox="0 0 16 16">
|
||||
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
|
||||
</symbol>
|
||||
<symbol id="braces" viewBox="0 0 16 16">
|
||||
<path d="M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6zM13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6z"/>
|
||||
</symbol>
|
||||
<symbol id="braces-asterisk" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
|
||||
</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="chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
|
||||
</symbol>
|
||||
<symbol id="clipboard" viewBox="0 0 16 16">
|
||||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="code" viewBox="0 0 16 16">
|
||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
|
||||
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
|
||||
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
|
||||
</symbol>
|
||||
<symbol id="globe2" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
|
||||
</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="lightning-charge-fill" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="magic" viewBox="0 0 16 16">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
|
||||
</symbol>
|
||||
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
|
||||
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.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-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
||||
<path d="M10.794 3.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-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.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-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
|
||||
</symbol>
|
||||
<symbol id="palette2" viewBox="0 0 16 16">
|
||||
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
|
||||
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
|
||||
</symbol>
|
||||
<symbol id="plugin" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
|
||||
</symbol>
|
||||
<symbol id="three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="ui-radios" viewBox="0 0 16 16">
|
||||
<path d="M7 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zM0 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm7-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1zm0-5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zM3 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 13 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 118 94" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</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"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
|
||||
<path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 483 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 495 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 512 499.36" role="img"><title>{{ with .title }}{{ . }}{{ else }}GitHub{{ end }}</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 447 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }} fill="currentColor" fill-rule="evenodd"{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 40 41" role="img"><title>{{ with .title }}{{ . }}{{ else }}Open Collective{{ end }}</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 561 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 512 416.32" role="img"><title>{{ with .title }}{{ . }}{{ else }}Twitter{{ end }}</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
|
Before Width: | Height: | Size: 838 B |
@ -1,11 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ . }}</title>
|
||||
<link rel="canonical" href="{{ . }}">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta http-equiv="refresh" content="0; url={{ . }}">
|
||||
</head>
|
||||
</html>
|
||||
@ -1,22 +0,0 @@
|
||||
{{- /*
|
||||
Accepts context, classes, imgPath, alt and lazyload
|
||||
*/ -}}
|
||||
|
||||
{{- $lazy := .lazyload | default true -}}
|
||||
{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
|
||||
|
||||
{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
|
||||
{{- $basename := path.BaseName .imgPath -}}
|
||||
{{- $ext := path.Ext .imgPath -}}
|
||||
{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
|
||||
{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
|
||||
|
||||
{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
|
||||
<img class="{{ delimit $classes " " }}"
|
||||
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
|
||||
src="{{ $imgPath }}"
|
||||
alt="{{ $.alt }}"{{ if eq $lazy true }}
|
||||
loading="lazy"{{ end }}
|
||||
width="{{ .Width }}"
|
||||
height="{{ .Height }}">
|
||||
{{- end }}
|
||||
@ -1,40 +0,0 @@
|
||||
{{ if hugo.IsProduction -}}
|
||||
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
|
||||
{{ else -}}
|
||||
<script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
|
||||
{{- end }}
|
||||
|
||||
{{- $esbuildOptions := dict "target" "es2019" -}}
|
||||
{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}}
|
||||
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}}
|
||||
{{- end }}
|
||||
|
||||
{{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
|
||||
<script defer src="{{ $applicationJs.RelPermalink }}"></script>
|
||||
|
||||
{{- if (ne .Page.Layout "examples") -}}
|
||||
{{- $esbuildParams := dict
|
||||
"apiKey" .Site.Params.algolia.apiKey
|
||||
"appId" .Site.Params.algolia.appId
|
||||
"indexName" .Site.Params.algolia.indexName
|
||||
-}}
|
||||
{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
|
||||
{{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }}
|
||||
<script defer src="{{ $searchJs.RelPermalink }}"></script>
|
||||
{{- end -}}
|
||||
|
||||
{{ if eq .Page.Layout "docs" -}}
|
||||
{{- /* Disable minify options for snippets.js so that the file's readable on StackBlitz */ -}}
|
||||
{{- $snippetsFile := resources.Get "js/snippets.js" | js.Build (merge $esbuildOptions (dict "minify" "false")) -}}
|
||||
{{- $esbuildParams := dict
|
||||
"cssCdn" .Site.Params.cdn.css
|
||||
"jsBundleCdn" .Site.Params.cdn.js_bundle
|
||||
"docsVersion" .Site.Params.docs_version
|
||||
"jsSnippetFile" $snippetsFile.Content
|
||||
-}}
|
||||
{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
|
||||
{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
|
||||
<script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
|
||||
{{- end -}}
|
||||
@ -1,8 +0,0 @@
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
{{ if (eq .Page.Layout "docs") -}}
|
||||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,27 +0,0 @@
|
||||
{{- $pageTitle := .Title | markdownify -}}
|
||||
{{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}}
|
||||
{{- $socialImagePath := urls.JoinPath "/docs" .Site.Params.docs_version "assets" -}}
|
||||
|
||||
{{- if .Page.Params.thumbnail -}}
|
||||
{{- $socialImagePath = urls.JoinPath $socialImagePath "img" .Page.Params.thumbnail -}}
|
||||
{{- else -}}
|
||||
{{- $socialImagePath = urls.JoinPath $socialImagePath "brand/bootstrap-social.png" -}}
|
||||
{{- end -}}
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
|
||||
<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
|
||||
<meta name="twitter:title" content="{{ $pageTitle }}">
|
||||
<meta name="twitter:description" content="{{ $pageDescription }}">
|
||||
<meta name="twitter:image" content="{{ $socialImagePath | absURL }}">
|
||||
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
<meta property="og:title" content="{{ $pageTitle }}">
|
||||
<meta property="og:description" content="{{ $pageDescription }}">
|
||||
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
|
||||
<meta property="og:image" content="{{ $socialImagePath | absURL }}">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
{{ with (imageConfig (path.Join "site/static" $socialImagePath)) -}}
|
||||
<meta property="og:image:width" content="{{ .Width }}">
|
||||
<meta property="og:image:height" content="{{ .Height }}">
|
||||
{{- end }}
|
||||
@ -1,27 +0,0 @@
|
||||
{{ if hugo.IsProduction -}}
|
||||
{{ if eq .Page.Params.direction "rtl" -}}
|
||||
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }}>
|
||||
{{- else -}}
|
||||
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }}>
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
|
||||
{{- end }}
|
||||
|
||||
{{- if (ne .Page.Layout "examples") }}
|
||||
{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}}
|
||||
{{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
|
||||
|
||||
{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}}
|
||||
{{- $targetSearchCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/search.css" -}}
|
||||
|
||||
{{ if hugo.IsProduction -}}
|
||||
{{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $docsCss := resources.Get "scss/docs.scss" | toCSS (merge (dict "targetPath" $targetDocsCssPath) $sassOptions) | postCSS $postcssOptions -}}
|
||||
{{- $searchCss := resources.Get "scss/search.scss" | toCSS (merge (dict "targetPath" $targetSearchCssPath) $sassOptions) | postCSS $postcssOptions -}}
|
||||
|
||||
<link href="{{ $docsCss.RelPermalink }}" rel="stylesheet">
|
||||
<link href="{{ $searchCss.RelPermalink }}" rel="stylesheet">
|
||||
{{- end }}
|
||||
@ -1,27 +0,0 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1,34 +0,0 @@
|
||||
{{- $isExamples := eq .Layout "examples" -}}
|
||||
<button class="btn {{ if $isExamples }}btn-bd-primary{{ else }}btn-link nav-link px-0 px-lg-2{{ end }} py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
{{ if not $isExamples }}data-bs-display="static"{{ end }}
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,11 +0,0 @@
|
||||
# www.robotstxt.org
|
||||
|
||||
{{- $isNetlify := eq (getenv "NETLIFY") "true" -}}
|
||||
{{- $allowCrawling := and (not $isNetlify) hugo.IsProduction -}}
|
||||
|
||||
{{ if $allowCrawling }}
|
||||
# Allow crawling of all content
|
||||
{{- end }}
|
||||
User-agent: *
|
||||
Disallow:{{ if not $allowCrawling }} /{{ end }}
|
||||
Sitemap: {{ "/sitemap.xml" | absURL }}
|
||||
@ -1,5 +0,0 @@
|
||||
{{- /* Outputs badge to identify the first version something was added */ -}}
|
||||
|
||||
{{- $version := .Get 0 -}}
|
||||
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v{{ $version }}</small>
|
||||
@ -1,9 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `bs-table "class class-foo"`, where class can be any string
|
||||
*/ -}}
|
||||
|
||||
{{- $css_class := .Get 0 | default "table" -}}
|
||||
{{- $html_table := .Inner | markdownify -}}
|
||||
{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
|
||||
{{- $html_table = replace $html_table "</table>" "</table></div>" -}}
|
||||
{{- $html_table | safeHTML -}}
|
||||
@ -1,9 +0,0 @@
|
||||
{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}}
|
||||
|
||||
{{- $component := .Get 0 -}}
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<p>
|
||||
<strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding <code>.{{ $component }}-dark</code>, set <code>data-bs-theme="dark"</code> on the root element, a parent wrapper, or the component itself.
|
||||
</p>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `callout "type"`, where `type` is one of info (default), danger, or warning
|
||||
*/ -}}
|
||||
|
||||
{{- $css_class := .Get 0 | default "info" -}}
|
||||
|
||||
<div class="bd-callout bd-callout-{{ $css_class }}">
|
||||
{{ .Inner | markdownify }}
|
||||
</div>
|
||||
@ -1,5 +0,0 @@
|
||||
{{- /* Outputs badge to identify the version something was deprecated */ -}}
|
||||
|
||||
{{- $version := .Get 0 -}}
|
||||
|
||||
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>
|
||||
@ -1,2 +0,0 @@
|
||||
{{- $pageToReference := path.Join "docs" $.Site.Params.docs_version (.Get 0) -}}
|
||||
{{- relref . $pageToReference | relURL -}}
|
||||
@ -1,49 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `example args`
|
||||
|
||||
`args` are all optional and can be one of the following:
|
||||
* id: the `div`'s id - default: ""
|
||||
* class: any extra class(es) to be added to the `div` - default: ""
|
||||
* lang: language used to display the code - default: "html"
|
||||
* show_markup: if the markup should be output in the HTML - default: `true`
|
||||
* show_preview: if the preview should be output in the HTML - default: `true`
|
||||
* stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
|
||||
*/ -}}
|
||||
|
||||
{{- $id := .Get "id" -}}
|
||||
{{- $class := .Get "class" -}}
|
||||
{{- $lang := .Get "lang" | default "html" -}}
|
||||
{{- $show_markup := .Get "show_markup" | default true -}}
|
||||
{{- $show_preview := .Get "show_preview" | default true -}}
|
||||
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
|
||||
|
||||
{{- $content := .Inner -}}
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet">
|
||||
{{- if eq $show_preview true }}
|
||||
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
|
||||
{{ $content }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if eq $show_markup true -}}
|
||||
{{- if eq $show_preview true -}}
|
||||
<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>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
|
||||
</button>
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
|
||||
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
|
||||
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
|
||||
{{- highlight (trim $content "\n") $lang "" -}}
|
||||
{{- end }}
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
{{- /* Usage: js-dismiss "ComponentName" */ -}}
|
||||
|
||||
{{- $name := .Get 0 -}}
|
||||
|
||||
Dismissal can be achieved with the `data-bs-dismiss` attribute on a button **within the {{ $name }}** as demonstrated below:
|
||||
|
||||
```html
|
||||
<button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" aria-label="Close"></button>
|
||||
```
|
||||
|
||||
or on a button **outside the {{ $name }}** using the additional `data-bs-target` as demonstrated below:
|
||||
|
||||
```html
|
||||
<button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" data-bs-target="#my-{{ $name }}" aria-label="Close"></button>
|
||||
```
|
||||
@ -1,70 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `js-docs name="name" file="file/_location.js`
|
||||
|
||||
Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"`
|
||||
comments in the docs.
|
||||
*/ -}}
|
||||
|
||||
{{- $name := .Get "name" -}}
|
||||
{{- $file := .Get "file" -}}
|
||||
|
||||
{{- /* If any parameters are missing, print an error and exit */ -}}
|
||||
{{- if or (not $name) (not $file) -}}
|
||||
{{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
|
||||
{{- else -}}
|
||||
{{- $capture_start := printf "// js-docs-start %s\n" $name -}}
|
||||
{{- $capture_end := printf "// js-docs-end %s\n" $name -}}
|
||||
{{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
|
||||
{{- $regex_nested := printf `// js-docs-.*\n` -}}
|
||||
|
||||
{{- $match := findRE $regex (readFile $file) -}}
|
||||
{{- $match = index $match 0 -}}
|
||||
|
||||
{{- if not $match -}}
|
||||
{{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $match = replace $match $capture_start "" -}}
|
||||
{{- $match = replace $match $capture_end "" -}}
|
||||
|
||||
{{- $match_nested := findRE $regex_nested $match -}}
|
||||
{{- range $to_remove := $match_nested -}}
|
||||
{{- $match = replace $match $to_remove "" -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
|
||||
{{- $file -}}
|
||||
</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{- $unindent := 0 -}}
|
||||
{{- $found := false -}}
|
||||
{{- $first_line:= index (split $match "\n") 0 -}}
|
||||
{{- range $char := split $first_line "" -}}
|
||||
{{- if and (eq $char " ") (not $found) -}}
|
||||
{{- $unindent = add $unindent 1 -}}
|
||||
{{- else -}}
|
||||
{{- $found = true -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- $output := "" -}}
|
||||
{{- if (gt $unindent 0) -}}
|
||||
{{- $prefix := (strings.Repeat $unindent " ") -}}
|
||||
{{- range $line := split $match "\n" -}}
|
||||
{{- $line = strings.TrimPrefix $prefix $line -}}
|
||||
{{ $output = printf "%s%s\n" $output $line }}
|
||||
{{- end -}}
|
||||
{{- $output = chomp $output -}}
|
||||
{{- else -}}
|
||||
{{- $output = $match -}}
|
||||
{{- end -}}
|
||||
{{- highlight $output "js" "" -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
@ -1 +0,0 @@
|
||||
{{- .Inner | markdownify -}}
|
||||
@ -1,14 +0,0 @@
|
||||
{{- /*
|
||||
Work around wrong escapes in integrity attributes.
|
||||
Original: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/param.html
|
||||
*/ -}}
|
||||
|
||||
{{- $name := .Get 0 -}}
|
||||
{{- with $name -}}
|
||||
{{- $value := $.Page.Param . -}}
|
||||
{{- /* If any parameter ends with `_hash`, mark the string as safe HTML */ -}}
|
||||
{{- if (strings.HasSuffix $name "_hash") -}}
|
||||
{{- $value = $value | safeHTML -}}
|
||||
{{- end -}}
|
||||
{{- with $value }}{{ . }}{{ else }}{{ errorf "Param %q not found: %s" $name $.Position }}{{ end -}}
|
||||
{{- else }}{{ errorf "Missing param key: %s" $.Position }}{{ end -}}
|
||||
@ -1 +0,0 @@
|
||||
{{ partial (.Get 0) . }}
|
||||
@ -1,44 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `placeholder args`
|
||||
|
||||
`args` are all optional and can be one of the following:
|
||||
* title: Used in the SVG `title` tag - default: "Placeholder"
|
||||
* text: The text to show in the image - default: "width x height"
|
||||
* class: Class to add to the `svg` or `img` - default: "bd-placeholder-img"
|
||||
* color: The text color (foreground) - default: "#dee2e6"
|
||||
* background: The background color - default: "#868e96"
|
||||
* width: default: "100%"
|
||||
* height: default: "180px"
|
||||
* markup: If it should render `svg` or `img` tags - default: "svg"
|
||||
*/ -}}
|
||||
|
||||
{{- $grays := $.Site.Data.grays -}}
|
||||
{{- $default_color := (index $grays 2).hex -}}
|
||||
{{- $default_background := (index $grays 5).hex -}}
|
||||
|
||||
{{- $title := .Get "title" | default "Placeholder" -}}
|
||||
{{- $class := .Get "class" -}}
|
||||
{{- $color := .Get "color" | default $default_color -}}
|
||||
{{- $background := .Get "background" | default $default_background -}}
|
||||
{{- $width := .Get "width" | default "100%" -}}
|
||||
{{- $height := .Get "height" | default "180" -}}
|
||||
{{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
|
||||
|
||||
{{- $show_title := not (eq $title "false") -}}
|
||||
{{- $show_text := not (eq $text "false") -}}
|
||||
|
||||
{{- $markup := .Get "markup" | default "svg" -}}
|
||||
|
||||
{{- if eq $markup "img" -}}
|
||||
<img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E
|
||||
{{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}}
|
||||
%3Crect%20width='100%25'%20height='100%25'%20fill='{{ replace $background "#" "%23" }}'%3E%3C/rect%3E
|
||||
{{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
|
||||
%3C/svg%3E">
|
||||
{{- else -}}
|
||||
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice">
|
||||
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
|
||||
<rect width="100%" height="100%" fill="{{ $background }}"/>
|
||||
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
|
||||
</svg>
|
||||
{{- end -}}
|
||||
@ -1,82 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `scss-docs name="name" file="file/_location.scss"`
|
||||
|
||||
Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"`
|
||||
comments in the docs.
|
||||
|
||||
Optional parameters:
|
||||
* strip-default: Remove the ` !default` flag from variable assignments - default: `true`
|
||||
*/ -}}
|
||||
|
||||
{{- $name := .Get "name" -}}
|
||||
{{- $file := .Get "file" -}}
|
||||
{{- $strip_default := .Get "strip-default" | default "true" -}}
|
||||
|
||||
{{- /* If any parameters are missing, print an error and exit */ -}}
|
||||
{{- if or (not $name) (not $file) -}}
|
||||
{{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
|
||||
{{- else -}}
|
||||
{{- $capture_start := printf "// scss-docs-start %s\n" $name -}}
|
||||
{{- $capture_end := printf "// scss-docs-end %s\n" $name -}}
|
||||
{{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
|
||||
{{- $regex_nested := printf `// scss-docs-.*\n` -}}
|
||||
|
||||
{{- /*
|
||||
TODO: figure out why we can't do the following and get the first group (the only capturing one)...
|
||||
$regex := printf `(?:// scss-docs-start %s\n)((?:.|\n)*)(?:\n// scss-docs-end %s)` $name $name
|
||||
*/ -}}
|
||||
|
||||
{{- $match := findRE $regex (readFile $file) -}}
|
||||
{{- $match = index $match 0 -}}
|
||||
|
||||
{{- if not $match -}}
|
||||
{{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $match = replace $match $capture_start "" -}}
|
||||
{{- $match = replace $match $capture_end "" -}}
|
||||
|
||||
{{- $match_nested := findRE $regex_nested $match -}}
|
||||
{{- range $to_remove := $match_nested -}}
|
||||
{{- $match = replace $match $to_remove "" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if (ne $strip_default "false") -}}
|
||||
{{- $match = replace $match " !default" "" -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
|
||||
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
|
||||
{{- $file -}}
|
||||
</a>
|
||||
<div class="d-flex ms-auto">
|
||||
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{- $unindent := 0 -}}
|
||||
{{- $found := false -}}
|
||||
{{- $first_line:= index (split $match "\n") 0 -}}
|
||||
{{- range $char := split $first_line "" -}}
|
||||
{{- if and (eq $char " ") (not $found) -}}
|
||||
{{- $unindent = add $unindent 1 -}}
|
||||
{{- else -}}
|
||||
{{- $found = true -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- $output := "" -}}
|
||||
{{- if (gt $unindent 0) -}}
|
||||
{{- $prefix := (strings.Repeat $unindent " ") -}}
|
||||
{{- range $line := split $match "\n" -}}
|
||||
{{- $line = strings.TrimPrefix $prefix $line -}}
|
||||
{{ $output = printf "%s%s\n" $output $line }}
|
||||
{{- end -}}
|
||||
{{- $output = chomp $output -}}
|
||||
{{- else -}}
|
||||
{{- $output = $match -}}
|
||||
{{- end -}}
|
||||
{{- highlight $output "scss" "" -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
@ -1,31 +0,0 @@
|
||||
{{- /*
|
||||
Usage: `table [args]`
|
||||
|
||||
`args` are optional and can be one of the following:
|
||||
* class: any class(es) to be added to the `table` - default ""
|
||||
* simplified: show a simplified version in the examples - default `true`
|
||||
*/ -}}
|
||||
|
||||
{{- $class := .Get "class" -}}
|
||||
{{- $simplified := .Get "simplified" | default true -}}
|
||||
|
||||
{{- $table_attributes := "" -}}
|
||||
{{- $table_content := " ...\n" -}}
|
||||
|
||||
{{- with $class -}}
|
||||
{{- $table_attributes = printf ` class="%s"` . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if eq $simplified "false" -}}
|
||||
{{- $table_content = partialCached "table-content" . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}
|
||||
|
||||
<div class="bd-example">
|
||||
<table{{ with $class }} class="{{ . }}"{{ end }}>
|
||||
{{ partialCached "table-content" . }}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{- highlight $table "html" "" -}}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user