Merging upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
8838637a85
commit
449962af96
GPG key ID:
FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
|
|
@ -4,63 +4,3 @@ title: Examples
|
|||
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
||||
aliases: "/examples/"
|
||||
---
|
||||
|
||||
{{< list-examples.inline >}}
|
||||
{{ range $entry := $.Site.Data.examples -}}
|
||||
<div class="bd-content">
|
||||
<h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
|
||||
<p>{{ $entry.description }}</p>
|
||||
{{ if eq $entry.category "RTL" -}}
|
||||
<div class="bd-callout bd-callout-warning small">
|
||||
<p>
|
||||
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||
</p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ range $i, $example := $entry.examples -}}
|
||||
{{- $len := len $entry.examples -}}
|
||||
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
||||
{{ if $entry.external }}
|
||||
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
|
||||
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
|
||||
<div>
|
||||
<h3 class="h5 mb-1">
|
||||
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank" rel="noopener">
|
||||
{{ $example.name }}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
<p>
|
||||
{{- $indexPath := "index.html" -}}
|
||||
{{- if $example.indexPath -}}
|
||||
{{- $indexPath = $example.indexPath -}}
|
||||
{{- end }}
|
||||
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
|
||||
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
|
||||
Edit in StackBlitz
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="col-sm-6 col-md-3 mb-3">
|
||||
<a class="d-block link-offset-1" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
|
||||
/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
|
||||
src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
|
||||
alt=""
|
||||
width="480" height="300"
|
||||
loading="lazy">
|
||||
<h3 class="h5 mb-1">
|
||||
{{ $example.name }}
|
||||
</h3>
|
||||
</a>
|
||||
<p class="text-body-secondary">{{ $example.description }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /list-examples.inline >}}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ title: Album example
|
|||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4>Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Follow on X</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -239,7 +239,7 @@ extra_css:
|
|||
<h4 class="fst-italic">في مكان آخر</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -250,7 +250,7 @@ extra_css:
|
|||
</main>
|
||||
|
||||
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
|
||||
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
|
||||
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://x.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
|
||||
<p class="mb-0">
|
||||
<a href="#">عد إلى الأعلى</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -291,7 +291,7 @@ extra_css:
|
|||
<h4 class="fst-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -302,7 +302,7 @@ extra_css:
|
|||
</main>
|
||||
|
||||
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://x.com/mdo">@mdo</a>.</p>
|
||||
<p class="mb-0">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ body_class: ""
|
|||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
|
||||
Primary icon
|
||||
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
|
||||
Secondary icon
|
||||
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "../cheatsheet/cheatsheet.rtl.css"
|
||||
extra_js:
|
||||
- src: "../cheatsheet/cheatsheet.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
direction: rtl
|
||||
---
|
||||
|
|
@ -70,7 +71,7 @@ direction: rtl
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="bd-cheatsheet container-fluid bg-body">
|
||||
<main class="bd-cheatsheet container-fluid bg-body">
|
||||
<section id="content">
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>
|
||||
|
||||
|
|
@ -201,8 +202,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -233,8 +235,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -293,8 +296,9 @@ direction: rtl
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td><bdo lang="en" dir="ltr">@social</bdo></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -368,8 +372,8 @@ direction: rtl
|
|||
<input type="file" class="form-control" id="customFile">
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">زر على شكل مفتاح اختيار.</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
|
||||
|
|
@ -920,7 +924,7 @@ direction: rtl
|
|||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
زر القائمة المنسدلة
|
||||
|
|
@ -1033,7 +1037,7 @@ direction: rtl
|
|||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<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">
|
||||
زر القائمة المنسدلة لليسار
|
||||
|
|
@ -1537,7 +1541,7 @@ direction: rtl
|
|||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "cheatsheet.css"
|
||||
extra_js:
|
||||
- src: "cheatsheet.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -69,7 +70,7 @@ body_class: "bg-body-tertiary"
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="bd-cheatsheet container-fluid bg-body">
|
||||
<main class="bd-cheatsheet container-fluid bg-body">
|
||||
<section id="content">
|
||||
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
|
||||
|
||||
|
|
@ -200,8 +201,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -232,8 +234,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -292,8 +295,9 @@ body_class: "bg-body-tertiary"
|
|||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
<td>John</td>
|
||||
<td>Doe</td>
|
||||
<td>@social</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -367,8 +371,8 @@ body_class: "bg-body-tertiary"
|
|||
<input type="file" class="form-control" id="customFile">
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
|
||||
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">Example range</label>
|
||||
|
|
@ -919,7 +923,7 @@ body_class: "bg-body-tertiary"
|
|||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
|
|
@ -1032,7 +1036,7 @@ body_class: "bg-body-tertiary"
|
|||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
|
||||
<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
|
||||
|
|
@ -1533,7 +1537,7 @@ body_class: "bg-body-tertiary"
|
|||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ extra_css:
|
|||
- "../checkout/checkout.css"
|
||||
extra_js:
|
||||
- src: "../checkout/checkout.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -13,7 +14,7 @@ body_class: "bg-body-tertiary"
|
|||
<main>
|
||||
<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">
|
||||
<h2>نموذج إتمام الشراء</h2>
|
||||
<h1 class="h2">نموذج إتمام الشراء</h1>
|
||||
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "checkout.css"
|
||||
extra_js:
|
||||
- src: "checkout.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
---
|
||||
|
||||
|
|
@ -12,7 +13,7 @@ body_class: "bg-body-tertiary"
|
|||
<main>
|
||||
<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">
|
||||
<h2>Checkout form</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@ body_class: "d-flex h-100 text-center text-bg-dark"
|
|||
</main>
|
||||
|
||||
<footer class="mt-auto text-white-50">
|
||||
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
|
||||
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@ layout: examples
|
|||
title: قالب لوحة القيادة
|
||||
direction: rtl
|
||||
extra_css:
|
||||
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
|
||||
- "../dashboard/dashboard.rtl.css"
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.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">
|
||||
|
|
@ -67,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>
|
||||
|
|
@ -94,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>
|
||||
|
|
@ -133,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>
|
||||
|
|
@ -168,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>
|
||||
|
|
@ -192,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>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
layout: examples
|
||||
title: Dashboard Template
|
||||
extra_css:
|
||||
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
|
||||
- "dashboard.css"
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.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">
|
||||
|
|
@ -66,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>
|
||||
|
|
@ -93,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>
|
||||
|
|
@ -132,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>
|
||||
|
|
@ -167,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>
|
||||
|
|
@ -191,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>
|
||||
|
|
@ -208,8 +208,8 @@ body_class: ""
|
|||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<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">
|
||||
|
|
@ -226,8 +226,8 @@ body_class: ""
|
|||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="next month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
|
|
@ -287,8 +287,8 @@ body_class: ""
|
|||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="previous month">
|
||||
<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">
|
||||
|
|
@ -305,8 +305,8 @@ body_class: ""
|
|||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<button class="btn cal-btn" type="button">
|
||||
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<button class="btn cal-btn" type="button" aria-label="next month">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,14 @@ body_class: ""
|
|||
<symbol id="instagram" viewBox="0 0 16 16">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||||
</symbol>
|
||||
<symbol id="twitter" viewBox="0 0 16 16">
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="container">
|
||||
<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 +40,15 @@ 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="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 +73,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>
|
||||
|
|
@ -167,7 +163,7 @@ body_class: ""
|
|||
<p>Monthly digest of what's new and exciting from us.</p>
|
||||
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
|
||||
<label for="newsletter1" class="visually-hidden">Email address</label>
|
||||
<input id="newsletter1" type="text" class="form-control" placeholder="Email address">
|
||||
<input id="newsletter1" type="email" class="form-control" placeholder="Email address">
|
||||
<button class="btn btn-primary" type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -177,9 +173,8 @@ 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="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.
|
||||
|
|
@ -30,7 +30,7 @@ body_class: ""
|
|||
<div class="d-inline-flex gap-2 mb-5">
|
||||
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
|
||||
Call to action
|
||||
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
|
||||
<svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
|
||||
Secondary link
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ body_class: ""
|
|||
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="github" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||
<symbol id="google" viewBox="0 0 16 16">
|
||||
<path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="twitter" viewBox="0 0 16 16">
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
|
||||
<symbol id="github" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="facebook" viewBox="0 0 16 16">
|
||||
|
|
@ -34,7 +34,7 @@ body_class: ""
|
|||
</svg>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<h1 class="modal-title fs-5">Modal title</h1>
|
||||
|
|
@ -54,7 +54,7 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-3 shadow">
|
||||
<div class="modal-body p-4 text-center">
|
||||
<h5 class="mb-0">Enable this setting?</h5>
|
||||
|
|
@ -71,28 +71,28 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-body p-5">
|
||||
<h2 class="fw-bold mb-0">What's new</h2>
|
||||
|
||||
<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.
|
||||
|
|
@ -108,7 +108,7 @@ body_class: ""
|
|||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header p-5 pb-4 border-bottom-0">
|
||||
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
|
||||
|
|
@ -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>
|
||||
Sign up with Twitter
|
||||
<svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#google"/></svg>
|
||||
Sign up with Google
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "offcanvas-navbar.css"
|
||||
extra_js:
|
||||
- src: "offcanvas-navbar.js"
|
||||
defer: true
|
||||
body_class: "bg-body-tertiary"
|
||||
aliases: "/docs/5.3/examples/offcanvas/"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ extra_css:
|
|||
- "sidebars.css"
|
||||
extra_js:
|
||||
- src: "sidebars.js"
|
||||
defer: true
|
||||
body_class: ""
|
||||
---
|
||||
|
||||
|
|
@ -37,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>
|
||||
|
|
@ -93,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>
|
||||
|
|
@ -149,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">
|
||||
|
|
@ -197,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">
|
||||
|
|
@ -260,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">
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
|
|||
</div>
|
||||
|
||||
<div class="form-check text-start my-3">
|
||||
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
<input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -38,25 +38,25 @@ title: Starter Template
|
|||
<ul class="list-unstyled ps-0">
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><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 npm starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><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 starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><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 starter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
|
||||
<svg class="bi" width="16" height="16"><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 starter
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -69,31 +69,31 @@ title: Starter Template
|
|||
<ul class="list-unstyled ps-0">
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
|
||||
<svg class="bi" width="16" height="16"><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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
|
||||
<svg class="bi" width="16" height="16"><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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
|
||||
<svg class="bi" width="16" height="16"><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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
|
||||
<svg class="bi" width="16" height="16"><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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
|
||||
<svg class="bi" width="16" height="16"><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
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue