docs: migration to Astro
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
8
.github/workflows/browserstack.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: BrowserStack
|
name: BrowserStack
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- "**"
|
# - "**"
|
||||||
- "!dependabot/**"
|
# - "!dependabot/**"
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
8
.github/workflows/bundlewatch.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: Bundlewatch
|
name: Bundlewatch
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
13
.github/workflows/calibreapp-image-actions.yml
vendored
@ -1,12 +1,13 @@
|
|||||||
name: Compress Images
|
name: Compress Images
|
||||||
|
|
||||||
on:
|
on:
|
||||||
pull_request:
|
#pull_request:
|
||||||
paths:
|
# paths:
|
||||||
- '**.jpg'
|
# - '**.jpg'
|
||||||
- '**.jpeg'
|
# - '**.jpeg'
|
||||||
- '**.png'
|
# - '**.png'
|
||||||
- '**.webp'
|
# - '**.webp'
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
|
24
.github/workflows/codeql.yml
vendored
@ -1,18 +1,18 @@
|
|||||||
name: "CodeQL"
|
name: "CodeQL"
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
- v4-dev
|
# - v4-dev
|
||||||
- "!dependabot/**"
|
# - "!dependabot/**"
|
||||||
pull_request:
|
#pull_request:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
- v4-dev
|
# - v4-dev
|
||||||
- "!dependabot/**"
|
# - "!dependabot/**"
|
||||||
schedule:
|
#schedule:
|
||||||
- cron: "0 2 * * 4"
|
# - cron: "0 2 * * 4"
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
|
8
.github/workflows/cspell.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: cspell
|
name: cspell
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
8
.github/workflows/css.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: CSS
|
name: CSS
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
8
.github/workflows/docs.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: Docs
|
name: Docs
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
8
.github/workflows/js.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: JS Tests
|
name: JS Tests
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
8
.github/workflows/lint.yml
vendored
@ -1,10 +1,10 @@
|
|||||||
name: Lint
|
name: Lint
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
pull_request:
|
#pull_request:
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
env:
|
env:
|
||||||
|
6
.github/workflows/release-notes.yml
vendored
@ -1,9 +1,9 @@
|
|||||||
name: Release notes
|
name: Release notes
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
#push:
|
||||||
branches:
|
# branches:
|
||||||
- main
|
# - main
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
||||||
permissions:
|
permissions:
|
||||||
|
9
.gitignore
vendored
@ -41,3 +41,12 @@ Thumbs.db
|
|||||||
/dist-sass/
|
/dist-sass/
|
||||||
/js/coverage/
|
/js/coverage/
|
||||||
/node_modules/
|
/node_modules/
|
||||||
|
|
||||||
|
# TODO(Astro migration): Rename or remove later
|
||||||
|
/site-new/dist
|
||||||
|
# TODO(Astro migration): This could be avoided by modifying the other node_modules ignore rule.
|
||||||
|
/site-new/node_modules
|
||||||
|
# TODO(Astro migration): Rename later
|
||||||
|
/site-new/.astro
|
||||||
|
# TODO(Astro migration): Rename later
|
||||||
|
/site-new/public
|
||||||
|
13
.prettierignore
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# Prettier is only used for the website
|
||||||
|
|
||||||
|
# TODO(Astro migration) rename later
|
||||||
|
site-new/.astro
|
||||||
|
site-new/dist
|
||||||
|
site-new/public
|
||||||
|
site-new/src/assets
|
||||||
|
site-new/src/scss
|
||||||
|
site-new/src/pages/**/*.md
|
||||||
|
site-new/src/pages/**/*.mdx
|
||||||
|
site-new/src/content/**/*.mdx
|
||||||
|
site-new/src/layouts/RedirectLayout.astro
|
||||||
|
site-new/static
|
@ -19,11 +19,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
|||||||
|
|
||||||
sh.config.fatal = true
|
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.
|
// Array of objects which holds the files to generate SRI hashes for.
|
||||||
// `file` is the path from the root folder
|
// `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 = [
|
const files = [
|
||||||
{
|
{
|
||||||
file: 'dist/css/bootstrap.min.css',
|
file: 'dist/css/bootstrap.min.css',
|
||||||
|
52
config.yml
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
title: "Bootstrap"
|
||||||
|
baseURL: "https://getbootstrap.com"
|
||||||
|
|
||||||
|
# TODO(Astro migration) Fix path
|
||||||
|
docsDir: "site-new"
|
||||||
|
|
||||||
|
# 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"
|
||||||
|
|
||||||
|
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
@ -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
|
|
9731
package-lock.json
generated
35
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-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": "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-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": "postcss --config build/postcss.config.mjs --replace \"site-new/src/assets/examples/**/*.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-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site-new/src/assets/examples/\" --ext \".rtl.css\" --base \"site-new/src/assets/examples/\" \"site-new/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site-new/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
|
||||||
"css-test": "jasmine --config=scss/tests/jasmine.js",
|
"css-test": "jasmine --config=scss/tests/jasmine.js",
|
||||||
"js": "npm-run-all js-compile js-minify",
|
"js": "npm-run-all js-compile js-minify",
|
||||||
"js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
|
"js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
|
||||||
@ -90,19 +90,27 @@
|
|||||||
"release-zip-examples": "node build/zip-examples.mjs",
|
"release-zip-examples": "node build/zip-examples.mjs",
|
||||||
"dist": "npm-run-all --aggregate-output --parallel css js",
|
"dist": "npm-run-all --aggregate-output --parallel css js",
|
||||||
"test": "npm-run-all lint dist js-test docs-build docs-lint",
|
"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": "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-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-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-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-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-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-new",
|
||||||
|
"astro-build": "astro build --root site-new && rm -rf _site && cp -r site-new/dist _site",
|
||||||
|
"astro-preview": "astro preview --root site-new",
|
||||||
|
"astro-lint": "prettier --config site-new/.prettierrc.json -c --cache site-new && astro check --root site-new && tsc -p site-new --noEmit"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@popperjs/core": "^2.11.8"
|
"@popperjs/core": "^2.11.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@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/cli": "^7.26.4",
|
||||||
"@babel/core": "^7.26.9",
|
"@babel/core": "^7.26.9",
|
||||||
"@babel/preset-env": "^7.26.9",
|
"@babel/preset-env": "^7.26.9",
|
||||||
@ -113,6 +121,13 @@
|
|||||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||||
"@rollup/plugin-replace": "^6.0.2",
|
"@rollup/plugin-replace": "^6.0.2",
|
||||||
"@stackblitz/sdk": "^1.11.0",
|
"@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",
|
"autoprefixer": "^10.4.20",
|
||||||
"bundlewatch": "^0.4.0",
|
"bundlewatch": "^0.4.0",
|
||||||
"clean-css-cli": "^5.6.3",
|
"clean-css-cli": "^5.6.3",
|
||||||
@ -125,12 +140,16 @@
|
|||||||
"eslint-plugin-markdown": "^5.1.0",
|
"eslint-plugin-markdown": "^5.1.0",
|
||||||
"eslint-plugin-unicorn": "^55.0.0",
|
"eslint-plugin-unicorn": "^55.0.0",
|
||||||
"find-unused-sass-variables": "^6.0.0",
|
"find-unused-sass-variables": "^6.0.0",
|
||||||
|
"github-slugger": "^2.0.0",
|
||||||
"globby": "^14.0.2",
|
"globby": "^14.0.2",
|
||||||
"hammer-simulator": "0.0.1",
|
"hammer-simulator": "0.0.1",
|
||||||
|
"htmlparser2": "^8.0.1",
|
||||||
"hugo-bin": "^0.141.1",
|
"hugo-bin": "^0.141.1",
|
||||||
|
"image-size": "^1.0.2",
|
||||||
"ip": "^2.0.1",
|
"ip": "^2.0.1",
|
||||||
"jasmine": "^5.5.0",
|
"jasmine": "^5.5.0",
|
||||||
"jquery": "^3.7.1",
|
"jquery": "^3.7.1",
|
||||||
|
"js-yaml": "^4.1.0",
|
||||||
"karma": "^6.4.4",
|
"karma": "^6.4.4",
|
||||||
"karma-browserstack-launcher": "1.4.0",
|
"karma-browserstack-launcher": "1.4.0",
|
||||||
"karma-chrome-launcher": "^3.2.0",
|
"karma-chrome-launcher": "^3.2.0",
|
||||||
@ -141,10 +160,14 @@
|
|||||||
"karma-jasmine-html-reporter": "^2.1.0",
|
"karma-jasmine-html-reporter": "^2.1.0",
|
||||||
"karma-rollup-preprocessor": "7.0.7",
|
"karma-rollup-preprocessor": "7.0.7",
|
||||||
"lockfile-lint": "^4.14.0",
|
"lockfile-lint": "^4.14.0",
|
||||||
|
"mime": "^3.0.0",
|
||||||
"nodemon": "^3.1.9",
|
"nodemon": "^3.1.9",
|
||||||
"npm-run-all2": "^7.0.2",
|
"npm-run-all2": "^7.0.2",
|
||||||
"postcss": "^8.5.2",
|
"postcss": "^8.5.2",
|
||||||
"postcss-cli": "^11.0.0",
|
"postcss-cli": "^11.0.0",
|
||||||
|
"prettier": "^2.8.4",
|
||||||
|
"prettier-plugin-astro": "^0.8.0",
|
||||||
|
"rehype-autolink-headings": "^6.1.1",
|
||||||
"rollup": "^4.34.8",
|
"rollup": "^4.34.8",
|
||||||
"rollup-plugin-istanbul": "^5.0.0",
|
"rollup-plugin-istanbul": "^5.0.0",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
@ -154,7 +177,9 @@
|
|||||||
"stylelint": "^16.14.1",
|
"stylelint": "^16.14.1",
|
||||||
"stylelint-config-twbs-bootstrap": "^15.1.0",
|
"stylelint-config-twbs-bootstrap": "^15.1.0",
|
||||||
"terser": "^5.39.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": [
|
"files": [
|
||||||
"dist/{css,js}/*.{css,js,map}",
|
"dist/{css,js}/*.{css,js,map}",
|
||||||
|
8
site-new/.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "http://json.schemastore.org/prettierrc",
|
||||||
|
"arrowParens": "always",
|
||||||
|
"printWidth": 120,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "es5"
|
||||||
|
}
|
25
site-new/astro.config.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { defineConfig } from 'astro/config'
|
||||||
|
|
||||||
|
import { bootstrap } from './src/libs/astro'
|
||||||
|
import { getConfig } from './src/libs/config'
|
||||||
|
|
||||||
|
const isDev = process.env.NODE_ENV === 'development'
|
||||||
|
|
||||||
|
const site = isDev
|
||||||
|
? // In development mode, use the local dev server.
|
||||||
|
'http://localhost:3000'
|
||||||
|
: 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,
|
||||||
|
})
|
3
site-new/postcss.config.cjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [require('autoprefixer')],
|
||||||
|
}
|
29
site-new/src/assets/application.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
// 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-2023 The Bootstrap Authors
|
||||||
|
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||||
|
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
// Scroll the active sidebar link into view
|
||||||
|
const sidenav = document.querySelector('.bd-sidebar')
|
||||||
|
if (sidenav) {
|
||||||
|
const sidenavHeight = sidenav.clientHeight
|
||||||
|
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
|
||||||
|
const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
|
||||||
|
const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
|
||||||
|
const viewportTop = sidenavActiveLinkTop
|
||||||
|
const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
|
||||||
|
|
||||||
|
if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
|
||||||
|
sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()
|
@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: مثال الألبوم
|
import Placeholder from '@shortcodes/Placeholder.astro'
|
||||||
direction: rtl
|
|
||||||
|
export const title = 'مثال الألبوم'
|
||||||
|
export const direction = 'rtl'
|
||||||
---
|
---
|
||||||
|
|
||||||
<header data-bs-theme="dark">
|
<header data-bs-theme="dark">
|
||||||
@ -57,7 +59,7 @@ direction: rtl
|
|||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -72,7 +74,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -87,7 +89,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -103,7 +105,7 @@ direction: rtl
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -118,7 +120,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -133,7 +135,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -149,7 +151,7 @@ direction: rtl
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -164,7 +166,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -179,7 +181,7 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -204,6 +206,6 @@ direction: rtl
|
|||||||
<a href="#">عد إلى الأعلى</a>
|
<a href="#">عد إلى الأعلى</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="mb-1">مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!</p>
|
<p class="mb-1">مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!</p>
|
||||||
<p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href="{{< docsref "/getting-started/introduction">}} "> دليل البدء </a>.</p>
|
<p class="mb-0">جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو اقرأ <a href={getVersionedDocsPath('/getting-started/introduction')}> دليل البدء </a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Album example
|
|
||||||
|
export const title = 'Album example'
|
||||||
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<header data-bs-theme="dark">
|
<header data-bs-theme="dark">
|
||||||
@ -56,7 +58,7 @@ title: Album example
|
|||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -71,7 +73,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -86,7 +88,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -102,7 +104,7 @@ title: Album example
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -117,7 +119,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -132,7 +134,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -148,7 +150,7 @@ title: Album example
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -163,7 +165,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -178,7 +180,7 @@ title: Album example
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
<Placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
@ -203,6 +205,6 @@ title: Album example
|
|||||||
<a href="#">Back to top</a>
|
<a href="#">Back to top</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="mb-1">Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
<p class="mb-1">Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
||||||
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
|
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href={getVersionedDocsPath('/getting-started/introduction')}>getting started guide</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Badges'
|
||||||
title: Badges
|
export const extra_css = ['badges.css']
|
||||||
extra_css:
|
|
||||||
- "badges.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,10 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'قالب المدونة'
|
||||||
title: قالب المدونة
|
export const direction = 'rtl'
|
||||||
direction: rtl
|
export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css']
|
||||||
extra_css:
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
- "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
|
|
||||||
- "../blog/blog.rtl.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -79,7 +77,7 @@ extra_css:
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-none d-lg-block">
|
<div class="col-auto d-none d-lg-block">
|
||||||
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
|
<Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -96,7 +94,7 @@ extra_css:
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-none d-lg-block">
|
<div class="col-auto d-none d-lg-block">
|
||||||
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
|
<Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -189,7 +187,7 @@ extra_css:
|
|||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
|
<h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
|
||||||
<small class="text-body-secondary">15 يناير 2024</small>
|
<small class="text-body-secondary">15 يناير 2024</small>
|
||||||
@ -198,7 +196,7 @@ extra_css:
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
|
<h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
|
||||||
<small class="text-body-secondary">14 يناير 2024</small>
|
<small class="text-body-secondary">14 يناير 2024</small>
|
||||||
@ -207,7 +205,7 @@ extra_css:
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
|
<h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
|
||||||
<small class="text-body-secondary">13 يناير 2024</small>
|
<small class="text-body-secondary">13 يناير 2024</small>
|
@ -1,9 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Blog Template'
|
||||||
title: Blog Template
|
export const extra_css = ['https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap', 'blog.css']
|
||||||
extra_css:
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
- "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
|
|
||||||
- "blog.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -78,7 +76,7 @@ extra_css:
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-none d-lg-block">
|
<div class="col-auto d-none d-lg-block">
|
||||||
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
|
<Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -95,7 +93,7 @@ extra_css:
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-none d-lg-block">
|
<div class="col-auto d-none d-lg-block">
|
||||||
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
|
<Placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -241,7 +239,7 @@ extra_css:
|
|||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">Example blog post title</h6>
|
<h6 class="mb-0">Example blog post title</h6>
|
||||||
<small class="text-body-secondary">January 15, 2024</small>
|
<small class="text-body-secondary">January 15, 2024</small>
|
||||||
@ -250,7 +248,7 @@ extra_css:
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">This is another blog post title</h6>
|
<h6 class="mb-0">This is another blog post title</h6>
|
||||||
<small class="text-body-secondary">January 14, 2024</small>
|
<small class="text-body-secondary">January 14, 2024</small>
|
||||||
@ -259,7 +257,7 @@ extra_css:
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
|
||||||
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
|
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-8">
|
||||||
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
|
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
|
||||||
<small class="text-body-secondary">January 13, 2024</small>
|
<small class="text-body-secondary">January 13, 2024</small>
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Breadcrumbs'
|
||||||
title: Breadcrumbs
|
export const extra_css = ['breadcrumbs.css']
|
||||||
extra_css:
|
|
||||||
- "breadcrumbs.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,7 +1,5 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Buttons'
|
||||||
title: Buttons
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,9 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'قالب شرائح العرض'
|
||||||
title: قالب شرائح العرض
|
export const direction = 'rtl'
|
||||||
direction: rtl
|
export const extra_css = ['../carousel/carousel.rtl.css']
|
||||||
extra_css:
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
- "../carousel/carousel.rtl.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<header data-bs-theme="dark">
|
<header data-bs-theme="dark">
|
||||||
@ -44,7 +43,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption text-start">
|
<div class="carousel-caption text-start">
|
||||||
<h1>عنوان المثال.</h1>
|
<h1>عنوان المثال.</h1>
|
||||||
@ -54,7 +53,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<h1>عنوان مثال آخر.</h1>
|
<h1>عنوان مثال آخر.</h1>
|
||||||
@ -64,7 +63,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption text-end">
|
<div class="carousel-caption text-end">
|
||||||
<h1>واحد أكثر لقياس جيد.</h1>
|
<h1>واحد أكثر لقياس جيد.</h1>
|
||||||
@ -94,19 +93,19 @@ extra_css:
|
|||||||
<!-- Three columns of text below the carousel -->
|
<!-- Three columns of text below the carousel -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">عنوان</h2>
|
<h2 class="fw-normal">عنوان</h2>
|
||||||
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
|
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div><!-- /.col-lg-4 -->
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">عنوان آخر</h2>
|
<h2 class="fw-normal">عنوان آخر</h2>
|
||||||
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
|
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div><!-- /.col-lg-4 -->
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
|
<h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
|
||||||
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
|
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||||
@ -124,7 +123,7 @@ extra_css:
|
|||||||
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
|
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -136,7 +135,7 @@ extra_css:
|
|||||||
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
|
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5 order-md-1">
|
<div class="col-md-5 order-md-1">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -148,7 +147,7 @@ extra_css:
|
|||||||
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
|
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -162,6 +161,6 @@ extra_css:
|
|||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
<footer class="container">
|
<footer class="container">
|
||||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
||||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p>
|
<p>© 2017–{new Date().getFullYear()} Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
@ -1,8 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Carousel Template'
|
||||||
title: Carousel Template
|
export const extra_css = ['carousel.css']
|
||||||
extra_css:
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
- "carousel.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<header data-bs-theme="dark">
|
<header data-bs-theme="dark">
|
||||||
@ -43,7 +42,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption text-start">
|
<div class="carousel-caption text-start">
|
||||||
<h1>Example headline.</h1>
|
<h1>Example headline.</h1>
|
||||||
@ -53,7 +52,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<h1>Another example headline.</h1>
|
<h1>Another example headline.</h1>
|
||||||
@ -63,7 +62,7 @@ extra_css:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
<Placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text={false} title={false} />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption text-end">
|
<div class="carousel-caption text-end">
|
||||||
<h1>One more for good measure.</h1>
|
<h1>One more for good measure.</h1>
|
||||||
@ -93,19 +92,19 @@ extra_css:
|
|||||||
<!-- Three columns of text below the carousel -->
|
<!-- Three columns of text below the carousel -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">Heading</h2>
|
<h2 class="fw-normal">Heading</h2>
|
||||||
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div><!-- /.col-lg-4 -->
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">Heading</h2>
|
<h2 class="fw-normal">Heading</h2>
|
||||||
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
|
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||||
</div><!-- /.col-lg-4 -->
|
</div><!-- /.col-lg-4 -->
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
|
||||||
<h2 class="fw-normal">Heading</h2>
|
<h2 class="fw-normal">Heading</h2>
|
||||||
<p>And lastly this, the third column of representative placeholder content.</p>
|
<p>And lastly this, the third column of representative placeholder content.</p>
|
||||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||||
@ -123,7 +122,7 @@ extra_css:
|
|||||||
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
|
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -135,7 +134,7 @@ extra_css:
|
|||||||
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
|
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5 order-md-1">
|
<div class="col-md-5 order-md-1">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -147,7 +146,7 @@ extra_css:
|
|||||||
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
|
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
<Placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -161,6 +160,6 @@ extra_css:
|
|||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
<footer class="container">
|
<footer class="container">
|
||||||
<p class="float-end"><a href="#">Back to top</a></p>
|
<p class="float-end"><a href="#">Back to top</a></p>
|
||||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
<p>© 2017–{new Date().getFullYear()} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
@ -1,22 +1,23 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getData } from '@libs/data'
|
||||||
title: ورقة الغش
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
extra_css:
|
import Example from '@shortcodes/Example.astro'
|
||||||
- "../cheatsheet/cheatsheet.rtl.css"
|
|
||||||
extra_js:
|
export const title = 'ورقة الغش'
|
||||||
- src: "../cheatsheet/cheatsheet.js"
|
export const extra_css = ['../cheatsheet/cheatsheet.rtl.css']
|
||||||
defer: true
|
export const extra_js = [{src: '../cheatsheet/cheatsheet.js'}]
|
||||||
body_class: "bg-body-tertiary"
|
export const body_class = 'bg-body-tertiary'
|
||||||
direction: rtl
|
export const direction = 'rtl'
|
||||||
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
|
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
|
||||||
<div class="container-fluid d-flex align-items-center">
|
<div class="container-fluid d-flex align-items-center">
|
||||||
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
|
<img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">
|
||||||
ورقة الغش
|
ورقة الغش
|
||||||
</h1>
|
</h1>
|
||||||
<a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
|
<a href={getVersionedDocsPath('examples/cheatsheet')} class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
|
<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
|
||||||
@ -78,35 +79,35 @@ direction: rtl
|
|||||||
<article class="my-3" id="typography">
|
<article class="my-3" id="typography">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>النصوص</h3>
|
<h3>النصوص</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/typography')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="display-1">العرض 1</p>
|
<p class="display-1">العرض 1</p>
|
||||||
<p class="display-2">العرض 2</p>
|
<p class="display-2">العرض 2</p>
|
||||||
<p class="display-3">العرض 3</p>
|
<p class="display-3">العرض 3</p>
|
||||||
<p class="display-4">العرض 4</p>
|
<p class="display-4">العرض 4</p>
|
||||||
<p class="display-5">العرض 5</p>
|
<p class="display-5">العرض 5</p>
|
||||||
<p class="display-6">العرض 6</p>
|
<p class="display-6">العرض 6</p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="h1">عنوان 1</p>
|
<p class="h1">عنوان 1</p>
|
||||||
<p class="h2">عنوان 2</p>
|
<p class="h2">عنوان 2</p>
|
||||||
<p class="h3">عنوان 3</p>
|
<p class="h3">عنوان 3</p>
|
||||||
<p class="h4">عنوان 4</p>
|
<p class="h4">عنوان 4</p>
|
||||||
<p class="h5">عنوان 5</p>
|
<p class="h5">عنوان 5</p>
|
||||||
<p class="h6">عنوان 6</p>
|
<p class="h6">عنوان 6</p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
|
هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
|
||||||
</p>
|
</p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
|
<p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
|
||||||
<p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
|
<p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
|
||||||
<p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
|
<p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
|
||||||
@ -115,20 +116,20 @@ direction: rtl
|
|||||||
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
|
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
|
||||||
<p><strong>هذا السطر يحوي نص عريض.</strong></p>
|
<p><strong>هذا السطر يحوي نص عريض.</strong></p>
|
||||||
<p><em>هذا السطر يحوي نص مائل.</em></p>
|
<p><em>هذا السطر يحوي نص مائل.</em></p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<hr>
|
<hr>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<blockquote class="blockquote">
|
<blockquote class="blockquote">
|
||||||
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
|
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
|
||||||
<footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
|
<footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li>هذه قائمة عناصر.</li>
|
<li>هذه قائمة عناصر.</li>
|
||||||
<li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
|
<li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
|
||||||
@ -143,41 +144,41 @@ direction: rtl
|
|||||||
</li>
|
</li>
|
||||||
<li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
|
<li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item">هذا عنصر في قائمة.</li>
|
<li class="list-inline-item">هذا عنصر في قائمة.</li>
|
||||||
<li class="list-inline-item">وهذا أيضًا.</li>
|
<li class="list-inline-item">وهذا أيضًا.</li>
|
||||||
<li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
|
<li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="images">
|
<article class="my-3" id="images">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الصور</h3>
|
<h3>الصور</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/images')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}}
|
<Placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" />
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
{{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}}
|
<Placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" />
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="tables">
|
<article class="my-3" id="tables">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الجداول</h3>
|
<h3>الجداول</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/tables')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-striped">
|
<table class="table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -207,9 +208,9 @@ direction: rtl
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-dark table-borderless">
|
<table class="table table-dark table-borderless">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -239,9 +240,9 @@ direction: rtl
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[`
|
||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -255,21 +256,17 @@ direction: rtl
|
|||||||
<th scope="row">Default</th>
|
<th scope="row">Default</th>
|
||||||
<td>خلية</td>
|
<td>خلية</td>
|
||||||
<td>خلية</td>
|
<td>خلية</td>
|
||||||
</tr>
|
</tr>`,
|
||||||
{{< table.inline >}}
|
...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<th scope="row">${themeColor.title}</th>
|
||||||
<tr class="table-{{ .name }}">
|
|
||||||
<th scope="row">{{ .name | title }}</th>
|
|
||||||
<td>خلية</td>
|
<td>خلية</td>
|
||||||
<td>خلية</td>
|
<td>خلية</td>
|
||||||
</tr>
|
</tr>`),
|
||||||
{{- end -}}
|
`</tbody>
|
||||||
{{< /table.inline >}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
{{< /example >}}
|
`]} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-sm table-bordered">
|
<table class="table table-sm table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -299,22 +296,22 @@ direction: rtl
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="figures">
|
<article class="my-3" id="figures">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>النماذج البيانية</h3>
|
<h3>النماذج البيانية</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('content/figures')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<figure class="figure">
|
<figure class="figure">
|
||||||
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
|
<Placeholder width="400" height="300" class="figure-img img-fluid rounded" />
|
||||||
<figcaption class="figure-caption">شرح للصورة أعلاه.</figcaption>
|
<figcaption class="figure-caption">شرح للصورة أعلاه.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
@ -325,11 +322,11 @@ direction: rtl
|
|||||||
<article class="my-3" id="overview">
|
<article class="my-3" id="overview">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>نظرة عامة</h3>
|
<h3>نظرة عامة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/overview')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
|
<label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
|
||||||
@ -378,17 +375,17 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">إرسال</button>
|
<button type="submit" class="btn btn-primary">إرسال</button>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="disabled-forms">
|
<article class="my-3" id="disabled-forms">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الحقول المعطلة</h3>
|
<h3>الحقول المعطلة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/overview#disabled-forms')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
|
<fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
@ -435,17 +432,17 @@ direction: rtl
|
|||||||
<button type="submit" class="btn btn-primary">إرسال</button>
|
<button type="submit" class="btn btn-primary">إرسال</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="sizing">
|
<article class="my-3" id="sizing">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الأحجام</h3>
|
<h3>الأحجام</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/form-control#sizing')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
|
<input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
|
||||||
</div>
|
</div>
|
||||||
@ -460,9 +457,9 @@ direction: rtl
|
|||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="file" class="form-control form-control-lg" aria-label="مثال على إدخال ملف كبير">
|
<input type="file" class="form-control form-control-lg" aria-label="مثال على إدخال ملف كبير">
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
|
<input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
|
||||||
</div>
|
</div>
|
||||||
@ -477,17 +474,17 @@ direction: rtl
|
|||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="file" class="form-control form-control-sm" aria-label="مثال على إدخال ملف صغير">
|
<input type="file" class="form-control form-control-sm" aria-label="مثال على إدخال ملف صغير">
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="input-group">
|
<article class="my-3" id="input-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>مجموعة الإدخال</h3>
|
<h3>مجموعة الإدخال</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/input-group')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<span class="input-group-text" id="basic-addon1">أنا اسمي</span>
|
<span class="input-group-text" id="basic-addon1">أنا اسمي</span>
|
||||||
<input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
|
<input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
|
||||||
@ -510,17 +507,17 @@ direction: rtl
|
|||||||
<span class="input-group-text">مع textarea</span>
|
<span class="input-group-text">مع textarea</span>
|
||||||
<textarea class="form-control" aria-label="مع textarea"></textarea>
|
<textarea class="form-control" aria-label="مع textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="floating-labels">
|
<article class="my-3" id="floating-labels">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الحقول ذوي العناوين العائمة</h3>
|
<h3>الحقول ذوي العناوين العائمة</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/floating-labels')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<div class="form-floating mb-3">
|
<div class="form-floating mb-3">
|
||||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||||
@ -531,17 +528,17 @@ direction: rtl
|
|||||||
<label for="floatingPassword">كلمة السر</label>
|
<label for="floatingPassword">كلمة السر</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="validation">
|
<article class="my-3" id="validation">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>التحقق</h3>
|
<h3>التحقق</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('forms/validation')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form class="row g-3">
|
<form class="row g-3">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<label for="validationServer01" class="form-label">الاسم الاول</label>
|
<label for="validationServer01" class="form-label">الاسم الاول</label>
|
||||||
@ -606,7 +603,7 @@ direction: rtl
|
|||||||
<button class="btn btn-primary" type="submit">إرسال النموذج</button>
|
<button class="btn btn-primary" type="submit">إرسال النموذج</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
@ -617,11 +614,11 @@ direction: rtl
|
|||||||
<article class="my-3" id="accordion">
|
<article class="my-3" id="accordion">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>المطوية</h3>
|
<h3>المطوية</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/accordion')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="accordion" id="accordionExample">
|
<div class="accordion" id="accordionExample">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h4 class="accordion-header">
|
<h4 class="accordion-header">
|
||||||
@ -660,44 +657,41 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="alerts">
|
<article class="my-3" id="alerts">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الإنذارات</h3>
|
<h3>الإنذارات</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/alerts')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< alerts.inline >}}
|
<div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
تنبيه ${themeColor.name} بسيط مع <a href="#" class="alert-link">رابط مثال</a>. أعطها نقرة إذا أردت.
|
||||||
<div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert">
|
|
||||||
تنبيه {{ .name }} بسيط مع <a href="#" class="alert-link">رابط مثال</a>. أعطها نقرة إذا أردت.
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="قريب"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="قريب"></button>
|
||||||
</div>{{ end -}}
|
</div>
|
||||||
{{< /alerts.inline >}}
|
`)} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="alert alert-success" role="alert">
|
<div class="alert alert-success" role="alert">
|
||||||
<h4 class="alert-heading">أحسنت!</h4>
|
<h4 class="alert-heading">أحسنت!</h4>
|
||||||
<p>لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.</p>
|
<p>لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p class="mb-0">كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.</p>
|
<p class="mb-0">كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.</p>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="badge">
|
<article class="my-3" id="badge">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الشارة</h3>
|
<h3>الشارة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/badge')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
|
<p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
|
||||||
<p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
|
<p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
|
||||||
<p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
|
<p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
|
||||||
@ -706,24 +700,21 @@ direction: rtl
|
|||||||
<p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p>
|
<p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p>
|
||||||
<p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p>
|
<p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p>
|
||||||
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
|
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< badge.inline >}}
|
<span class="badge rounded-pill ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
`)} />
|
||||||
<span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
|
|
||||||
{{< /badge.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="breadcrumb">
|
<article class="my-3" id="breadcrumb">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
|
<h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/breadcrumb')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="فتات الخبز">
|
<nav aria-label="فتات الخبز">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
|
<li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
|
||||||
@ -731,49 +722,41 @@ direction: rtl
|
|||||||
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
|
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="buttons">
|
<article class="my-3" id="buttons">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الأزرار</h3>
|
<h3>الأزرار</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/buttons')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[
|
||||||
{{< buttons.inline >}}
|
...getData('theme-colors').map((themeColor) => `
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>
|
||||||
<button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button>
|
`),
|
||||||
{{- end -}}
|
`<button type="button" class="btn btn-link">رابط</button>`]} />
|
||||||
{{< /buttons.inline >}}
|
|
||||||
|
|
||||||
<button type="button" class="btn btn-link">رابط</button>
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< /example >}}
|
<button type="button" class="btn btn-outline-${themeColor.name}">${themeColor.title}</button>
|
||||||
|
`)} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
{{< buttons.inline >}}
|
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
|
||||||
<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
|
|
||||||
{{- end -}}
|
|
||||||
{{< /buttons.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
|
||||||
<button type="button" class="btn btn-primary btn-sm">زر صغير</button>
|
<button type="button" class="btn btn-primary btn-sm">زر صغير</button>
|
||||||
<button type="button" class="btn btn-primary">زر قياسي</button>
|
<button type="button" class="btn btn-primary">زر قياسي</button>
|
||||||
<button type="button" class="btn btn-primary btn-lg">زر كبير</button>
|
<button type="button" class="btn btn-primary btn-lg">زر كبير</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="button-group">
|
<article class="my-3" id="button-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>مجموعة الأزرار</h3>
|
<h3>مجموعة الأزرار</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/button-group')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
|
<div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
|
||||||
<div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
|
<div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
|
||||||
<button type="button" class="btn btn-secondary">1</button>
|
<button type="button" class="btn btn-secondary">1</button>
|
||||||
@ -790,21 +773,21 @@ direction: rtl
|
|||||||
<button type="button" class="btn btn-secondary">8</button>
|
<button type="button" class="btn btn-secondary">8</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="card">
|
<article class="my-3" id="card">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>البطاقة</h3>
|
<h3>البطاقة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/card')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}}
|
<Placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">عنوان البطاقة</h5>
|
<h5 class="card-title">عنوان البطاقة</h5>
|
||||||
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
|
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
|
||||||
@ -848,7 +831,7 @@ direction: rtl
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
{{< placeholder width="100%" height="250" text="صورة" >}}
|
<Placeholder width="100%" height="250" text="صورة" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@ -861,17 +844,17 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="carousel">
|
<article class="my-3" id="carousel">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>شرائح العرض</h3>
|
<h3>شرائح العرض</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/carousel')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||||
<div class="carousel-indicators">
|
<div class="carousel-indicators">
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button>
|
||||||
@ -880,21 +863,21 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>عنوان الشريحة الأولى</h5>
|
<h5>عنوان الشريحة الأولى</h5>
|
||||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>عنوان الشريحة الثانية</h5>
|
<h5>عنوان الشريحة الثانية</h5>
|
||||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>عنوان الشريحة الثالثة</h5>
|
<h5>عنوان الشريحة الثالثة</h5>
|
||||||
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
|
||||||
@ -910,17 +893,17 @@ direction: rtl
|
|||||||
<span class="visually-hidden">التالي</span>
|
<span class="visually-hidden">التالي</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="dropdowns">
|
<article class="my-3" id="dropdowns">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>القوائم المنسدلة</h3>
|
<h3>القوائم المنسدلة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/dropdowns')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
@ -962,9 +945,9 @@ direction: rtl
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-primary">Primary</button>
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
@ -1031,9 +1014,9 @@ direction: rtl
|
|||||||
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /btn-group -->
|
</div><!-- /btn-group -->
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||||
<div class="dropend">
|
<div class="dropend">
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
@ -1075,9 +1058,9 @@ direction: rtl
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
@ -1092,17 +1075,17 @@ direction: rtl
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="list-group">
|
<article class="my-3" id="list-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>مجموعة العناصر</h3>
|
<h3>مجموعة العناصر</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/list-group')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
|
<li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
|
||||||
<li class="list-group-item">عنصر ثاني</li>
|
<li class="list-group-item">عنصر ثاني</li>
|
||||||
@ -1110,9 +1093,9 @@ direction: rtl
|
|||||||
<li class="list-group-item">عنصر رابع</li>
|
<li class="list-group-item">عنصر رابع</li>
|
||||||
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-group list-group-flush">
|
<ul class="list-group list-group-flush">
|
||||||
<li class="list-group-item">عنصر</li>
|
<li class="list-group-item">عنصر</li>
|
||||||
<li class="list-group-item">عنصر ثاني</li>
|
<li class="list-group-item">عنصر ثاني</li>
|
||||||
@ -1120,28 +1103,26 @@ direction: rtl
|
|||||||
<li class="list-group-item">عنصر رابع</li>
|
<li class="list-group-item">عنصر رابع</li>
|
||||||
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
<li class="list-group-item">وعنصر خامس أيضًا</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[`
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>
|
<a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>`,
|
||||||
{{< list.inline >}}
|
...getData('theme-colors').map((themeColor) => `
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<a href="#" class="list-group-item list-group-item-action list-group-item-${themeColor.name}">عنصر مجموعة قائمة ${themeColor.name} بسيط</a>
|
||||||
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a>
|
`),
|
||||||
{{- end -}}
|
`</div>
|
||||||
{{< /list.inline >}}
|
`]} />
|
||||||
</div>
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="modal">
|
<article class="my-3" id="modal">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الصندوق العائم</h3>
|
<h3>الصندوق العائم</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/modal')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="d-flex justify-content-between flex-wrap">
|
<div class="d-flex justify-content-between flex-wrap">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
|
||||||
إطلاق صندوق عائم تجريبي
|
إطلاق صندوق عائم تجريبي
|
||||||
@ -1156,26 +1137,26 @@ direction: rtl
|
|||||||
صندوق عائم يملأ الشاشة
|
صندوق عائم يملأ الشاشة
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="navs">
|
<article class="my-3" id="navs">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>التنقل</h3>
|
<h3>التنقل</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/navs-tabs')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
||||||
<a class="nav-link" href="#">رابط</a>
|
<a class="nav-link" href="#">رابط</a>
|
||||||
<a class="nav-link" href="#">رابط</a>
|
<a class="nav-link" href="#">رابط</a>
|
||||||
<a class="nav-link disabled" aria-disabled="true">معطل</a>
|
<a class="nav-link disabled" aria-disabled="true">معطل</a>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
||||||
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
|
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
|
||||||
@ -1194,9 +1175,9 @@ direction: rtl
|
|||||||
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
|
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
<a class="nav-link active" aria-current="page" href="#">نشط</a>
|
||||||
@ -1211,21 +1192,21 @@ direction: rtl
|
|||||||
<a class="nav-link disabled" aria-disabled="true">معطل</a>
|
<a class="nav-link disabled" aria-disabled="true">معطل</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="navbar">
|
<article class="my-3" id="navbar">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>شريط التنقل</h3>
|
<h3>شريط التنقل</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/navbar')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
|
<img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
|
||||||
style="filter: invert(1) grayscale(100%) brightness(200%);">
|
style="filter: invert(1) grayscale(100%) brightness(200%);">
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل">
|
||||||
@ -1265,7 +1246,7 @@ direction: rtl
|
|||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
|
<img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
@ -1300,17 +1281,17 @@ direction: rtl
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="pagination">
|
<article class="my-3" id="pagination">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>ترقيم الصفحات</h3>
|
<h3>ترقيم الصفحات</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/pagination')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="مثال ترقيم الصفحات">
|
<nav aria-label="مثال ترقيم الصفحات">
|
||||||
<ul class="pagination pagination-sm">
|
<ul class="pagination pagination-sm">
|
||||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||||
@ -1320,9 +1301,9 @@ direction: rtl
|
|||||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="مثال قياسي لترقيم الصفحات">
|
<nav aria-label="مثال قياسي لترقيم الصفحات">
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
@ -1340,9 +1321,9 @@ direction: rtl
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="مثال آخر لترقيم الصفحات">
|
<nav aria-label="مثال آخر لترقيم الصفحات">
|
||||||
<ul class="pagination pagination-lg flex-wrap">
|
<ul class="pagination pagination-lg flex-wrap">
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
@ -1358,23 +1339,23 @@ direction: rtl
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="popovers">
|
<article class="my-3" id="popovers">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الصناديق المنبثقة</h3>
|
<h3>الصناديق المنبثقة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/popovers')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
|
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
|
||||||
انقر لعرض/إخفاء الصندوق المنبثق
|
انقر لعرض/إخفاء الصندوق المنبثق
|
||||||
</button>
|
</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||||
انبثاق إلى الأعلى
|
انبثاق إلى الأعلى
|
||||||
</button>
|
</button>
|
||||||
@ -1387,17 +1368,17 @@ direction: rtl
|
|||||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
|
||||||
انبثاق إلى اليمين
|
انبثاق إلى اليمين
|
||||||
</button>
|
</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="progress">
|
<article class="my-3" id="progress">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>شريط التقدم</h3>
|
<h3>شريط التقدم</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/progress')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar">0%</div>
|
<div class="progress-bar">0%</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1413,9 +1394,9 @@ direction: rtl
|
|||||||
<div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar bg-danger w-100">100%</div>
|
<div class="progress-bar bg-danger w-100">100%</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="progress-stacked">
|
<div class="progress-stacked">
|
||||||
<div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar"></div>
|
<div class="progress-bar"></div>
|
||||||
@ -1424,13 +1405,13 @@ direction: rtl
|
|||||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="scrollspy">
|
<article class="my-3" id="scrollspy">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>المخطوطة</h3>
|
<h3>المخطوطة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/scrollspy')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -1474,42 +1455,34 @@ direction: rtl
|
|||||||
<article class="my-3" id="spinners">
|
<article class="my-3" id="spinners">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الدوائر المتحركة</h3>
|
<h3>الدوائر المتحركة</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/spinners')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< spinner.inline >}}
|
<div class="spinner-border text-${themeColor.name}" role="status">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
|
||||||
<div class="spinner-border text-{{ .name }}" role="status">
|
|
||||||
<span class="visually-hidden">جار التحميل...</span>
|
<span class="visually-hidden">جار التحميل...</span>
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
`)} />
|
||||||
{{< /spinner.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< spinner.inline >}}
|
<div class="spinner-grow text-${themeColor.name}" role="status">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
|
||||||
<div class="spinner-grow text-{{ .name }}" role="status">
|
|
||||||
<span class="visually-hidden">جار التحميل...</span>
|
<span class="visually-hidden">جار التحميل...</span>
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
`)} />
|
||||||
{{< /spinner.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="toasts">
|
<article class="my-3" id="toasts">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>الإشعارات</h3>
|
<h3>الإشعارات</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/toasts')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
|
<Example showMarkup={false} class="bg-dark p-5 align-items-center" code={`
|
||||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<div class="toast-header">
|
<div class="toast-header">
|
||||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
|
||||||
<strong class="me-auto">Bootstrap</strong>
|
<strong class="me-auto">Bootstrap</strong>
|
||||||
<small class="text-body-secondary">قبل 11 دقيقة</small>
|
<small class="text-body-secondary">قبل 11 دقيقة</small>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
|
||||||
@ -1518,23 +1491,23 @@ direction: rtl
|
|||||||
مرحبًا بالعالم! هذه رسالة إشعار.
|
مرحبًا بالعالم! هذه رسالة إشعار.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>التلميحات</h3>
|
<h3>التلميحات</h3>
|
||||||
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a>
|
<a class="d-flex align-items-center" hreflang="en" href={getVersionedDocsPath('components/tooltips')}>دليل الإستخدام</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" class="tooltip-demo" >}}
|
<Example showMarkup={false} class="tooltip-demo" code={`
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
@ -1,21 +1,22 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getData } from '@libs/data'
|
||||||
title: Cheatsheet
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
extra_css:
|
import Example from '@shortcodes/Example.astro'
|
||||||
- "cheatsheet.css"
|
import Placeholder from '@shortcodes/Placeholder.astro'
|
||||||
extra_js:
|
|
||||||
- src: "cheatsheet.js"
|
export const title = 'Cheatsheet'
|
||||||
defer: true
|
export const extra_css = ['cheatsheet.css']
|
||||||
body_class: "bg-body-tertiary"
|
export const extra_js = [{ src: 'cheatsheet.js' }]
|
||||||
|
export const body_class = 'bg-body-tertiary'
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
|
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
|
||||||
<div class="container-fluid d-flex align-items-center">
|
<div class="container-fluid d-flex align-items-center">
|
||||||
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
|
<img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">
|
||||||
Cheatsheet
|
Cheatsheet
|
||||||
</h1>
|
</h1>
|
||||||
<a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
|
<a href={getVersionedDocsPath('examples/cheatsheet-rtl')} class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
|
<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
|
||||||
@ -77,35 +78,32 @@ body_class: "bg-body-tertiary"
|
|||||||
<article class="my-3" id="typography">
|
<article class="my-3" id="typography">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Typography</h3>
|
<h3>Typography</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/content/typography" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('content/typography')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="display-1">Display 1</p>
|
<p class="display-1">Display 1</p>
|
||||||
<p class="display-2">Display 2</p>
|
<p class="display-2">Display 2</p>
|
||||||
<p class="display-3">Display 3</p>
|
<p class="display-3">Display 3</p>
|
||||||
<p class="display-4">Display 4</p>
|
<p class="display-4">Display 4</p>
|
||||||
<p class="display-5">Display 5</p>
|
<p class="display-5">Display 5</p>
|
||||||
<p class="display-6">Display 6</p>
|
<p class="display-6">Display 6</p>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="h1">Heading 1</p>
|
<p class="h1">Heading 1</p>
|
||||||
<p class="h2">Heading 2</p>
|
<p class="h2">Heading 2</p>
|
||||||
<p class="h3">Heading 3</p>
|
<p class="h3">Heading 3</p>
|
||||||
<p class="h4">Heading 4</p>
|
<p class="h4">Heading 4</p>
|
||||||
<p class="h5">Heading 5</p>
|
<p class="h5">Heading 5</p>
|
||||||
<p class="h6">Heading 6</p>
|
<p class="h6">Heading 6</p>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
This is a lead paragraph. It stands out from regular paragraphs.
|
This is a lead paragraph. It stands out from regular paragraphs.
|
||||||
</p>
|
</p>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||||
@ -113,21 +111,18 @@ body_class: "bg-body-tertiary"
|
|||||||
<p><u>This line of text will render as underlined.</u></p>
|
<p><u>This line of text will render as underlined.</u></p>
|
||||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||||
<p><strong>This line rendered as bold text.</strong></p>
|
<p><strong>This line rendered as bold text.</strong></p>
|
||||||
<p><em>This line rendered as italicized text.</em></p>
|
<p><em>This line rendered as italicized text.</em></p>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<hr>
|
<hr>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<blockquote class="blockquote">
|
<blockquote class="blockquote">
|
||||||
<p>A well-known quote, contained in a blockquote element.</p>
|
<p>A well-known quote, contained in a blockquote element.</p>
|
||||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||||
</blockquote>
|
</blockquote>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li>This is a list.</li>
|
<li>This is a list.</li>
|
||||||
<li>It appears completely unstyled.</li>
|
<li>It appears completely unstyled.</li>
|
||||||
@ -141,179 +136,163 @@ body_class: "bg-body-tertiary"
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>This may still come in handy in some situations.</li>
|
<li>This may still come in handy in some situations.</li>
|
||||||
</ul>
|
</ul>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item">This is a list item.</li>
|
<li class="list-inline-item">This is a list item.</li>
|
||||||
<li class="list-inline-item">And another one.</li>
|
<li class="list-inline-item">And another one.</li>
|
||||||
<li class="list-inline-item">But they're displayed inline.</li>
|
<li class="list-inline-item">But they're displayed inline.</li>
|
||||||
</ul>
|
</ul>`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="images">
|
<article class="my-3" id="images">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Images</h3>
|
<h3>Images</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/content/images" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('content/images')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
|
<Placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" />`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
|
||||||
{{< 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 >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="tables">
|
<article class="my-3" id="tables">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Tables</h3>
|
<h3>Tables</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/content/tables" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('content/tables')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-striped">
|
<table class="table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">First</th>
|
<th scope="col">First</th>
|
||||||
<th scope="col">Last</th>
|
<th scope="col">Last</th>
|
||||||
<th scope="col">Handle</th>
|
<th scope="col">Handle</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">1</th>
|
<th scope="row">1</th>
|
||||||
<td>Mark</td>
|
<td>Mark</td>
|
||||||
<td>Otto</td>
|
<td>Otto</td>
|
||||||
<td>@mdo</td>
|
<td>@mdo</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
<td>Jacob</td>
|
<td>Jacob</td>
|
||||||
<td>Thornton</td>
|
<td>Thornton</td>
|
||||||
<td>@fat</td>
|
<td>@fat</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
<td colspan="2">Larry the Bird</td>
|
<td colspan="2">Larry the Bird</td>
|
||||||
<td>@twitter</td>
|
<td>@twitter</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-dark table-borderless">
|
<table class="table table-dark table-borderless">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">First</th>
|
<th scope="col">First</th>
|
||||||
<th scope="col">Last</th>
|
<th scope="col">Last</th>
|
||||||
<th scope="col">Handle</th>
|
<th scope="col">Handle</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">1</th>
|
<th scope="row">1</th>
|
||||||
<td>Mark</td>
|
<td>Mark</td>
|
||||||
<td>Otto</td>
|
<td>Otto</td>
|
||||||
<td>@mdo</td>
|
<td>@mdo</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
<td>Jacob</td>
|
<td>Jacob</td>
|
||||||
<td>Thornton</td>
|
<td>Thornton</td>
|
||||||
<td>@fat</td>
|
<td>@fat</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
<td colspan="2">Larry the Bird</td>
|
<td colspan="2">Larry the Bird</td>
|
||||||
<td>@twitter</td>
|
<td>@twitter</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[`
|
||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">Class</th>
|
<th scope="col">Class</th>
|
||||||
<th scope="col">Heading</th>
|
<th scope="col">Heading</th>
|
||||||
<th scope="col">Heading</th>
|
<th scope="col">Heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">Default</th>
|
<th scope="row">Default</th>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
<td>Cell</td>
|
||||||
</tr>
|
</tr>`,
|
||||||
{{< table.inline >}}
|
...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<th scope="row">${themeColor.title}</th>
|
||||||
<tr class="table-{{ .name }}">
|
<td>Cell</td>
|
||||||
<th scope="row">{{ .name | title }}</th>
|
<td>Cell</td>
|
||||||
<td>Cell</td>
|
</tr>`),
|
||||||
<td>Cell</td>
|
`</tbody>
|
||||||
</tr>
|
</table>`]} />
|
||||||
{{- end -}}
|
|
||||||
{{< /table.inline >}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<table class="table table-sm table-bordered">
|
<table class="table table-sm table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">First</th>
|
<th scope="col">First</th>
|
||||||
<th scope="col">Last</th>
|
<th scope="col">Last</th>
|
||||||
<th scope="col">Handle</th>
|
<th scope="col">Handle</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">1</th>
|
<th scope="row">1</th>
|
||||||
<td>Mark</td>
|
<td>Mark</td>
|
||||||
<td>Otto</td>
|
<td>Otto</td>
|
||||||
<td>@mdo</td>
|
<td>@mdo</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
<td>Jacob</td>
|
<td>Jacob</td>
|
||||||
<td>Thornton</td>
|
<td>Thornton</td>
|
||||||
<td>@fat</td>
|
<td>@fat</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
<td colspan="2">Larry the Bird</td>
|
<td colspan="2">Larry the Bird</td>
|
||||||
<td>@twitter</td>
|
<td>@twitter</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="my-3" id="figures">
|
<article class="my-3" id="figures">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Figures</h3>
|
<h3>Figures</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/content/figures" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('content/figures')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<figure class="figure">
|
<figure class="figure">
|
||||||
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
|
<Placeholder width="400" height="300" class="figure-img img-fluid rounded" />
|
||||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||||
</figure>
|
</figure>`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
@ -324,11 +303,11 @@ body_class: "bg-body-tertiary"
|
|||||||
<article class="my-3" id="overview">
|
<article class="my-3" id="overview">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Overview</h3>
|
<h3>Overview</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/overview')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||||
@ -376,18 +355,17 @@ body_class: "bg-body-tertiary"
|
|||||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
</form>
|
</form>`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="disabled-forms">
|
<article class="my-3" id="disabled-forms">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Disabled forms</h3>
|
<h3>Disabled forms</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}#disabled-forms">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/overview#disabled-forms')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<fieldset disabled aria-label="Disabled fieldset example">
|
<fieldset disabled aria-label="Disabled fieldset example">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
@ -433,18 +411,17 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="sizing">
|
<article class="my-3" id="sizing">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Sizing</h3>
|
<h3>Sizing</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/form-control" >}}#sizing">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/form-control#sizing')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
||||||
</div>
|
</div>
|
||||||
@ -458,10 +435,9 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="file" class="form-control form-control-lg" aria-label="Large file input example">
|
<input type="file" class="form-control form-control-lg" aria-label="Large file input example">
|
||||||
</div>
|
</div>`} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
|
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
|
||||||
</div>
|
</div>
|
||||||
@ -476,17 +452,17 @@ body_class: "bg-body-tertiary"
|
|||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="file" class="form-control form-control-sm" aria-label="Small file input example">
|
<input type="file" class="form-control form-control-sm" aria-label="Small file input example">
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="input-group">
|
<article class="my-3" id="input-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Input group</h3>
|
<h3>Input group</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/input-group" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/input-group')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<span class="input-group-text" id="basic-addon1">@</span>
|
<span class="input-group-text" id="basic-addon1">@</span>
|
||||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||||
@ -509,17 +485,17 @@ body_class: "bg-body-tertiary"
|
|||||||
<span class="input-group-text">With textarea</span>
|
<span class="input-group-text">With textarea</span>
|
||||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="floating-labels">
|
<article class="my-3" id="floating-labels">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Floating labels</h3>
|
<h3>Floating labels</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/floating-labels')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form>
|
<form>
|
||||||
<div class="form-floating mb-3">
|
<div class="form-floating mb-3">
|
||||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||||
@ -530,17 +506,17 @@ body_class: "bg-body-tertiary"
|
|||||||
<label for="floatingPassword">Password</label>
|
<label for="floatingPassword">Password</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="validation">
|
<article class="my-3" id="validation">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Validation</h3>
|
<h3>Validation</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/forms/validation" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('forms/validation')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<form class="row g-3">
|
<form class="row g-3">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<label for="validationServer01" class="form-label">First name</label>
|
<label for="validationServer01" class="form-label">First name</label>
|
||||||
@ -605,7 +581,7 @@ body_class: "bg-body-tertiary"
|
|||||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
@ -616,11 +592,11 @@ body_class: "bg-body-tertiary"
|
|||||||
<article class="my-3" id="accordion">
|
<article class="my-3" id="accordion">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Accordion</h3>
|
<h3>Accordion</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/accordion" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/accordion')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="accordion" id="accordionExample">
|
<div class="accordion" id="accordionExample">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h4 class="accordion-header">
|
<h4 class="accordion-header">
|
||||||
@ -659,44 +635,41 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="alerts">
|
<article class="my-3" id="alerts">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Alerts</h3>
|
<h3>Alerts</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/alerts" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/alerts')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< alerts.inline >}}
|
<div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||||
<div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert">
|
|
||||||
A simple {{ .name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
</div>{{ end -}}
|
</div>
|
||||||
{{< /alerts.inline >}}
|
`)} />
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="alert alert-success" role="alert">
|
<div class="alert alert-success" role="alert">
|
||||||
<h4 class="alert-heading">Well done!</h4>
|
<h4 class="alert-heading">Well done!</h4>
|
||||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="badge">
|
<article class="my-3" id="badge">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Badge</h3>
|
<h3>Badge</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/badge" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/badge')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<p class="h1">Example heading <span class="badge bg-primary">New</span></p>
|
<p class="h1">Example heading <span class="badge bg-primary">New</span></p>
|
||||||
<p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
|
<p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
|
||||||
<p class="h3">Example heading <span class="badge bg-success">New</span></p>
|
<p class="h3">Example heading <span class="badge bg-success">New</span></p>
|
||||||
@ -705,24 +678,21 @@ body_class: "bg-body-tertiary"
|
|||||||
<p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
|
<p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
|
||||||
<p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
|
<p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
|
||||||
<p class="h6">Example heading <span class="badge bg-dark">New</span></p>
|
<p class="h6">Example heading <span class="badge bg-dark">New</span></p>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< badge.inline >}}
|
<span class="badge rounded-pill ${(themeColor.name === 'light' || themeColor.name === 'warning' || themeColor.name === 'info') ? 'text-' : ''}bg-${themeColor.name}">${themeColor.title}</span>
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
`)} />
|
||||||
<span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
|
|
||||||
{{< /badge.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="breadcrumb">
|
<article class="my-3" id="breadcrumb">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Breadcrumb</h3>
|
<h3>Breadcrumb</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/breadcrumb" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/breadcrumb')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="breadcrumb">
|
<nav aria-label="breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
@ -730,49 +700,40 @@ body_class: "bg-body-tertiary"
|
|||||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="buttons">
|
<article class="my-3" id="buttons">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Buttons</h3>
|
<h3>Buttons</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/buttons" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/buttons')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[
|
||||||
{{< buttons.inline >}}
|
...getData('theme-colors').map((themeColor) => `
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>
|
||||||
<button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button>
|
`),
|
||||||
{{- end -}}
|
`<button type="button" class="btn btn-link">Link</button>`]} />
|
||||||
{{< /buttons.inline >}}
|
|
||||||
|
|
||||||
<button type="button" class="btn btn-link">Link</button>
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< /example >}}
|
<button type="button" class="btn btn-outline-${themeColor.name}">${themeColor.title}</button>
|
||||||
|
`)} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
{{< buttons.inline >}}
|
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<button type="button" class="btn btn-primary">Standard button</button>
|
||||||
<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
|
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||||
{{- end -}}
|
`} />
|
||||||
{{< /buttons.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
|
||||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
|
||||||
<button type="button" class="btn btn-primary">Standard button</button>
|
|
||||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="button-group">
|
<article class="my-3" id="button-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Button group</h3>
|
<h3>Button group</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/button-group" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/button-group')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||||
<button type="button" class="btn btn-secondary">1</button>
|
<button type="button" class="btn btn-secondary">1</button>
|
||||||
@ -789,88 +750,88 @@ body_class: "bg-body-tertiary"
|
|||||||
<button type="button" class="btn btn-secondary">8</button>
|
<button type="button" class="btn btn-secondary">8</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="card">
|
<article class="my-3" id="card">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Card</h3>
|
<h3>Card</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/card" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/card')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
|
<Placeholder width="100%" height="180" class="card-img-top" text="Image cap" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card title</h5>
|
<h5 class="card-title">Card title</h5>
|
||||||
<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>
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
Featured
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title</h5>
|
|
||||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer text-body-secondary">
|
|
||||||
2 days ago
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">Card title</h5>
|
|
||||||
<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>
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item">An item</li>
|
|
||||||
<li class="list-group-item">A second item</li>
|
|
||||||
<li class="list-group-item">A third item</li>
|
|
||||||
</ul>
|
|
||||||
<div class="card-body">
|
|
||||||
<a href="#" class="card-link">Card link</a>
|
|
||||||
<a href="#" class="card-link">Another link</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card">
|
|
||||||
<div class="row g-0">
|
|
||||||
<div class="col-md-4">
|
|
||||||
{{< placeholder width="100%" height="250" text="Image" >}}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-8">
|
</div>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<h5 class="card-title">Card title</h5>
|
<div class="col">
|
||||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<div class="card">
|
||||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
<div class="card-header">
|
||||||
|
Featured
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||||
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer text-body-secondary">
|
||||||
|
2 days ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<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>
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item">An item</li>
|
||||||
|
<li class="list-group-item">A second item</li>
|
||||||
|
<li class="list-group-item">A third item</li>
|
||||||
|
</ul>
|
||||||
|
<div class="card-body">
|
||||||
|
<a href="#" class="card-link">Card link</a>
|
||||||
|
<a href="#" class="card-link">Another link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<Placeholder width="100%" height="250" text="Image" />
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Card title</h5>
|
||||||
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
|
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="carousel">
|
<article class="my-3" id="carousel">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Carousel</h3>
|
<h3>Carousel</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/carousel" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/carousel')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||||
<div class="carousel-indicators">
|
<div class="carousel-indicators">
|
||||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||||
@ -879,21 +840,21 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>First slide label</h5>
|
<h5>First slide label</h5>
|
||||||
<p>Some representative placeholder content for the first slide.</p>
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>Second slide label</h5>
|
<h5>Second slide label</h5>
|
||||||
<p>Some representative placeholder content for the second slide.</p>
|
<p>Some representative placeholder content for the second slide.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
<Placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" />
|
||||||
<div class="carousel-caption d-none d-md-block">
|
<div class="carousel-caption d-none d-md-block">
|
||||||
<h5>Third slide label</h5>
|
<h5>Third slide label</h5>
|
||||||
<p>Some representative placeholder content for the third slide.</p>
|
<p>Some representative placeholder content for the third slide.</p>
|
||||||
@ -909,17 +870,16 @@ body_class: "bg-body-tertiary"
|
|||||||
<span class="visually-hidden">Next</span>
|
<span class="visually-hidden">Next</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="dropdowns">
|
<article class="my-3" id="dropdowns">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Dropdowns</h3>
|
<h3>Dropdowns</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/dropdowns" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/dropdowns')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
@ -961,147 +921,147 @@ body_class: "bg-body-tertiary"
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-primary">Primary</button>
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
||||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-success">Success</button>
|
|
||||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-info">Info</button>
|
|
||||||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-warning">Warning</button>
|
|
||||||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-danger">Danger</button>
|
|
||||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
<span class="visually-hidden">Toggle Dropdown</span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /btn-group -->
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
|
||||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
|
||||||
<div class="dropend">
|
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Dropend button
|
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div><!-- /btn-group -->
|
||||||
<div class="dropup">
|
<div class="btn-group">
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||||
Dropup button
|
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div><!-- /btn-group -->
|
||||||
<div class="dropstart">
|
<div class="btn-group">
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
Dropstart button
|
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
|
||||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div><!-- /btn-group -->
|
||||||
</div>
|
<div class="btn-group">
|
||||||
{{< /example >}}
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="visually-hidden">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="btn-group">
|
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||||
<div class="dropdown">
|
<div class="dropend">
|
||||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
End-aligned menu
|
Dropend button
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu dropdown-menu-end">
|
<ul class="dropdown-menu">
|
||||||
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
<li><hr class="dropdown-divider"></li>
|
||||||
</ul>
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="dropup">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropup button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="dropstart">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Dropstart button
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
`} />
|
||||||
{{< /example >}}
|
|
||||||
|
<Example showMarkup={false} code={`
|
||||||
|
<div class="btn-group">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
End-aligned menu
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end">
|
||||||
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><hr class="dropdown-divider"></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="list-group">
|
<article class="my-3" id="list-group">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>List group</h3>
|
<h3>List group</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/list-group" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/list-group')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
|
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
|
||||||
<li class="list-group-item">A second item</li>
|
<li class="list-group-item">A second item</li>
|
||||||
@ -1109,9 +1069,9 @@ body_class: "bg-body-tertiary"
|
|||||||
<li class="list-group-item">A fourth item</li>
|
<li class="list-group-item">A fourth item</li>
|
||||||
<li class="list-group-item">And a fifth one</li>
|
<li class="list-group-item">And a fifth one</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="list-group list-group-flush">
|
<ul class="list-group list-group-flush">
|
||||||
<li class="list-group-item">An item</li>
|
<li class="list-group-item">An item</li>
|
||||||
<li class="list-group-item">A second item</li>
|
<li class="list-group-item">A second item</li>
|
||||||
@ -1119,28 +1079,26 @@ body_class: "bg-body-tertiary"
|
|||||||
<li class="list-group-item">A fourth item</li>
|
<li class="list-group-item">A fourth item</li>
|
||||||
<li class="list-group-item">And a fifth one</li>
|
<li class="list-group-item">And a fifth one</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={[`
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
|
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>`,
|
||||||
{{< list.inline >}}
|
...getData('theme-colors').map((themeColor) => `
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
<a href="#" class="list-group-item list-group-item-action list-group-item-${themeColor.name}">A simple ${themeColor.name} list group item</a>
|
||||||
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
|
`),
|
||||||
{{- end -}}
|
`</div>
|
||||||
{{< /list.inline >}}
|
`]} />
|
||||||
</div>
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="modal">
|
<article class="my-3" id="modal">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Modal</h3>
|
<h3>Modal</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/modal" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/modal')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="d-flex justify-content-between flex-wrap">
|
<div class="d-flex justify-content-between flex-wrap">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
@ -1155,26 +1113,26 @@ body_class: "bg-body-tertiary"
|
|||||||
Full screen
|
Full screen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="navs">
|
<article class="my-3" id="navs">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Navs</h3>
|
<h3>Navs</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/navs-tabs" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/navs-tabs')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
|
||||||
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
|
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
|
||||||
@ -1193,9 +1151,9 @@ body_class: "bg-body-tertiary"
|
|||||||
<p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
<p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||||
@ -1210,106 +1168,105 @@ body_class: "bg-body-tertiary"
|
|||||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="navbar">
|
<article class="my-3" id="navbar">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Navbar</h3>
|
<h3>Navbar</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/navbar" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/navbar')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
|
<img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
|
||||||
style="filter: invert(1) grayscale(100%) brightness(200%);">
|
style="filter: invert(1) grayscale(100%) brightness(200%);">
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
Dropdown
|
Dropdown
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
<li><hr class="dropdown-divider"></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="d-flex" role="search">
|
<form class="d-flex" role="search">
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
<button class="btn btn-outline-dark" type="submit">Search</button>
|
<button class="btn btn-outline-dark" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">
|
<a class="navbar-brand" href="#">
|
||||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
|
<img src=${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
|
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#">Link</a>
|
<a class="nav-link" href="#">Link</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
Dropdown
|
Dropdown
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
<li><hr class="dropdown-divider"></li>
|
<li><hr class="dropdown-divider"></li>
|
||||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="d-flex" role="search">
|
<form class="d-flex" role="search">
|
||||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
<button class="btn btn-outline-light" type="submit">Search</button>
|
<button class="btn btn-outline-light" type="submit">Search</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
`} />
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="pagination">
|
<article class="my-3" id="pagination">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Pagination</h3>
|
<h3>Pagination</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/pagination" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/pagination')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="Pagination example">
|
<nav aria-label="Pagination example">
|
||||||
<ul class="pagination pagination-sm">
|
<ul class="pagination pagination-sm">
|
||||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||||
@ -1319,9 +1276,9 @@ body_class: "bg-body-tertiary"
|
|||||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="Standard pagination example">
|
<nav aria-label="Standard pagination example">
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
<li class="page-item">
|
<li class="page-item">
|
||||||
@ -1339,9 +1296,9 @@ body_class: "bg-body-tertiary"
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<nav aria-label="Another pagination example">
|
<nav aria-label="Another pagination example">
|
||||||
<ul class="pagination pagination-lg flex-wrap">
|
<ul class="pagination pagination-lg flex-wrap">
|
||||||
<li class="page-item disabled">
|
<li class="page-item disabled">
|
||||||
@ -1357,21 +1314,21 @@ body_class: "bg-body-tertiary"
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="popovers">
|
<article class="my-3" id="popovers">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Popovers</h3>
|
<h3>Popovers</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/popovers" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/popovers')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
Popover on top
|
Popover on top
|
||||||
</button>
|
</button>
|
||||||
@ -1384,17 +1341,17 @@ body_class: "bg-body-tertiary"
|
|||||||
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
Popover on start
|
Popover on start
|
||||||
</button>
|
</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="progress">
|
<article class="my-3" id="progress">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Progress</h3>
|
<h3>Progress</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/progress" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/progress')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar">0%</div>
|
<div class="progress-bar">0%</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1410,9 +1367,9 @@ body_class: "bg-body-tertiary"
|
|||||||
<div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar bg-danger w-100">100%</div>
|
<div class="progress-bar bg-danger w-100">100%</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={`
|
||||||
<div class="progress-stacked">
|
<div class="progress-stacked">
|
||||||
<div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
<div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
||||||
<div class="progress-bar"></div>
|
<div class="progress-bar"></div>
|
||||||
@ -1421,13 +1378,13 @@ body_class: "bg-body-tertiary"
|
|||||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="scrollspy">
|
<article class="my-3" id="scrollspy">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Scrollspy</h3>
|
<h3>Scrollspy</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/scrollspy" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/scrollspy')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -1470,42 +1427,34 @@ body_class: "bg-body-tertiary"
|
|||||||
<article class="my-3" id="spinners">
|
<article class="my-3" id="spinners">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Spinners</h3>
|
<h3>Spinners</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/spinners" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/spinners')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< spinner.inline >}}
|
<div class="spinner-border text-${themeColor.name}" role="status">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
|
||||||
<div class="spinner-border text-{{ .name }}" role="status">
|
|
||||||
<span class="visually-hidden">Loading...</span>
|
<span class="visually-hidden">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
`)} />
|
||||||
{{< /spinner.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
|
|
||||||
{{< example show_markup="false" >}}
|
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
|
||||||
{{< spinner.inline >}}
|
<div class="spinner-grow text-${themeColor.name}" role="status">
|
||||||
{{- range (index $.Site.Data "theme-colors") }}
|
|
||||||
<div class="spinner-grow text-{{ .name }}" role="status">
|
|
||||||
<span class="visually-hidden">Loading...</span>
|
<span class="visually-hidden">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
`)} />
|
||||||
{{< /spinner.inline >}}
|
|
||||||
{{< /example >}}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="my-3" id="toasts">
|
<article class="my-3" id="toasts">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Toasts</h3>
|
<h3>Toasts</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/toasts" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/toasts')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
|
<Example showMarkup={false} class="bg-dark p-5 align-items-center" code={`
|
||||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<div class="toast-header">
|
<div class="toast-header">
|
||||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
|
||||||
<strong class="me-auto">Bootstrap</strong>
|
<strong class="me-auto">Bootstrap</strong>
|
||||||
<small class="text-body-secondary">11 mins ago</small>
|
<small class="text-body-secondary">11 mins ago</small>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
@ -1514,23 +1463,23 @@ body_class: "bg-body-tertiary"
|
|||||||
Hello, world! This is a toast message.
|
Hello, world! This is a toast message.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
<article class="mt-3 mb-5 pb-5" id="tooltips">
|
||||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||||
<h3>Tooltips</h3>
|
<h3>Tooltips</h3>
|
||||||
<a class="d-flex align-items-center" href="{{< docsref "/components/tooltips" >}}">Documentation</a>
|
<a class="d-flex align-items-center" href={getVersionedDocsPath('components/tooltips')}>Documentation</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{{< example show_markup="false" class="tooltip-demo" >}}
|
<Example showMarkup={false} class="tooltip-demo" code={`
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
|
||||||
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
|
||||||
{{< /example >}}
|
`} />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
@ -1605,3 +1554,4 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,19 +1,17 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: مثال إتمام الشراء
|
|
||||||
direction: rtl
|
export const title = 'مثال إتمام الشراء'
|
||||||
extra_css:
|
export const direction = 'rtl'
|
||||||
- "../checkout/checkout.css"
|
export const extra_css = ['../checkout/checkout.css']
|
||||||
extra_js:
|
export const extra_js = [{ src: '../checkout/checkout.js' }]
|
||||||
- src: "../checkout/checkout.js"
|
export const body_class = 'bg-body-tertiary'
|
||||||
defer: true
|
|
||||||
body_class: "bg-body-tertiary"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<main>
|
<main>
|
||||||
<div class="py-5 text-center">
|
<div class="py-5 text-center">
|
||||||
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
<img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
|
||||||
<h1 class="h2">نموذج إتمام الشراء</h1>
|
<h1 class="h2">نموذج إتمام الشراء</h1>
|
||||||
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -223,7 +221,7 @@ body_class: "bg-body-tertiary"
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
||||||
<p class="mb-1">© {{< year >}}-2017 اسم الشركة</p>
|
<p class="mb-1">© {new Date().getFullYear()}-2017 اسم الشركة</p>
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
|
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
|
||||||
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
|
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
|
@ -1,18 +1,16 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Checkout example
|
|
||||||
extra_css:
|
export const title = 'Checkout example'
|
||||||
- "checkout.css"
|
export const extra_css = ['checkout.css']
|
||||||
extra_js:
|
export const extra_js = [{ src: 'checkout.js' }]
|
||||||
- src: "checkout.js"
|
export const body_class = 'bg-body-tertiary'
|
||||||
defer: true
|
|
||||||
body_class: "bg-body-tertiary"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<main>
|
<main>
|
||||||
<div class="py-5 text-center">
|
<div class="py-5 text-center">
|
||||||
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
<img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
|
||||||
<h1 class="h2">Checkout form</h1>
|
<h1 class="h2">Checkout form</h1>
|
||||||
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -223,7 +221,7 @@ body_class: "bg-body-tertiary"
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
||||||
<p class="mb-1">© 2017–{{< year >}} Company Name</p>
|
<p class="mb-1">© 2017–{new Date().getFullYear()} Company Name</p>
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
||||||
<li class="list-inline-item"><a href="#">Terms</a></li>
|
<li class="list-inline-item"><a href="#">Terms</a></li>
|
@ -1,10 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Cover Template'
|
||||||
title: Cover Template
|
export const extra_css = ['cover.css']
|
||||||
extra_css:
|
export const html_class = 'h-100'
|
||||||
- "cover.css"
|
export const body_class = 'd-flex h-100 text-center text-bg-dark'
|
||||||
html_class: "h-100"
|
|
||||||
body_class: "d-flex h-100 text-center text-bg-dark"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
@ -1,15 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'قالب لوحة القيادة'
|
||||||
title: قالب لوحة القيادة
|
export const direction = 'rtl'
|
||||||
direction: rtl
|
export const extra_css = ['../dashboard/dashboard.rtl.css']
|
||||||
extra_css:
|
export const extra_js = [
|
||||||
- "../dashboard/dashboard.rtl.css"
|
{ src: 'https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js', integrity: 'sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE'},
|
||||||
extra_js:
|
{ src: 'https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js', integrity: 'sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG'},
|
||||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
{ src: 'dashboard.js'}
|
||||||
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
]
|
||||||
defer: true
|
|
||||||
- src: "dashboard.js"
|
|
||||||
defer: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,14 +1,11 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Dashboard Template'
|
||||||
title: Dashboard Template
|
export const extra_css = ['dashboard.css']
|
||||||
extra_css:
|
export const extra_js = [
|
||||||
- "dashboard.css"
|
{ src: 'https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js', integrity: 'sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE'},
|
||||||
extra_js:
|
{ src: 'https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js', integrity: 'sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG'},
|
||||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
{ src: 'dashboard.js'}
|
||||||
integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
]
|
||||||
defer: true
|
|
||||||
- src: "dashboard.js"
|
|
||||||
defer: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Dropdowns'
|
||||||
title: Dropdowns
|
export const extra_css = ['dropdowns.css']
|
||||||
extra_css:
|
|
||||||
- "dropdowns.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Features'
|
||||||
title: Features
|
export const extra_css = ['features.css']
|
||||||
extra_css:
|
|
||||||
- "features.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
@ -1,7 +1,5 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Footers'
|
||||||
title: Footers
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -22,7 +20,7 @@ body_class: ""
|
|||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||||
<p class="col-md-4 mb-0 text-body-secondary">© {{< year >}} Company, Inc</p>
|
<p class="col-md-4 mb-0 text-body-secondary">© {new Date().getFullYear()} Company, Inc</p>
|
||||||
|
|
||||||
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
||||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||||
@ -46,7 +44,7 @@ body_class: ""
|
|||||||
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
|
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
|
||||||
<svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
<svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span>
|
<span class="mb-3 mb-md-0 text-body-secondary">© {new Date().getFullYear()} Company, Inc</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
|
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
|
||||||
@ -68,7 +66,7 @@ body_class: ""
|
|||||||
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
|
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
|
||||||
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
|
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p class="text-center text-body-secondary">© {{< year >}} Company, Inc</p>
|
<p class="text-center text-body-secondary">© {new Date().getFullYear()} Company, Inc</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -80,7 +78,7 @@ body_class: ""
|
|||||||
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
|
||||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||||
</a>
|
</a>
|
||||||
<p class="text-body-secondary">© {{< year >}}</p>
|
<p class="text-body-secondary">© {new Date().getFullYear()}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col mb-3">
|
<div class="col mb-3">
|
||||||
@ -175,7 +173,7 @@ body_class: ""
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
|
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
|
||||||
<p>© {{< year >}} Company, Inc. All rights reserved.</p>
|
<p>© {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
|
||||||
<ul class="list-unstyled d-flex">
|
<ul class="list-unstyled d-flex">
|
||||||
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
|
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
|
||||||
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
@ -1,9 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Grid Template'
|
||||||
title: Grid Template
|
export const extra_css = ['grid.css']
|
||||||
extra_css:
|
export const body_class = 'py-4'
|
||||||
- "grid.css"
|
|
||||||
body_class: "py-4"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Headers'
|
||||||
title: Headers
|
export const extra_css = ['headers.css']
|
||||||
extra_css:
|
|
||||||
- "headers.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
BIN
site-new/src/assets/examples/heroes/bootstrap-docs.png
Normal file
After Width: | Height: | Size: 363 KiB |
Before Width: | Height: | Size: 272 KiB After Width: | Height: | Size: 272 KiB |
@ -1,16 +1,15 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Heroes
|
|
||||||
extra_css:
|
export const title = 'Heroes'
|
||||||
- "heroes.css"
|
export const extra_css = ['heroes.css']
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1 class="visually-hidden">Heroes examples</h1>
|
<h1 class="visually-hidden">Heroes examples</h1>
|
||||||
|
|
||||||
<div class="px-4 py-5 my-5 text-center">
|
<div class="px-4 py-5 my-5 text-center">
|
||||||
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
<img class="d-block mx-auto mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
|
||||||
<h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
|
<h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
|
||||||
<div class="col-lg-6 mx-auto">
|
<div class="col-lg-6 mx-auto">
|
||||||
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
|
@ -1,6 +1,5 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Jumbotron example'
|
||||||
title: Jumbotron example
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
@ -38,7 +37,7 @@ title: Jumbotron example
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="pt-3 mt-4 text-body-secondary border-top">
|
<footer class="pt-3 mt-4 text-body-secondary border-top">
|
||||||
© {{< year >}}
|
© {new Date().getFullYear()}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Jumbotrons'
|
||||||
title: Jumbotrons
|
export const extra_css = ['jumbotrons.css']
|
||||||
extra_css:
|
|
||||||
- "jumbotrons.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'List groups'
|
||||||
title: List groups
|
export const extra_css = ['list-groups.css']
|
||||||
extra_css:
|
|
||||||
- "list-groups.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,10 +1,11 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Masonry example'
|
||||||
title: Masonry example
|
export const extra_js = [{
|
||||||
extra_js:
|
src: 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js',
|
||||||
- src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
|
integrity: 'sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D',
|
||||||
integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
|
async: true
|
||||||
async: true
|
}]
|
||||||
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<main class="container py-5">
|
<main class="container py-5">
|
||||||
@ -17,14 +18,14 @@ extra_js:
|
|||||||
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
|
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
|
<p>By adding <code>data-masonry='}"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
|
||||||
|
|
||||||
<hr class="my-5">
|
<hr class="my-5">
|
||||||
|
|
||||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
<div class="row" data-masonry='{"percentPosition": true }'>
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
<div class="col-sm-6 col-lg-4 mb-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
|
<Placeholder width="100%" height="200" class="card-img-top" text="Image cap" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||||
@ -45,7 +46,7 @@ extra_js:
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
<div class="col-sm-6 col-lg-4 mb-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
|
<Placeholder width="100%" height="200" class="card-img-top" text="Image cap" />
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">Card title</h5>
|
<h5 class="card-title">Card title</h5>
|
||||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||||
@ -76,7 +77,7 @@ extra_js:
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
<div class="col-sm-6 col-lg-4 mb-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
|
<Placeholder width="100%" height="260" class="card-img" text="Card image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-lg-4 mb-4">
|
<div class="col-sm-6 col-lg-4 mb-4">
|
@ -1,9 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Modals'
|
||||||
title: Modals
|
export const extra_css = ['modals.css']
|
||||||
extra_css:
|
|
||||||
- "modals.css"
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -5,4 +5,3 @@
|
|||||||
.modal-sheet .modal-footer {
|
.modal-sheet .modal-footer {
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1,13 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Bottom navbar example
|
|
||||||
|
export const title = 'Bottom navbar example'
|
||||||
---
|
---
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<div class="bg-body-tertiary p-5 rounded mt-3">
|
<div class="bg-body-tertiary p-5 rounded mt-3">
|
||||||
<h1>Bottom Navbar example</h1>
|
<h1>Bottom Navbar example</h1>
|
||||||
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
|
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
|
||||||
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
<a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Fixed top navbar example
|
|
||||||
extra_css:
|
export const title = 'Fixed top navbar example'
|
||||||
- "navbar-fixed.css"
|
export const extra_css = ['navbar-fixed.css']
|
||||||
---
|
---
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||||
@ -35,6 +35,6 @@ extra_css:
|
|||||||
<div class="bg-body-tertiary p-5 rounded">
|
<div class="bg-body-tertiary p-5 rounded">
|
||||||
<h1>Navbar example</h1>
|
<h1>Navbar example</h1>
|
||||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
|
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
|
||||||
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
<a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Top navbar example
|
|
||||||
extra_css:
|
export const title = 'Top navbar example'
|
||||||
- "navbar-static.css"
|
export const extra_css = ['navbar-static.css']
|
||||||
---
|
---
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
||||||
@ -35,6 +35,6 @@ extra_css:
|
|||||||
<div class="bg-body-tertiary p-5 rounded">
|
<div class="bg-body-tertiary p-5 rounded">
|
||||||
<h1>Navbar example</h1>
|
<h1>Navbar example</h1>
|
||||||
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
||||||
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
<a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Navbar Template
|
|
||||||
extra_css:
|
export const title = 'Navbar Template'
|
||||||
- "navbars-offcanvas.css"
|
export const extra_css = ['navbars-offcanvas.css']
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
@ -136,10 +136,10 @@ extra_css:
|
|||||||
<div class="bg-body-tertiary p-5 rounded">
|
<div class="bg-body-tertiary p-5 rounded">
|
||||||
<div class="col-sm-8 py-5 mx-auto">
|
<div class="col-sm-8 py-5 mx-auto">
|
||||||
<h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
|
<h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
|
||||||
<p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
|
<p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed')}>fixed top</a> examples.</p>
|
||||||
<p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
|
<p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-primary" href="{{< docsref "/components/navbar#offcanvas" >}}" role="button">Learn more about offcanvas navbars »</a>
|
<a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar#offcanvas')} role="button">Learn more about offcanvas navbars »</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Navbar Template
|
|
||||||
extra_css:
|
export const title = 'Navbar Template'
|
||||||
- "navbars.css"
|
export const extra_css = ['navbars.css']
|
||||||
---
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
@ -438,10 +438,10 @@ extra_css:
|
|||||||
<div class="bg-body-tertiaryp-5 rounded">
|
<div class="bg-body-tertiaryp-5 rounded">
|
||||||
<div class="col-sm-8 mx-auto">
|
<div class="col-sm-8 mx-auto">
|
||||||
<h1>Navbar examples</h1>
|
<h1>Navbar examples</h1>
|
||||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
|
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed')}>fixed top</a> examples.</p>
|
||||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
|
<a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,13 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Offcanvas navbar template
|
|
||||||
extra_css:
|
export const title = 'Offcanvas navbar template'
|
||||||
- "offcanvas-navbar.css"
|
export const extra_css = ['offcanvas-navbar.css']
|
||||||
extra_js:
|
export const extra_js = [{ src: 'offcanvas-navbar.js' }]
|
||||||
- src: "offcanvas-navbar.js"
|
export const body_class = 'bg-body-tertiary'
|
||||||
defer: true
|
export const aliases = '/docs/[[config:docs_version]]/examples/offcanvas/'
|
||||||
body_class: "bg-body-tertiary"
|
import Placeholder from "@shortcodes/Placeholder.astro"
|
||||||
aliases: "/docs/5.3/examples/offcanvas/"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
|
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
|
||||||
@ -67,7 +66,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
|
|||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
|
<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
|
||||||
<img class="me-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
|
<img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
|
||||||
<div class="lh-1">
|
<div class="lh-1">
|
||||||
<h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
|
<h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
|
||||||
<small>Since 2011</small>
|
<small>Since 2011</small>
|
||||||
@ -77,21 +76,21 @@ aliases: "/docs/5.3/examples/offcanvas/"
|
|||||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
||||||
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
|
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
<strong class="d-block text-gray-dark">@username</strong>
|
||||||
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
|
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" />
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
<strong class="d-block text-gray-dark">@username</strong>
|
||||||
Some more representative placeholder content, related to this other user. Another status update, perhaps.
|
Some more representative placeholder content, related to this other user. Another status update, perhaps.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" />
|
||||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||||
<strong class="d-block text-gray-dark">@username</strong>
|
<strong class="d-block text-gray-dark">@username</strong>
|
||||||
This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
|
This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
|
||||||
@ -105,7 +104,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
|
|||||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
||||||
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
|
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
<strong class="text-gray-dark">Full Name</strong>
|
||||||
@ -115,7 +114,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
<strong class="text-gray-dark">Full Name</strong>
|
||||||
@ -125,7 +124,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex text-body-secondary pt-3">
|
<div class="d-flex text-body-secondary pt-3">
|
||||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
|
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
|
||||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<strong class="text-gray-dark">Full Name</strong>
|
<strong class="text-gray-dark">Full Name</strong>
|
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Pricing example
|
|
||||||
extra_css:
|
export const title = 'Pricing example'
|
||||||
- "pricing.css"
|
export const extra_css = ['pricing.css']
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -149,8 +149,8 @@ extra_css:
|
|||||||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md">
|
<div class="col-12 col-md">
|
||||||
<img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
|
<img class="mb-2" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="24" height="19">
|
||||||
<small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small>
|
<small class="d-block mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md">
|
<div class="col-6 col-md">
|
||||||
<h5>Features</h5>
|
<h5>Features</h5>
|
@ -1,8 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Product example'
|
||||||
title: Product example
|
export const extra_css = ['product.css']
|
||||||
extra_css:
|
|
||||||
- "product.css"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -145,7 +143,7 @@ extra_css:
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md">
|
<div class="col-12 col-md">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
||||||
<small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small>
|
<small class="d-block mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md">
|
<div class="col-6 col-md">
|
||||||
<h5>Features</h5>
|
<h5>Features</h5>
|
@ -1,12 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
export const title = 'Sidebars'
|
||||||
title: Sidebars
|
export const extra_css = ['sidebars.css']
|
||||||
extra_css:
|
export const extra_js = [{src: 'sidebars.js'}]
|
||||||
- "sidebars.css"
|
|
||||||
extra_js:
|
|
||||||
- src: "sidebars.js"
|
|
||||||
defer: true
|
|
||||||
body_class: ""
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
@ -1,14 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Signin Template
|
|
||||||
extra_css:
|
export const title = 'Signin Template'
|
||||||
- "sign-in.css"
|
export const extra_css = ['sign-in.css']
|
||||||
body_class: "d-flex align-items-center py-4 bg-body-tertiary"
|
export const body_class = 'text-center'
|
||||||
---
|
---
|
||||||
|
|
||||||
<main class="form-signin w-100 m-auto">
|
<main class="form-signin w-100 m-auto">
|
||||||
<form>
|
<form>
|
||||||
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
<img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
|
||||||
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
|
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
|
||||||
|
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
@ -27,6 +27,6 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
|
<button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
|
||||||
<p class="mt-5 mb-3 text-body-secondary">© 2017–{{< year >}}</p>
|
<p class="mt-5 mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</p>
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Starter Template
|
|
||||||
|
export const title = 'Starter Template'
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||||
@ -26,7 +27,7 @@ title: Starter Template
|
|||||||
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
||||||
|
|
||||||
<div class="mb-5">
|
<div class="mb-5">
|
||||||
<a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
|
<a href={getVersionedDocsPath('/examples')} class="btn btn-primary btn-lg px-4">Download examples</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="col-3 col-md-2 mb-5">
|
<hr class="col-3 col-md-2 mb-5">
|
||||||
@ -68,31 +69,31 @@ title: Starter Template
|
|||||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
||||||
<ul class="list-unstyled ps-0">
|
<ul class="list-unstyled ps-0">
|
||||||
<li>
|
<li>
|
||||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
|
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/introduction')}>
|
||||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||||
Bootstrap quick start guide
|
Bootstrap quick start guide
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
|
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/webpack')}>
|
||||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||||
Bootstrap Webpack guide
|
Bootstrap Webpack guide
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
|
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/parcel')}>
|
||||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||||
Bootstrap Parcel guide
|
Bootstrap Parcel guide
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
|
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/vite')}>
|
||||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||||
Bootstrap Vite guide
|
Bootstrap Vite guide
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
|
<a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/contribute')}>
|
||||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
|
||||||
Contributing to Bootstrap
|
Contributing to Bootstrap
|
||||||
</a>
|
</a>
|
||||||
@ -102,6 +103,6 @@ title: Starter Template
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="pt-5 my-5 text-body-secondary border-top">
|
<footer class="pt-5 my-5 text-body-secondary border-top">
|
||||||
Created by the Bootstrap team · © {{< year >}}
|
Created by the Bootstrap team · © {new Date().getFullYear()}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
@ -1,10 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: examples
|
import { getVersionedDocsPath } from '@libs/path'
|
||||||
title: Sticky Footer Navbar Template
|
|
||||||
extra_css:
|
export const title = 'Sticky Footer Navbar Template'
|
||||||
- "sticky-footer-navbar.css"
|
export const extra_css = ['sticky-footer-navbar.css']
|
||||||
html_class: "h-100"
|
export const html_class = 'h-100'
|
||||||
body_class: "d-flex flex-column h-100"
|
export const body_class = 'd-flex flex-column h-100'
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
@ -41,7 +41,7 @@ body_class: "d-flex flex-column h-100"
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||||
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
|
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
|
||||||
<p>Back to <a href="{{< docsref "/examples/sticky-footer" >}}">the default sticky footer</a> minus the navbar.</p>
|
<p>Back to <a href={getVersionedDocsPath('/examples/sticky-footer')}>the default sticky footer</a> minus the navbar.</p>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|