feat: add created_by field handling for flights
@@ -0,0 +1,694 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>مثال الألبوم · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/album-rtl/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header data-bs-theme="dark">
|
||||
<div class="collapse text-bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4>حول</h4>
|
||||
<p class="text-body-secondary">
|
||||
أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر.
|
||||
اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة.
|
||||
ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4>تواصل معي</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
|
||||
<li>
|
||||
<a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-white"
|
||||
>راسلني على البريد الإلكتروني</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||
<div class="container">
|
||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
class="me-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||
></path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
<strong>الألبوم</strong>
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarHeader"
|
||||
aria-controls="navbarHeader"
|
||||
aria-expanded="false"
|
||||
aria-label="تبديل التنقل"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="py-5 text-center container">
|
||||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="fw-light">مثال الألبوم</h1>
|
||||
<p class="lead text-body-secondary">
|
||||
وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك).
|
||||
اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا
|
||||
الألبوم تمامًا.
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
|
||||
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="album py-5 bg-body-tertiary">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
صورة مصغرة
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
هذا المحتوى أطول قليلاً.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
عرض
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
تعديل
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 دقائق</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="text-body-secondary py-5">
|
||||
<div class="container">
|
||||
<p class="float-end mb-1"><a href="#">عد إلى الأعلى</a></p>
|
||||
<p class="mb-1">
|
||||
مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
جديد على Bootstrap؟ <a href="/"> تفضل بزيارة الصفحة الرئيسية </a> أو
|
||||
اقرأ <a href="../getting-started/introduction"> دليل البدء </a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,699 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Album example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/album/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header data-bs-theme="dark">
|
||||
<div class="collapse text-bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4>About</h4>
|
||||
<p class="text-body-secondary">
|
||||
Add some information about the album below, the author, or any
|
||||
other background context. Make it a few sentences long so folks
|
||||
can pick up some informative tidbits. Then, link them off to
|
||||
some social networking sites or contact information.
|
||||
</p>
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||
<div class="container">
|
||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
class="me-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||
></path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
<strong>Album</strong>
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarHeader"
|
||||
aria-controls="navbarHeader"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="py-5 text-center container">
|
||||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="fw-light">Album example</h1>
|
||||
<p class="lead text-body-secondary">
|
||||
Something short and leading about the collection below—its
|
||||
contents, the creator, etc. Make it short and sweet, but not too
|
||||
short so folks don’t simply skip over it entirely.
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="album py-5 bg-body-tertiary">
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="225"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">
|
||||
Thumbnail
|
||||
</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
This is a wider card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="text-body-secondary py-5">
|
||||
<div class="container">
|
||||
<p class="float-end mb-1"><a href="#">Back to top</a></p>
|
||||
<p class="mb-1">
|
||||
Album example is © Bootstrap, but please download and customize
|
||||
it for yourself!
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
New to Bootstrap? <a href="/">Visit the homepage</a> or read our
|
||||
<a href="../getting-started/introduction">getting started guide</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408" fill="#fff"><path d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 01-2-2v-213a2 2 0 012-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z"/></svg>
|
||||
|
After Width: | Height: | Size: 1007 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="408"><defs><linearGradient id="bs-logo-a" x1="76.079" x2="523.48" y1="10.798" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe"/><stop offset="1" stop-color="#6610f2"/></linearGradient><linearGradient id="bs-logo-b" x1="193.508" x2="293.514" y1="109.74" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><filter xmlns="http://www.w3.org/2000/svg" id="bs-logo-c" width="197" height="249" x="161.901" y="83.457" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><path fill="url(#bs-logo-a)" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z"/><path fill="url(#bs-logo-b)" filter="url(#bs-logo-c)" stroke="#fff" d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,80 @@
|
||||
/*!
|
||||
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2025 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme')
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme)
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto') {
|
||||
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitcher = document.querySelector('#bd-theme')
|
||||
|
||||
if (!themeSwitcher) {
|
||||
return
|
||||
}
|
||||
|
||||
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active use')
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
element.setAttribute('aria-pressed', 'false')
|
||||
})
|
||||
|
||||
btnToActive.classList.add('active')
|
||||
btnToActive.setAttribute('aria-pressed', 'true')
|
||||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
|
||||
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||||
|
||||
if (focus) {
|
||||
themeSwitcher.focus()
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme())
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme())
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||
setStoredTheme(theme)
|
||||
setTheme(theme)
|
||||
showActiveTheme(theme, true)
|
||||
})
|
||||
})
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,3 @@
|
||||
.badge > a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,537 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Badges · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/badges/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="badges.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span class="badge text-bg-primary rounded-pill">Primary</span>
|
||||
<span class="badge text-bg-secondary rounded-pill">Secondary</span>
|
||||
<span class="badge text-bg-success rounded-pill">Success</span>
|
||||
<span class="badge text-bg-danger rounded-pill">Danger</span>
|
||||
<span class="badge text-bg-warning rounded-pill">Warning</span>
|
||||
<span class="badge text-bg-info rounded-pill">Info</span>
|
||||
<span class="badge text-bg-light rounded-pill">Light</span>
|
||||
<span class="badge text-bg-dark rounded-pill">Dark</span>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span class="badge bg-primary-subtle text-primary-emphasis rounded-pill"
|
||||
>Primary</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill"
|
||||
>Secondary</span
|
||||
>
|
||||
<span class="badge bg-success-subtle text-success-emphasis rounded-pill"
|
||||
>Success</span
|
||||
>
|
||||
<span class="badge bg-danger-subtle text-danger-emphasis rounded-pill"
|
||||
>Danger</span
|
||||
>
|
||||
<span class="badge bg-warning-subtle text-warning-emphasis rounded-pill"
|
||||
>Warning</span
|
||||
>
|
||||
<span class="badge bg-info-subtle text-info-emphasis rounded-pill"
|
||||
>Info</span
|
||||
>
|
||||
<span class="badge bg-light-subtle text-light-emphasis rounded-pill"
|
||||
>Light</span
|
||||
>
|
||||
<span class="badge bg-dark-subtle text-dark-emphasis rounded-pill"
|
||||
>Dark</span
|
||||
>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span
|
||||
class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill"
|
||||
>Primary</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill"
|
||||
>Secondary</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill"
|
||||
>Success</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill"
|
||||
>Danger</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill"
|
||||
>Warning</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill"
|
||||
>Info</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill"
|
||||
>Light</span
|
||||
>
|
||||
<span
|
||||
class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill"
|
||||
>Dark</span
|
||||
>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span
|
||||
class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle me-1"
|
||||
width="24"
|
||||
height="24"
|
||||
src="https://github.com/mdo.png"
|
||||
alt=""
|
||||
/>Primary
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span
|
||||
class="badge d-flex align-items-center p-1 pe-2 text-dark-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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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 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"></use></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 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"></use></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 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"></use></svg
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<span
|
||||
class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"
|
||||
>
|
||||
<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="#" aria-label="Delete primary"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete secondary"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete success"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete danger"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete warning"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete info"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete light"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></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="#" aria-label="Delete dark"
|
||||
><svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#x-circle-fill"></use></svg
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,700 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>قالب المدونة · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/blog-rtl/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="../blog/blog.rtl.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol
|
||||
id="aperture"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cart" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<header class="border-bottom lh-1 py-3">
|
||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
||||
<div class="col-4 pt-1">
|
||||
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a
|
||||
class="blog-header-logo text-body-emphasis text-decoration-none"
|
||||
href="#"
|
||||
>كبير</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
||||
<a class="link-secondary" href="#" aria-label="بحث">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="mx-3"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title>بحث</title>
|
||||
<circle cx="10.5" cy="10.5" r="7.5"></circle>
|
||||
<path d="M21 21l-5.2-5.2"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="nav-scroller py-1 mb-3 border-bottom">
|
||||
<nav class="nav nav-underline justify-content-between">
|
||||
<a class="nav-item nav-link link-body-emphasis active" href="#"
|
||||
>العالم</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#"
|
||||
>الولايات المتحدة</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#"
|
||||
>المال والأعمال</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#"
|
||||
>الرأي العام</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<main class="container">
|
||||
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
|
||||
<div class="col-lg-6 px-0">
|
||||
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
|
||||
<p class="lead my-3">
|
||||
عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة
|
||||
وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.
|
||||
</p>
|
||||
<p class="lead mb-0">
|
||||
<a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
|
||||
>
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary-emphasis"
|
||||
>العالم</strong
|
||||
>
|
||||
<h3 class="mb-0">مشاركة مميزة</h3>
|
||||
<div class="mb-1 text-body-secondary">نوفمبر 12</div>
|
||||
<p class="card-text mb-auto">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
class="icon-link gap-1 icon-link-hover stretched-link"
|
||||
>
|
||||
أكمل القراءة
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img"
|
||||
height="250"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
|
||||
>
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success-emphasis"
|
||||
>التصميم</strong
|
||||
>
|
||||
<h3 class="mb-0">عنوان الوظيفة</h3>
|
||||
<div class="mb-1 text-body-secondary">نوفمبر 11</div>
|
||||
<p class="mb-auto">
|
||||
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
class="icon-link gap-1 icon-link-hover stretched-link"
|
||||
>
|
||||
أكمل القراءة
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg
|
||||
aria-label="Placeholder: صورة مصغرة"
|
||||
class="bd-placeholder-img"
|
||||
height="250"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">صورة مصغرة</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">من Firehose</h3>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2>
|
||||
<p class="blog-post-meta">
|
||||
1 يناير 2021 بواسطة <a href="#"> Mark </a>
|
||||
</p>
|
||||
<p>
|
||||
تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه
|
||||
وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد
|
||||
مدعومة بشكل كامل.
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم
|
||||
والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض
|
||||
أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات
|
||||
إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً
|
||||
وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من
|
||||
أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها
|
||||
تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.
|
||||
</p>
|
||||
<blockquote class="blockquote">
|
||||
<p>
|
||||
تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من
|
||||
المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من
|
||||
انبعاثات غازات الاحتباس الحراري العالمية
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من
|
||||
المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من
|
||||
انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة
|
||||
من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات
|
||||
وشاحنات وطائرات وقطارات.
|
||||
</p>
|
||||
<h2>عنوان</h2>
|
||||
<p>
|
||||
تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم
|
||||
النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في
|
||||
الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل
|
||||
الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات
|
||||
تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين،
|
||||
وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه
|
||||
كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا
|
||||
يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال
|
||||
تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات
|
||||
الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا
|
||||
وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع
|
||||
غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!
|
||||
</p>
|
||||
<h3>عنوان فرعي</h3>
|
||||
<p>
|
||||
ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال
|
||||
الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات
|
||||
الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار
|
||||
الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد
|
||||
الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة
|
||||
الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من
|
||||
البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة
|
||||
في صنع الأطعمة المألوفة لدينا.
|
||||
</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>
|
||||
وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم
|
||||
الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات
|
||||
للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه
|
||||
البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين
|
||||
كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد
|
||||
الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات
|
||||
أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون
|
||||
مغلقة الحلقة.
|
||||
</p>
|
||||
<h3>عنوان فرعي</h3>
|
||||
<p>
|
||||
بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في
|
||||
قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار
|
||||
فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية
|
||||
المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات
|
||||
الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان
|
||||
الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون
|
||||
الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية
|
||||
بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من
|
||||
خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة
|
||||
بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية
|
||||
أكبر من المساحة نفسها.
|
||||
</p>
|
||||
<p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p>
|
||||
<ul>
|
||||
<li>البروتينات</li>
|
||||
<li>الكربوهيدرات</li>
|
||||
<li>الدهون</li>
|
||||
</ul>
|
||||
<p>
|
||||
وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات
|
||||
العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها
|
||||
تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية
|
||||
بشكل أساس من:
|
||||
</p>
|
||||
<ol>
|
||||
<li>الكربون</li>
|
||||
<li>الهيدروجين</li>
|
||||
<li>الأكسجين</li>
|
||||
<li>النيتروجين</li>
|
||||
</ol>
|
||||
<p>
|
||||
ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن
|
||||
الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن
|
||||
نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو
|
||||
العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة
|
||||
على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله
|
||||
الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال
|
||||
مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات
|
||||
غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي
|
||||
لها عديد من الاستخدامات.
|
||||
</p>
|
||||
</article>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2>
|
||||
<p class="blog-post-meta">
|
||||
23 ديسمبر 2020 بواسطة <a href="#">Jacob</a>
|
||||
</p>
|
||||
<p>
|
||||
في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق،
|
||||
وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في
|
||||
شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون
|
||||
الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا
|
||||
تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.
|
||||
</p>
|
||||
<blockquote><p>تم تصنيع اللحوم بأنواع عديدة</p></blockquote>
|
||||
<p>
|
||||
إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في
|
||||
عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية
|
||||
التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من
|
||||
الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.
|
||||
</p>
|
||||
<p>
|
||||
وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات
|
||||
البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي
|
||||
تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.
|
||||
</p>
|
||||
</article>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>
|
||||
<p class="blog-post-meta">
|
||||
14 ديسمبر 2020 بواسطة <a href="#">Jacob</a>
|
||||
</p>
|
||||
<p>
|
||||
كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين
|
||||
من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين
|
||||
والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا
|
||||
لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة
|
||||
عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء
|
||||
الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين"
|
||||
(Solein).
|
||||
</p>
|
||||
<p>
|
||||
وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى
|
||||
الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء
|
||||
الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة
|
||||
بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية:
|
||||
الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي
|
||||
البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه
|
||||
إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.
|
||||
</p>
|
||||
<p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p>
|
||||
<ul>
|
||||
<li>
|
||||
توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
|
||||
</li>
|
||||
<li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li>
|
||||
<li>
|
||||
تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ
|
||||
وجميع سكان كوكب الأرض في عام 2050م
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون
|
||||
مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا
|
||||
اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد
|
||||
يبدو ذلك خيالياً لكنه ليس مستحيلاً!
|
||||
</p>
|
||||
</article>
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary rounded-pill" href="#"
|
||||
>تدوينات أقدم</a
|
||||
>
|
||||
<a
|
||||
class="btn btn-outline-secondary rounded-pill disabled"
|
||||
aria-disabled="true"
|
||||
>تدوينات أحدث</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="position-sticky" style="top: 2rem">
|
||||
<div class="p-4 mb-3 bg-body-tertiary rounded">
|
||||
<h4 class="fst-italic">حول</h4>
|
||||
<p class="mb-0">
|
||||
أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت،
|
||||
والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو،
|
||||
والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم
|
||||
الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت
|
||||
روحه، وإن كان عمرا فأنت شبابه.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fst-italic">المشاركات الاخيرة</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
|
||||
<small class="text-body-secondary">15 يناير 2024</small>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
|
||||
<small class="text-body-secondary">14 يناير 2024</small>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">
|
||||
أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!
|
||||
</h6>
|
||||
<small class="text-body-secondary">13 يناير 2024</small>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">الأرشيف</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">مارس 2021</a></li>
|
||||
<li><a href="#">شباط 2021</a></li>
|
||||
<li><a href="#">يناير 2021</a></li>
|
||||
<li><a href="#">ديسمبر 2020</a></li>
|
||||
<li><a href="#">نوفمبر 2020</a></li>
|
||||
<li><a href="#">أكتوبر 2020</a></li>
|
||||
<li><a href="#">سبتمبر 2020</a></li>
|
||||
<li><a href="#">اغسطس 2020</a></li>
|
||||
<li><a href="#">يوليو 2020</a></li>
|
||||
<li><a href="#">يونيو 2020</a></li>
|
||||
<li><a href="#">مايو 2020</a></li>
|
||||
<li><a href="#">ابريل 2020</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">في مكان آخر</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
|
||||
<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>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
/* stylelint-disable @stylistic/selector-list-comma-newline-after */
|
||||
|
||||
.blog-header-logo {
|
||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.blog-header-logo:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.h-250 { height: 250px; }
|
||||
@media (min-width: 768px) {
|
||||
.h-md-250 { height: 250px; }
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.blog-pagination {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Blog posts
|
||||
*/
|
||||
.blog-post {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-post-meta {
|
||||
margin-bottom: 1.25rem;
|
||||
color: #727272;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/* stylelint-disable @stylistic/selector-list-comma-newline-after */
|
||||
|
||||
.blog-header-logo {
|
||||
font-family: Amiri, Georgia, "Times New Roman", serif;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.blog-header-logo:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: Amiri, Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.h-250 { height: 250px; }
|
||||
@media (min-width: 768px) {
|
||||
.h-md-250 { height: 250px; }
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.blog-pagination {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Blog posts
|
||||
*/
|
||||
.blog-post {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-post-meta {
|
||||
margin-bottom: 1.25rem;
|
||||
color: #727272;
|
||||
}
|
||||
@@ -0,0 +1,759 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Blog Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/blog/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="blog.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol
|
||||
id="aperture"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cart" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<header class="border-bottom lh-1 py-3">
|
||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
||||
<div class="col-4 pt-1">
|
||||
<a class="link-secondary" href="#">Subscribe</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a
|
||||
class="blog-header-logo text-body-emphasis text-decoration-none"
|
||||
href="#"
|
||||
>Large</a
|
||||
>
|
||||
</div>
|
||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
||||
<a class="link-secondary" href="#" aria-label="Search">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="mx-3"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title>Search</title>
|
||||
<circle cx="10.5" cy="10.5" r="7.5"></circle>
|
||||
<path d="M21 21l-5.2-5.2"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="nav-scroller py-1 mb-3 border-bottom">
|
||||
<nav class="nav nav-underline justify-content-between">
|
||||
<a class="nav-item nav-link link-body-emphasis active" href="#"
|
||||
>World</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#"
|
||||
>Technology</a
|
||||
>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
|
||||
<a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<main class="container">
|
||||
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
|
||||
<div class="col-lg-6 px-0">
|
||||
<h1 class="display-4 fst-italic">
|
||||
Title of a longer featured blog post
|
||||
</h1>
|
||||
<p class="lead my-3">
|
||||
Multiple lines of text that form the lede, informing new readers
|
||||
quickly and efficiently about what’s most interesting in this post’s
|
||||
contents.
|
||||
</p>
|
||||
<p class="lead mb-0">
|
||||
<a href="#" class="text-body-emphasis fw-bold"
|
||||
>Continue reading...</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
|
||||
>
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary-emphasis"
|
||||
>World</strong
|
||||
>
|
||||
<h3 class="mb-0">Featured post</h3>
|
||||
<div class="mb-1 text-body-secondary">Nov 12</div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img"
|
||||
height="250"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
|
||||
>
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success-emphasis"
|
||||
>Design</strong
|
||||
>
|
||||
<h3 class="mb-0">Post title</h3>
|
||||
<div class="mb-1 text-body-secondary">Nov 11</div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg
|
||||
aria-label="Placeholder: Thumbnail"
|
||||
class="bd-placeholder-img"
|
||||
height="250"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c"></rect>
|
||||
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">From the Firehose</h3>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
|
||||
<p class="blog-post-meta">
|
||||
January 1, 2021 by <a href="#">Mark</a>
|
||||
</p>
|
||||
<p>
|
||||
This blog post shows a few different types of content that’s
|
||||
supported and styled with Bootstrap. Basic typography, lists,
|
||||
tables, images, code, and more are all supported as expected.
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<h2>Blockquotes</h2>
|
||||
<p>This is an example blockquote in action:</p>
|
||||
<blockquote class="blockquote">
|
||||
<p>Quoted text goes here.</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<h3>Example lists</h3>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It's a
|
||||
slightly shorter version of the other highly repetitive body text
|
||||
used throughout. This is an example unordered list:
|
||||
</p>
|
||||
<ul>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>And this is an ordered list:</p>
|
||||
<ol>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ol>
|
||||
<p>And this is a definition list:</p>
|
||||
<dl>
|
||||
<dt>HyperText Markup Language (HTML)</dt>
|
||||
<dd>
|
||||
The language used to describe and define the content of a Web
|
||||
page
|
||||
</dd>
|
||||
<dt>Cascading Style Sheets (CSS)</dt>
|
||||
<dd>Used to describe the appearance of Web content</dd>
|
||||
<dt>JavaScript (JS)</dt>
|
||||
<dd>
|
||||
The programming language used to build advanced Web sites and
|
||||
applications
|
||||
</dd>
|
||||
</dl>
|
||||
<h2>Inline HTML elements</h2>
|
||||
<p>
|
||||
HTML defines a long list of available inline tags, a complete list
|
||||
of which can be found on the
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"
|
||||
>Mozilla Developer Network</a
|
||||
>.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>To bold text</strong>, use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><strong></code
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
<em>To italicize text</em>, use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><em></code
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
Abbreviations, like
|
||||
<abbr title="HyperText Markup Language">HTML</abbr> should use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><abbr></code
|
||||
>, with an optional
|
||||
<code class="language-plaintext highlighter-rouge">title</code>
|
||||
attribute for the full phrase.
|
||||
</li>
|
||||
<li>
|
||||
Citations, like <cite>— Mark Otto</cite>, should use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><cite></code
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
<del>Deleted</del> text should use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><del></code
|
||||
>
|
||||
and <ins>inserted</ins> text should use
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><ins></code
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
Superscript <sup>text</sup> uses
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><sup></code
|
||||
>
|
||||
and subscript <sub>text</sub> uses
|
||||
<code class="language-plaintext highlighter-rouge"
|
||||
><sub></code
|
||||
>.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Most of these elements are styled by browsers with few
|
||||
modifications on our part.
|
||||
</p>
|
||||
<h2>Heading</h2>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It's a
|
||||
slightly shorter version of the other highly repetitive body text
|
||||
used throughout.
|
||||
</p>
|
||||
</article>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
|
||||
<p class="blog-post-meta">
|
||||
December 23, 2020 by <a href="#">Jacob</a>
|
||||
</p>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
Longer quote goes here, maybe with some
|
||||
<strong>emphasized text</strong> in the middle of it.
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<h3>Example table</h3>
|
||||
<p>And don't forget about tables in these posts:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Upvotes</th>
|
||||
<th>Downvotes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alice</td>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>7</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Totals</td>
|
||||
<td>21</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It's a
|
||||
slightly shorter version of the other highly repetitive body text
|
||||
used throughout.
|
||||
</p>
|
||||
</article>
|
||||
<article class="blog-post">
|
||||
<h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
|
||||
<p class="blog-post-meta">
|
||||
December 14, 2020 by <a href="#">Chris</a>
|
||||
</p>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It has been
|
||||
written to fill the available space and show how a longer snippet
|
||||
of text affects the surrounding content. We'll repeat it often to
|
||||
keep the demonstration flowing, so be on the lookout for this
|
||||
exact same string of text.
|
||||
</p>
|
||||
<ul>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>
|
||||
This is some additional paragraph placeholder content. It's a
|
||||
slightly shorter version of the other highly repetitive body text
|
||||
used throughout.
|
||||
</p>
|
||||
</article>
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
|
||||
<a
|
||||
class="btn btn-outline-secondary rounded-pill disabled"
|
||||
aria-disabled="true"
|
||||
>Newer</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="position-sticky" style="top: 2rem">
|
||||
<div class="p-4 mb-3 bg-body-tertiary rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">
|
||||
Customize this section to tell your visitors a little bit about
|
||||
your publication, writers, content, or something else entirely.
|
||||
Totally up to you.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fst-italic">Recent posts</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">Example blog post title</h6>
|
||||
<small class="text-body-secondary"
|
||||
>January 15, 2024</small
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">This is another blog post title</h6>
|
||||
<small class="text-body-secondary"
|
||||
>January 14, 2024</small
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="96"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100%" height="100%" fill="#777"></rect>
|
||||
</svg>
|
||||
<div class="col-lg-8">
|
||||
<h6 class="mb-0">
|
||||
Longer blog post title: This one has multiple lines!
|
||||
</h6>
|
||||
<small class="text-body-secondary"
|
||||
>January 13, 2024</small
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2021</a></li>
|
||||
<li><a href="#">February 2021</a></li>
|
||||
<li><a href="#">January 2021</a></li>
|
||||
<li><a href="#">December 2020</a></li>
|
||||
<li><a href="#">November 2020</a></li>
|
||||
<li><a href="#">October 2020</a></li>
|
||||
<li><a href="#">September 2020</a></li>
|
||||
<li><a href="#">August 2020</a></li>
|
||||
<li><a href="#">July 2020</a></li>
|
||||
<li><a href="#">June 2020</a></li>
|
||||
<li><a href="#">May 2020</a></li>
|
||||
<li><a href="#">April 2020</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Social</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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://x.com/mdo">@mdo</a>.
|
||||
</p>
|
||||
<p class="mb-0"><a href="#">Back to top</a></p>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
.breadcrumb-chevron {
|
||||
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
|
||||
gap: .5rem;
|
||||
}
|
||||
.breadcrumb-chevron .breadcrumb-item {
|
||||
display: flex;
|
||||
gap: inherit;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.breadcrumb-chevron .breadcrumb-item::before {
|
||||
gap: inherit;
|
||||
float: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb-custom .breadcrumb-item {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
padding: .75rem 3rem;
|
||||
}
|
||||
.breadcrumb-custom .breadcrumb-item::before {
|
||||
display: none;
|
||||
}
|
||||
.breadcrumb-custom .breadcrumb-item::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -25px;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: -25px;
|
||||
content: "";
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border-top-right-radius: .5rem;
|
||||
box-shadow: 1px -1px var(--bs-border-color);
|
||||
transform: scale(.707) rotate(45deg);
|
||||
}
|
||||
.breadcrumb-custom .breadcrumb-item:first-child {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.breadcrumb-custom .breadcrumb-item:last-child {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
.breadcrumb-custom .breadcrumb-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Breadcrumbs · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/breadcrumbs/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="breadcrumbs.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="house-door-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="container my-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container my-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#house-door-fill"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a
|
||||
class="link-body-emphasis fw-semibold text-decoration-none"
|
||||
href="#"
|
||||
>Library</a
|
||||
>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container my-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#house-door-fill"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a
|
||||
class="link-body-emphasis fw-semibold text-decoration-none"
|
||||
href="#"
|
||||
>Library</a
|
||||
>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container my-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#house-door-fill"></use>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a
|
||||
class="link-body-emphasis fw-semibold text-decoration-none"
|
||||
href="#"
|
||||
>Library</a
|
||||
>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,320 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Buttons · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/buttons/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="x-lg" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<button class="btn btn-primary rounded-pill px-3" type="button">
|
||||
Primary
|
||||
</button>
|
||||
<button class="btn btn-secondary rounded-pill px-3" type="button">
|
||||
Secondary
|
||||
</button>
|
||||
<button class="btn btn-success rounded-pill px-3" type="button">
|
||||
Success
|
||||
</button>
|
||||
<button class="btn btn-danger rounded-pill px-3" type="button">
|
||||
Danger
|
||||
</button>
|
||||
<button class="btn btn-warning rounded-pill px-3" type="button">
|
||||
Warning
|
||||
</button>
|
||||
<button class="btn btn-info rounded-pill px-3" type="button">Info</button>
|
||||
<button class="btn btn-light rounded-pill px-3" type="button">
|
||||
Light
|
||||
</button>
|
||||
<button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
|
||||
<button class="btn btn-link rounded-pill px-3" type="button">Link</button>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
Secondary action
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button">Primary action</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-short"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-short"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="d-flex gap-2 justify-content-center py-5">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span
|
||||
class="spinner-border spinner-border-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span class="visually-hidden" role="status">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span
|
||||
class="spinner-border spinner-border-sm"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span role="status">Loading...</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#x-lg"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#x-lg"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#x-lg"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#x-lg"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden">Dismiss</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,582 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>قالب شرائح العرض · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/carousel-rtl/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="../carousel/carousel.rtl.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">شرائح العرض</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="تبديل التنقل"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>الصفحة الرئيسية</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true"
|
||||
>رابط غير مفعل</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="بحث"
|
||||
aria-label="بحث"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">بحث</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>عنوان المثال.</h1>
|
||||
<p class="opacity-75">
|
||||
تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن
|
||||
الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية
|
||||
وحدها بين عامي 2002 و2009م.
|
||||
</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>عنوان مثال آخر.</h1>
|
||||
<p>
|
||||
حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل
|
||||
بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً،
|
||||
كما أنه وفر أكثر من 26 ألف وظيفة.
|
||||
</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-end">
|
||||
<h1>واحد أكثر لقياس جيد.</h1>
|
||||
<p>
|
||||
الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة
|
||||
لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي
|
||||
بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على
|
||||
المستوى المالي فحسب بل على المستوى السياسي أيضاً.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">السابق</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">التالي</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Marketing messaging and featurettes
|
||||
================================================== -->
|
||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
||||
<div class="container marketing">
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">عنوان</h2>
|
||||
<p>
|
||||
تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء
|
||||
الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على
|
||||
التحليل، والقدرة على التأليف، والاستدلال المنطقي.
|
||||
</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">عنوان آخر</h2>
|
||||
<p>
|
||||
إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد
|
||||
أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها
|
||||
وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة
|
||||
أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية،
|
||||
والمعالجة النحوية، والمعالجة الدلالية.
|
||||
</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
|
||||
<p>
|
||||
بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة
|
||||
التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا
|
||||
الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع
|
||||
لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية
|
||||
تعاملنا مع لغتنا العربية.
|
||||
</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<!-- START THE FEATURETTES -->
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
العنوان الأول المميز.
|
||||
<span class="text-body-secondary"> سيذهل عقلك. </span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه
|
||||
أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من
|
||||
40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل
|
||||
مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
أوه نعم، هذا جيد.
|
||||
<span class="text-body-secondary"> شاهد بنفسك. </span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء
|
||||
نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في
|
||||
مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف
|
||||
والشفتين.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء
|
||||
الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي
|
||||
الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات
|
||||
الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى
|
||||
الدماغ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<!-- /END THE FEATURETTES -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
||||
<p>
|
||||
© 2017–2025 Company, Inc. ·
|
||||
<a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a>
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: rgb(var(--bs-tertiary-color-rgb));
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
bottom: 3rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Declare heights because of positioning of img element */
|
||||
.carousel-item {
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .col-lg-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
/* rtl:begin:ignore */
|
||||
.marketing .col-lg-4 p {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
/* rtl:end:ignore */
|
||||
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
/* rtl:begin:remove */
|
||||
.featurette-heading {
|
||||
letter-spacing: -.05rem;
|
||||
}
|
||||
|
||||
/* rtl:end:remove */
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* Bump up size of carousel content */
|
||||
.carousel-caption p {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.featurette-heading {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.featurette-heading {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: rgb(var(--bs-tertiary-color-rgb));
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
bottom: 3rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Declare heights because of positioning of img element */
|
||||
.carousel-item {
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .col-lg-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.marketing .col-lg-4 p {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* Bump up size of carousel content */
|
||||
.carousel-caption p {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.featurette-heading {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.featurette-heading {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,572 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Carousel Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/carousel/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="carousel.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>Example headline.</h1>
|
||||
<p class="opacity-75">
|
||||
Some representative placeholder content for the first slide of
|
||||
the carousel.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="#">Sign up today</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Another example headline.</h1>
|
||||
<p>
|
||||
Some representative placeholder content for the second slide
|
||||
of the carousel.
|
||||
</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="bd-placeholder-img"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-end">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>
|
||||
Some representative placeholder content for the third slide of
|
||||
this carousel.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="#">Browse gallery</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Marketing messaging and featurettes
|
||||
================================================== -->
|
||||
<!-- Wrap the rest of the page in another container to center all the content. -->
|
||||
<div class="container marketing">
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>
|
||||
Some representative placeholder content for the three columns of
|
||||
text below the carousel. This is the first column.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-secondary" href="#">View details »</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>
|
||||
Another exciting bit of representative placeholder content. This
|
||||
time, we've moved on to the second column.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-secondary" href="#">View details »</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg
|
||||
aria-label="Placeholder"
|
||||
class="bd-placeholder-img rounded-circle"
|
||||
height="140"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="140"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
></rect>
|
||||
</svg>
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>
|
||||
And lastly this, the third column of representative placeholder
|
||||
content.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-secondary" href="#">View details »</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.col-lg-4 -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<!-- START THE FEATURETTES -->
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
First featurette heading.
|
||||
<span class="text-body-secondary">It’ll blow your mind.</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
Some great placeholder content for the first featurette here.
|
||||
Imagine some exciting prose here.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
Oh yeah, it’s that good.
|
||||
<span class="text-body-secondary">See for yourself.</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
Another featurette? Of course. More placeholder content here to
|
||||
give you an idea of how this layout would work with some actual
|
||||
real-world content in place.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<h2 class="featurette-heading fw-normal lh-1">
|
||||
And lastly, this one.
|
||||
<span class="text-body-secondary">Checkmate.</span>
|
||||
</h2>
|
||||
<p class="lead">
|
||||
And yes, this is the last block of representative placeholder
|
||||
content. Again, not really intended to be actually read, simply
|
||||
here to give you a better view of what this would look like with
|
||||
some actual content. Your content.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<svg
|
||||
aria-label="Placeholder: 500x500"
|
||||
class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto"
|
||||
height="500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-bg)"
|
||||
></rect>
|
||||
<text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">
|
||||
500x500
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="featurette-divider" />
|
||||
<!-- /END THE FEATURETTES -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">Back to top</a></p>
|
||||
<p>
|
||||
© 2017–2025 Company, Inc. ·
|
||||
<a href="#">Privacy</a> · <a href="#">Terms</a>
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,163 @@
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bootstrap "Journal code" icon
|
||||
* @link https://icons.getbootstrap.com/icons/journal-code/
|
||||
*/
|
||||
.bd-heading a::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: .25rem;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-max-universal */
|
||||
.bd-heading + div > * + * {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* Table of contents */
|
||||
.bd-aside a {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: .3125rem;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside a:hover,
|
||||
.bd-aside a:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: rgba(121, 82, 179, .1);
|
||||
}
|
||||
|
||||
.bd-aside .active {
|
||||
font-weight: 600;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside .btn {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside .btn:hover,
|
||||
.bd-aside .btn:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: rgba(121, 82, 179, .1);
|
||||
}
|
||||
|
||||
.bd-aside .btn:focus {
|
||||
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
|
||||
}
|
||||
|
||||
.bd-aside .btn::before {
|
||||
width: 1.25em;
|
||||
line-height: 0;
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
transition: transform .35s ease;
|
||||
|
||||
/* rtl:raw:
|
||||
transform: rotate(180deg) translateX(-2px);
|
||||
*/
|
||||
transform-origin: .5em 50%;
|
||||
}
|
||||
|
||||
.bd-aside .btn[aria-expanded="true"]::before {
|
||||
transform: rotate(90deg)/* rtl:ignore */;
|
||||
}
|
||||
|
||||
|
||||
/* Examples */
|
||||
.scrollspy-example {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
[id="modal"] .bd-example .btn,
|
||||
[id="buttons"] .bd-example .btn,
|
||||
[id="tooltips"] .bd-example .btn,
|
||||
[id="popovers"] .bd-example .btn,
|
||||
[id="dropdowns"] .bd-example .btn-group,
|
||||
[id="dropdowns"] .bd-example .dropdown,
|
||||
[id="dropdowns"] .bd-example .dropup,
|
||||
[id="dropdowns"] .bd-example .dropend,
|
||||
[id="dropdowns"] .bd-example .dropstart {
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bd-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/* rtl:begin:ignore */
|
||||
right: 0;
|
||||
left: 0;
|
||||
/* rtl:end:ignore */
|
||||
z-index: 1030;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
.bd-aside,
|
||||
.bd-cheatsheet {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Too bad only Firefox supports subgrids ATM
|
||||
*/
|
||||
.bd-cheatsheet,
|
||||
.bd-cheatsheet section,
|
||||
.bd-cheatsheet article {
|
||||
display: inherit; /* 1 */
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-column: 1 / span 2;
|
||||
gap: inherit; /* 1 */
|
||||
}
|
||||
|
||||
.bd-aside {
|
||||
grid-area: 1 / 3;
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet section,
|
||||
.bd-cheatsheet section > h2 {
|
||||
top: 2rem;
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet section > h2::before {
|
||||
position: absolute;
|
||||
/* rtl:begin:ignore */
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: -2rem;
|
||||
left: 0;
|
||||
/* rtl:end:ignore */
|
||||
z-index: -1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.bd-cheatsheet article,
|
||||
.bd-cheatsheet .bd-heading {
|
||||
top: 8rem;
|
||||
scroll-margin-top: 8rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet .bd-heading {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/* global bootstrap: false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Tooltip and popover demos
|
||||
document.querySelectorAll('.tooltip-demo')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip, {
|
||||
selector: '[data-bs-toggle="tooltip"]'
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
.forEach(popover => {
|
||||
new bootstrap.Popover(popover)
|
||||
})
|
||||
|
||||
document.querySelectorAll('.toast')
|
||||
.forEach(toastNode => {
|
||||
const toast = new bootstrap.Toast(toastNode, {
|
||||
autohide: false
|
||||
})
|
||||
|
||||
toast.show()
|
||||
})
|
||||
|
||||
// Disable empty links and submit buttons
|
||||
document.querySelectorAll('[href="#"], [type="submit"]')
|
||||
.forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
})
|
||||
})
|
||||
|
||||
function setActiveItem() {
|
||||
const { hash } = window.location
|
||||
|
||||
if (hash === '') {
|
||||
return
|
||||
}
|
||||
|
||||
const link = document.querySelector(`.bd-aside a[href="${hash}"]`)
|
||||
|
||||
if (!link) {
|
||||
return
|
||||
}
|
||||
|
||||
const active = document.querySelector('.bd-aside .active')
|
||||
const parent = link.parentNode.parentNode.previousElementSibling
|
||||
|
||||
link.classList.add('active')
|
||||
|
||||
if (parent.classList.contains('collapsed')) {
|
||||
parent.click()
|
||||
}
|
||||
|
||||
if (!active) {
|
||||
return
|
||||
}
|
||||
|
||||
const expanded = active.parentNode.parentNode.previousElementSibling
|
||||
|
||||
active.classList.remove('active')
|
||||
|
||||
if (expanded && parent !== expanded) {
|
||||
expanded.click()
|
||||
}
|
||||
}
|
||||
|
||||
setActiveItem()
|
||||
window.addEventListener('hashchange', setActiveItem)
|
||||
})()
|
||||
@@ -0,0 +1,156 @@
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bootstrap "Journal code" icon
|
||||
* @link https://icons.getbootstrap.com/icons/journal-code/
|
||||
*/
|
||||
.bd-heading a::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: .25rem;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-max-universal */
|
||||
.bd-heading + div > * + * {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* Table of contents */
|
||||
.bd-aside a {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-right: .3125rem;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside a:hover,
|
||||
.bd-aside a:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: rgba(121, 82, 179, .1);
|
||||
}
|
||||
|
||||
.bd-aside .active {
|
||||
font-weight: 600;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside .btn {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.bd-aside .btn:hover,
|
||||
.bd-aside .btn:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: rgba(121, 82, 179, .1);
|
||||
}
|
||||
|
||||
.bd-aside .btn:focus {
|
||||
box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
|
||||
}
|
||||
|
||||
.bd-aside .btn::before {
|
||||
width: 1.25em;
|
||||
line-height: 0;
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
transition: transform .35s ease;
|
||||
transform: rotate(180deg) translateX(-2px);
|
||||
transform-origin: .5em 50%;
|
||||
}
|
||||
|
||||
.bd-aside .btn[aria-expanded="true"]::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
/* Examples */
|
||||
.scrollspy-example {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
[id="modal"] .bd-example .btn,
|
||||
[id="buttons"] .bd-example .btn,
|
||||
[id="tooltips"] .bd-example .btn,
|
||||
[id="popovers"] .bd-example .btn,
|
||||
[id="dropdowns"] .bd-example .btn-group,
|
||||
[id="dropdowns"] .bd-example .dropdown,
|
||||
[id="dropdowns"] .bd-example .dropup,
|
||||
[id="dropdowns"] .bd-example .dropend,
|
||||
[id="dropdowns"] .bd-example .dropstart {
|
||||
margin: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bd-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
.bd-aside,
|
||||
.bd-cheatsheet {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Too bad only Firefox supports subgrids ATM
|
||||
*/
|
||||
.bd-cheatsheet,
|
||||
.bd-cheatsheet section,
|
||||
.bd-cheatsheet article {
|
||||
display: inherit; /* 1 */
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-column: 1 / span 2;
|
||||
gap: inherit; /* 1 */
|
||||
}
|
||||
|
||||
.bd-aside {
|
||||
grid-area: 1 / 3;
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet section,
|
||||
.bd-cheatsheet section > h2 {
|
||||
top: 2rem;
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet section > h2::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: -2rem;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.bd-cheatsheet article,
|
||||
.bd-cheatsheet .bd-heading {
|
||||
top: 8rem;
|
||||
scroll-margin-top: 8rem;
|
||||
}
|
||||
|
||||
.bd-cheatsheet .bd-heading {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,513 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>مثال إتمام الشراء · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/checkout-rtl/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="../checkout/checkout.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container">
|
||||
<main>
|
||||
<div class="py-5 text-center">
|
||||
<img
|
||||
class="d-block mx-auto mb-4"
|
||||
src="../assets/brand/bootstrap-logo.svg"
|
||||
alt=""
|
||||
width="72"
|
||||
height="57"
|
||||
/>
|
||||
<h1 class="h2">نموذج إتمام الشراء</h1>
|
||||
<p class="lead">
|
||||
فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم
|
||||
النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها
|
||||
بمحاولة إرسال النموذج دون استكماله.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-body-secondary">عربة التسوق</span>
|
||||
<span class="badge bg-secondary rounded-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">اسم المنتج</h6>
|
||||
<small class="text-body-secondary">وصف مختصر</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">المنتج الثاني</h6>
|
||||
<small class="text-body-secondary">وصف مختصر</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">البند الثالث</h6>
|
||||
<small class="text-body-secondary">وصف مختصر</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$5</span>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between bg-body-tertiary"
|
||||
>
|
||||
<div class="text-success">
|
||||
<h6 class="my-0">رمز ترويجي</h6>
|
||||
<small>EXAMPLECODE</small>
|
||||
</div>
|
||||
<span class="text-success">-$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between">
|
||||
<span>مجموع (USD)</span> <strong>$20</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="رمز ترويجي"
|
||||
/>
|
||||
<button type="submit" class="btn btn-secondary">تحقق</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">عنوان الفوترة</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="firstName" class="form-label">الاسم الأول</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="firstName"
|
||||
placeholder=""
|
||||
value=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">يرجى إدخال اسم أول صحيح.</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="lastName" class="form-label">اسم العائلة</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="lastName"
|
||||
placeholder=""
|
||||
value=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">يرجى إدخال اسم عائلة صحيح.</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="username" class="form-label">اسم المستخدم</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text">@</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
placeholder="اسم المستخدم"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
اسم المستخدم الخاص بك مطلوب.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="email" class="form-label"
|
||||
>البريد الإلكتروني
|
||||
<span class="text-body-secondary">(اختياري)</span></label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="email"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="address" class="form-label">العنوان</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="address"
|
||||
placeholder="1234 الشارع الأول"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
يرجى إدخال عنوان الشحن الخاص بك.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="address2" class="form-label"
|
||||
>عنوان 2
|
||||
<span class="text-body-secondary">(اختياري)</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="address2"
|
||||
placeholder="شقة 24"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label for="country" class="form-label">البلد</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">اختر...</option>
|
||||
<option>الولايات المتحدة الأمريكية</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">يرجى اختيار بلد صحيح.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">المنطقة</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">اختر...</option>
|
||||
<option>كاليفورنيا</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
يرجى اختيار اسم منطقة صحيح.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="zip" class="form-label">الرمز البريدي</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="zip"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">الرمز البريدي مطلوب.</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="same-address"
|
||||
/>
|
||||
<label class="form-check-label" for="same-address"
|
||||
>عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="save-info"
|
||||
/>
|
||||
<label class="form-check-label" for="save-info"
|
||||
>احفظ هذه المعلومات في المرة القادمة</label
|
||||
>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<h4 class="mb-3">طريقة الدفع</h4>
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="credit"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
checked
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="credit"
|
||||
>بطاقة ائتمان</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="cash"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="cash">نقد</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="paypal"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6">
|
||||
<label for="cc-name" class="form-label"
|
||||
>الاسم على البطاقة</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-name"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<small class="text-body-secondary"
|
||||
>الاسم الكامل كما هو معروض على البطاقة</small
|
||||
>
|
||||
<div class="invalid-feedback">الاسم على البطاقة مطلوب</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label">رقم البطاقة</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-number"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">رقم بطاقة الائتمان مطلوب</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label"
|
||||
>تاريخ انتهاء الصلاحية</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-expiration"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
تاريخ انتهاء الصلاحية مطلوب
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label"
|
||||
>الرمز الثلاثي (CVV)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-cvv"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">رمز الحماية مطلوب</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<button class="w-100 btn btn-primary btn-lg" type="submit">
|
||||
الاستمرار بالدفع
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
||||
<p class="mb-1">© 2025-2017 اسم الشركة</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
|
||||
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
|
||||
<li class="list-inline-item"><a href="#">الدعم الفني</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="../checkout/checkout.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.from(forms).forEach(form => {
|
||||
form.addEventListener('submit', event => {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
form.classList.add('was-validated')
|
||||
}, false)
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,517 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Checkout example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/checkout/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="checkout.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container">
|
||||
<main>
|
||||
<div class="py-5 text-center">
|
||||
<img
|
||||
class="d-block mx-auto mb-4"
|
||||
src="../assets/brand/bootstrap-logo.svg"
|
||||
alt=""
|
||||
width="72"
|
||||
height="57"
|
||||
/>
|
||||
<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>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-primary">Your cart</span>
|
||||
<span class="badge bg-primary rounded-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Product name</h6>
|
||||
<small class="text-body-secondary">Brief description</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Second product</h6>
|
||||
<small class="text-body-secondary">Brief description</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-sm">
|
||||
<div>
|
||||
<h6 class="my-0">Third item</h6>
|
||||
<small class="text-body-secondary">Brief description</small>
|
||||
</div>
|
||||
<span class="text-body-secondary">$5</span>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between bg-body-tertiary"
|
||||
>
|
||||
<div class="text-success">
|
||||
<h6 class="my-0">Promo code</h6>
|
||||
<small>EXAMPLECODE</small>
|
||||
</div>
|
||||
<span class="text-success">−$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between">
|
||||
<span>Total (USD)</span> <strong>$20</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Promo code"
|
||||
/>
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">Billing address</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label for="firstName" class="form-label">First name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="firstName"
|
||||
placeholder=""
|
||||
value=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Valid first name is required.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="lastName" class="form-label">Last name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="lastName"
|
||||
placeholder=""
|
||||
value=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Valid last name is required.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text">@</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
placeholder="Username"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Your username is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="email" class="form-label"
|
||||
>Email
|
||||
<span class="text-body-secondary">(Optional)</span></label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="email"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email address for shipping updates.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="address"
|
||||
placeholder="1234 Main St"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your shipping address.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="address2" class="form-label"
|
||||
>Address 2
|
||||
<span class="text-body-secondary">(Optional)</span></label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="address2"
|
||||
placeholder="Apartment or suite"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>United States</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid country.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">State</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>California</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="zip" class="form-label">Zip</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="zip"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Zip code required.</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="same-address"
|
||||
/>
|
||||
<label class="form-check-label" for="same-address"
|
||||
>Shipping address is the same as my billing address</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="save-info"
|
||||
/>
|
||||
<label class="form-check-label" for="save-info"
|
||||
>Save this information for next time</label
|
||||
>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<h4 class="mb-3">Payment</h4>
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="credit"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
checked
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="credit"
|
||||
>Credit card</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="debit"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="debit">Debit card</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="paypal"
|
||||
name="paymentMethod"
|
||||
type="radio"
|
||||
class="form-check-input"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6">
|
||||
<label for="cc-name" class="form-label">Name on card</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-name"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<small class="text-body-secondary"
|
||||
>Full name as displayed on card</small
|
||||
>
|
||||
<div class="invalid-feedback">Name on card is required</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="cc-number" class="form-label"
|
||||
>Credit card number</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-number"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">
|
||||
Credit card number is required
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="cc-expiration" class="form-label"
|
||||
>Expiration</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-expiration"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Expiration date required</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv" class="form-label">CVV</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="cc-cvv"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Security code required</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<button class="w-100 btn btn-primary btn-lg" type="submit">
|
||||
Continue to checkout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
|
||||
<p class="mb-1">© 2017–2025 Company Name</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
||||
<li class="list-inline-item"><a href="#">Terms</a></li>
|
||||
<li class="list-inline-item"><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="checkout.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
|
||||
/* Custom default button */
|
||||
.btn-light,
|
||||
.btn-light:hover,
|
||||
.btn-light:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
body {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-100" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Cover Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/cover/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="cover.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="d-flex h-100 text-center text-bg-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
||||
<header class="mb-auto">
|
||||
<div>
|
||||
<h3 class="float-md-start mb-0">Cover</h3>
|
||||
<nav class="nav nav-masthead justify-content-center float-md-end">
|
||||
<a
|
||||
class="nav-link fw-bold py-1 px-0 active"
|
||||
aria-current="page"
|
||||
href="#"
|
||||
>Home</a
|
||||
>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-3">
|
||||
<h1>Cover your page.</h1>
|
||||
<p class="lead">
|
||||
Cover is a one-page template for building simple and beautiful home
|
||||
pages. Download, edit the text, and add your own fullscreen background
|
||||
photo to make it your own.
|
||||
</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white"
|
||||
>Learn more</a
|
||||
>
|
||||
</p>
|
||||
</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://x.com/mdo" class="text-white">@mdo</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
/* globals Chart:false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Graphs
|
||||
const ctx = document.getElementById('myChart')
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
'الأحد',
|
||||
'الإثنين',
|
||||
'الثلاثاء',
|
||||
'الأربعاء',
|
||||
'الخميس',
|
||||
'الجمعة',
|
||||
'السبت'
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
15339,
|
||||
21345,
|
||||
18483,
|
||||
24003,
|
||||
23489,
|
||||
24092,
|
||||
12034
|
||||
],
|
||||
lineTension: 0,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#007bff',
|
||||
borderWidth: 4,
|
||||
pointBackgroundColor: '#007bff'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
boxPadding: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,654 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>قالب لوحة القيادة · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/dashboard-rtl/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.rtl.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="../dashboard/dashboard.rtl.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
|
||||
></path>
|
||||
<path
|
||||
d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cart" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="door-closed" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"
|
||||
></path>
|
||||
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="file-earmark" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-text" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="graph-up" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="house-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"
|
||||
></path>
|
||||
<path
|
||||
d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="people" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="plus-circle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
|
||||
></path>
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="puzzle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="search" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<header
|
||||
class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<a
|
||||
class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white"
|
||||
href="#"
|
||||
>اسم الشركة</a
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#search"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#list"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="navbarSearch" class="navbar-search w-100 collapse">
|
||||
<input
|
||||
class="form-control w-100 rounded-0 border-0"
|
||||
type="text"
|
||||
placeholder="بحث"
|
||||
aria-label="بحث"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div
|
||||
class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary"
|
||||
>
|
||||
<div
|
||||
class="offcanvas-md offcanvas-end bg-body-tertiary"
|
||||
tabindex="-1"
|
||||
id="sidebarMenu"
|
||||
aria-labelledby="sidebarMenuLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarMenuLabel">
|
||||
Company name
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
data-bs-target="#sidebarMenu"
|
||||
aria-label="يغلق"
|
||||
></button>
|
||||
</div>
|
||||
<div
|
||||
class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto"
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#house-fill"></use>
|
||||
</svg>
|
||||
لوحة القيادة
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark"></use>
|
||||
</svg>
|
||||
الطلبات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#cart"></use>
|
||||
</svg>
|
||||
المنتجات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#people"></use>
|
||||
</svg>
|
||||
الزبائن
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#graph-up"></use>
|
||||
</svg>
|
||||
التقارير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#puzzle"></use>
|
||||
</svg>
|
||||
التكاملات
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#plus-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
الشهر الحالي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
الربع الأخير
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
التفاعل الإجتماعي
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
مبيعات نهاية العام
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="my-3" />
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#gear-wide-connected"></use>
|
||||
</svg>
|
||||
إعدادات
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#door-closed"></use>
|
||||
</svg>
|
||||
خروج
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||||
<div
|
||||
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
|
||||
>
|
||||
<h1 class="h2">لوحة القيادة</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||||
مشاركة
|
||||
</button>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</svg>
|
||||
هذا الأسبوع
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas
|
||||
class="my-4 w-100"
|
||||
id="myChart"
|
||||
width="900"
|
||||
height="380"
|
||||
></canvas>
|
||||
<h2>عنوان القسم</h2>
|
||||
<div class="table-responsive small">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
<th scope="col">عنوان</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>الجدول</td>
|
||||
<td>بيانات</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>تثري</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>مبهة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>بيانات</td>
|
||||
<td>عشوائية</td>
|
||||
<td>تثري</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>تثري</td>
|
||||
<td>مبهة</td>
|
||||
<td>تصميم</td>
|
||||
<td>تنسيق</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>عشوائية</td>
|
||||
<td>غنية</td>
|
||||
<td>قيمة</td>
|
||||
<td>مفيدة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>معلومات</td>
|
||||
<td>تثري</td>
|
||||
<td>توضيحية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>الجدول</td>
|
||||
<td>تثري</td>
|
||||
<td>تنسيق</td>
|
||||
<td>قيمة</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>قيمة</td>
|
||||
<td>مبهة</td>
|
||||
<td>الجدول</td>
|
||||
<td>تصميم</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>قيمة</td>
|
||||
<td>توضيحية</td>
|
||||
<td>غنية</td>
|
||||
<td>عشوائية</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>بيانات</td>
|
||||
<td>مفيدة</td>
|
||||
<td>معلومات</td>
|
||||
<td>الجدول</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
||||
integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
||||
crossorigin="anonymous"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="dashboard.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
.bi {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar .offcanvas-lg {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 48px;
|
||||
}
|
||||
.navbar-search {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
color: #2470dc;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.navbar .form-control {
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* globals Chart:false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Graphs
|
||||
const ctx = document.getElementById('myChart')
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
'Sunday',
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday'
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
15339,
|
||||
21345,
|
||||
18483,
|
||||
24003,
|
||||
23489,
|
||||
24092,
|
||||
12034
|
||||
],
|
||||
lineTension: 0,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#007bff',
|
||||
borderWidth: 4,
|
||||
pointBackgroundColor: '#007bff'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
boxPadding: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,48 @@
|
||||
.bi {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar .offcanvas-lg {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 48px;
|
||||
}
|
||||
.navbar-search {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
color: #2470dc;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.navbar .form-control {
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
@@ -0,0 +1,654 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Dashboard Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/dashboard/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="dashboard.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
|
||||
></path>
|
||||
<path
|
||||
d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cart" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="door-closed" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"
|
||||
></path>
|
||||
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="file-earmark" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="file-earmark-text" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="graph-up" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="house-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"
|
||||
></path>
|
||||
<path
|
||||
d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="list" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="people" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="plus-circle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
|
||||
></path>
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="puzzle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="search" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<header
|
||||
class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<a
|
||||
class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white"
|
||||
href="#"
|
||||
>Company name</a
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#search"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#list"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="navbarSearch" class="navbar-search w-100 collapse">
|
||||
<input
|
||||
class="form-control w-100 rounded-0 border-0"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div
|
||||
class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary"
|
||||
>
|
||||
<div
|
||||
class="offcanvas-md offcanvas-end bg-body-tertiary"
|
||||
tabindex="-1"
|
||||
id="sidebarMenu"
|
||||
aria-labelledby="sidebarMenuLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="sidebarMenuLabel">
|
||||
Company name
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
data-bs-target="#sidebarMenu"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div
|
||||
class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto"
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#house-fill"></use>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark"></use>
|
||||
</svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#cart"></use>
|
||||
</svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#people"></use>
|
||||
</svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#graph-up"></use>
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#puzzle"></use>
|
||||
</svg>
|
||||
Integrations
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#plus-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
Current month
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
Last quarter
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
Social engagement
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#file-earmark-text"></use>
|
||||
</svg>
|
||||
Year-end sale
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="my-3" />
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#gear-wide-connected"></use>
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center gap-2" href="#">
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#door-closed"></use>
|
||||
</svg>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
||||
<div
|
||||
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
|
||||
>
|
||||
<h1 class="h2">Dashboard</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||||
Share
|
||||
</button>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</svg>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas
|
||||
class="my-4 w-100"
|
||||
id="myChart"
|
||||
width="900"
|
||||
height="380"
|
||||
></canvas>
|
||||
<h2>Section title</h2>
|
||||
<div class="table-responsive small">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
<th scope="col">Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>text</td>
|
||||
<td>random</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>placeholder</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>irrelevant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>random</td>
|
||||
<td>data</td>
|
||||
<td>placeholder</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>placeholder</td>
|
||||
<td>irrelevant</td>
|
||||
<td>visual</td>
|
||||
<td>layout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>data</td>
|
||||
<td>rich</td>
|
||||
<td>dashboard</td>
|
||||
<td>tabular</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>information</td>
|
||||
<td>placeholder</td>
|
||||
<td>illustrative</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>text</td>
|
||||
<td>placeholder</td>
|
||||
<td>layout</td>
|
||||
<td>dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>dashboard</td>
|
||||
<td>irrelevant</td>
|
||||
<td>text</td>
|
||||
<td>visual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>dashboard</td>
|
||||
<td>illustrative</td>
|
||||
<td>rich</td>
|
||||
<td>data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>random</td>
|
||||
<td>tabular</td>
|
||||
<td>information</td>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
|
||||
integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
|
||||
crossorigin="anonymous"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="dashboard.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
.dropdown-item-danger {
|
||||
color: var(--bs-red);
|
||||
}
|
||||
.dropdown-item-danger:hover,
|
||||
.dropdown-item-danger:focus {
|
||||
color: #fff;
|
||||
background-color: var(--bs-red);
|
||||
}
|
||||
.dropdown-item-danger.active {
|
||||
background-color: var(--bs-red);
|
||||
}
|
||||
|
||||
.btn-hover-light {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
.btn-hover-light:hover,
|
||||
.btn-hover-light:focus {
|
||||
color: var(--bs-link-hover-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.cal-month,
|
||||
.cal-days,
|
||||
.cal-weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
.cal-month-name {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 7;
|
||||
text-align: center;
|
||||
}
|
||||
.cal-weekday,
|
||||
.cal-btn {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
}
|
||||
.cal-btn:not([disabled]) {
|
||||
font-weight: 500;
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
.cal-btn:hover,
|
||||
.cal-btn:focus {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
.cal-btn[disabled] {
|
||||
border: 0;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.w-220px {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.w-280px {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.w-340px {
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
.opacity-10 {
|
||||
opacity: .1;
|
||||
}
|
||||
@@ -0,0 +1,877 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Dropdowns · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/dropdowns/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="dropdowns.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="film" viewBox="0 0 16 16">
|
||||
<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"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="joystick" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"
|
||||
></path>
|
||||
<path
|
||||
d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="music-note-beamed" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"
|
||||
></path>
|
||||
<path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"></path>
|
||||
<path
|
||||
d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="files" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="image-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="trash" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="question-circle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
|
||||
></path>
|
||||
<path
|
||||
d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="arrow-left-short" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"
|
||||
>
|
||||
<ul
|
||||
class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px"
|
||||
data-bs-theme="light"
|
||||
>
|
||||
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item rounded-2" href="#">Something else here</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
<ul
|
||||
class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item rounded-2" href="#">Something else here</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"
|
||||
data-bs-theme="light"
|
||||
>
|
||||
<form class="p-2 mb-2 bg-body-tertiary border-bottom">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control"
|
||||
autocomplete="false"
|
||||
placeholder="Type to filter..."
|
||||
/>
|
||||
</form>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-success rounded-circle p-1"></span>
|
||||
Action
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-primary rounded-circle p-1"></span>
|
||||
Another action
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-danger rounded-circle p-1"></span>
|
||||
Something else here
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-info rounded-circle p-1"></span>
|
||||
Separated link
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control bg-dark"
|
||||
autocomplete="false"
|
||||
placeholder="Type to filter..."
|
||||
/>
|
||||
</form>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-success rounded-circle p-1"></span>
|
||||
Action
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-primary rounded-circle p-1"></span>
|
||||
Another action
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-danger rounded-circle p-1"></span>
|
||||
Something else here
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item d-flex align-items-center gap-2 py-2"
|
||||
href="#"
|
||||
>
|
||||
<span class="d-inline-block bg-info rounded-circle p-1"></span>
|
||||
Separated link
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#files"></use>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#image-fill"></use>
|
||||
</svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#film"></use>
|
||||
</svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#music-note-beamed"></use>
|
||||
</svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#joystick"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#trash"></use>
|
||||
</svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#files"></use>
|
||||
</svg>
|
||||
Documents
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#image-fill"></use>
|
||||
</svg>
|
||||
Photos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#film"></use>
|
||||
</svg>
|
||||
Movies
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#music-note-beamed"></use>
|
||||
</svg>
|
||||
Music
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#joystick"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#trash"></use>
|
||||
</svg>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px"
|
||||
data-bs-theme="light"
|
||||
>
|
||||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button
|
||||
class="btn cal-btn"
|
||||
type="button"
|
||||
aria-label="previous month"
|
||||
>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-left-short"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option selected value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<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"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
<div class="cal-weekday">Sun</div>
|
||||
<div class="cal-weekday">Mon</div>
|
||||
<div class="cal-weekday">Tue</div>
|
||||
<div class="cal-weekday">Wed</div>
|
||||
<div class="cal-weekday">Thu</div>
|
||||
<div class="cal-weekday">Fri</div>
|
||||
<div class="cal-weekday">Sat</div>
|
||||
</div>
|
||||
<div class="cal-days">
|
||||
<button class="btn cal-btn" disabled type="button">30</button>
|
||||
<button class="btn cal-btn" disabled type="button">31</button>
|
||||
<button class="btn cal-btn" type="button">1</button>
|
||||
<button class="btn cal-btn" type="button">2</button>
|
||||
<button class="btn cal-btn" type="button">3</button>
|
||||
<button class="btn cal-btn" type="button">4</button>
|
||||
<button class="btn cal-btn" type="button">5</button>
|
||||
<button class="btn cal-btn" type="button">6</button>
|
||||
<button class="btn cal-btn" type="button">7</button>
|
||||
<button class="btn cal-btn" type="button">8</button>
|
||||
<button class="btn cal-btn" type="button">9</button>
|
||||
<button class="btn cal-btn" type="button">10</button>
|
||||
<button class="btn cal-btn" type="button">11</button>
|
||||
<button class="btn cal-btn" type="button">12</button>
|
||||
<button class="btn cal-btn" type="button">13</button>
|
||||
<button class="btn cal-btn" type="button">14</button>
|
||||
<button class="btn cal-btn" type="button">15</button>
|
||||
<button class="btn cal-btn" type="button">16</button>
|
||||
<button class="btn cal-btn" type="button">17</button>
|
||||
<button class="btn cal-btn" type="button">18</button>
|
||||
<button class="btn cal-btn" type="button">19</button>
|
||||
<button class="btn cal-btn" type="button">20</button>
|
||||
<button class="btn cal-btn" type="button">21</button>
|
||||
<button class="btn cal-btn" type="button">22</button>
|
||||
<button class="btn cal-btn" type="button">23</button>
|
||||
<button class="btn cal-btn" type="button">24</button>
|
||||
<button class="btn cal-btn" type="button">25</button>
|
||||
<button class="btn cal-btn" type="button">26</button>
|
||||
<button class="btn cal-btn" type="button">27</button>
|
||||
<button class="btn cal-btn" type="button">28</button>
|
||||
<button class="btn cal-btn" type="button">29</button>
|
||||
<button class="btn cal-btn" type="button">30</button>
|
||||
<button class="btn cal-btn" type="button">31</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<div class="d-grid gap-1">
|
||||
<div class="cal">
|
||||
<div class="cal-month">
|
||||
<button
|
||||
class="btn cal-btn"
|
||||
type="button"
|
||||
aria-label="previous month"
|
||||
>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-left-short"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<strong class="cal-month-name">June</strong>
|
||||
<select class="form-select cal-month-name d-none">
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option selected value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
<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"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cal-weekdays text-body-secondary">
|
||||
<div class="cal-weekday">Sun</div>
|
||||
<div class="cal-weekday">Mon</div>
|
||||
<div class="cal-weekday">Tue</div>
|
||||
<div class="cal-weekday">Wed</div>
|
||||
<div class="cal-weekday">Thu</div>
|
||||
<div class="cal-weekday">Fri</div>
|
||||
<div class="cal-weekday">Sat</div>
|
||||
</div>
|
||||
<div class="cal-days">
|
||||
<button class="btn cal-btn" disabled type="button">30</button>
|
||||
<button class="btn cal-btn" disabled type="button">31</button>
|
||||
<button class="btn cal-btn" type="button">1</button>
|
||||
<button class="btn cal-btn" type="button">2</button>
|
||||
<button class="btn cal-btn" type="button">3</button>
|
||||
<button class="btn cal-btn" type="button">4</button>
|
||||
<button class="btn cal-btn" type="button">5</button>
|
||||
<button class="btn cal-btn" type="button">6</button>
|
||||
<button class="btn cal-btn" type="button">7</button>
|
||||
<button class="btn cal-btn" type="button">8</button>
|
||||
<button class="btn cal-btn" type="button">9</button>
|
||||
<button class="btn cal-btn" type="button">10</button>
|
||||
<button class="btn cal-btn" type="button">11</button>
|
||||
<button class="btn cal-btn" type="button">12</button>
|
||||
<button class="btn cal-btn" type="button">13</button>
|
||||
<button class="btn cal-btn" type="button">14</button>
|
||||
<button class="btn cal-btn" type="button">15</button>
|
||||
<button class="btn cal-btn" type="button">16</button>
|
||||
<button class="btn cal-btn" type="button">17</button>
|
||||
<button class="btn cal-btn" type="button">18</button>
|
||||
<button class="btn cal-btn" type="button">19</button>
|
||||
<button class="btn cal-btn" type="button">20</button>
|
||||
<button class="btn cal-btn" type="button">21</button>
|
||||
<button class="btn cal-btn" type="button">22</button>
|
||||
<button class="btn cal-btn" type="button">23</button>
|
||||
<button class="btn cal-btn" type="button">24</button>
|
||||
<button class="btn cal-btn" type="button">25</button>
|
||||
<button class="btn cal-btn" type="button">26</button>
|
||||
<button class="btn cal-btn" type="button">27</button>
|
||||
<button class="btn cal-btn" type="button">28</button>
|
||||
<button class="btn cal-btn" type="button">29</button>
|
||||
<button class="btn cal-btn" type="button">30</button>
|
||||
<button class="btn cal-btn" type="button">31</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg"
|
||||
data-bs-theme="light"
|
||||
>
|
||||
<nav class="col-lg-8">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#image-fill"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
</div>
|
||||
</a>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#music-note-beamed"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
</div>
|
||||
</a>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#question-circle"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="d-none d-lg-block vr mx-4 opacity-10"> </div>
|
||||
<hr class="d-lg-none" />
|
||||
<div class="col-lg-auto pe-3">
|
||||
<nav>
|
||||
<ul class="d-flex flex-column gap-2 list-unstyled small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Documentation</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Use cases</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>API status</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Partners</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Resources</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg"
|
||||
data-bs-theme="dark"
|
||||
>
|
||||
<nav class="col-lg-8">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#image-fill"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Main product</strong>
|
||||
<small>Take a tour through the product</small>
|
||||
</div>
|
||||
</a>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#music-note-beamed"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Another product</strong>
|
||||
<small>Explore this other product we offer</small>
|
||||
</div>
|
||||
</a>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#question-circle"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="d-block">Support</strong>
|
||||
<small>Get help from our support crew</small>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="d-none d-lg-block vr mx-4 opacity-10"> </div>
|
||||
<hr class="d-lg-none" />
|
||||
<div class="col-lg-auto pe-3">
|
||||
<nav>
|
||||
<ul class="d-flex flex-column gap-2 list-unstyled small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Documentation</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Use cases</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>API status</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Partners</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover"
|
||||
>Resources</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
.feature-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.icon-square {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
|
||||
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
|
||||
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
|
||||
|
||||
.card-cover {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.feature-icon-small {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
@@ -0,0 +1,811 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Features · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/features/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="features.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="home" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="table" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="collection" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"
|
||||
></path>
|
||||
<path
|
||||
d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cpu-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
|
||||
></path>
|
||||
<path
|
||||
d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="gear-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="speedometer" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="toggles2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"
|
||||
></path>
|
||||
<path
|
||||
d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"
|
||||
></path>
|
||||
<path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"></path>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="geo-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Features examples</h1>
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">Columns with icons</h2>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#collection"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#people-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#toggles2"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container px-4 py-5" id="hanging-icons">
|
||||
<h2 class="pb-2 border-bottom">Hanging icons</h2>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#toggles2"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<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="btn btn-primary"> Primary button </a>
|
||||
</div>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#cpu-fill"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<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="btn btn-primary"> Primary button </a>
|
||||
</div>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#tools"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<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="btn btn-primary"> Primary button </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container px-4 py-5" id="custom-cards">
|
||||
<h2 class="pb-2 border-bottom">Custom cards</h2>
|
||||
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
|
||||
<div class="col">
|
||||
<div
|
||||
class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
|
||||
style="background-image: url("unsplash-photo-1.jpg")"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"
|
||||
>
|
||||
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
|
||||
Short title, long jacket
|
||||
</h3>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Location"
|
||||
>
|
||||
<use xlink:href="#geo-fill"></use>
|
||||
</svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="1em"
|
||||
height="1em"
|
||||
role="img"
|
||||
aria-label="Duration"
|
||||
>
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
|
||||
style="background-image: url("unsplash-photo-2.jpg")"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"
|
||||
>
|
||||
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
|
||||
Much longer title that wraps to multiple lines
|
||||
</h3>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Location"
|
||||
>
|
||||
<use xlink:href="#geo-fill"></use>
|
||||
</svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="1em"
|
||||
height="1em"
|
||||
role="img"
|
||||
aria-label="Duration"
|
||||
>
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
|
||||
style="background-image: url("unsplash-photo-3.jpg")"
|
||||
>
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
||||
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
|
||||
Another longer title belongs here
|
||||
</h3>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Location"
|
||||
>
|
||||
<use xlink:href="#geo-fill"></use>
|
||||
</svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="1em"
|
||||
height="1em"
|
||||
role="img"
|
||||
aria-label="Duration"
|
||||
>
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container px-4 py-5" id="icon-grid">
|
||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#cpu-fill"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#calendar3"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#home"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#speedometer2"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#toggles2"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#geo-fill"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#tools"></use>
|
||||
</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>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container px-4 py-5">
|
||||
<h2 class="pb-2 border-bottom">Features with title</h2>
|
||||
<div
|
||||
class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"
|
||||
>
|
||||
<div class="col d-flex flex-column align-items-start gap-2">
|
||||
<h2 class="fw-bold text-body-emphasis">
|
||||
Left-aligned title explaining these awesome features
|
||||
</h2>
|
||||
<p class="text-body-secondary">
|
||||
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="btn btn-primary btn-lg">Primary button</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#collection"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0 text-body-emphasis">
|
||||
Featured title
|
||||
</h4>
|
||||
<p class="text-body-secondary">
|
||||
Paragraph of text beneath the heading to explain the heading.
|
||||
</p>
|
||||
</div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#gear-fill"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0 text-body-emphasis">
|
||||
Featured title
|
||||
</h4>
|
||||
<p class="text-body-secondary">
|
||||
Paragraph of text beneath the heading to explain the heading.
|
||||
</p>
|
||||
</div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#speedometer"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0 text-body-emphasis">
|
||||
Featured title
|
||||
</h4>
|
||||
<p class="text-body-secondary">
|
||||
Paragraph of text beneath the heading to explain the heading.
|
||||
</p>
|
||||
</div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#table"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0 text-body-emphasis">
|
||||
Featured title
|
||||
</h4>
|
||||
<p class="text-body-secondary">
|
||||
Paragraph of text beneath the heading to explain the heading.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,499 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Footers · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/footers/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="facebook" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
|
||||
></path>
|
||||
</symbol>
|
||||
<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"
|
||||
></path>
|
||||
</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">
|
||||
© 2025 Company, Inc
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<ul class="nav col-md-4 justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<svg class="bi" width="30" height="24" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="mb-3 mb-md-0 text-body-secondary"
|
||||
>© 2025 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="#" aria-label="Instagram"
|
||||
><svg class="bi" width="24" height="24" aria-hidden="true">
|
||||
<use xlink:href="#instagram"></use></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"></use></svg
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container">
|
||||
<footer class="py-3 my-4">
|
||||
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-center text-body-secondary">© 2025 Company, Inc</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="text-body-secondary">© 2025</p>
|
||||
</div>
|
||||
<div class="col mb-3"></div>
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container">
|
||||
<footer class="py-5">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-2 mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary"
|
||||
>Features</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md-2 mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary"
|
||||
>Features</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md-2 mb-3">
|
||||
<h5>Section</h5>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary"
|
||||
>Features</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item mb-2">
|
||||
<a href="#" class="nav-link p-0 text-body-secondary">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-5 offset-md-1 mb-3">
|
||||
<form>
|
||||
<h5>Subscribe to our newsletter</h5>
|
||||
<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="email"
|
||||
class="form-control"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
<button class="btn btn-primary" type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"
|
||||
>
|
||||
<p>© 2025 Company, Inc. All rights reserved.</p>
|
||||
<ul class="list-unstyled d-flex">
|
||||
<li class="ms-3">
|
||||
<a class="link-body-emphasis" href="#" aria-label="Instagram"
|
||||
><svg class="bi" width="24" height="24">
|
||||
<use xlink:href="#instagram"></use></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"></use></svg
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
.themed-grid-col {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(112.520718, 44.062154, 249.437846, .15);
|
||||
border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
|
||||
}
|
||||
|
||||
.themed-container {
|
||||
padding: .75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: rgba(112.520718, 44.062154, 249.437846, .15);
|
||||
border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
|
||||
}
|
||||
@@ -0,0 +1,455 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Grid Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/grid/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="grid.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="py-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<div class="container">
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">
|
||||
Basic grid layouts to get you familiar with building within the
|
||||
Bootstrap grid system.
|
||||
</p>
|
||||
<p>
|
||||
In these examples the <code>.themed-grid-col</code> class is added to
|
||||
the columns to add some theming. This is not a class that is available
|
||||
in Bootstrap by default.
|
||||
</p>
|
||||
<h2 class="mt-4">Five grid tiers</h2>
|
||||
<p>
|
||||
There are five tiers to the Bootstrap grid system, one for each range
|
||||
of devices we support. Each tier starts at a minimum viewport size and
|
||||
automatically applies to the larger devices unless overridden.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
</div>
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
<p>
|
||||
Get three equal-width columns
|
||||
<strong>starting at desktops and scaling to large desktops</strong>.
|
||||
On mobile devices, tablets and below, the columns will automatically
|
||||
stack.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
<h2 class="mt-4">Three equal columns alternative</h2>
|
||||
<p>
|
||||
By using the <code>.row-cols-*</code> classes, you can easily create a
|
||||
grid with equal columns.
|
||||
</p>
|
||||
<div class="row row-cols-md-3 mb-3 text-center">
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> child of <code>.row-cols-md-3</code>
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> child of <code>.row-cols-md-3</code>
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> child of <code>.row-cols-md-3</code>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="mt-4">Three unequal columns</h2>
|
||||
<p>
|
||||
Get three columns
|
||||
<strong>starting at desktops and scaling to large desktops</strong> of
|
||||
various widths. Remember, grid columns should add up to twelve for a
|
||||
single horizontal block. More than that, and columns start stacking no
|
||||
matter the viewport.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
</div>
|
||||
<h2 class="mt-4">Two columns</h2>
|
||||
<p>
|
||||
Get two columns
|
||||
<strong>starting at desktops and scaling to large desktops</strong>.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
<h2 class="mt-4">Full width, single column</h2>
|
||||
<p class="text-warning">
|
||||
No grid classes are necessary for full-width elements.
|
||||
</p>
|
||||
<hr class="my-4" />
|
||||
<h2 class="mt-4">Two columns with two nested columns</h2>
|
||||
<p>
|
||||
Per the documentation, nesting is easy—just put a row of columns
|
||||
within an existing column. This gives you two columns
|
||||
<strong>starting at desktops and scaling to large desktops</strong>,
|
||||
with another two (equal widths) within the larger column.
|
||||
</p>
|
||||
<p>
|
||||
At mobile device sizes, tablets and down, these columns and their
|
||||
nested columns will stack.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-8 themed-grid-col">
|
||||
<div class="pb-3">.col-md-8</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<h2 class="mt-4">Mixed: mobile and desktop</h2>
|
||||
<p>
|
||||
The Bootstrap v5 grid system has six tiers of classes: xs (extra
|
||||
small, this class infix is not used), sm (small), md (medium), lg
|
||||
(large), xl (x-large), and xxl (xx-large). You can use nearly any
|
||||
combination of these classes to create more dynamic and flexible
|
||||
layouts.
|
||||
</p>
|
||||
<p>
|
||||
Each tier of classes scales up, meaning if you plan on setting the
|
||||
same widths for md, lg, xl and xxl, you only need to specify md.
|
||||
</p>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-sm-6 col-lg-8 themed-grid-col">
|
||||
.col-sm-6 .col-lg-8
|
||||
</div>
|
||||
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
|
||||
</div>
|
||||
<div class="row mb-3 text-center">
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<h2 class="mt-4">Gutters</h2>
|
||||
<p>
|
||||
With <code>.gx-*</code> classes, the horizontal gutters can be
|
||||
adjusted.
|
||||
</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gx-4</code> gutters
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4">
|
||||
Use the <code>.gy-*</code> classes to control the vertical gutters.
|
||||
</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gy-4 text-center">
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.gy-4</code> gutters
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4">
|
||||
With <code>.g-*</code> classes, the gutters in both directions can be
|
||||
adjusted.
|
||||
</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
<div class="col themed-grid-col">
|
||||
<code>.col</code> with <code>.g-3</code> gutters
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" id="containers">
|
||||
<hr class="my-4" />
|
||||
<h2 class="mt-4">Containers</h2>
|
||||
<p>
|
||||
Additional classes added in Bootstrap v4.4 allow containers that are
|
||||
100% wide until a particular breakpoint. v5 adds a new
|
||||
<code>xxl</code> breakpoint.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container themed-container text-center">.container</div>
|
||||
<div class="container-sm themed-container text-center">.container-sm</div>
|
||||
<div class="container-md themed-container text-center">.container-md</div>
|
||||
<div class="container-lg themed-container text-center">.container-lg</div>
|
||||
<div class="container-xl themed-container text-center">.container-xl</div>
|
||||
<div class="container-xxl themed-container text-center">
|
||||
.container-xxl
|
||||
</div>
|
||||
<div class="container-fluid themed-container text-center">
|
||||
.container-fluid
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
.form-control-dark {
|
||||
border-color: var(--bs-gray);
|
||||
}
|
||||
.form-control-dark:focus {
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.dropdown-toggle:not(:focus) {
|
||||
outline: 0;
|
||||
}
|
||||
@@ -0,0 +1,688 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Headers · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/headers/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="headers.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="home" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="table" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="grid" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Headers examples</h1>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="fs-4">Simple header</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container">
|
||||
<header class="d-flex justify-content-center py-3">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container">
|
||||
<header
|
||||
class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"
|
||||
>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<a
|
||||
href="/"
|
||||
class="d-inline-flex link-body-emphasis text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
class="bi"
|
||||
width="40"
|
||||
height="32"
|
||||
role="img"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<ul
|
||||
class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"
|
||||
>
|
||||
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
|
||||
<li><a href="#" class="nav-link px-2">Features</a></li>
|
||||
<li><a href="#" class="nav-link px-2">Pricing</a></li>
|
||||
<li><a href="#" class="nav-link px-2">FAQs</a></li>
|
||||
<li><a href="#" class="nav-link px-2">About</a></li>
|
||||
</ul>
|
||||
<div class="col-md-3 text-end">
|
||||
<button type="button" class="btn btn-outline-primary me-2">
|
||||
Login
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<header class="p-3 text-bg-dark">
|
||||
<div class="container">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="40"
|
||||
height="32"
|
||||
role="img"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<ul
|
||||
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
|
||||
>
|
||||
<li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
|
||||
</ul>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control form-control-dark text-bg-dark"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-outline-light me-2">
|
||||
Login
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">Sign-up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="b-example-divider"></div>
|
||||
<header class="p-3 mb-3 border-bottom">
|
||||
<div class="container">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="40"
|
||||
height="32"
|
||||
role="img"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<ul
|
||||
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
|
||||
>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-2 link-secondary">Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-2 link-body-emphasis"
|
||||
>Inventory</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-2 link-body-emphasis"
|
||||
>Customers</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-2 link-body-emphasis"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
<div class="dropdown text-end">
|
||||
<a
|
||||
href="#"
|
||||
class="d-block link-body-emphasis text-decoration-none dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
src="https://github.com/mdo.png"
|
||||
alt="mdo"
|
||||
width="32"
|
||||
height="32"
|
||||
class="rounded-circle"
|
||||
/>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="b-example-divider"></div>
|
||||
<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"
|
||||
aria-label="Bootstrap menu"
|
||||
>
|
||||
<svg class="bi me-2" width="40" height="32" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li>
|
||||
<a class="dropdown-item active" href="#" aria-current="page"
|
||||
>Overview</a
|
||||
>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Inventory</a></li>
|
||||
<li><a class="dropdown-item" href="#">Customers</a></li>
|
||||
<li><a class="dropdown-item" href="#">Products</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Reports</a></li>
|
||||
<li><a class="dropdown-item" href="#">Analytics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<form class="w-100 me-3" role="search">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
<div class="flex-shrink-0 dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="d-block link-body-emphasis text-decoration-none dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
src="https://github.com/mdo.png"
|
||||
alt="mdo"
|
||||
width="32"
|
||||
height="32"
|
||||
class="rounded-circle"
|
||||
/>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container-fluid pb-3">
|
||||
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr">
|
||||
<div class="bg-body-tertiary border rounded-3">
|
||||
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
|
||||
</div>
|
||||
<div class="bg-body-tertiary border rounded-3">
|
||||
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<nav class="py-2 bg-body-tertiary border-bottom">
|
||||
<div class="container d-flex flex-wrap">
|
||||
<ul class="nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link link-body-emphasis px-2 active"
|
||||
aria-current="page"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link link-body-emphasis px-2">Sign up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="fs-4">Double header</span>
|
||||
</a>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
|
||||
<input
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
<div class="b-example-divider"></div>
|
||||
<header>
|
||||
<div class="px-3 py-2 text-bg-dark border-bottom">
|
||||
<div class="container">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
class="bi me-2"
|
||||
width="40"
|
||||
height="32"
|
||||
role="img"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#home"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#speedometer2"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#table"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#grid"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#people-circle"></use>
|
||||
</svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 border-bottom mb-3">
|
||||
<div class="container d-flex flex-wrap justify-content-center">
|
||||
<form
|
||||
class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"
|
||||
role="search"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-light text-dark me-2">
|
||||
Login
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="b-example-divider"></div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 361 KiB |
|
After Width: | Height: | Size: 272 KiB |
@@ -0,0 +1,3 @@
|
||||
@media (min-width: 992px) {
|
||||
.rounded-lg-3 { border-radius: .3rem; }
|
||||
}
|
||||
@@ -0,0 +1,415 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Heroes · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/heroes/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="heroes.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Heroes examples</h1>
|
||||
<div class="px-4 py-5 my-5 text-center">
|
||||
<img
|
||||
class="d-block mx-auto mb-4"
|
||||
src="../assets/brand/bootstrap-logo.svg"
|
||||
alt=""
|
||||
width="72"
|
||||
height="57"
|
||||
/>
|
||||
<h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<p class="lead mb-4">
|
||||
Quickly design and customize responsive mobile-first sites with
|
||||
Bootstrap, the world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins, responsive grid system,
|
||||
extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">
|
||||
Primary button
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">
|
||||
Secondary
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="px-4 pt-5 my-5 text-center border-bottom">
|
||||
<h1 class="display-4 fw-bold text-body-emphasis">
|
||||
Centered screenshot
|
||||
</h1>
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<p class="lead mb-4">
|
||||
Quickly design and customize responsive mobile-first sites with
|
||||
Bootstrap, the world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins, responsive grid system,
|
||||
extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">
|
||||
Primary button
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">
|
||||
Secondary
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden" style="max-height: 30vh">
|
||||
<div class="container px-5">
|
||||
<img
|
||||
src="bootstrap-docs.png"
|
||||
class="img-fluid border rounded-3 shadow-lg mb-4"
|
||||
alt="Example image"
|
||||
width="700"
|
||||
height="500"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container col-xxl-8 px-4 py-5">
|
||||
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
|
||||
<div class="col-10 col-sm-8 col-lg-6">
|
||||
<img
|
||||
src="bootstrap-themes.png"
|
||||
class="d-block mx-lg-auto img-fluid"
|
||||
alt="Bootstrap Themes"
|
||||
width="700"
|
||||
height="500"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">
|
||||
Responsive left-aligned hero with image
|
||||
</h1>
|
||||
<p class="lead">
|
||||
Quickly design and customize responsive mobile-first sites with
|
||||
Bootstrap, the world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins, responsive grid system,
|
||||
extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">
|
||||
Primary
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary btn-lg px-4"
|
||||
>
|
||||
Default
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
|
||||
<div class="row align-items-center g-lg-5 py-5">
|
||||
<div class="col-lg-7 text-center text-lg-start">
|
||||
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">
|
||||
Vertically centered hero sign-up form
|
||||
</h1>
|
||||
<p class="col-lg-10 fs-4">
|
||||
Below is an example form built entirely with Bootstrap’s form
|
||||
controls. Each required form group has a validation state that can
|
||||
be triggered by attempting to submit the form without completing
|
||||
it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-10 mx-auto col-lg-5">
|
||||
<form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me" /> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="w-100 btn btn-lg btn-primary" type="submit">
|
||||
Sign up
|
||||
</button>
|
||||
<hr class="my-4" />
|
||||
<small class="text-body-secondary"
|
||||
>By clicking Sign up, you agree to the terms of use.</small
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container my-5">
|
||||
<div
|
||||
class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"
|
||||
>
|
||||
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
|
||||
<h1 class="display-4 fw-bold lh-1 text-body-emphasis">
|
||||
Border hero with cropped image and shadows
|
||||
</h1>
|
||||
<p class="lead">
|
||||
Quickly design and customize responsive mobile-first sites with
|
||||
Bootstrap, the world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins, responsive grid system,
|
||||
extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</p>
|
||||
<div
|
||||
class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-lg px-4 me-md-2 fw-bold"
|
||||
>
|
||||
Primary
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary btn-lg px-4"
|
||||
>
|
||||
Default
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
|
||||
<img
|
||||
class="rounded-lg-3"
|
||||
src="bootstrap-docs.png"
|
||||
alt=""
|
||||
width="720"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="bg-dark text-secondary px-4 py-5 text-center">
|
||||
<div class="py-5">
|
||||
<h1 class="display-5 fw-bold text-white">Dark color hero</h1>
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<p class="fs-5 mb-4">
|
||||
Quickly design and customize responsive mobile-first sites with
|
||||
Bootstrap, the world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins, responsive grid system,
|
||||
extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold"
|
||||
>
|
||||
Custom button
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-light btn-lg px-4">
|
||||
Secondary
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider mb-0"></div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,270 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Jumbotron example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/jumbotron/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<div class="container py-4">
|
||||
<header class="pb-3 mb-4 border-bottom">
|
||||
<a
|
||||
href="/"
|
||||
class="d-flex align-items-center text-body-emphasis text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="32"
|
||||
class="me-2"
|
||||
viewBox="0 0 118 94"
|
||||
role="img"
|
||||
>
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="fs-4">Jumbotron example</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
|
||||
<div class="container-fluid py-5">
|
||||
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
|
||||
<p class="col-md-8 fs-4">
|
||||
Using a series of utilities, you can create this jumbotron, just
|
||||
like the one in previous versions of Bootstrap. Check out the
|
||||
examples below for how you can remix and restyle it to your
|
||||
liking.
|
||||
</p>
|
||||
<button class="btn btn-primary btn-lg" type="button">
|
||||
Example button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-md-stretch">
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 text-bg-dark rounded-3">
|
||||
<h2>Change the background</h2>
|
||||
<p>
|
||||
Swap the background-color utility and add a `.text-*` color
|
||||
utility to mix up the jumbotron look. Then, mix and match with
|
||||
additional component themes and more.
|
||||
</p>
|
||||
<button class="btn btn-outline-light" type="button">
|
||||
Example button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
|
||||
<h2>Add borders</h2>
|
||||
<p>
|
||||
Or, keep it light and add a border for some added definition to
|
||||
the boundaries of your content. Be sure to look under the hood
|
||||
at the source HTML here as we've adjusted the alignment and
|
||||
sizing of both column's content for equal-height.
|
||||
</p>
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
Example button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="pt-3 mt-4 text-body-secondary border-top">
|
||||
© 2025
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,307 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Jumbotrons · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/jumbotrons/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="jumbotrons.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="check2-circle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"
|
||||
></path>
|
||||
<path
|
||||
d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</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.
|
||||
</p>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-short"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-secondary btn-lg px-4 rounded-pill"
|
||||
type="button"
|
||||
>
|
||||
Secondary link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#check2-circle"></use>
|
||||
</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.
|
||||
</p>
|
||||
<button class="btn btn-primary px-5 mb-5" type="button">
|
||||
Call to action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="my-5">
|
||||
<div class="p-5 text-center bg-body-tertiary">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-body-emphasis">Full-width jumbotron</h1>
|
||||
<p class="col-lg-8 mx-auto lead">
|
||||
This takes the basic jumbotron above and makes its background
|
||||
edge-to-edge with a <code>.container</code> inside to align content.
|
||||
Similar to above, it's been recreated with built-in grid and utility
|
||||
classes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="container my-5">
|
||||
<div class="p-5 text-center bg-body-tertiary rounded-3">
|
||||
<h1 class="text-body-emphasis">Basic jumbotron</h1>
|
||||
<p class="lead">
|
||||
This is a simple Bootstrap jumbotron that sits within a
|
||||
<code>.container</code>, recreated with built-in utility classes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
.border-dashed { --bs-border-style: dashed; }
|
||||
@@ -0,0 +1,624 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>List groups · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/list-groups/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="list-groups.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar-event" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"
|
||||
></path>
|
||||
<path
|
||||
d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="alarm" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="list-check" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<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=""
|
||||
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>
|
||||
<p class="mb-0 opacity-75">
|
||||
Some placeholder content in a paragraph.
|
||||
</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">now</small>
|
||||
</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=""
|
||||
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>
|
||||
<p class="mb-0 opacity-75">
|
||||
Some placeholder content in a paragraph that goes a little
|
||||
longer so it wraps to a new line.
|
||||
</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">3d</small>
|
||||
</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=""
|
||||
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>
|
||||
<p class="mb-0 opacity-75">
|
||||
Some placeholder content in a paragraph.
|
||||
</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">1w</small>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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">
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<span>
|
||||
First checkbox
|
||||
<small class="d-block text-body-secondary"
|
||||
>With support text underneath to add more detail</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span>
|
||||
Second checkbox
|
||||
<small class="d-block text-body-secondary"
|
||||
>Some other text goes here</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span>
|
||||
Third checkbox
|
||||
<small class="d-block text-body-secondary"
|
||||
>And we end with another snippet of text</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="radio"
|
||||
name="listGroupRadios"
|
||||
id="listGroupRadios1"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<span>
|
||||
First radio
|
||||
<small class="d-block text-body-secondary"
|
||||
>With support text underneath to add more detail</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="radio"
|
||||
name="listGroupRadios"
|
||||
id="listGroupRadios2"
|
||||
value=""
|
||||
/>
|
||||
<span>
|
||||
Second radio
|
||||
<small class="d-block text-body-secondary"
|
||||
>Some other text goes here</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-2">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="radio"
|
||||
name="listGroupRadios"
|
||||
id="listGroupRadios3"
|
||||
value=""
|
||||
/>
|
||||
<span>
|
||||
Third radio
|
||||
<small class="d-block text-body-secondary"
|
||||
>And we end with another snippet of text</small
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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">
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
checked
|
||||
style="font-size: 1.375em"
|
||||
/>
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Schedule"
|
||||
>
|
||||
<use xlink:href="#calendar-event"></use>
|
||||
</svg>
|
||||
1:00–2:00pm
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
style="font-size: 1.375em"
|
||||
/>
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Schedule"
|
||||
>
|
||||
<use xlink:href="#calendar-event"></use>
|
||||
</svg>
|
||||
2:00–2:30pm
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3">
|
||||
<input
|
||||
class="form-check-input flex-shrink-0"
|
||||
type="checkbox"
|
||||
value=""
|
||||
style="font-size: 1.375em"
|
||||
/>
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Reminder"
|
||||
>
|
||||
<use xlink:href="#alarm"></use>
|
||||
</svg>
|
||||
Tomorrow
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
<label class="list-group-item d-flex gap-3 bg-body-tertiary">
|
||||
<input
|
||||
class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none"
|
||||
disabled
|
||||
type="checkbox"
|
||||
value=""
|
||||
style="font-size: 1.375em"
|
||||
/>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#list-check"></use>
|
||||
</svg>
|
||||
Choose list...
|
||||
</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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 list-group-checkable d-grid gap-2 border-0">
|
||||
<input
|
||||
class="list-group-item-check pe-none"
|
||||
type="radio"
|
||||
name="listGroupCheckableRadios"
|
||||
id="listGroupCheckableRadios1"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="list-group-item rounded-3 py-3"
|
||||
for="listGroupCheckableRadios1"
|
||||
>
|
||||
First radio
|
||||
<span class="d-block small opacity-50"
|
||||
>With support text underneath to add more detail</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="list-group-item-check pe-none"
|
||||
type="radio"
|
||||
name="listGroupCheckableRadios"
|
||||
id="listGroupCheckableRadios2"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
class="list-group-item rounded-3 py-3"
|
||||
for="listGroupCheckableRadios2"
|
||||
>
|
||||
Second radio
|
||||
<span class="d-block small opacity-50"
|
||||
>Some other text goes here</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="list-group-item-check pe-none"
|
||||
type="radio"
|
||||
name="listGroupCheckableRadios"
|
||||
id="listGroupCheckableRadios3"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
class="list-group-item rounded-3 py-3"
|
||||
for="listGroupCheckableRadios3"
|
||||
>
|
||||
Third radio
|
||||
<span class="d-block small opacity-50"
|
||||
>And we end with another snippet of text</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="list-group-item-check pe-none"
|
||||
type="radio"
|
||||
name="listGroupCheckableRadios"
|
||||
id="listGroupCheckableRadios4"
|
||||
value=""
|
||||
disabled
|
||||
/>
|
||||
<label
|
||||
class="list-group-item rounded-3 py-3"
|
||||
for="listGroupCheckableRadios4"
|
||||
>
|
||||
Fourth disabled radio
|
||||
<span class="d-block small opacity-50">This option is disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<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 list-group-radio d-grid gap-2 border-0">
|
||||
<div class="position-relative">
|
||||
<input
|
||||
class="form-check-input position-absolute top-50 end-0 me-3 fs-5"
|
||||
type="radio"
|
||||
name="listGroupRadioGrid"
|
||||
id="listGroupRadioGrid1"
|
||||
value=""
|
||||
checked
|
||||
/>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
|
||||
<strong class="fw-semibold">First radio</strong>
|
||||
<span class="d-block small opacity-75"
|
||||
>With support text underneath to add more detail</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<input
|
||||
class="form-check-input position-absolute top-50 end-0 me-3 fs-5"
|
||||
type="radio"
|
||||
name="listGroupRadioGrid"
|
||||
id="listGroupRadioGrid2"
|
||||
value=""
|
||||
/>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
|
||||
<strong class="fw-semibold">Second radio</strong>
|
||||
<span class="d-block small opacity-75"
|
||||
>Some other text goes here</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<input
|
||||
class="form-check-input position-absolute top-50 end-0 me-3 fs-5"
|
||||
type="radio"
|
||||
name="listGroupRadioGrid"
|
||||
id="listGroupRadioGrid3"
|
||||
value=""
|
||||
/>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
|
||||
<strong class="fw-semibold">Third radio</strong>
|
||||
<span class="d-block small opacity-75"
|
||||
>And we end with another snippet of text</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<input
|
||||
class="form-check-input position-absolute top-50 end-0 me-3 fs-5"
|
||||
type="radio"
|
||||
name="listGroupRadioGrid"
|
||||
id="listGroupRadioGrid4"
|
||||
value=""
|
||||
disabled
|
||||
/>
|
||||
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
|
||||
<strong class="fw-semibold">Fourth disabled radio</strong>
|
||||
<span class="d-block small opacity-75"
|
||||
>This option is disabled</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
.list-group {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
margin-inline: 1.5rem;
|
||||
}
|
||||
|
||||
.form-check-input:checked + .form-checked-content {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.form-check-input-placeholder {
|
||||
border-style: dashed;
|
||||
}
|
||||
[contenteditable]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.list-group-checkable .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-group-item-check {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
.list-group-item-check:hover + .list-group-item {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
.list-group-item-check:checked + .list-group-item {
|
||||
color: #fff;
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
.list-group-item-check[disabled] + .list-group-item,
|
||||
.list-group-item-check:disabled + .list-group-item {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.list-group-radio .list-group-item {
|
||||
cursor: pointer;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
.list-group-radio .form-check-input {
|
||||
z-index: 2;
|
||||
margin-top: -.5em;
|
||||
}
|
||||
.list-group-radio .list-group-item:hover,
|
||||
.list-group-radio .list-group-item:focus {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
.list-group-radio .form-check-input:checked + .list-group-item {
|
||||
background-color: var(--bs-body);
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 0 0 2px var(--bs-primary);
|
||||
}
|
||||
.list-group-radio .form-check-input[disabled] + .list-group-item,
|
||||
.list-group-radio .form-check-input:disabled + .list-group-item {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: .5;
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Masonry example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/masonry/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="container py-5">
|
||||
<h1>Bootstrap and Masonry</h1>
|
||||
<p class="lead">
|
||||
Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the
|
||||
Bootstrap grid system and cards component.
|
||||
</p>
|
||||
<p>
|
||||
Masonry is not included in Bootstrap. Add it by including the JavaScript
|
||||
plugin manually, or using a CDN like so:
|
||||
</p>
|
||||
<pre><code>
|
||||
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
|
||||
</code></pre>
|
||||
<p>
|
||||
By adding
|
||||
<code>data-masonry='{"percentPosition": true }'</code> to the
|
||||
<code>.row</code> wrapper, we can combine the powers of Bootstrap's
|
||||
responsive grid and Masonry's positioning.
|
||||
</p>
|
||||
<hr class="my-5" />
|
||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg
|
||||
aria-label="Placeholder: Image cap"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="200"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">
|
||||
This is a longer card with supporting text below as a natural
|
||||
lead-in to additional content. This content is a little bit
|
||||
longer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3">
|
||||
<figure class="p-3 mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-body-secondary">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg
|
||||
aria-label="Placeholder: Image cap"
|
||||
class="bd-placeholder-img card-img-top"
|
||||
height="200"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
|
||||
</svg>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
This card has supporting text below as a natural lead-in to
|
||||
additional content.
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-body-secondary"
|
||||
>Last updated 3 mins ago</small
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card text-bg-primary text-center p-3">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-white">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
This card has a regular title and short paragraph of text below
|
||||
it.
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-body-secondary"
|
||||
>Last updated 3 mins ago</small
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg
|
||||
aria-label="Placeholder: Card image"
|
||||
class="bd-placeholder-img card-img"
|
||||
height="260"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3 text-end">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-body-secondary">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
This is another card with title and supporting text below. This
|
||||
card has some additional content to make it slightly taller
|
||||
overall.
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-body-secondary"
|
||||
>Last updated 3 mins ago</small
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script
|
||||
async
|
||||
src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
|
||||
integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
|
||||
crossorigin="anonymous"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,453 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Modals · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/modals/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="modals.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bookmark-star" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"
|
||||
></path>
|
||||
<path
|
||||
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="grid-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="film" viewBox="0 0 16 16">
|
||||
<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"
|
||||
></path>
|
||||
</symbol>
|
||||
<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"
|
||||
></path>
|
||||
</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"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="facebook" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
|
||||
></path>
|
||||
</symbol>
|
||||
</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">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<h1 class="modal-title fs-5">Modal title</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body py-0">
|
||||
<p>
|
||||
This is a modal sheet, a variation of the modal that docs itself
|
||||
to the bottom of the viewport like the newer share sheets in iOS.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0"
|
||||
>
|
||||
<button type="button" class="btn btn-lg btn-primary">
|
||||
Save changes
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div class="modal-content rounded-3 shadow">
|
||||
<div class="modal-body p-4 text-center">
|
||||
<h5 class="mb-0">Enable this setting?</h5>
|
||||
<p class="mb-0">
|
||||
You can always change your mind in your account settings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer flex-nowrap p-0">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"
|
||||
>
|
||||
<strong>Yes, enable</strong>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
No thanks
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#grid-fill"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bookmark-star"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#film"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<h5 class="mb-0">Video embeds</h5>
|
||||
Share videos wherever you go.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-lg btn-primary mt-5 w-100"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Great, thanks!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body p-5 pt-0">
|
||||
<form class="">
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control rounded-3"
|
||||
id="floatingInput"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control rounded-3"
|
||||
id="floatingPassword"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<button
|
||||
class="w-100 mb-2 btn btn-lg rounded-3 btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
<small class="text-body-secondary"
|
||||
>By clicking Sign up, you agree to the terms of use.</small
|
||||
>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#google"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#facebook"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#github"></use>
|
||||
</svg>
|
||||
Sign up with GitHub
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider"></div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
.modal-sheet .modal-dialog {
|
||||
width: 380px;
|
||||
transition: bottom .75s ease-in-out;
|
||||
}
|
||||
.modal-sheet .modal-footer {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Bottom navbar example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/navbar-bottom/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="container">
|
||||
<div class="bg-body-tertiary p-5 rounded mt-3">
|
||||
<h1>Bottom Navbar example</h1>
|
||||
<p class="lead">
|
||||
This example is a quick exercise to illustrate how the bottom navbar
|
||||
works.
|
||||
</p>
|
||||
<a
|
||||
class="btn btn-lg btn-primary"
|
||||
href="../components/navbar"
|
||||
role="button"
|
||||
>View navbar docs »</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Bottom navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropup">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropup</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,251 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Fixed top navbar example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/navbar-fixed/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="navbar-fixed.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="container">
|
||||
<div class="bg-body-tertiary p-5 rounded">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">
|
||||
This example is a quick exercise to illustrate how fixed to top navbar
|
||||
works. As you scroll, it will remain fixed to the top of your
|
||||
browser’s viewport.
|
||||
</p>
|
||||
<a
|
||||
class="btn btn-lg btn-primary"
|
||||
href="../components/navbar"
|
||||
role="button"
|
||||
>View navbar docs »</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
/* Show it is fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Top navbar example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/navbar-static/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="navbar-static.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Top navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="container">
|
||||
<div class="bg-body-tertiary p-5 rounded">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">
|
||||
This example is a quick exercise to illustrate how the top-aligned
|
||||
navbar works. As you scroll, this navbar remains in its original
|
||||
position and moves with the rest of the page.
|
||||
</p>
|
||||
<a
|
||||
class="btn btn-lg btn-primary"
|
||||
href="../components/navbar"
|
||||
role="button"
|
||||
>View navbar docs »</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Show it's not fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Navbar Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/navbars-offcanvas/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="navbars-offcanvas.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<nav
|
||||
class="navbar navbar-dark bg-dark"
|
||||
aria-label="Dark offcanvas navbar"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Dark offcanvas navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasNavbarDark"
|
||||
aria-controls="offcanvasNavbarDark"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="offcanvas offcanvas-end text-bg-dark"
|
||||
tabindex="-1"
|
||||
id="offcanvasNavbarDark"
|
||||
aria-labelledby="offcanvasNavbarDarkLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">
|
||||
Offcanvas
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close btn-close-white"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex mt-3" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Light offcanvas navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasNavbarLight"
|
||||
aria-controls="offcanvasNavbarLight"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="offcanvas offcanvas-end"
|
||||
tabindex="-1"
|
||||
id="offcanvasNavbarLight"
|
||||
aria-labelledby="offcanvasNavbarLightLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">
|
||||
Offcanvas
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex mt-3" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-dark"
|
||||
aria-label="Offcanvas navbar large"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasNavbar2"
|
||||
aria-controls="offcanvasNavbar2"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="offcanvas offcanvas-end text-bg-dark"
|
||||
tabindex="-1"
|
||||
id="offcanvasNavbar2"
|
||||
aria-labelledby="offcanvasNavbar2Label"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasNavbar2Label">
|
||||
Offcanvas
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close btn-close-white"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex mt-3 mt-lg-0" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container my-5">
|
||||
<div class="bg-body-tertiary p-5 rounded">
|
||||
<div class="col-sm-8 py-5 mx-auto">
|
||||
<h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
|
||||
<p class="fs-5">
|
||||
This example shows how responsive offcanvas menus work within the
|
||||
navbar. For positioning of navbars, checkout the
|
||||
<a href="../examples/navbar-static/">top</a> and
|
||||
<a href="../examples/navbar-fixed/">fixed top</a> examples.
|
||||
</p>
|
||||
<p>
|
||||
From the top down, you'll see a dark navbar, light navbar and a
|
||||
responsive navbar—each with offcanvases built in. Resize your
|
||||
browser window to the large breakpoint to see the toggle for the
|
||||
offcanvas.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
href="../components/navbar#offcanvas"
|
||||
role="button"
|
||||
>Learn more about offcanvas navbars »</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -0,0 +1,910 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Navbar Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/navbars/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="navbars.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Never expand</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample01"
|
||||
aria-controls="navbarsExample01"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav me-auto mb-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand navbar-dark bg-dark"
|
||||
aria-label="Second navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Always expand</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample02"
|
||||
aria-controls="navbarsExample02"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-sm navbar-dark bg-dark"
|
||||
aria-label="Third navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample03"
|
||||
aria-controls="navbarsExample03"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-md navbar-dark bg-dark"
|
||||
aria-label="Fourth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at md</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample04"
|
||||
aria-controls="navbarsExample04"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-dark"
|
||||
aria-label="Fifth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample05"
|
||||
aria-controls="navbarsExample05"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-xl navbar-dark bg-dark"
|
||||
aria-label="Sixth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample06"
|
||||
aria-controls="navbarsExample06"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-xxl navbar-dark bg-dark"
|
||||
aria-label="Seventh navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Expand at xxl</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExampleXxl"
|
||||
aria-controls="navbarsExampleXxl"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-dark"
|
||||
aria-label="Eighth navbar example"
|
||||
>
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample07"
|
||||
aria-controls="navbarsExample07"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-dark"
|
||||
aria-label="Ninth navbar example"
|
||||
>
|
||||
<div class="container-xl">
|
||||
<a class="navbar-brand" href="#">Container XL</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample07XL"
|
||||
aria-controls="navbarsExample07XL"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-xl mb-4"><p>Matching .container-xl...</p></div>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-dark"
|
||||
aria-label="Tenth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample08"
|
||||
aria-controls="navbarsExample08"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse justify-content-md-center"
|
||||
id="navbarsExample08"
|
||||
>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Centered nav only</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<nav
|
||||
class="navbar navbar-expand-lg bg-body-tertiary rounded"
|
||||
aria-label="Eleventh navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample09"
|
||||
aria-controls="navbarsExample09"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form role="search">
|
||||
<input
|
||||
class="form-control"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg bg-body-tertiary rounded"
|
||||
aria-label="Twelfth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample10"
|
||||
aria-controls="navbarsExample10"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse justify-content-md-center"
|
||||
id="navbarsExample10"
|
||||
>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Centered nav only</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg bg-body-tertiary rounded"
|
||||
aria-label="Thirteenth navbar example"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample11"
|
||||
aria-controls="navbarsExample11"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse d-lg-flex"
|
||||
id="navbarsExample11"
|
||||
>
|
||||
<a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
|
||||
<ul class="navbar-nav col-lg-6 justify-content-lg-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="d-lg-flex col-lg-3 justify-content-lg-end">
|
||||
<button class="btn btn-primary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div>
|
||||
<div class="bg-body-tertiary p-5 rounded">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>
|
||||
This example is a quick exercise to illustrate how the navbar
|
||||
and its contents work. Some navbars extend the width of the
|
||||
viewport, others are confined within a <code>.container</code>.
|
||||
For positioning of navbars, checkout the
|
||||
<a href="../examples/navbar-static/">top</a> and
|
||||
<a href="../examples/navbar-fixed/">fixed top</a> examples.
|
||||
</p>
|
||||
<p>
|
||||
At the smallest breakpoint, the collapse plugin is used to hide
|
||||
the links and show a menu button to toggle the collapsed
|
||||
content.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
href="../components/navbar"
|
||||
role="button"
|
||||
>View navbar docs »</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -0,0 +1,434 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Offcanvas navbar template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/offcanvas-navbar/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="offcanvas-navbar.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nav
|
||||
class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Offcanvas navbar</a>
|
||||
<button
|
||||
class="navbar-toggler p-0 border-0"
|
||||
type="button"
|
||||
id="navbarSideCollapse"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="navbar-collapse offcanvas-collapse"
|
||||
id="navbarsExampleDefault"
|
||||
>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#"
|
||||
>Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Notifications</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Switch account</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>Settings</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="nav-scroller bg-body shadow-sm">
|
||||
<nav class="nav" aria-label="Secondary navigation">
|
||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
||||
<a class="nav-link" href="#">
|
||||
Friends
|
||||
<span class="badge text-bg-light rounded-pill align-text-bottom"
|
||||
>27</span
|
||||
>
|
||||
</a>
|
||||
<a class="nav-link" href="#">Explore</a>
|
||||
<a class="nav-link" href="#">Suggestions</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="container">
|
||||
<div
|
||||
class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm"
|
||||
>
|
||||
<img
|
||||
class="me-3"
|
||||
src="../assets/brand/bootstrap-logo-white.svg"
|
||||
alt=""
|
||||
width="48"
|
||||
height="38"
|
||||
/>
|
||||
<div class="lh-1">
|
||||
<h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
|
||||
<small>Since 2011</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
||||
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#007bff"></rect>
|
||||
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Some representative placeholder content, with some information about
|
||||
this user. Imagine this being some sort of status update, perhaps?
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#e83e8c"></rect>
|
||||
<text x="50%" y="50%" fill="#e83e8c" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Some more representative placeholder content, related to this other
|
||||
user. Another status update, perhaps.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#6f42c1"></rect>
|
||||
<text x="50%" y="50%" fill="#6f42c1" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
This user also gets some representative placeholder content. Maybe
|
||||
they did something interesting, and you really want to highlight
|
||||
this in the recent updates.
|
||||
</p>
|
||||
</div>
|
||||
<small class="d-block text-end mt-3">
|
||||
<a href="#">All updates</a>
|
||||
</small>
|
||||
</div>
|
||||
<div class="my-3 p-3 bg-body rounded shadow-sm">
|
||||
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#007bff"></rect>
|
||||
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#007bff"></rect>
|
||||
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex text-body-secondary pt-3">
|
||||
<svg
|
||||
aria-label="Placeholder: 32x32"
|
||||
class="bd-placeholder-img flex-shrink-0 me-2 rounded"
|
||||
height="32"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
role="img"
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#007bff"></rect>
|
||||
<text x="50%" y="50%" fill="#007bff" dy=".3em">32x32</text>
|
||||
</svg>
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="d-block text-end mt-3">
|
||||
<a href="#">All suggestions</a>
|
||||
</small>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="offcanvas-navbar.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-collapse {
|
||||
position: fixed;
|
||||
top: 56px; /* Height of navbar */
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: #343a40;
|
||||
transition: transform .3s ease-in-out, visibility .3s ease-in-out;
|
||||
}
|
||||
.offcanvas-collapse.open {
|
||||
visibility: visible;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
.nav-scroller .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.nav-scroller .nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-scroller .active {
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background-color: #6f42c1;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
|
||||
document.querySelector('.offcanvas-collapse').classList.toggle('open')
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Bootstrap</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/offcanvas-navbar"
|
||||
/>
|
||||
<meta name="robots" content="noindex" />
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url=https://getbootstrap.com/docs/5.3/examples/offcanvas-navbar"
|
||||
/>
|
||||
</head>
|
||||
</html>
|
||||
@@ -0,0 +1,615 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Pricing example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/pricing/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="pricing.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="container py-3">
|
||||
<header>
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class="d-flex align-items-center link-body-emphasis text-decoration-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="32"
|
||||
class="me-2"
|
||||
viewBox="0 0 118 94"
|
||||
role="img"
|
||||
>
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="fs-4">Pricing example</span>
|
||||
</a>
|
||||
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
|
||||
<a
|
||||
class="me-3 py-2 link-body-emphasis text-decoration-none"
|
||||
href="#"
|
||||
>Features</a
|
||||
>
|
||||
<a
|
||||
class="me-3 py-2 link-body-emphasis text-decoration-none"
|
||||
href="#"
|
||||
>Enterprise</a
|
||||
>
|
||||
<a
|
||||
class="me-3 py-2 link-body-emphasis text-decoration-none"
|
||||
href="#"
|
||||
>Support</a
|
||||
>
|
||||
<a class="py-2 link-body-emphasis text-decoration-none" href="#"
|
||||
>Pricing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||||
<h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
|
||||
<p class="fs-5 text-body-secondary">
|
||||
Quickly build an effective pricing table for your potential
|
||||
customers with this Bootstrap example. It’s built with default
|
||||
Bootstrap components and utilities with little customization.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||
<div class="col">
|
||||
<div class="card mb-4 rounded-3 shadow-sm">
|
||||
<div class="card-header py-3">
|
||||
<h4 class="my-0 fw-normal">Free</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">
|
||||
$0<small class="text-body-secondary fw-light">/mo</small>
|
||||
</h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>10 users included</li>
|
||||
<li>2 GB of storage</li>
|
||||
<li>Email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
class="w-100 btn btn-lg btn-outline-primary"
|
||||
>
|
||||
Sign up for free
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card mb-4 rounded-3 shadow-sm">
|
||||
<div class="card-header py-3">
|
||||
<h4 class="my-0 fw-normal">Pro</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">
|
||||
$15<small class="text-body-secondary fw-light">/mo</small>
|
||||
</h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>20 users included</li>
|
||||
<li>10 GB of storage</li>
|
||||
<li>Priority email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button type="button" class="w-100 btn btn-lg btn-primary">
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card mb-4 rounded-3 shadow-sm border-primary">
|
||||
<div class="card-header py-3 text-bg-primary border-primary">
|
||||
<h4 class="my-0 fw-normal">Enterprise</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">
|
||||
$29<small class="text-body-secondary fw-light">/mo</small>
|
||||
</h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>30 users included</li>
|
||||
<li>15 GB of storage</li>
|
||||
<li>Phone and email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button type="button" class="w-100 btn btn-lg btn-primary">
|
||||
Contact us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="display-6 text-center mb-4">Compare plans</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 34%"></th>
|
||||
<th style="width: 22%">Free</th>
|
||||
<th style="width: 22%">Pro</th>
|
||||
<th style="width: 22%">Enterprise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Public</th>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Private</th>
|
||||
<td></td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Permissions</th>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Sharing</th>
|
||||
<td></td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-start">Unlimited members</th>
|
||||
<td></td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg
|
||||
class="bi"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</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"
|
||||
role="img"
|
||||
aria-label="Included"
|
||||
>
|
||||
<use xlink:href="#check"></use>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<img
|
||||
class="mb-2"
|
||||
src="../assets/brand/bootstrap-logo.svg"
|
||||
alt=""
|
||||
width="24"
|
||||
height="19"
|
||||
/>
|
||||
<small class="d-block mb-3 text-body-secondary"
|
||||
>© 2017–2025</small
|
||||
>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Cool stuff</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Random feature</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Team feature</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Stuff for developers</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Another one</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Last time</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Resources</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Resource</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Resource name</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Another resource</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Final resource</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>About</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#">Team</a>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Locations</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Privacy</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Terms</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
body {
|
||||
background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
max-width: 700px;
|
||||
}
|
||||
@@ -0,0 +1,557 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Product example · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/product/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="product.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol
|
||||
id="aperture"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="cart" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#aperture"></use>
|
||||
</svg>
|
||||
Aperture
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvas"
|
||||
aria-controls="offcanvas"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="offcanvas offcanvas-end"
|
||||
tabindex="-1"
|
||||
id="offcanvas"
|
||||
aria-labelledby="offcanvasLabel"
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<ul class="navbar-nav flex-grow-1 justify-content-between">
|
||||
<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"></use>
|
||||
</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>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<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="#" aria-label="Cart">
|
||||
<svg class="bi" width="24" height="24" aria-hidden="true">
|
||||
<use xlink:href="#cart"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div
|
||||
class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary"
|
||||
>
|
||||
<div class="col-md-6 p-lg-5 mx-auto my-5">
|
||||
<h1 class="display-3 fw-bold">Designed for engineers</h1>
|
||||
<h3 class="fw-normal text-muted mb-3">
|
||||
Build anything you want with Aperture
|
||||
</h3>
|
||||
<div class="d-flex gap-3 justify-content-center lead fw-normal">
|
||||
<a class="icon-link" href="#">
|
||||
Learn more
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="icon-link" href="#">
|
||||
Buy
|
||||
<svg class="bi" aria-hidden="true">
|
||||
<use xlink:href="#chevron-right"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-device shadow-sm d-none d-md-block"></div>
|
||||
<div
|
||||
class="product-device product-device-2 shadow-sm d-none d-md-block"
|
||||
></div>
|
||||
</div>
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div
|
||||
class="text-bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body-tertiary shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-dark shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-dark shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="text-bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body-tertiary shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 p-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
|
||||
>
|
||||
<div class="my-3 py-3">
|
||||
<h2 class="display-5">Another headline</h2>
|
||||
<p class="lead">And an even wittier subheading.</p>
|
||||
</div>
|
||||
<div
|
||||
class="bg-body shadow-sm mx-auto"
|
||||
style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="d-block mb-2"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title>Product</title>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"
|
||||
></path>
|
||||
</svg>
|
||||
<small class="d-block mb-3 text-body-secondary"
|
||||
>© 2017–2025</small
|
||||
>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Cool stuff</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Random feature</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Team feature</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Stuff for developers</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Another one</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Last time</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Resources</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Resource name</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Resource</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Another resource</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Final resource</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Resources</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Business</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Education</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Government</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#">Gaming</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>About</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#">Team</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Locations</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#"
|
||||
>Privacy</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-secondary text-decoration-none" href="#">Terms</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.icon-link > .bi {
|
||||
width: .75em;
|
||||
height: .75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom translucent site header
|
||||
*/
|
||||
|
||||
.site-header {
|
||||
background-color: rgba(0, 0, 0, .85);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
}
|
||||
.site-header a {
|
||||
color: #8e8e8e;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
.site-header a:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dummy devices (replace them with your own or something else entirely!)
|
||||
*/
|
||||
|
||||
.product-device {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: -30%;
|
||||
width: 300px;
|
||||
height: 540px;
|
||||
background-color: #333;
|
||||
border-radius: 21px;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.product-device::before {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
right: 10px;
|
||||
bottom: 10%;
|
||||
left: 10px;
|
||||
content: "";
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.product-device-2 {
|
||||
top: -25%;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Extra utilities
|
||||
*/
|
||||
|
||||
.flex-equal > * {
|
||||
flex: 1;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.flex-md-equal > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,970 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Sidebars · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/sidebars/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="sidebars.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="home" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="speedometer2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="table" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="people-circle" viewBox="0 0 16 16">
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="grid" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main class="d-flex flex-nowrap">
|
||||
<h1 class="visually-hidden">Sidebars examples</h1>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#home"></use>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#speedometer2"></use>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#table"></use>
|
||||
</svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#grid"></use>
|
||||
</svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#people-circle"></use>
|
||||
</svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<div class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
src="https://github.com/mdo.png"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
class="rounded-circle me-2"
|
||||
/>
|
||||
<strong>mdo</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider b-example-vr"></div>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#home"></use>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#speedometer2"></use>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#table"></use>
|
||||
</svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#grid"></use>
|
||||
</svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-body-emphasis">
|
||||
<svg
|
||||
class="bi pe-none me-2"
|
||||
width="16"
|
||||
height="16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#people-circle"></use>
|
||||
</svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<div class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
src="https://github.com/mdo.png"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
class="rounded-circle me-2"
|
||||
/>
|
||||
<strong>mdo</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider b-example-vr"></div>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden">Icon-only</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link active py-3 border-bottom rounded-0"
|
||||
aria-current="page"
|
||||
title="Home"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="right"
|
||||
>
|
||||
<svg
|
||||
class="bi pe-none"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Home"
|
||||
>
|
||||
<use xlink:href="#home"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link py-3 border-bottom rounded-0"
|
||||
title="Dashboard"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="right"
|
||||
>
|
||||
<svg
|
||||
class="bi pe-none"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Dashboard"
|
||||
>
|
||||
<use xlink:href="#speedometer2"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link py-3 border-bottom rounded-0"
|
||||
title="Orders"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="right"
|
||||
>
|
||||
<svg
|
||||
class="bi pe-none"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Orders"
|
||||
>
|
||||
<use xlink:href="#table"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link py-3 border-bottom rounded-0"
|
||||
title="Products"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="right"
|
||||
>
|
||||
<svg
|
||||
class="bi pe-none"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Products"
|
||||
>
|
||||
<use xlink:href="#grid"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link py-3 border-bottom rounded-0"
|
||||
title="Customers"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="right"
|
||||
>
|
||||
<svg
|
||||
class="bi pe-none"
|
||||
width="24"
|
||||
height="24"
|
||||
role="img"
|
||||
aria-label="Customers"
|
||||
>
|
||||
<use xlink:href="#people-circle"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropdown border-top">
|
||||
<a
|
||||
href="#"
|
||||
class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
src="https://github.com/mdo.png"
|
||||
alt="mdo"
|
||||
width="24"
|
||||
height="24"
|
||||
class="rounded-circle"
|
||||
/>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider b-example-vr"></div>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
||||
</a>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li class="mb-1">
|
||||
<button
|
||||
class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#home-collapse"
|
||||
aria-expanded="true"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<div class="collapse show" id="home-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Overview</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Updates</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Reports</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button
|
||||
class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#dashboard-collapse"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Dashboard
|
||||
</button>
|
||||
<div class="collapse" id="dashboard-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Overview</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Weekly</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Monthly</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Annually</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button
|
||||
class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#orders-collapse"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Orders
|
||||
</button>
|
||||
<div class="collapse" id="orders-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>New</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Processed</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Shipped</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Returned</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="border-top my-3"></li>
|
||||
<li class="mb-1">
|
||||
<button
|
||||
class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#account-collapse"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Account
|
||||
</button>
|
||||
<div class="collapse" id="account-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>New...</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Profile</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Settings</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="link-body-emphasis d-inline-flex text-decoration-none rounded"
|
||||
>Sign out</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="b-example-divider b-example-vr"></div>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="fs-5 fw-semibold">List group</span>
|
||||
</a>
|
||||
<div class="list-group list-group-flush border-bottom scrollarea">
|
||||
<a
|
||||
href="#"
|
||||
class="list-group-item list-group-item-action active py-3 lh-sm"
|
||||
aria-current="true"
|
||||
>
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small>Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="list-group-item list-group-item-action py-3 lh-sm"
|
||||
aria-current="true"
|
||||
>
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="list-group-item list-group-item-action py-3 lh-sm"
|
||||
aria-current="true"
|
||||
>
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="list-group-item list-group-item-action py-3 lh-sm"
|
||||
aria-current="true"
|
||||
>
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
|
||||
<div
|
||||
class="d-flex w-100 align-items-center justify-content-between"
|
||||
>
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-body-secondary">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">
|
||||
Some placeholder content in a paragraph below the heading and
|
||||
date.
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-example-divider b-example-vr"></div>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
<script src="sidebars.js" class="astro-vvvwv3sm"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
html {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
max-height: 100vh;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.dropdown-toggle { outline: 0; }
|
||||
|
||||
.btn-toggle {
|
||||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-emphasis-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-toggle:hover,
|
||||
.btn-toggle:focus {
|
||||
color: rgba(var(--bs-emphasis-color-rgb), .85);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.btn-toggle::before {
|
||||
width: 1.25em;
|
||||
line-height: 0;
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
transition: transform .35s ease;
|
||||
transform-origin: .5em 50%;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-toggle::before {
|
||||
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.btn-toggle[aria-expanded="true"] {
|
||||
color: rgba(var(--bs-emphasis-color-rgb), .85);
|
||||
}
|
||||
.btn-toggle[aria-expanded="true"]::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.btn-toggle-nav a {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
.btn-toggle-nav a:hover,
|
||||
.btn-toggle-nav a:focus {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.scrollarea {
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* global bootstrap: false */
|
||||
(() => {
|
||||
'use strict'
|
||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
tooltipTriggerList.forEach(tooltipTriggerEl => {
|
||||
new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,242 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Signin Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/sign-in/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="sign-in.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="d-flex align-items-center py-4 bg-body-tertiary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="form-signin w-100 m-auto">
|
||||
<form>
|
||||
<img
|
||||
class="mb-4"
|
||||
src="../assets/brand/bootstrap-logo.svg"
|
||||
alt=""
|
||||
width="72"
|
||||
height="57"
|
||||
/>
|
||||
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<div class="form-check text-start my-3">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value="remember-me"
|
||||
id="checkDefault"
|
||||
/>
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-primary w-100 py-2" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
<p class="mt-5 mb-3 text-body-secondary">© 2017–2025</p>
|
||||
</form>
|
||||
</main>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.form-signin .form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Starter Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/starter-template/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-circle" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<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"
|
||||
role="img"
|
||||
aria-label="Bootstrap"
|
||||
>
|
||||
<use xlink:href="#bootstrap"></use>
|
||||
</svg>
|
||||
<span class="fs-4">Starter template</span>
|
||||
</a>
|
||||
</header>
|
||||
<main>
|
||||
<h1 class="text-body-emphasis">Get started with Bootstrap</h1>
|
||||
<p class="fs-5 col-md-8">
|
||||
Quickly and easily get started with Bootstrap's compiled,
|
||||
production-ready files with this barebones example featuring some
|
||||
basic HTML and helpful links. Download all our examples to get
|
||||
started.
|
||||
</p>
|
||||
<div class="mb-5">
|
||||
<a href="../examples" class="btn btn-primary btn-lg px-4"
|
||||
>Download examples</a
|
||||
>
|
||||
</div>
|
||||
<hr class="col-3 col-md-2 mb-5" />
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6">
|
||||
<h2 class="text-body-emphasis">Starter projects</h2>
|
||||
<p>
|
||||
Ready to go beyond the starter template? Check out these open
|
||||
source projects that you can quickly duplicate to a new GitHub
|
||||
repository.
|
||||
</p>
|
||||
<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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</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" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Bootstrap Webpack starter
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2 class="text-body-emphasis">Guides</h2>
|
||||
<p>
|
||||
Read more detailed instructions and documentation on using or
|
||||
contributing to Bootstrap.
|
||||
</p>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li>
|
||||
<a
|
||||
class="icon-link mb-1"
|
||||
href="../getting-started/introduction"
|
||||
>
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Bootstrap quick start guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="../getting-started/webpack">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Bootstrap Webpack guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="../getting-started/parcel">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Bootstrap Parcel guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="../getting-started/vite">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Bootstrap Vite guide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="icon-link mb-1" href="../getting-started/contribute">
|
||||
<svg class="bi" width="16" height="16" aria-hidden="true">
|
||||
<use xlink:href="#arrow-right-circle"></use>
|
||||
</svg>
|
||||
Contributing to Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-5 my-5 text-body-secondary border-top">
|
||||
Created by the Bootstrap team · © 2025
|
||||
</footer>
|
||||
</div>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,262 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-100" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Sticky Footer Navbar Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/sticky-footer-navbar/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="sticky-footer-navbar.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse"
|
||||
aria-controls="navbarCollapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Begin page content -->
|
||||
<main class="flex-shrink-0">
|
||||
<div class="container">
|
||||
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||
<p class="lead">
|
||||
Pin a footer to the bottom of the viewport in desktop browsers with
|
||||
this custom HTML and CSS. A fixed navbar has been added with
|
||||
<code class="small">padding-top: 60px;</code> on the
|
||||
<code class="small">main > .container</code>.
|
||||
</p>
|
||||
<p>
|
||||
Back to
|
||||
<a href="../examples/sticky-footer/">the default sticky footer</a>
|
||||
minus the navbar.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer mt-auto py-3 bg-body-tertiary">
|
||||
<div class="container">
|
||||
<span class="text-body-secondary"
|
||||
>Place sticky footer content here.</span
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
main > .container {
|
||||
padding: 60px 15px 0;
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-100" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="" />
|
||||
<meta
|
||||
name="author"
|
||||
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
/>
|
||||
<meta name="generator" content="Astro v5.13.2" />
|
||||
<title>Sticky Footer Template · Bootstrap v5.3</title>
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://getbootstrap.com/docs/5.3/examples/sticky-footer/"
|
||||
/>
|
||||
<script src="../assets/js/color-modes.js"></script>
|
||||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<meta name="theme-color" content="#712cf9" />
|
||||
<link href="sticky-footer.css" rel="stylesheet" />
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: #0000001a;
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em #0000001a,
|
||||
inset 0 0.125em 0.5em #00000026;
|
||||
}
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
.bi {
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
.bd-mode-toggle .bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="circle-half" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
|
||||
></path>
|
||||
<path
|
||||
d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="sun-fill" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
|
||||
></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div
|
||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||
>
|
||||
<button
|
||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)"
|
||||
>
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end shadow"
|
||||
aria-labelledby="bd-theme-text"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="light"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#sun-fill"></use>
|
||||
</svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center"
|
||||
data-bs-theme-value="dark"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#moon-stars-fill"></use>
|
||||
</svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-item d-flex align-items-center active"
|
||||
data-bs-theme-value="auto"
|
||||
aria-pressed="true"
|
||||
>
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true">
|
||||
<use href="#circle-half"></use>
|
||||
</svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true">
|
||||
<use href="#check2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Begin page content -->
|
||||
<main class="flex-shrink-0">
|
||||
<div class="container">
|
||||
<h1 class="mt-5">Sticky footer</h1>
|
||||
<p class="lead">
|
||||
Pin a footer to the bottom of the viewport in desktop browsers with
|
||||
this custom HTML and CSS.
|
||||
</p>
|
||||
<p>
|
||||
Use
|
||||
<a href="../examples/sticky-footer-navbar/"
|
||||
>the sticky footer with a fixed navbar</a
|
||||
>
|
||||
if need be, too.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer mt-auto py-3 bg-body-tertiary">
|
||||
<div class="container">
|
||||
<span class="text-body-secondary"
|
||||
>Place sticky footer content here.</span
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="../assets/dist/js/bootstrap.bundle.min.js"
|
||||
class="astro-vvvwv3sm"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
max-width: 680px;
|
||||
padding: 0 15px;
|
||||
}
|
||||