mirror of https://github.com/twbs/bootstrap.git
Merge branch 'main' into main-lmp-examples-focus-order
This commit is contained in:
Patrick H. Lauke
GitHub
commit
b0816d665c
|
|
@ -167,6 +167,34 @@
|
|||
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
|
||||
<label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
|
||||
</div>
|
||||
<!--Compare form-select rendering depending on the size-->
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectRegular">Works with selects</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectSmall">Works with selects</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectLarge">Works with selects</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid bg-body" data-bs-theme="dark">
|
||||
|
|
@ -329,6 +357,34 @@
|
|||
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
|
||||
<label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
|
||||
</div>
|
||||
<!--Compare form-select rendering depending on the size-->
|
||||
<div class="form-floating">
|
||||
<select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectRegularDark">Works with selects</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectSmallDark">Works with selects</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label for="floatingSelectLargeDark">Works with selects</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
|
|
@ -103,13 +103,13 @@
|
|||
"@popperjs/core": "^2.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.25.7",
|
||||
"@babel/core": "^7.25.7",
|
||||
"@babel/preset-env": "^7.25.7",
|
||||
"@docsearch/js": "^3.6.2",
|
||||
"@babel/cli": "^7.26.4",
|
||||
"@babel/core": "^7.26.0",
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@docsearch/js": "^3.8.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.0",
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-replace": "^6.0.1",
|
||||
"@stackblitz/sdk": "^1.11.0",
|
||||
|
|
@ -127,9 +127,9 @@
|
|||
"find-unused-sass-variables": "^6.0.0",
|
||||
"globby": "^14.0.2",
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.132.0",
|
||||
"hugo-bin": "^0.136.3",
|
||||
"ip": "^2.0.1",
|
||||
"jasmine": "^5.3.0",
|
||||
"jasmine": "^5.5.0",
|
||||
"jquery": "^3.7.1",
|
||||
"karma": "^6.4.4",
|
||||
"karma-browserstack-launcher": "1.4.0",
|
||||
|
|
@ -142,19 +142,19 @@
|
|||
"karma-rollup-preprocessor": "7.0.7",
|
||||
"lockfile-lint": "^4.14.0",
|
||||
"nodemon": "^3.1.7",
|
||||
"npm-run-all2": "^6.2.3",
|
||||
"postcss": "^8.4.47",
|
||||
"npm-run-all2": "^7.0.1",
|
||||
"postcss": "^8.4.49",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"rollup": "^4.24.0",
|
||||
"rollup": "^4.28.1",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.78.0",
|
||||
"sass-true": "^8.1.0",
|
||||
"shelljs": "^0.8.5",
|
||||
"stylelint": "^16.9.0",
|
||||
"stylelint": "^16.11.0",
|
||||
"stylelint-config-twbs-bootstrap": "^15.1.0",
|
||||
"terser": "^5.34.1",
|
||||
"vnu-jar": "23.4.11"
|
||||
"terser": "^5.37.0",
|
||||
"vnu-jar": "24.10.17"
|
||||
},
|
||||
"files": [
|
||||
"dist/{css,js}/*.{css,js,map}",
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
> .form-select {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
padding-left: $form-floating-padding-x;
|
||||
}
|
||||
|
||||
> .form-control:focus,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
background-color: transparent;
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
|
||||
@media (forced-colors) {
|
||||
background-color: Canvas;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ toc: true
|
|||
|
||||
## Overview
|
||||
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
|
||||
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
|
||||
|
||||
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ With an SVG:
|
|||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<rect width="100%" height="100%" fill="#563d7c"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#007bff"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -82,16 +82,16 @@ body_class: ""
|
|||
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 1</span>
|
||||
<a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 2</span>
|
||||
<a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
|
||||
<span class="px-1">Primary</span>
|
||||
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<span class="px-1">Primary 3</span>
|
||||
<a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -102,48 +102,48 @@ body_class: ""
|
|||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Primary
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Secondary
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Success
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Danger
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Warning
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Info
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Light
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
|
||||
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
|
||||
Dark
|
||||
<span class="vr mx-2"></span>
|
||||
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
<a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ extra_css:
|
|||
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
أكمل القراءة
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -92,7 +92,7 @@ extra_css:
|
|||
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
أكمل القراءة
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ extra_css:
|
|||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
Continue reading
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
@ -91,7 +91,7 @@ extra_css:
|
|||
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
|
||||
Continue reading
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ body_class: ""
|
|||
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -50,7 +50,7 @@ body_class: ""
|
|||
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -71,7 +71,7 @@ body_class: ""
|
|||
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
|
||||
<li class="breadcrumb-item">
|
||||
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -65,22 +65,22 @@ body_class: ""
|
|||
|
||||
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
|
||||
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-center pb-5">
|
||||
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,12 +68,12 @@ extra_js:
|
|||
<ul class="navbar-nav flex-row d-md-none">
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
|
||||
<svg class="bi"><use xlink:href="#search"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
|
||||
<svg class="bi"><use xlink:href="#list"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -95,37 +95,37 @@ extra_js:
|
|||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
|
||||
<svg class="bi"><use xlink:href="#house-fill"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
|
||||
لوحة القيادة
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
|
||||
الطلبات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#cart"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
المنتجات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#people"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
|
||||
الزبائن
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#graph-up"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
|
||||
التقارير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#puzzle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
|
||||
التكاملات
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -134,31 +134,31 @@ extra_js:
|
|||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
|
||||
<span>التقارير المحفوظة</span>
|
||||
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
|
||||
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
|
||||
</a>
|
||||
</h6>
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
الشهر الحالي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
الربع الأخير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
التفاعل الإجتماعي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
مبيعات نهاية العام
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -169,13 +169,13 @@ extra_js:
|
|||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
إعدادات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#door-closed"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
|
||||
خروج
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -193,7 +193,7 @@ extra_js:
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
|
||||
<svg class="bi"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
هذا الأسبوع
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,12 +67,12 @@ extra_js:
|
|||
<ul class="navbar-nav flex-row d-md-none">
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
|
||||
<svg class="bi"><use xlink:href="#search"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item text-nowrap">
|
||||
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="bi"><use xlink:href="#list"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -94,37 +94,37 @@ extra_js:
|
|||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
|
||||
<svg class="bi"><use xlink:href="#house-fill"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#cart"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#people"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#graph-up"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#puzzle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
|
||||
Integrations
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -133,31 +133,31 @@ extra_js:
|
|||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
|
||||
<span>Saved reports</span>
|
||||
<a class="link-secondary" href="#" aria-label="Add a new report">
|
||||
<svg class="bi"><use xlink:href="#plus-circle"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
|
||||
</a>
|
||||
</h6>
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Current month
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Last quarter
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Social engagement
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
|
||||
Year-end sale
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -168,13 +168,13 @@ extra_js:
|
|||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi"><use xlink:href="#door-closed"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -192,7 +192,7 @@ extra_js:
|
|||
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
|
||||
<svg class="bi"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -124,38 +124,38 @@ body_class: ""
|
|||
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -163,38 +163,38 @@ body_class: ""
|
|||
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
|
||||
Games
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -209,7 +209,7 @@ body_class: ""
|
|||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
|
|
@ -288,7 +288,7 @@ body_class: ""
|
|||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
|
|
@ -371,7 +371,7 @@ body_class: ""
|
|||
<ul class="list-unstyled d-flex flex-column gap-2">
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
|
|
@ -380,7 +380,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
|
|
@ -389,7 +389,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
|
|
@ -418,7 +418,7 @@ body_class: ""
|
|||
<ul class="list-unstyled d-flex flex-column gap-2">
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
|
|
@ -427,7 +427,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
|
|
@ -436,7 +436,7 @@ body_class: ""
|
|||
</li>
|
||||
<li>
|
||||
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
|
|
|
|||
|
|
@ -66,35 +66,35 @@ body_class: ""
|
|||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@ body_class: ""
|
|||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -119,7 +119,7 @@ body_class: ""
|
|||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -131,7 +131,7 @@ body_class: ""
|
|||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
|
||||
|
|
@ -159,11 +159,11 @@ body_class: ""
|
|||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -180,11 +180,11 @@ body_class: ""
|
|||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -201,11 +201,11 @@ body_class: ""
|
|||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -222,56 +222,56 @@ body_class: ""
|
|||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
|
||||
<div>
|
||||
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
|
@ -296,7 +296,7 @@ body_class: ""
|
|||
<div class="row row-cols-1 row-cols-sm-2 g-4">
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#collection" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -306,7 +306,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#gear-fill" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -316,7 +316,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#speedometer" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -326,7 +326,7 @@ body_class: ""
|
|||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<svg class="bi" width="1em" height="1em" aria-hidden="true">
|
||||
<use xlink:href="#table" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ body_class: ""
|
|||
<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>
|
||||
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<ul class="nav col-md-4 justify-content-end">
|
||||
|
|
@ -43,16 +43,16 @@ body_class: ""
|
|||
<div class="container">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<div class="col-md-4 d-flex align-items-center">
|
||||
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
|
||||
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<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>
|
||||
</a>
|
||||
<span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span>
|
||||
</div>
|
||||
|
||||
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" 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="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -77,8 +77,8 @@ body_class: ""
|
|||
<div class="container">
|
||||
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
|
||||
<div class="col mb-3">
|
||||
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<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>
|
||||
</a>
|
||||
<p class="text-body-secondary">© {{< year >}}</p>
|
||||
</div>
|
||||
|
|
@ -177,9 +177,9 @@ body_class: ""
|
|||
<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>
|
||||
<ul class="list-unstyled d-flex">
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
|
||||
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></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="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ body_class: ""
|
|||
<div class="container">
|
||||
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Simple header</span>
|
||||
</a>
|
||||
|
||||
|
|
@ -159,8 +159,8 @@ body_class: ""
|
|||
<header class="py-3 mb-3 border-bottom">
|
||||
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
|
||||
|
|
@ -225,7 +225,7 @@ body_class: ""
|
|||
<header class="py-3 mb-4 border-bottom">
|
||||
<div class="container d-flex flex-wrap justify-content-center">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Double header</span>
|
||||
</a>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
|
||||
|
|
@ -247,31 +247,31 @@ body_class: ""
|
|||
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
|
||||
<li>
|
||||
<a href="#" class="nav-link text-secondary">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ body_class: ""
|
|||
|
||||
<div class="container my-5">
|
||||
<div class="p-5 text-center bg-body-tertiary rounded-3">
|
||||
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
|
||||
<p class="col-lg-8 mx-auto fs-5 text-muted">
|
||||
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
|
||||
|
|
@ -44,7 +44,7 @@ body_class: ""
|
|||
<div class="container my-5">
|
||||
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
|
||||
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
|
||||
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg>
|
||||
<svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
|
||||
<h1 class="text-body-emphasis">Placeholder jumbotron</h1>
|
||||
<p class="col-lg-6 mx-auto mb-4">
|
||||
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ body_class: ""
|
|||
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">List group item heading</h6>
|
||||
|
|
@ -35,7 +35,7 @@ body_class: ""
|
|||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Another title here</h6>
|
||||
|
|
@ -45,7 +45,7 @@ body_class: ""
|
|||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Third heading</h6>
|
||||
|
|
@ -118,7 +118,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Finish sales report</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
|
||||
1:00–2:00pm
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -128,7 +128,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Weekly All Hands</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
|
||||
2:00–2:30pm
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -138,7 +138,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<strong>Out of office</strong>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
|
||||
Tomorrow
|
||||
</small>
|
||||
</span>
|
||||
|
|
@ -148,7 +148,7 @@ body_class: ""
|
|||
<span class="pt-1 form-checked-content">
|
||||
<span contenteditable="true" class="w-100">Add new task...</span>
|
||||
<small class="d-block text-body-secondary">
|
||||
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
|
||||
<svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
|
||||
Choose list...
|
||||
</small>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -78,21 +78,21 @@ body_class: ""
|
|||
|
||||
<ul class="d-grid gap-4 my-5 list-unstyled small">
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
|
||||
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Grid view</h5>
|
||||
Not into lists? Try the new grid view.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
|
||||
<svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Bookmarks</h5>
|
||||
Save items you love for easy access later.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex gap-4">
|
||||
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
|
||||
<svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Video embeds</h5>
|
||||
Share videos wherever you go.
|
||||
|
|
@ -130,15 +130,15 @@ body_class: ""
|
|||
<hr class="my-4">
|
||||
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#twitter"/></svg>
|
||||
Sign up with Twitter
|
||||
</button>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
|
||||
Sign up with Facebook
|
||||
</button>
|
||||
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
|
||||
<svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
|
||||
Sign up with GitHub
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -104,42 +104,42 @@ extra_css:
|
|||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Public</th>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Private</th>
|
||||
<td></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Permissions</th>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Sharing</th>
|
||||
<td></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Unlimited members</th>
|
||||
<td></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Extra security</th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
|
||||
<td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ extra_css:
|
|||
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-md-none" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
|
||||
Aperture
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
|
||||
|
|
@ -34,8 +34,8 @@ extra_css:
|
|||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav flex-grow-1 justify-content-between">
|
||||
<li class="nav-item"><a class="nav-link" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
|
||||
<li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
|
||||
</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
|
||||
|
|
@ -43,8 +43,8 @@ extra_css:
|
|||
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
|
||||
<li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -60,11 +60,11 @@ extra_css:
|
|||
<div class="d-flex gap-3 justify-content-center lead fw-normal">
|
||||
<a class="icon-link" href="#">
|
||||
Learn more
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
<a class="icon-link" href="#">
|
||||
Buy
|
||||
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,38 +38,38 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -94,38 +94,38 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
|
||||
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -150,7 +150,7 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
|
||||
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="visually-hidden">Icon-only</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||||
|
|
@ -198,7 +198,7 @@ body_class: ""
|
|||
|
||||
<div class="flex-shrink-0 p-3" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
|
||||
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
||||
</a>
|
||||
<ul class="list-unstyled ps-0">
|
||||
|
|
@ -261,7 +261,7 @@ body_class: ""
|
|||
|
||||
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
|
||||
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
|
||||
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">List group</span>
|
||||
</a>
|
||||
<div class="list-group list-group-flush border-bottom scrollarea">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ title: Starter Template
|
|||
<div class="col-lg-8 mx-auto p-4 py-md-5">
|
||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Starter template</span>
|
||||
</a>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,17 @@ Install Bootstrap in your Node.js powered apps with [the yarn package](https://y
|
|||
yarn add bootstrap@{{< param "current_version" >}}
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
**Yarn 2+ (aka Yarn Berry) doesn't support the `node_modules` directory by default**: using our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
|
||||
|
||||
```sh
|
||||
yarn config set nodeLinker node-modules # Use the node_modules linker
|
||||
touch yarn.lock # Create an empty yarn.lock file
|
||||
yarn install # Install the dependencies
|
||||
yarn start # Start the project
|
||||
```
|
||||
{{< /callout >}}
|
||||
|
||||
### RubyGems
|
||||
|
||||
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html):
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
|
|||
{{< /callout >}}
|
||||
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
|
||||
- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
|
||||
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
|
||||
|
||||
## Using Bootstrap as a module
|
||||
|
||||
|
|
|
|||
|
|
@ -445,7 +445,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
|
|||
|
||||
- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
|
||||
|
||||
- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
|
||||
|
||||
|
|
|
|||
|
|
@ -452,7 +452,8 @@ You can enable responsive classes for an existing set of utilities that are not
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
|
|
@ -508,7 +509,8 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"margin-start": map-merge(
|
||||
map-get($utilities, "margin-start"),
|
||||
( class: ml ),
|
||||
|
|
@ -574,13 +576,11 @@ $utilities: map-merge(
|
|||
(
|
||||
// Remove the `width` utility
|
||||
"width": null,
|
||||
|
||||
// Make an existing utility responsive
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
),
|
||||
|
||||
// Add new utilities
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ For faster mobile-friendly development, use responsive display classes for showi
|
|||
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
|
||||
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
|
||||
{{< bs-table >}}
|
||||
| Screen size | Class |
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ Here are some real life examples of these classes:
|
|||
</button>
|
||||
|
||||
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
|
||||
Latest ({{ .Site.Params.docs_version }}.x)
|
||||
<svg class="bi"><use xlink:href="#check2"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 428 B After Width: | Height: | Size: 447 B |
|
|
@ -6,29 +6,29 @@
|
|||
data-bs-toggle="dropdown"
|
||||
{{ if not $isExamples }}data-bs-display="static"{{ end }}
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
|
||||
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue