diff options
Diffstat (limited to 'site/content/docs/5.2/examples')
78 files changed, 10786 insertions, 0 deletions
diff --git a/site/content/docs/5.2/examples/.stylelintrc b/site/content/docs/5.2/examples/.stylelintrc new file mode 100644 index 0000000..79ea92d --- /dev/null +++ b/site/content/docs/5.2/examples/.stylelintrc @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-twbs-bootstrap" + ], + "rules": { + "at-rule-no-vendor-prefix": null, + "comment-empty-line-before": null, + "media-feature-name-no-vendor-prefix": null, + "property-disallowed-list": null, + "property-no-vendor-prefix": null, + "selector-no-qualifying-type": null, + "selector-no-vendor-prefix": null, + "value-no-vendor-prefix": null + } +} diff --git a/site/content/docs/5.2/examples/_index.md b/site/content/docs/5.2/examples/_index.md new file mode 100644 index 0000000..4668883 --- /dev/null +++ b/site/content/docs/5.2/examples/_index.md @@ -0,0 +1,45 @@ +--- +layout: single +title: Examples +description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts. +aliases: "/examples/" +--- + +{{< list-examples.inline >}} +{{ range $entry := $.Site.Data.examples -}} +<div class="row g-lg-5 mb-5"> + <div class="bd-content col-lg-3"> + <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> + <p>{{ $entry.description }}</p> + {{ if eq $entry.category "RTL" -}} + <div class="bd-callout bd-callout-warning small"> + <p> + <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? + </p> + <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p> + </div> + {{ end -}} + </div> + + <div class="col-lg-9"> + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}<div class="row">{{ end }} + <div class="col-sm-6 col-md-4 mb-3"> + <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> + <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png, + /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x" + src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" + alt="" + width="480" height="300" + loading="lazy"> + <h3 class="h5 mb-1">{{ $example.name }}</h3> + </a> + <p class="text-muted">{{ $example.description }}</p> + </div> + {{ if (eq (add $i 1) $len) }}</div>{{ end }} + {{ end -}} + </div> +</div> +{{ end -}} +{{< /list-examples.inline >}} diff --git a/site/content/docs/5.2/examples/album-rtl/index.html b/site/content/docs/5.2/examples/album-rtl/index.html new file mode 100644 index 0000000..3408056 --- /dev/null +++ b/site/content/docs/5.2/examples/album-rtl/index.html @@ -0,0 +1,209 @@ +--- +layout: examples +title: مثال الألبوم +direction: rtl +--- + +<header> + <div class="collapse bg-dark" id="navbarHeader"> + <div class="container"> + <div class="row"> + <div class="col-sm-8 col-md-7 py-4"> + <h4 class="text-white">حول</h4> + <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> + </div> + <div class="col-sm-4 offset-md-1 py-4"> + <h4 class="text-white">تواصل معي</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"/><circle cx="12" cy="13" r="4"/></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-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</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-light"> + <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"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} + <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-muted">9 دقائق</small> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + +</main> + +<footer class="text-muted 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="{{< docsref "/getting-started/introduction">}} "> دليل البدء </a>.</p> + </div> +</footer> diff --git a/site/content/docs/5.2/examples/album/index.html b/site/content/docs/5.2/examples/album/index.html new file mode 100644 index 0000000..2d25d72 --- /dev/null +++ b/site/content/docs/5.2/examples/album/index.html @@ -0,0 +1,208 @@ +--- +layout: examples +title: Album example +--- + +<header> + <div class="collapse bg-dark" id="navbarHeader"> + <div class="container"> + <div class="row"> + <div class="col-sm-8 col-md-7 py-4"> + <h4 class="text-white">About</h4> + <p class="text-muted">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 class="text-white">Contact</h4> + <ul class="list-unstyled"> + <li><a href="#" class="text-white">Follow on Twitter</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"/><circle cx="12" cy="13" r="4"/></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-muted">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-light"> + <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"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card shadow-sm"> + {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} + <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-muted">9 mins</small> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + +</main> + +<footer class="text-muted 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="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p> + </div> +</footer> diff --git a/site/content/docs/5.2/examples/blog-rtl/index.html b/site/content/docs/5.2/examples/blog-rtl/index.html new file mode 100644 index 0000000..05af925 --- /dev/null +++ b/site/content/docs/5.2/examples/blog-rtl/index.html @@ -0,0 +1,206 @@ +--- +layout: examples +title: قالب المدونة +direction: rtl +extra_css: + - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" + - "../blog/blog.rtl.css" +include_js: false +--- + +<div class="container"> + <header class="blog-header 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-dark" 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"/><path d="M21 21l-5.2-5.2"/></svg> + </a> + <a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a> + </div> + </div> + </header> + + <div class="nav-scroller py-1 mb-2"> + <nav class="nav d-flex justify-content-between"> + <a class="p-2 link-secondary" href="#">العالم</a> + <a class="p-2 link-secondary" href="#">الولايات المتحدة</a> + <a class="p-2 link-secondary" href="#">التقنية</a> + <a class="p-2 link-secondary" href="#">التصميم</a> + <a class="p-2 link-secondary" href="#">الحضارة</a> + <a class="p-2 link-secondary" href="#">المال والأعمال</a> + <a class="p-2 link-secondary" href="#">السياسة</a> + <a class="p-2 link-secondary" href="#">الرأي العام</a> + <a class="p-2 link-secondary" href="#">العلوم</a> + <a class="p-2 link-secondary" href="#">الصحة</a> + <a class="p-2 link-secondary" href="#">الموضة</a> + <a class="p-2 link-secondary" href="#">السفر</a> + </nav> + </div> +</div> + +<main class="container"> + <div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> + <div class="col-md-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-white 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">العالم</strong> + <h3 class="mb-0">مشاركة مميزة</h3> + <div class="mb-1 text-muted">نوفمبر 12</div> + <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> + <a href="#" class="stretched-link">أكمل القراءة</a> + </div> + <div class="col-auto d-none d-lg-block"> + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} + </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">التصميم</strong> + <h3 class="mb-0">عنوان الوظيفة</h3> + <div class="mb-1 text-muted">نوفمبر 11</div> + <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> + <a href="#" class="stretched-link">أكمل القراءة</a> + </div> + <div class="col-auto d-none d-lg-block"> + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} + </div> + </div> + </div> + </div> + + <div class="row"> + <div class="col-md-8"> + <h3 class="pb-4 mb-4 fst-italic border-bottom"> + من Firehose + </h3> + + <article class="blog-post"> + <h2 class="blog-post-title mb-1">مثال على تدوينة</h2> + <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p> + + <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p> + <hr> + <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p> + <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="blog-post-title 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="blog-post-title 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">تدوينات أحدث</a> + </nav> + + </div> + + <div class="col-md-4"> + <div class="position-sticky" style="top: 2rem;"> + <div class="p-4 mb-3 bg-light rounded"> + <h4 class="fst-italic">حول</h4> + <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> + </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="#">Twitter</a></li> + <li><a href="#">Facebook</a></li> + </ol> + </div> + </div> + </div> + </div> + +</main> + +<footer class="blog-footer"> + <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p> + <p> + <a href="#">عد إلى الأعلى</a> + </p> +</footer> diff --git a/site/content/docs/5.2/examples/blog/blog.css b/site/content/docs/5.2/examples/blog/blog.css new file mode 100644 index 0000000..cc5fc74 --- /dev/null +++ b/site/content/docs/5.2/examples/blog/blog.css @@ -0,0 +1,69 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + border-bottom: 1px solid #e5e5e5; +} + +.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*/; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.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-title { + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/5.2/examples/blog/blog.rtl.css b/site/content/docs/5.2/examples/blog/blog.rtl.css new file mode 100644 index 0000000..fc03c35 --- /dev/null +++ b/site/content/docs/5.2/examples/blog/blog.rtl.css @@ -0,0 +1,69 @@ +/* stylelint-disable selector-list-comma-newline-after */ + +.blog-header { + border-bottom: 1px solid #e5e5e5; +} + +.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; +} + +.display-4 { + font-size: 2.5rem; +} +@media (min-width: 768px) { + .display-4 { + font-size: 3rem; + } +} + +.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-title { + font-size: 2.5rem; +} +.blog-post-meta { + margin-bottom: 1.25rem; + color: #727272; +} + +/* + * Footer + */ +.blog-footer { + padding: 2.5rem 0; + color: #727272; + text-align: center; + background-color: #f9f9f9; + border-top: .05rem solid #e5e5e5; +} +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/site/content/docs/5.2/examples/blog/index.html b/site/content/docs/5.2/examples/blog/index.html new file mode 100644 index 0000000..6b60ea0 --- /dev/null +++ b/site/content/docs/5.2/examples/blog/index.html @@ -0,0 +1,258 @@ +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" + - "blog.css" +include_js: false +--- + +<div class="container"> + <header class="blog-header 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-dark" 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"/><path d="M21 21l-5.2-5.2"/></svg> + </a> + <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a> + </div> + </div> + </header> + + <div class="nav-scroller py-1 mb-2"> + <nav class="nav d-flex justify-content-between"> + <a class="p-2 link-secondary" href="#">World</a> + <a class="p-2 link-secondary" href="#">U.S.</a> + <a class="p-2 link-secondary" href="#">Technology</a> + <a class="p-2 link-secondary" href="#">Design</a> + <a class="p-2 link-secondary" href="#">Culture</a> + <a class="p-2 link-secondary" href="#">Business</a> + <a class="p-2 link-secondary" href="#">Politics</a> + <a class="p-2 link-secondary" href="#">Opinion</a> + <a class="p-2 link-secondary" href="#">Science</a> + <a class="p-2 link-secondary" href="#">Health</a> + <a class="p-2 link-secondary" href="#">Style</a> + <a class="p-2 link-secondary" href="#">Travel</a> + </nav> + </div> +</div> + +<main class="container"> + <div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> + <div class="col-md-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-white 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">World</strong> + <h3 class="mb-0">Featured post</h3> + <div class="mb-1 text-muted">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="stretched-link">Continue reading</a> + </div> + <div class="col-auto d-none d-lg-block"> + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} + </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">Design</strong> + <h3 class="mb-0">Post title</h3> + <div class="mb-1 text-muted">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="stretched-link">Continue reading</a> + </div> + <div class="col-auto d-none d-lg-block"> + {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} + </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="blog-post-title 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="blog-post-title 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="blog-post-title 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">Newer</a> + </nav> + + </div> + + <div class="col-md-4"> + <div class="position-sticky" style="top: 2rem;"> + <div class="p-4 mb-3 bg-light 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 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="#">Twitter</a></li> + <li><a href="#">Facebook</a></li> + </ol> + </div> + </div> + </div> + </div> + +</main> + +<footer class="blog-footer"> + <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> + <p> + <a href="#">Back to top</a> + </p> +</footer> diff --git a/site/content/docs/5.2/examples/carousel-rtl/index.html b/site/content/docs/5.2/examples/carousel-rtl/index.html new file mode 100644 index 0000000..b8c35d6 --- /dev/null +++ b/site/content/docs/5.2/examples/carousel-rtl/index.html @@ -0,0 +1,167 @@ +--- +layout: examples +title: قالب شرائح العرض +direction: rtl +extra_css: + - "../carousel/carousel.rtl.css" +--- + +<header> + <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">رابط غير مفعل</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" 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"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <div class="container"> + <div class="carousel-caption text-start"> + <h1>عنوان المثال.</h1> + <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> + <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p> + </div> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <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"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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-muted"> سيذهل عقلك. </span></h2> + <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p> + </div> + <div class="col-md-5"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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-muted"> شاهد بنفسك. </span></h2> + <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p> + </div> + <div class="col-md-5 order-md-1"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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-muted"> كش ملك. </span></h2> + <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p> + </div> + <div class="col-md-5"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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–{{< year >}} Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p> + </footer> +</main> diff --git a/site/content/docs/5.2/examples/carousel/carousel.css b/site/content/docs/5.2/examples/carousel/carousel.css new file mode 100644 index 0000000..0bdf976 --- /dev/null +++ b/site/content/docs/5.2/examples/carousel/carousel.css @@ -0,0 +1,82 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* 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; + } +} diff --git a/site/content/docs/5.2/examples/carousel/carousel.rtl.css b/site/content/docs/5.2/examples/carousel/carousel.rtl.css new file mode 100644 index 0000000..d20a811 --- /dev/null +++ b/site/content/docs/5.2/examples/carousel/carousel.rtl.css @@ -0,0 +1,74 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: #5a5a5a; +} + + +/* 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; + } +} diff --git a/site/content/docs/5.2/examples/carousel/index.html b/site/content/docs/5.2/examples/carousel/index.html new file mode 100644 index 0000000..67c0dd5 --- /dev/null +++ b/site/content/docs/5.2/examples/carousel/index.html @@ -0,0 +1,166 @@ +--- +layout: examples +title: Carousel Template +extra_css: + - "carousel.css" +--- + +<header> + <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">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" 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"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <div class="container"> + <div class="carousel-caption text-start"> + <h1>Example headline.</h1> + <p>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"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <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"> + {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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"> + {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + <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-muted">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"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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-muted">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"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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-muted">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"> + {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + </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–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + </footer> +</main> diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html new file mode 100644 index 0000000..a057998 --- /dev/null +++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -0,0 +1,1618 @@ +--- +layout: examples +title: ورقة الغش +extra_css: + - "../cheatsheet/cheatsheet.rtl.css" +extra_js: + - src: "../cheatsheet/cheatsheet.js" +body_class: "bg-light" +direction: rtl +--- + +<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark"> + <div class="container-fluid d-flex align-items-center"> + <h1 class="d-flex align-items-center fs-4 text-white mb-0"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap"> + ورقة الغش + </h1> + <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a> + </div> +</header> +<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> + <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2> + <nav class="small" id="toc"> + <ul class="list-unstyled"> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> + <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">الجداول</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">النماذج البيانية</a></li> + </ul> + </li> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> + <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">الأحجام</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">مجموعة الإدخال</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">التحقق</a></li> + </ul> + </li> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> + <ul class="list-unstyled ps-3 collapse" id="components-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">الشارة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">مسار التنقل التفصيلي</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">الأزرار</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">مجموعة الأزرار</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">البطاقة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">شرائح العرض</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">القوائم المنسدلة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">مجموعة العناصر</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">الصندوق العائم</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">التنقل</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">شريط التنقل</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">ترقيم الصفحات</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">الصناديق المنبثقة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">شريط التقدم</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">المخطوطة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">الدوائر المتحركة</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">الإشعارات</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">التلميحات</a></li> + </ul> + </li> + </ul> + </nav> +</aside> +<div class="bd-cheatsheet container-fluid bg-body"> + <section id="content"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2> + + <article class="my-3" id="typography"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>النصوص</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <p class="display-1">العرض 1</p> + <p class="display-2">العرض 2</p> + <p class="display-3">العرض 3</p> + <p class="display-4">العرض 4</p> + <p class="display-5">العرض 5</p> + <p class="display-6">العرض 6</p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p class="h1">عنوان 1</p> + <p class="h2">عنوان 2</p> + <p class="h3">عنوان 3</p> + <p class="h4">عنوان 4</p> + <p class="h5">عنوان 5</p> + <p class="h6">عنوان 6</p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p class="lead"> + هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى. + </p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p> + <p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p> + <p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p> + <p><ins>من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.</ins></p> + <p><u>سيتم عرض النص في هذا السطر كما وتحته خط.</u></p> + <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p> + <p><strong>هذا السطر يحوي نص عريض.</strong></p> + <p><em>هذا السطر يحوي نص مائل.</em></p> + {{< /example >}} + + {{< example show_markup="false" >}} + <hr> + {{< /example >}} + + {{< example show_markup="false" >}} + <blockquote class="blockquote"> + <p>إقتباس مبهر، موضوع في عنصر blockquote</p> + <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer> + </blockquote> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-unstyled"> + <li>هذه قائمة عناصر.</li> + <li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li> + <li>إلا أنها مجهزة كـ قائمة خلف الكواليس</li> + <li>هذا التصميم ينطبق فقد على القائمة الرئيسية</li> + <li>القوائم الفرعية + <ul> + <li>لا تتأثر بهذا التصميم</li> + <li>فهي تظهر عليها علامات الترقيم</li> + <li>وتحتوي على مساحة فارغة بجوارها</li> + </ul> + </li> + <li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-inline"> + <li class="list-inline-item">هذا عنصر في قائمة.</li> + <li class="list-inline-item">وهذا أيضًا.</li> + <li class="list-inline-item">لكنهم يظهرون متجاورين.</li> + </ul> + {{< /example >}} + </div> + </article> + <article class="my-3" id="images"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الصور</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="tables"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الجداول</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <table class="table table-striped"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">الاسم الاول</th> + <th scope="col">الكنية</th> + <th scope="col">الاسم المستعار</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> + </tr> + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-dark table-borderless"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">الاسم الاول</th> + <th scope="col">الكنية</th> + <th scope="col">الاسم المستعار</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> + </tr> + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Class</th> + <th scope="col">عنوان</th> + <th scope="col">عنوان</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Default</th> + <td>خلية</td> + <td>خلية</td> + </tr> + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <tr class="table-{{ .name }}"> + <th scope="row">{{ .name | title }}</th> + <td>خلية</td> + <td>خلية</td> + </tr> + {{- end -}} + {{< /table.inline >}} + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-sm table-bordered"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">الاسم الاول</th> + <th scope="col">الكنية</th> + <th scope="col">الاسم المستعار</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td><bdo lang="en" dir="ltr">@mdo</bdo></td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td><bdo lang="en" dir="ltr">@fat</bdo></td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td><bdo lang="en" dir="ltr">@twitter</bdo></td> + </tr> + </tbody> + </table> + {{< /example >}} + </div> + </article> + <article class="my-3" id="figures"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>النماذج البيانية</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <figure class="figure"> + {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} + <figcaption class="figure-caption">شرح للصورة أعلاه.</figcaption> + </figure> + {{< /example >}} + </div> + </article> + </section> + + <section id="forms"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">النماذج</h2> + + <article class="my-3" id="overview"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>نظرة عامة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <div class="mb-3"> + <label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label> + <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> + <div id="emailHelp" class="form-text">لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.</div> + </div> + <div class="mb-3"> + <label for="exampleInputPassword1" class="form-label">كلمة السر</label> + <input type="password" class="form-control" id="exampleInputPassword1"> + </div> + <div class="mb-3"> + <label for="exampleSelect" class="form-label">قائمة اختيار</label> + <select class="form-select" id="exampleSelect"> + <option selected>افتح قائمة الاختيار هذه</option> + <option value="1">واحد</option> + <option value="2">اثنان</option> + <option value="3">ثلاثة</option> + </select> + </div> + <div class="mb-3 form-check"> + <input type="checkbox" class="form-check-input" id="exampleCheck1"> + <label class="form-check-label" for="exampleCheck1">اخترني</label> + </div> + <fieldset class="mb-3"> + <legend>أزرار الاختيار الأحادي</legend> + <div class="form-check"> + <input type="radio" name="radios" class="form-check-input" id="exampleRadio1" checked> + <label class="form-check-label" for="exampleRadio1">الخيار الافتراضي</label> + </div> + <div class="mb-3 form-check"> + <input type="radio" name="radios" class="form-check-input" id="exampleRadio2"> + <label class="form-check-label" for="exampleRadio2">خيار آخر</label> + </div> + </fieldset> + <div class="mb-3"> + <label class="form-label" for="customFile">رفع</label> + <input type="file" class="form-control" id="customFile"> + </div> + <div class="mb-3 form-check form-switch"> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> + <label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label> + </div> + <div class="mb-3"> + <label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label> + <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> + </div> + <button type="submit" class="btn btn-primary">إرسال</button> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="disabled-forms"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الحقول المعطلة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة"> + <div class="mb-3"> + <label for="disabledTextInput" class="form-label">حقل إدخال معطل</label> + <input type="text" id="disabledTextInput" class="form-control" placeholder="حقل إدخال معطل"> + </div> + <div class="mb-3"> + <label for="disabledSelect" class="form-label">قائمة اختيار معطلة</label> + <select id="disabledSelect" class="form-select"> + <option>خيار معطل</option> + </select> + </div> + <div class="mb-3"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> + <label class="form-check-label" for="disabledFieldsetCheck"> + زر اختيار معطل + </label> + </div> + </div> + <fieldset class="mb-3"> + <legend>أزرار اختيار أحادي معطلين</legend> + <div class="form-check"> + <input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled> + <label class="form-check-label" for="disabledRadio1">خيار معطل</label> + </div> + <div class="mb-3 form-check"> + <input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled> + <label class="form-check-label" for="disabledRadio2">خيار آخر معطل</label> + </div> + </fieldset> + <div class="mb-3"> + <label class="form-label" for="disabledCustomFile">رفع معطل</label> + <input type="file" class="form-control" id="disabledCustomFile" disabled> + </div> + <div class="mb-3 form-check form-switch"> + <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled> + <label class="form-check-label" for="disabledSwitchCheckChecked">زر معطل على شكل مفتاح اختيار.</label> + </div> + <div class="mb-3"> + <label for="disabledRange" class="form-label">حقل اختيار نطاقي معطل</label> + <input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange"> + </div> + <button type="submit" class="btn btn-primary">إرسال</button> + </fieldset> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="sizing"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الأحجام</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="mb-3"> + <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال"> + </div> + <div class="mb-3"> + <select class="form-select form-select-lg" aria-label=".form-select-lg مثال"> + <option selected>افتح قائمة الاختيار هذه</option> + <option value="1">واحد</option> + <option value="2">اثنان</option> + <option value="3">ثلاثة</option> + </select> + </div> + <div class="mb-3"> + <input type="file" class="form-control form-control-lg" aria-label="مثال على إدخال ملف كبير"> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="mb-3"> + <input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال"> + </div> + <div class="mb-3"> + <select class="form-select form-select-sm" aria-label=".form-select-sm مثال"> + <option selected>افتح قائمة الاختيار هذه</option> + <option value="1">واحد</option> + <option value="2">اثنان</option> + <option value="3">ثلاثة</option> + </select> + </div> + <div class="mb-3"> + <input type="file" class="form-control form-control-sm" aria-label="مثال على إدخال ملف صغير"> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="input-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>مجموعة الإدخال</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="input-group mb-3"> + <span class="input-group-text" id="basic-addon1">أنا اسمي</span> + <input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1"> + </div> + <div class="input-group mb-3"> + <input type="text" class="form-control" placeholder="أنا أحب الكعك والقهوة" aria-label="الطعام المفضل" aria-describedby="basic-addon2"> + <span class="input-group-text" id="basic-addon2">وغيرها</span> + </div> + <label for="basic-url" class="form-label">عنوان حسابك الشخصي</label> + <div class="input-group mb-3"> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> + <span class="input-group-text" id="basic-addon3"><bdo lang="en" dir="ltr">https://example.com/users/</bdo></span> + </div> + <div class="input-group mb-3"> + <span class="input-group-text"><bdo lang="en" dir="ltr">.00</bdo></span> + <input type="text" class="form-control" aria-label="المبلغ (لأقرب دولار)"> + <span class="input-group-text">$</span> + </div> + <div class="input-group"> + <span class="input-group-text">مع textarea</span> + <textarea class="form-control" aria-label="مع textarea"></textarea> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="floating-labels"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الحقول ذوي العناوين العائمة</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> + <label for="floatingInput">البريد الالكتروني</label> + </div> + <div class="form-floating"> + <input type="password" class="form-control" id="floatingPassword" placeholder="كلمة السر"> + <label for="floatingPassword">كلمة السر</label> + </div> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="validation"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>التحقق</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form class="row g-3"> + <div class="col-md-4"> + <label for="validationServer01" class="form-label">الاسم الاول</label> + <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> + <div class="valid-feedback"> + يبدو صحيحًا! + </div> + </div> + <div class="col-md-4"> + <label for="validationServer02" class="form-label">الكنية</label> + <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> + <div class="valid-feedback"> + يبدو صحيحًا! + </div> + </div> + <div class="col-md-4"> + <label for="validationServerUsername" class="form-label">اسم المستخدم</label> + <div class="input-group has-validation"> + <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> + <span class="input-group-text" id="inputGroupPrepend3">@</span> + <div class="invalid-feedback"> + يرجى اختيار اسم مستخدم. + </div> + </div> + </div> + <div class="col-md-6"> + <label for="validationServer03" class="form-label">مدينة</label> + <input type="text" class="form-control is-invalid" id="validationServer03" required> + <div class="invalid-feedback"> + يرجى إدخال مدينة صحيحة. + </div> + </div> + <div class="col-md-3"> + <label for="validationServer04" class="form-label">حالة</label> + <select class="form-select is-invalid" id="validationServer04" required> + <option selected disabled value="">اختر...</option> + <option>...</option> + </select> + <div class="invalid-feedback"> + يرجى اختيار ولاية صحيحة. + </div> + </div> + <div class="col-md-3"> + <label for="validationServer05" class="form-label">الرمز البريدي</label> + <input type="text" class="form-control is-invalid" id="validationServer05" required> + <div class="invalid-feedback"> + يرجى إدخال رمز بريدي صحيح. + </div> + </div> + <div class="col-12"> + <div class="form-check"> + <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required> + <label class="form-check-label" for="invalidCheck3"> + أوافق على الشروط والأحكام + </label> + <div class="invalid-feedback"> + تجب الموافقة قبل إرسال النموذج. + </div> + </div> + </div> + <div class="col-12"> + <button class="btn btn-primary" type="submit">إرسال النموذج</button> + </div> + </form> + {{< /example >}} + </div> + </article> + </section> + + <section id="components"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">العناصر</h2> + + <article class="my-3" id="accordion"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>المطوية</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="accordion" id="accordionExample"> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingOne"> + <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + عنصر المطوية الأول + </button> + </h4> + <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingTwo"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + عنصر المطوية الثاني + </button> + </h4> + <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingThree"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + عنصر المطوية الثالث + </button> + </h4> + <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. + </div> + </div> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="alerts"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الإنذارات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert"> + تنبيه {{ .name }} بسيط مع <a href="#" class="alert-link">رابط مثال</a>. أعطها نقرة إذا أردت. + <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="قريب"></button> + </div>{{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="alert alert-success" role="alert"> + <h4 class="alert-heading">أحسنت!</h4> + <p>لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.</p> + <hr> + <p class="mb-0">كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.</p> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="badge"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الشارة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p> + <p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p> + <p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p> + <p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p> + <p class="h5">مثال على عنوان <span class="badge text-bg-warning">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p> + <p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p> + {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}} + {{< /badge.inline >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="breadcrumb"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>مسار التنقل التفصيلي (فتات الخبز)</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav aria-label="فتات الخبز"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li> + <li class="breadcrumb-item"><a href="#">المكتبة</a></li> + <li class="breadcrumb-item active" aria-current="page">البيانات</li> + </ol> + </nav> + {{< /example >}} + </div> + </article> + <article class="my-3" id="buttons"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الأزرار</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button> + {{- end -}} + {{< /buttons.inline >}} + + <button type="button" class="btn btn-link">رابط</button> + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button> + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + <button type="button" class="btn btn-primary btn-sm">زر صغير</button> + <button type="button" class="btn btn-primary">زر قياسي</button> + <button type="button" class="btn btn-primary btn-lg">زر كبير</button> + {{< /example >}} + </div> + </article> + <article class="my-3" id="button-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>مجموعة الأزرار</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار"> + <div class="btn-group me-2" role="group" aria-label="المجموعة الأولى"> + <button type="button" class="btn btn-secondary">1</button> + <button type="button" class="btn btn-secondary">2</button> + <button type="button" class="btn btn-secondary">3</button> + <button type="button" class="btn btn-secondary">4</button> + </div> + <div class="btn-group me-2" role="group" aria-label="المجموعة الثانية"> + <button type="button" class="btn btn-secondary">5</button> + <button type="button" class="btn btn-secondary">6</button> + <button type="button" class="btn btn-secondary">7</button> + </div> + <div class="btn-group" role="group" aria-label="المجموعة الثالثة"> + <button type="button" class="btn btn-secondary">8</button> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="card"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>البطاقة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="row row-cols-1 row-cols-md-2 g-4"> + <div class="col"> + <div class="card"> + {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}} + <div class="card-body"> + <h5 class="card-title">عنوان البطاقة</h5> + <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> + <a href="#" class="btn btn-primary">اذهب لمكان ما</a> + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="card-header"> + متميز + </div> + <div class="card-body"> + <h5 class="card-title">عنوان البطاقة</h5> + <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> + <a href="#" class="btn btn-primary">اذهب لمكان ما</a> + </div> + <div class="card-footer text-muted"> + منذ يومان + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="card-body"> + <h5 class="card-title">عنوان البطاقة</h5> + <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> + </div> + <ul class="list-group list-group-flush"> + <li class="list-group-item">عنصر</li> + <li class="list-group-item">عنصر آخر</li> + <li class="list-group-item">عنصر ثالث</li> + </ul> + <div class="card-body"> + <a href="#" class="card-link">رابط البطاقة</a> + <a href="#" class="card-link">رابط آخر</a> + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="row g-0"> + <div class="col-md-4"> + {{< placeholder width="100%" height="250" text="صورة" >}} + </div> + <div class="col-md-8"> + <div class="card-body"> + <h5 class="card-title">عنوان البطاقة</h5> + <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> + <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p> + </div> + </div> + </div> + </div> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="carousel"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>شرائح العرض</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="الشريحة الثانية"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="الشريحة الثالثة"></button> + </div> + <div class="carousel-inner"> + <div class="carousel-item active"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>عنوان الشريحة الأولى</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>عنوان الشريحة الثانية</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>عنوان الشريحة الثالثة</h5> + <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p> + </div> + </div> + </div> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">التالي</span> + </button> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="dropdowns"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>القوائم المنسدلة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> + <div class="dropdown"> + <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + <div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + <div class="dropdown"> + <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group"> + <button type="button" class="btn btn-primary">Primary</button> + <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-secondary">Secondary</button> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-success">Success</button> + <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-info">Info</button> + <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-warning">Warning</button> + <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-danger">Danger</button> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">تبديل القائمة المنسدلة</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </div><!-- /btn-group --> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> + <div class="dropend"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة لليسار + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + <div class="dropup"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة للأعلى + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + <div class="dropstart"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + زر القائمة المنسدلة لليمين + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group"> + <div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + قائمة منسدلة بمحاذاة نهاية الزر + </button> + <ul class="dropdown-menu dropdown-menu-end"> + <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">رابط منفصل</a></li> + </ul> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="list-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>مجموعة العناصر</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <ul class="list-group"> + <li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li> + <li class="list-group-item">عنصر ثاني</li> + <li class="list-group-item">عنصر ثالث</li> + <li class="list-group-item">عنصر رابع</li> + <li class="list-group-item">وعنصر خامس أيضًا</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-group list-group-flush"> + <li class="list-group-item">عنصر</li> + <li class="list-group-item">عنصر ثاني</li> + <li class="list-group-item">عنصر ثالث</li> + <li class="list-group-item">عنصر رابع</li> + <li class="list-group-item">وعنصر خامس أيضًا</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="list-group"> + <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a> + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a> + {{- end -}} + {{< /list.inline >}} + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="modal"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الصندوق العائم</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="d-flex justify-content-between flex-wrap"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault"> + إطلاق صندوق عائم تجريبي + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> + إطلاق صندوق عائم عالق + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable"> + صندوق عائم متنصف عاموديًا وقابل للتمرير + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen"> + صندوق عائم يملأ الشاشة + </button> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="navs"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>التنقل</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav class="nav"> + <a class="nav-link active" aria-current="page" href="#">نشط</a> + <a class="nav-link" href="#">رابط</a> + <a class="nav-link" href="#">رابط</a> + <a class="nav-link disabled">معطل</a> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav> + <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل بنا</button> + </div> + </nav> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.</p> + </div> + <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.</p> + </div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> + <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="nav nav-pills"> + <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" href="#">رابط</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled">معطل</a> + </li> + </ul> + {{< /example >}} + </div> + </article> + <article class="my-3" id="navbar"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>شريط التنقل</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav class="navbar navbar-expand-lg bg-light"> + <div class="container-fluid"> + <a class="navbar-brand" href="#"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" + style="filter: invert(1) grayscale(100%) brightness(200%);"> + </a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="تبديل التنقل"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav me-auto mb-2 mb-lg-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 dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + قائمة منسدلة + </a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </li> + <li class="nav-item"> + <a class="nav-link disabled">معطل</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-dark" type="submit">بحث</button> + </form> + </div> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5"> + <div class="container-fluid"> + <a class="navbar-brand" href="#"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"> + </a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="تبديل التنقل"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent2"> + <ul class="navbar-nav me-auto mb-2 mb-lg-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 dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + قائمة منسدلة + </a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">عمل</a></li> + <li><a class="dropdown-item" href="#">عمل آخر</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> + </ul> + </li> + <li class="nav-item"> + <a class="nav-link disabled">معطل</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-light" type="submit">بحث</button> + </form> + </div> + </div> + </nav> + {{< /example >}} + </div> + </article> + <article class="my-3" id="pagination"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>ترقيم الصفحات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav aria-label="مثال ترقيم الصفحات"> + <ul class="pagination pagination-sm"> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item active" aria-current="page"> + <a class="page-link" href="#">2</a> + </li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + </ul> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav aria-label="مثال قياسي لترقيم الصفحات"> + <ul class="pagination"> + <li class="page-item"> + <a class="page-link" href="#" aria-label="السابق"> + <span aria-hidden="true">«</span> + </a> + </li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item"><a class="page-link" href="#">2</a></li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"> + <a class="page-link" href="#" aria-label="التالي"> + <span aria-hidden="true">»</span> + </a> + </li> + </ul> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav aria-label="مثال آخر لترقيم الصفحات"> + <ul class="pagination pagination-lg flex-wrap"> + <li class="page-item disabled"> + <a class="page-link">السابق</a> + </li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item active" aria-current="page"> + <a class="page-link" href="#">2</a> + </li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"> + <a class="page-link" href="#">التالى</a> + </li> + </ul> + </nav> + {{< /example >}} + </div> + </article> + <article class="my-3" id="popovers"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الصناديق المنبثقة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟"> + انقر لعرض/إخفاء الصندوق المنبثق + </button> + {{< /example >}} + + {{< example show_markup="false" >}} + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى الأعلى + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى اليسار + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى الأسفل + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!"> + انبثاق إلى اليمين + </button> + {{< /example >}} + </div> + </article> + <article class="my-3" id="progress"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>شريط التقدم</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="progress mb-3"> + <div class="progress-bar" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar bg-success w-25" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> + </div> + <div class="progress"> + <div class="progress-bar bg-danger w-100" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="progress"> + <div class="progress-bar" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="scrollspy"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>المخطوطة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a> + </div> + + <div> + <div class="bd-example"> + <nav id="navbar-example2" class="navbar bg-light px-3"> + <a class="navbar-brand" href="#">شريط التنقل</a> + <ul class="nav nav-pills"> + <li class="nav-item"> + <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#one">واحد</a></li> + <li><a class="dropdown-item" href="#two">اثنان</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#three">ثلاثة</a></li> + </ul> + </li> + </ul> + </nav> + <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto"> + <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4> + <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p> + <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4> + <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p> + <h4 id="one">واحد</h4> + <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p> + <h4 id="two">اثنان</h4> + <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p> + <h4 id="three">ثلاثة</h4> + <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p> + <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p> + </div> + </div> + </div> + </article> + <article class="my-3" id="spinners"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الدوائر المتحركة</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="spinner-border text-{{ .name }}" role="status"> + <span class="visually-hidden">جار التحميل...</span> + </div> + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="spinner-grow text-{{ .name }}" role="status"> + <span class="visually-hidden">جار التحميل...</span> + </div> + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="toasts"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>الإشعارات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small class="text-muted">قبل 11 دقيقة</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> + </div> + <div class="toast-body"> + مرحبًا بالعالم! هذه رسالة إشعار. + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="mt-3 mb-5 pb-5" id="tooltips"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>التلميحات</h3> + <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a> + </div> + + <div> + {{< example show_markup="false" class="tooltip-demo" >}} + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button> + {{< /example >}} + </div> + </article> + </section> +</div> + +<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حفظ التغيرات</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> + </div> + <div class="modal-body"> + <p>لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حسنًا</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> + </div> + <div class="modal-body"> + <p>نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير</p> + <p>في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.</p> + <p>يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.</p> + <p>وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.</p> + <p>وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.</p> + <p>وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.</p> + <p>كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + <button type="button" class="btn btn-primary">حفظ التغيرات</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> + </div> + <div class="modal-body"> + <p>في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.</p> + <p>تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.</p> + <p>التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".</p> + <p>وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.</p> + <p>يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.</p> + <p>ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.</p> + <p>ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.</p> + <p>وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.</p> + <p>وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> + </div> + </div> + </div> +</div> diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.css new file mode 100644 index 0000000..e2f99b8 --- /dev/null +++ b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.css @@ -0,0 +1,164 @@ +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='%25230d6efd' 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: rgba(0, 0, 0, .65); +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + 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='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; + + /* 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: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.js new file mode 100644 index 0000000..e25a89e --- /dev/null +++ b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.js @@ -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) +})() diff --git a/site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css new file mode 100644 index 0000000..e04d848 --- /dev/null +++ b/site/content/docs/5.2/examples/cheatsheet/cheatsheet.rtl.css @@ -0,0 +1,157 @@ +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='%25230d6efd' 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: rgba(0, 0, 0, .65); +} + +.bd-aside a:hover, +.bd-aside a:focus { + color: rgba(0, 0, 0, .85); + background-color: rgba(121, 82, 179, .1); +} + +.bd-aside .active { + font-weight: 600; + color: rgba(0, 0, 0, .85); +} + +.bd-aside .btn { + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); +} + +.bd-aside .btn:hover, +.bd-aside .btn:focus { + color: rgba(0, 0, 0, .85); + 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='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: 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: ""; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); + } + + .bd-cheatsheet article, + .bd-cheatsheet .bd-heading { + top: 8rem; + scroll-margin-top: 8rem; + } + + .bd-cheatsheet .bd-heading { + z-index: 1; + } +} diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html new file mode 100644 index 0000000..a2285d0 --- /dev/null +++ b/site/content/docs/5.2/examples/cheatsheet/index.html @@ -0,0 +1,1602 @@ +--- +layout: examples +title: Cheatsheet +extra_css: + - "cheatsheet.css" +extra_js: + - src: "cheatsheet.js" +body_class: "bg-light" +--- + +<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark"> + <div class="container-fluid d-flex align-items-center"> + <h1 class="d-flex align-items-center fs-4 text-white mb-0"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap"> + Cheatsheet + </h1> + <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a> + </div> +</header> +<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> + <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2> + <nav class="small" id="toc"> + <ul class="list-unstyled"> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> + <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">Tables</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">Figures</a></li> + </ul> + </li> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> + <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">Sizing</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">Input group</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">Floating labels</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">Validation</a></li> + </ul> + </li> + <li class="my-2"> + <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> + <ul class="list-unstyled ps-3 collapse" id="components-collapse"> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">Badge</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">Breadcrumb</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">Buttons</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">Button group</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">Card</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">Carousel</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">Dropdowns</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">List group</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">Modal</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">Navs</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">Navbar</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">Pagination</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">Popovers</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">Progress</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">Scrollspy</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">Spinners</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">Toasts</a></li> + <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">Tooltips</a></li> + </ul> + </li> + </ul> + </nav> +</aside> +<div class="bd-cheatsheet container-fluid bg-body"> + <section id="content"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2> + + <article class="my-3" id="typography"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Typography</h3> + <a class="d-flex align-items-center" href="{{< docsref "/content/typography" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <p class="display-1">Display 1</p> + <p class="display-2">Display 2</p> + <p class="display-3">Display 3</p> + <p class="display-4">Display 4</p> + <p class="display-5">Display 5</p> + <p class="display-6">Display 6</p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p class="h1">Heading 1</p> + <p class="h2">Heading 2</p> + <p class="h3">Heading 3</p> + <p class="h4">Heading 4</p> + <p class="h5">Heading 5</p> + <p class="h6">Heading 6</p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p class="lead"> + This is a lead paragraph. It stands out from regular paragraphs. + </p> + {{< /example >}} + + {{< example show_markup="false" >}} + <p>You can use the mark tag to <mark>highlight</mark> text.</p> + <p><del>This line of text is meant to be treated as deleted text.</del></p> + <p><s>This line of text is meant to be treated as no longer accurate.</s></p> + <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> + <p><u>This line of text will render as underlined.</u></p> + <p><small>This line of text is meant to be treated as fine print.</small></p> + <p><strong>This line rendered as bold text.</strong></p> + <p><em>This line rendered as italicized text.</em></p> + {{< /example >}} + + {{< example show_markup="false" >}} + <hr> + {{< /example >}} + + {{< example show_markup="false" >}} + <blockquote class="blockquote"> + <p>A well-known quote, contained in a blockquote element.</p> + <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> + </blockquote> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-unstyled"> + <li>This is a list.</li> + <li>It appears completely unstyled.</li> + <li>Structurally, it's still a list.</li> + <li>However, this style only applies to immediate child elements.</li> + <li>Nested lists: + <ul> + <li>are unaffected by this style</li> + <li>will still show a bullet</li> + <li>and have appropriate left margin</li> + </ul> + </li> + <li>This may still come in handy in some situations.</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-inline"> + <li class="list-inline-item">This is a list item.</li> + <li class="list-inline-item">And another one.</li> + <li class="list-inline-item">But they're displayed inline.</li> + </ul> + {{< /example >}} + </div> + </article> + <article class="my-3" id="images"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Images</h3> + <a class="d-flex align-items-center" href="{{< docsref "/content/images" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="tables"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Tables</h3> + <a class="d-flex align-items-center" href="{{< docsref "/content/tables" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <table class="table table-striped"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-dark table-borderless"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Class</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Default</th> + <td>Cell</td> + <td>Cell</td> + </tr> + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <tr class="table-{{ .name }}"> + <th scope="row">{{ .name | title }}</th> + <td>Cell</td> + <td>Cell</td> + </tr> + {{- end -}} + {{< /table.inline >}} + </tbody> + </table> + {{< /example >}} + + {{< example show_markup="false" >}} + <table class="table table-sm table-bordered"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + {{< /example >}} + </div> + </article> + <article class="my-3" id="figures"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Figures</h3> + <a class="d-flex align-items-center" href="{{< docsref "/content/figures" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <figure class="figure"> + {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}} + <figcaption class="figure-caption">A caption for the above image.</figcaption> + </figure> + {{< /example >}} + </div> + </article> + </section> + + <section id="forms"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2> + + <article class="my-3" id="overview"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Overview</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <div class="mb-3"> + <label for="exampleInputEmail1" class="form-label">Email address</label> + <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> + <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> + </div> + <div class="mb-3"> + <label for="exampleInputPassword1" class="form-label">Password</label> + <input type="password" class="form-control" id="exampleInputPassword1"> + </div> + <div class="mb-3"> + <label for="exampleSelect" class="form-label">Select menu</label> + <select class="form-select" id="exampleSelect"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> + <div class="mb-3 form-check"> + <input type="checkbox" class="form-check-input" id="exampleCheck1"> + <label class="form-check-label" for="exampleCheck1">Check me out</label> + </div> + <fieldset class="mb-3"> + <legend>Radios buttons</legend> + <div class="form-check"> + <input type="radio" name="radios" class="form-check-input" id="exampleRadio1"> + <label class="form-check-label" for="exampleRadio1">Default radio</label> + </div> + <div class="mb-3 form-check"> + <input type="radio" name="radios" class="form-check-input" id="exampleRadio2"> + <label class="form-check-label" for="exampleRadio2">Another radio</label> + </div> + </fieldset> + <div class="mb-3"> + <label class="form-label" for="customFile">Upload</label> + <input type="file" class="form-control" id="customFile"> + </div> + <div class="mb-3 form-check form-switch"> + <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> + <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> + </div> + <div class="mb-3"> + <label for="customRange3" class="form-label">Example range</label> + <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="disabled-forms"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Disabled forms</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/overview" >}}#disabled-forms">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <fieldset disabled aria-label="Disabled fieldset example"> + <div class="mb-3"> + <label for="disabledTextInput" class="form-label">Disabled input</label> + <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> + </div> + <div class="mb-3"> + <label for="disabledSelect" class="form-label">Disabled select menu</label> + <select id="disabledSelect" class="form-select"> + <option>Disabled select</option> + </select> + </div> + <div class="mb-3"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> + <label class="form-check-label" for="disabledFieldsetCheck"> + Can't check this + </label> + </div> + </div> + <fieldset class="mb-3"> + <legend>Disabled radios buttons</legend> + <div class="form-check"> + <input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled> + <label class="form-check-label" for="disabledRadio1">Disabled radio</label> + </div> + <div class="mb-3 form-check"> + <input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled> + <label class="form-check-label" for="disabledRadio2">Another radio</label> + </div> + </fieldset> + <div class="mb-3"> + <label class="form-label" for="disabledCustomFile">Upload</label> + <input type="file" class="form-control" id="disabledCustomFile" disabled> + </div> + <div class="mb-3 form-check form-switch"> + <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckChecked" checked disabled> + <label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label> + </div> + <div class="mb-3"> + <label for="disabledRange" class="form-label">Disabled range</label> + <input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange"> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="sizing"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Sizing</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/form-control" >}}#sizing">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="mb-3"> + <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example"> + </div> + <div class="mb-3"> + <select class="form-select form-select-lg" aria-label=".form-select-lg example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> + <div class="mb-3"> + <input type="file" class="form-control form-control-lg" aria-label="Large file input example"> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="mb-3"> + <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"> + </div> + <div class="mb-3"> + <select class="form-select form-select-sm" aria-label=".form-select-sm example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> + <div class="mb-3"> + <input type="file" class="form-control form-control-sm" aria-label="Small file input example"> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="input-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Input group</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/input-group" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="input-group mb-3"> + <span class="input-group-text" id="basic-addon1">@</span> + <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> + </div> + <div class="input-group mb-3"> + <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> + <span class="input-group-text" id="basic-addon2">@example.com</span> + </div> + <label for="basic-url" class="form-label">Your vanity URL</label> + <div class="input-group mb-3"> + <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> + </div> + <div class="input-group mb-3"> + <span class="input-group-text">$</span> + <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> + <span class="input-group-text">.00</span> + </div> + <div class="input-group"> + <span class="input-group-text">With textarea</span> + <textarea class="form-control" aria-label="With textarea"></textarea> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="floating-labels"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Floating labels</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form> + <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"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + </form> + {{< /example >}} + </div> + </article> + <article class="my-3" id="validation"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Validation</h3> + <a class="d-flex align-items-center" href="{{< docsref "/forms/validation" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <form class="row g-3"> + <div class="col-md-4"> + <label for="validationServer01" class="form-label">First name</label> + <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> + <div class="valid-feedback"> + Looks good! + </div> + </div> + <div class="col-md-4"> + <label for="validationServer02" class="form-label">Last name</label> + <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> + <div class="valid-feedback"> + Looks good! + </div> + </div> + <div class="col-md-4"> + <label for="validationServerUsername" class="form-label">Username</label> + <div class="input-group has-validation"> + <span class="input-group-text" id="inputGroupPrepend3">@</span> + <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> + <div class="invalid-feedback"> + Please choose a username. + </div> + </div> + </div> + <div class="col-md-6"> + <label for="validationServer03" class="form-label">City</label> + <input type="text" class="form-control is-invalid" id="validationServer03" required> + <div class="invalid-feedback"> + Please provide a valid city. + </div> + </div> + <div class="col-md-3"> + <label for="validationServer04" class="form-label">State</label> + <select class="form-select is-invalid" id="validationServer04" required> + <option selected disabled value="">Choose...</option> + <option>...</option> + </select> + <div class="invalid-feedback"> + Please select a valid state. + </div> + </div> + <div class="col-md-3"> + <label for="validationServer05" class="form-label">Zip</label> + <input type="text" class="form-control is-invalid" id="validationServer05" required> + <div class="invalid-feedback"> + Please provide a valid zip. + </div> + </div> + <div class="col-12"> + <div class="form-check"> + <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required> + <label class="form-check-label" for="invalidCheck3"> + Agree to terms and conditions + </label> + <div class="invalid-feedback"> + You must agree before submitting. + </div> + </div> + </div> + <div class="col-12"> + <button class="btn btn-primary" type="submit">Submit form</button> + </div> + </form> + {{< /example >}} + </div> + </article> + </section> + + <section id="components"> + <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Components</h2> + + <article class="my-3" id="accordion"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Accordion</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/accordion" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="accordion" id="accordionExample"> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingOne"> + <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Accordion Item #1 + </button> + </h4> + <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingTwo"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + Accordion Item #2 + </button> + </h4> + <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> + </div> + </div> + <div class="accordion-item"> + <h4 class="accordion-header" id="headingThree"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + Accordion Item #3 + </button> + </h4> + <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div class="accordion-body"> + <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. + </div> + </div> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="alerts"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Alerts</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/alerts" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< alerts.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="alert alert-{{ .name }} alert-dismissible fade show" role="alert"> + A simple {{ .name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. + <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> + </div>{{ end -}} + {{< /alerts.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="alert alert-success" role="alert"> + <h4 class="alert-heading">Well done!</h4> + <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> + <hr> + <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="badge"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Badge</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/badge" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <p class="h1">Example heading <span class="badge bg-primary">New</span></p> + <p class="h2">Example heading <span class="badge bg-secondary">New</span></p> + <p class="h3">Example heading <span class="badge bg-success">New</span></p> + <p class="h4">Example heading <span class="badge bg-danger">New</span></p> + <p class="h5">Example heading <span class="badge text-bg-warning">New</span></p> + <p class="h6">Example heading <span class="badge text-bg-info">New</span></p> + <p class="h6">Example heading <span class="badge text-bg-light">New</span></p> + <p class="h6">Example heading <span class="badge bg-dark">New</span></p> + {{< /example >}} + + {{< example show_markup="false" >}} + {{< badge.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}} + {{< /badge.inline >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="breadcrumb"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Breadcrumb</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/breadcrumb" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav aria-label="breadcrumb"> + <ol class="breadcrumb"> + <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> + {{< /example >}} + </div> + </article> + <article class="my-3" id="buttons"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Buttons</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/buttons" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <button type="button" class="btn btn-{{ .name }}">{{ .name | title }}</button> + {{- end -}} + {{< /buttons.inline >}} + + <button type="button" class="btn btn-link">Link</button> + {{< /example >}} + + {{< example show_markup="false" >}} + {{< buttons.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button> + {{- end -}} + {{< /buttons.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + <button type="button" class="btn btn-primary btn-sm">Small button</button> + <button type="button" class="btn btn-primary">Standard button</button> + <button type="button" class="btn btn-primary btn-lg">Large button</button> + {{< /example >}} + </div> + </article> + <article class="my-3" id="button-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Button group</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/button-group" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> + <div class="btn-group me-2" role="group" aria-label="First group"> + <button type="button" class="btn btn-secondary">1</button> + <button type="button" class="btn btn-secondary">2</button> + <button type="button" class="btn btn-secondary">3</button> + <button type="button" class="btn btn-secondary">4</button> + </div> + <div class="btn-group me-2" role="group" aria-label="Second group"> + <button type="button" class="btn btn-secondary">5</button> + <button type="button" class="btn btn-secondary">6</button> + <button type="button" class="btn btn-secondary">7</button> + </div> + <div class="btn-group" role="group" aria-label="Third group"> + <button type="button" class="btn btn-secondary">8</button> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="card"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Card</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/card" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="row row-cols-1 row-cols-md-2 g-4"> + <div class="col"> + <div class="card"> + {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> + <a href="#" class="btn btn-primary">Go somewhere</a> + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="card-header"> + Featured + </div> + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> + <a href="#" class="btn btn-primary">Go somewhere</a> + </div> + <div class="card-footer text-muted"> + 2 days ago + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> + </div> + <ul class="list-group list-group-flush"> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + </ul> + <div class="card-body"> + <a href="#" class="card-link">Card link</a> + <a href="#" class="card-link">Another link</a> + </div> + </div> + </div> + <div class="col"> + <div class="card"> + <div class="row g-0"> + <div class="col-md-4"> + {{< placeholder width="100%" height="250" text="Image" >}} + </div> + <div class="col-md-8"> + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + </div> + </div> + </div> + </div> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="carousel"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Carousel</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/carousel" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> + <div class="carousel-inner"> + <div class="carousel-item active"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>First slide label</h5> + <p>Some representative placeholder content for the first slide.</p> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>Second slide label</h5> + <p>Some representative placeholder content for the second slide.</p> + </div> + </div> + <div class="carousel-item"> + {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} + <div class="carousel-caption d-none d-md-block"> + <h5>Third slide label</h5> + <p>Some representative placeholder content for the third slide.</p> + </div> + </div> + </div> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="dropdowns"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Dropdowns</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/dropdowns" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> + <div class="dropdown"> + <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + <div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + <div class="dropdown"> + <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group"> + <button type="button" class="btn btn-primary">Primary</button> + <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-secondary">Secondary</button> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-success">Success</button> + <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-info">Info</button> + <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-warning">Warning</button> + <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <button type="button" class="btn btn-danger">Danger</button> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </div><!-- /btn-group --> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> + <div class="dropend"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropend button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + <div class="dropup"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropup button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + <div class="dropstart"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropstart button + </button> + <ul class="dropdown-menu"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="btn-group"> + <div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + End-aligned menu + </button> + <ul class="dropdown-menu dropdown-menu-end"> + <li><h6 class="dropdown-header">Dropdown header</h6></li> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="list-group"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>List group</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/list-group" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <ul class="list-group"> + <li class="list-group-item disabled" aria-disabled="true">A disabled item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="list-group list-group-flush"> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> + </ul> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="list-group"> + <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a> + {{< list.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a> + {{- end -}} + {{< /list.inline >}} + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="modal"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Modal</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/modal" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="d-flex justify-content-between flex-wrap"> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault"> + Launch demo modal + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive"> + Launch static backdrop modal + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable"> + Vertically centered scrollable modal + </button> + <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen"> + Full screen + </button> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="navs"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Navs</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/navs-tabs" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav class="nav"> + <a class="nav-link active" aria-current="page" href="#">Active</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link disabled">Disabled</a> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav> + <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> + <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> + <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> + <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> + </div> + </nav> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> + <p>This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> + </div> + <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> + <p>This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> + </div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> + <p>This is some placeholder content the <strong>Contact tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> + </div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <ul class="nav nav-pills"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled">Disabled</a> + </li> + </ul> + {{< /example >}} + </div> + </article> + <article class="my-3" id="navbar"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Navbar</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/navbar" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav class="navbar navbar-expand-lg bg-light"> + <div class="container-fluid"> + <a class="navbar-brand" href="#"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" + style="filter: invert(1) grayscale(100%) brightness(200%);"> + </a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <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 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> + <li class="nav-item"> + <a class="nav-link disabled">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-dark" type="submit">Search</button> + </form> + </div> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5"> + <div class="container-fluid"> + <a class="navbar-brand" href="#"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"> + </a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent2"> + <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 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> + <li class="nav-item"> + <a class="nav-link disabled">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-light" type="submit">Search</button> + </form> + </div> + </div> + </nav> + {{< /example >}} + </div> + </article> + <article class="my-3" id="pagination"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Pagination</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/pagination" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <nav aria-label="Pagination example"> + <ul class="pagination pagination-sm"> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item active" aria-current="page"> + <a class="page-link" href="#">2</a> + </li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + </ul> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav aria-label="Standard pagination example"> + <ul class="pagination"> + <li class="page-item"> + <a class="page-link" href="#" aria-label="Previous"> + <span aria-hidden="true">«</span> + </a> + </li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item"><a class="page-link" href="#">2</a></li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"> + <a class="page-link" href="#" aria-label="Next"> + <span aria-hidden="true">»</span> + </a> + </li> + </ul> + </nav> + {{< /example >}} + + {{< example show_markup="false" >}} + <nav aria-label="Another pagination example"> + <ul class="pagination pagination-lg flex-wrap"> + <li class="page-item disabled"> + <a class="page-link">Previous</a> + </li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item active" aria-current="page"> + <a class="page-link" href="#">2</a> + </li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"> + <a class="page-link" href="#">Next</a> + </li> + </ul> + </nav> + {{< /example >}} + </div> + </article> + <article class="my-3" id="popovers"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Popovers</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/popovers" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> + {{< /example >}} + + {{< example show_markup="false" >}} + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on top + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on end + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on bottom + </button> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on start + </button> + {{< /example >}} + </div> + </article> + <article class="my-3" id="progress"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Progress</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/progress" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + <div class="progress mb-3"> + <div class="progress-bar" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar bg-success w-25" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> + </div> + <div class="progress mb-3"> + <div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> + </div> + <div class="progress"> + <div class="progress-bar bg-danger w-100" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> + </div> + {{< /example >}} + + {{< example show_markup="false" >}} + <div class="progress"> + <div class="progress-bar" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> + </div> + {{< /example >}} + </div> + </article> + <article class="my-3" id="scrollspy"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Scrollspy</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/scrollspy" >}}">Documentation</a> + </div> + + <div> + <div class="bd-example"> + <nav id="navbar-example2" class="navbar bg-light px-3"> + <a class="navbar-brand" href="#">Navbar</a> + <ul class="nav nav-pills"> + <li class="nav-item"> + <a class="nav-link active" href="#scrollspyHeading1">First</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#scrollspyHeading2">Second</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li> + <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li> + </ul> + </li> + </ul> + </nav> + <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0"> + <h4 id="scrollspyHeading1">First heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading2">Second heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading3">Third heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading4">Fourth heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + <h4 id="scrollspyHeading5">Fifth heading</h4> + <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> + </div> + </div> + </div> + </article> + <article class="my-3" id="spinners"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Spinners</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/spinners" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="spinner-border text-{{ .name }}" role="status"> + <span class="visually-hidden">Loading...</span> + </div> + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + + {{< example show_markup="false" >}} + {{< spinner.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <div class="spinner-grow text-{{ .name }}" role="status"> + <span class="visually-hidden">Loading...</span> + </div> + {{- end -}} + {{< /spinner.inline >}} + {{< /example >}} + </div> + </article> + <article class="my-3" id="toasts"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Toasts</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/toasts" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} + <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast-header"> + {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + <strong class="me-auto">Bootstrap</strong> + <small class="text-muted">11 mins ago</small> + <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> + </div> + <div class="toast-body"> + Hello, world! This is a toast message. + </div> + </div> + {{< /example >}} + </div> + </article> + <article class="mt-3 mb-5 pb-5" id="tooltips"> + <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"> + <h3>Tooltips</h3> + <a class="d-flex align-items-center" href="{{< docsref "/components/tooltips" >}}">Documentation</a> + </div> + + <div> + {{< example show_markup="false" class="tooltip-demo" >}} + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button> + {{< /example >}} + </div> + </article> + </section> +</div> + +<div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + <p>I will not close if you click outside me. Don't even try to press escape key.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Understood</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <p>This content should appear at the bottom after you scroll.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> +<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true"> + <div class="modal-dialog modal-fullscreen"> + <div class="modal-content"> + <div class="modal-header"> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> diff --git a/site/content/docs/5.2/examples/checkout-rtl/index.html b/site/content/docs/5.2/examples/checkout-rtl/index.html new file mode 100644 index 0000000..e0ca621 --- /dev/null +++ b/site/content/docs/5.2/examples/checkout-rtl/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: مثال إتمام الشراء +direction: rtl +extra_css: + - "../checkout/form-validation.css" +extra_js: + - src: "../checkout/form-validation.js" +body_class: "bg-light" +--- + +<div class="container"> + <main> + <div class="py-5 text-center"> + <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h2>نموذج إتمام الشراء</h2> + <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-muted">عربة التسوق</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-muted">وصف مختصر</small> + </div> + <span class="text-muted">$12</span> + </li> + <li class="list-group-item d-flex justify-content-between lh-sm"> + <div> + <h6 class="my-0">المنتج الثاني</h6> + <small class="text-muted">وصف مختصر</small> + </div> + <span class="text-muted">$8</span> + </li> + <li class="list-group-item d-flex justify-content-between lh-sm"> + <div> + <h6 class="my-0">البند الثالث</h6> + <small class="text-muted">وصف مختصر</small> + </div> + <span class="text-muted">$5</span> + </li> + <li class="list-group-item d-flex justify-content-between bg-light"> + <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-muted">(اختياري)</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-muted">(اختياري)</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-muted">الاسم الكامل كما هو معروض على البطاقة</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-muted text-center text-small"> + <p class="mb-1">© {{< year >}}-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> diff --git a/site/content/docs/5.2/examples/checkout/form-validation.css b/site/content/docs/5.2/examples/checkout/form-validation.css new file mode 100644 index 0000000..e5ea31c --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/form-validation.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/5.2/examples/checkout/form-validation.js b/site/content/docs/5.2/examples/checkout/form-validation.js new file mode 100644 index 0000000..30ea0aa --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/form-validation.js @@ -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) + }) +})() diff --git a/site/content/docs/5.2/examples/checkout/index.html b/site/content/docs/5.2/examples/checkout/index.html new file mode 100644 index 0000000..4809dc4 --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "form-validation.css" +extra_js: + - src: "form-validation.js" +body_class: "bg-light" +--- + +<div class="container"> + <main> + <div class="py-5 text-center"> + <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h2>Checkout form</h2> + <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-muted">Brief description</small> + </div> + <span class="text-muted">$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-muted">Brief description</small> + </div> + <span class="text-muted">$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-muted">Brief description</small> + </div> + <span class="text-muted">$5</span> + </li> + <li class="list-group-item d-flex justify-content-between bg-light"> + <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-muted">(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-muted">(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-muted">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-muted text-center text-small"> + <p class="mb-1">© 2017–{{< year >}} 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> diff --git a/site/content/docs/5.2/examples/cover/cover.css b/site/content/docs/5.2/examples/cover/cover.css new file mode 100644 index 0000000..1b1c540 --- /dev/null +++ b/site/content/docs/5.2/examples/cover/cover.css @@ -0,0 +1,50 @@ +/* + * Globals + */ + + +/* Custom default button */ +.btn-secondary, +.btn-secondary:hover, +.btn-secondary: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; +} diff --git a/site/content/docs/5.2/examples/cover/index.html b/site/content/docs/5.2/examples/cover/index.html new file mode 100644 index 0000000..34dc1c2 --- /dev/null +++ b/site/content/docs/5.2/examples/cover/index.html @@ -0,0 +1,34 @@ +--- +layout: examples +title: Cover Template +extra_css: + - "cover.css" +html_class: "h-100" +body_class: "d-flex h-100 text-center text-bg-dark" +include_js: false +--- + +<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-secondary 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://twitter.com/mdo" class="text-white">@mdo</a>.</p> + </footer> +</div> diff --git a/site/content/docs/5.2/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.2/examples/dashboard-rtl/dashboard.js new file mode 100644 index 0000000..96e0895 --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard-rtl/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(() => { + 'use strict' + + feather.replace({ 'aria-hidden': 'true' }) + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const 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: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/5.2/examples/dashboard-rtl/index.html b/site/content/docs/5.2/examples/dashboard-rtl/index.html new file mode 100644 index 0000000..bc41cc6 --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard-rtl/index.html @@ -0,0 +1,253 @@ +--- +layout: examples +title: قالب لوحة القيادة +direction: rtl +extra_css: + - "../dashboard/dashboard.rtl.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" + integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" + - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" + integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "dashboard.js" +--- + +<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> + <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل"> + <span class="navbar-toggler-icon"></span> + </button> + <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث"> + <div class="navbar-nav"> + <div class="nav-item text-nowrap"> + <a class="nav-link px-3" href="#">تسجيل الخروج</a> + </div> + </div> +</header> + +<div class="container-fluid"> + <div class="row"> + <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> + <div class="position-sticky pt-3 sidebar-sticky"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#"> + <span data-feather="home" class="align-text-bottom"></span> + لوحة القيادة + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file" class="align-text-bottom"></span> + الطلبات + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="shopping-cart" class="align-text-bottom"></span> + المنتجات + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="users" class="align-text-bottom"></span> + الزبائن + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="bar-chart-2" class="align-text-bottom"></span> + التقارير + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="layers" class="align-text-bottom"></span> + التكاملات + </a> + </li> + </ul> + + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> + <span>التقارير المحفوظة</span> + <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> + <span data-feather="plus-circle" class="align-text-bottom"></span> + </a> + </h6> + <ul class="nav flex-column mb-2"> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + الشهر الحالي + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + الربع الأخير + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + التفاعل الإجتماعي + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + مبيعات نهاية العام + </a> + </li> + </ul> + </div> + </nav> + + <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"> + <span data-feather="calendar" class="align-text-bottom"></span> + هذا الأسبوع + </button> + </div> + </div> + + <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> + + <h2>عنوان القسم</h2> + <div class="table-responsive"> + <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> diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.css b/site/content/docs/5.2/examples/dashboard/dashboard.css new file mode 100644 index 0000000..ad12048 --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard/dashboard.css @@ -0,0 +1,92 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + /* rtl:raw: + right: 0; + */ + bottom: 0; + /* rtl:remove */ + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + height: calc(100vh - 48px); + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.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 .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.js b/site/content/docs/5.2/examples/dashboard/dashboard.js new file mode 100644 index 0000000..e137975 --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(() => { + 'use strict' + + feather.replace({ 'aria-hidden': 'true' }) + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const 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: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +})() diff --git a/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css new file mode 100644 index 0000000..31ea3cc --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard/dashboard.rtl.css @@ -0,0 +1,88 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + right: 0; + bottom: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + height: calc(100vh - 48px); + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-left: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #2470dc; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.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 .navbar-toggler { + top: .25rem; + left: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/site/content/docs/5.2/examples/dashboard/index.html b/site/content/docs/5.2/examples/dashboard/index.html new file mode 100644 index 0000000..b3b40c2 --- /dev/null +++ b/site/content/docs/5.2/examples/dashboard/index.html @@ -0,0 +1,252 @@ +--- +layout: examples +title: Dashboard Template +extra_css: + - "dashboard.css" +extra_js: + - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" + integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" + - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" + integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "dashboard.js" +--- + +<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> + <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> + <div class="navbar-nav"> + <div class="nav-item text-nowrap"> + <a class="nav-link px-3" href="#">Sign out</a> + </div> + </div> +</header> + +<div class="container-fluid"> + <div class="row"> + <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> + <div class="position-sticky pt-3 sidebar-sticky"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#"> + <span data-feather="home" class="align-text-bottom"></span> + Dashboard + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file" class="align-text-bottom"></span> + Orders + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="shopping-cart" class="align-text-bottom"></span> + Products + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="users" class="align-text-bottom"></span> + Customers + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="bar-chart-2" class="align-text-bottom"></span> + Reports + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="layers" class="align-text-bottom"></span> + Integrations + </a> + </li> + </ul> + + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> + <span>Saved reports</span> + <a class="link-secondary" href="#" aria-label="Add a new report"> + <span data-feather="plus-circle" class="align-text-bottom"></span> + </a> + </h6> + <ul class="nav flex-column mb-2"> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + Current month + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + Last quarter + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + Social engagement + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text" class="align-text-bottom"></span> + Year-end sale + </a> + </li> + </ul> + </div> + </nav> + + <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"> + <span data-feather="calendar" class="align-text-bottom"></span> + 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"> + <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> diff --git a/site/content/docs/5.2/examples/dropdowns/dropdowns.css b/site/content/docs/5.2/examples/dropdowns/dropdowns.css new file mode 100644 index 0000000..556f310 --- /dev/null +++ b/site/content/docs/5.2/examples/dropdowns/dropdowns.css @@ -0,0 +1,79 @@ +.dropdown-menu { + margin: 4rem auto; +} + +.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 { + background-color: var(--bs-white); +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-blue); + background-color: var(--bs-light); +} + +.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; +} +.cal-btn:hover, +.cal-btn:focus { + background-color: rgba(0, 0, 0, .05); +} +.cal-btn[disabled] { + border: 0; + opacity: .5; +} + +.form-control-dark { + background-color: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .15); +} + + +.w-220px { + width: 220px; +} + +.w-280px { + width: 280px; +} + +.w-340px { + width: 340px; +} + +.w-600px { + width: 600px; +} diff --git a/site/content/docs/5.2/examples/dropdowns/index.html b/site/content/docs/5.2/examples/dropdowns/index.html new file mode 100644 index 0000000..f08f697 --- /dev/null +++ b/site/content/docs/5.2/examples/dropdowns/index.html @@ -0,0 +1,338 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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="exclamation-triangle-fill" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + + <symbol id="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 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"/> + </symbol> + + <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 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"/> + </symbol> + + <symbol id="grid-fill" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> + </symbol> + + <symbol id="stars" viewBox="0 0 16 16"> + <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.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 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.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-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> + </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"/> + </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 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"/> + </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 fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/> + <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/> + </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"/> + </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"/> + </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 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"/> + </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 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"/> + </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"/> + </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"/> + </symbol> +</svg> + +<div class="d-flex gap-5 justify-content-center"> + <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px"> + <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 dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px"> + <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 gap-5 justify-content-center"> + <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"> + <form class="p-2 mb-2 bg-light 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 dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"> + <form class="p-2 mb-2 bg-dark border-bottom border-dark"> + <input type="search" class="form-control form-control-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 gap-5 justify-content-center"> + <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px"> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> + Documents + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> + Photos + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> + Movies + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> + Music + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> + Games + </a> + </li> + <li><hr class="dropdown-divider"></li> + <li> + <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> + Trash + </a> + </li> + </ul> + <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px"> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> + Documents + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> + Photos + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> + Movies + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> + Music + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> + Games + </a> + </li> + <li><hr class="dropdown-divider"></li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> + Trash + </a> + </li> + </ul> +</div> + +<div class="b-example-divider"></div> + +<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px"> + <div class="d-grid gap-1"> + <div class="cal"> + <div class="cal-month"> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> + </button> + <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"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> + </button> + </div> + <div class="cal-weekdays text-muted"> + <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="b-example-divider"></div> + +<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px"> + <nav class="d-grid gap-2 col-8"> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg> + <div> + <strong class="d-block">Features</strong> + <small>Take a tour through the product</small> + </div> + </a> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg> + <div> + <strong class="d-block">Support</strong> + <small>Get help from our support crew</small> + </div> + </a> + </nav> + <div class="col-4"> + ... + </div> +</div> diff --git a/site/content/docs/5.2/examples/features/features.css b/site/content/docs/5.2/examples/features/features.css new file mode 100644 index 0000000..b5d658f --- /dev/null +++ b/site/content/docs/5.2/examples/features/features.css @@ -0,0 +1,36 @@ +.feature-icon { + width: 4rem; + height: 4rem; + border-radius: .75rem; +} + +.icon-link > .bi { + margin-top: .125rem; + margin-left: .125rem; + fill: currentcolor; + transition: transform .25s ease-in-out; +} +.icon-link:hover > .bi { + transform: translate(.25rem); +} + +.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; +} diff --git a/site/content/docs/5.2/examples/features/index.html b/site/content/docs/5.2/examples/features/index.html new file mode 100644 index 0000000..c134a0a --- /dev/null +++ b/site/content/docs/5.2/examples/features/index.html @@ -0,0 +1,347 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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"/> + </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 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"/> + </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"/> + </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 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"/> + </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"/> + </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"/> + </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 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"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </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 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"/> + </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"/> + </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 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"/> + </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 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 d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </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"/> + </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"/> + </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"/> + </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"><use xlink:href="#collection"/></svg> + </div> + <h3 class="fs-2">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 d-inline-flex align-items-center"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> + </div> + <h3 class="fs-2">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 d-inline-flex align-items-center"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <h3 class="fs-2">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 d-inline-flex align-items-center"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></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-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <div> + <h3 class="fs-2">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-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> + </div> + <div> + <h3 class="fs-2">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-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> + </div> + <div> + <h3 class="fs-2">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"><use xlink:href="#geo-fill"/></svg> + <small>Earth</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <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"><use xlink:href="#geo-fill"/></svg> + <small>Pakistan</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <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"><use xlink:href="#geo-fill"/></svg> + <small>California</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <div> + <h3 class="fw-bold mb-0 fs-4">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="d-flex flex-column align-items-start gap-2"> + <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> + <p class="text-muted">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="row row-cols-1 row-cols-sm-2 g-4"> + <div class="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"> + <use xlink:href="#collection" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="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"> + <use xlink:href="#gear-fill" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="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"> + <use xlink:href="#speedometer" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="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"> + <use xlink:href="#table" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> + </div> +</main> diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg Binary files differnew file mode 100644 index 0000000..ed2e36a --- /dev/null +++ b/site/content/docs/5.2/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg Binary files differnew file mode 100644 index 0000000..b66864a --- /dev/null +++ b/site/content/docs/5.2/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg Binary files differnew file mode 100644 index 0000000..c411b17 --- /dev/null +++ b/site/content/docs/5.2/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.2/examples/footers/index.html b/site/content/docs/5.2/examples/footers/index.html new file mode 100644 index 0000000..827c242 --- /dev/null +++ b/site/content/docs/5.2/examples/footers/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: Footers +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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"/> + </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"/> + </symbol> + <symbol id="twitter" viewBox="0 0 16 16"> + <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> + </symbol> +</svg> + +<div class="container"> + <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> + <p class="col-md-4 mb-0 text-muted">© {{< year >}} Company, Inc</p> + + <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-md-4 justify-content-end"> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">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-muted text-decoration-none lh-1"> + <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + </a> + <span class="mb-3 mb-md-0 text-muted">© {{< year >}} Company, Inc</span> + </div> + + <ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></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-muted">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> + </ul> + <p class="text-center text-muted">© {{< year >}} 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-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <p class="text-muted">© {{< year >}}</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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">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="text" 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>© {{< year >}} Company, Inc. All rights reserved.</p> + <ul class="list-unstyled d-flex"> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> + </ul> + </div> + </footer> +</div> diff --git a/site/content/docs/5.2/examples/grid/grid.css b/site/content/docs/5.2/examples/grid/grid.css new file mode 100644 index 0000000..18e3568 --- /dev/null +++ b/site/content/docs/5.2/examples/grid/grid.css @@ -0,0 +1,13 @@ +.themed-grid-col { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); +} + +.themed-container { + padding: .75rem; + margin-bottom: 1.5rem; + background-color: rgba(0, 123, 255, .15); + border: 1px solid rgba(0, 123, 255, .2); +} diff --git a/site/content/docs/5.2/examples/grid/index.html b/site/content/docs/5.2/examples/grid/index.html new file mode 100644 index 0000000..7c4f1d3 --- /dev/null +++ b/site/content/docs/5.2/examples/grid/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Grid Template +extra_css: + - "grid.css" +body_class: "py-4" +include_js: false +--- + +<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> diff --git a/site/content/docs/5.2/examples/headers/headers.css b/site/content/docs/5.2/examples/headers/headers.css new file mode 100644 index 0000000..8230c9a --- /dev/null +++ b/site/content/docs/5.2/examples/headers/headers.css @@ -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 { + outline: 0; +} diff --git a/site/content/docs/5.2/examples/headers/index.html b/site/content/docs/5.2/examples/headers/index.html new file mode 100644 index 0000000..b8fc8b2 --- /dev/null +++ b/site/content/docs/5.2/examples/headers/index.html @@ -0,0 +1,295 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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"/> + </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 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"/> + </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"/> + </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 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"/> + </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"/> + </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 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></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"> + <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <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 link-dark">Features</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> + <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> + <li><a href="#" class="nav-link px-2 link-dark">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"/></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 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></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-dark">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-dark">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-dark 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-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <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-dark 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-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + <div class="bg-light 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-light border-bottom"> + <div class="container d-flex flex-wrap"> + <ul class="nav me-auto"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + </ul> + <ul class="nav"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark 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 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Double header</span> + </a> + <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search"> + <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"> + <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"/></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"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> + 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> diff --git a/site/content/docs/5.2/examples/heroes/bootstrap-docs.png b/site/content/docs/5.2/examples/heroes/bootstrap-docs.png Binary files differnew file mode 100644 index 0000000..471a9ed --- /dev/null +++ b/site/content/docs/5.2/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.2/examples/heroes/bootstrap-themes.png b/site/content/docs/5.2/examples/heroes/bootstrap-themes.png Binary files differnew file mode 100644 index 0000000..13c3233 --- /dev/null +++ b/site/content/docs/5.2/examples/heroes/bootstrap-themes.png diff --git a/site/content/docs/5.2/examples/heroes/heroes.css b/site/content/docs/5.2/examples/heroes/heroes.css new file mode 100644 index 0000000..e9deaf7 --- /dev/null +++ b/site/content/docs/5.2/examples/heroes/heroes.css @@ -0,0 +1,3 @@ +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.2/examples/heroes/index.html b/site/content/docs/5.2/examples/heroes/index.html new file mode 100644 index 0000000..ef621fd --- /dev/null +++ b/site/content/docs/5.2/examples/heroes/index.html @@ -0,0 +1,125 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +<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="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h1 class="display-5 fw-bold">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">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 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 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-light"> + <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-muted">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">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 mode 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> diff --git a/site/content/docs/5.2/examples/jumbotron/index.html b/site/content/docs/5.2/examples/jumbotron/index.html new file mode 100644 index 0000000..8131d19 --- /dev/null +++ b/site/content/docs/5.2/examples/jumbotron/index.html @@ -0,0 +1,45 @@ +--- +layout: examples +title: Jumbotron example +include_js: false +--- + +<main> + <div class="container py-4"> + <header class="pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark 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-light 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-light 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-muted border-top"> + © {{< year >}} + </footer> + </div> +</main> diff --git a/site/content/docs/5.2/examples/list-groups/index.html b/site/content/docs/5.2/examples/list-groups/index.html new file mode 100644 index 0000000..9599913 --- /dev/null +++ b/site/content/docs/5.2/examples/list-groups/index.html @@ -0,0 +1,222 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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="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 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"/> + </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 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"/> + </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"/> + </symbol> +</svg> + +<div class="list-group w-auto"> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <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="twbs" 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="twbs" 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 class="b-example-divider"></div> + +<div class="d-flex gap-5 justify-content-center"> + <div class="list-group mx-0 w-auto"> + <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-muted">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-muted">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-muted">And we end with another snippet of text</small> + </span> + </label> + </div> + + <div class="list-group mx-0 w-auto"> + <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-muted">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-muted">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-muted">And we end with another snippet of text</small> + </span> + </label> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="list-group w-auto"> + <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-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></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-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></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-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> + Tomorrow + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3 bg-light"> + <input class="form-check-input form-check-input-placeholder bg-light 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-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> + Choose list... + </small> + </span> + </label> +</div> + +<div class="b-example-divider"></div> + +<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto"> + <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 class="b-example-divider"></div> + +<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto"> + <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> diff --git a/site/content/docs/5.2/examples/list-groups/list-groups.css b/site/content/docs/5.2/examples/list-groups/list-groups.css new file mode 100644 index 0000000..2185084 --- /dev/null +++ b/site/content/docs/5.2/examples/list-groups/list-groups.css @@ -0,0 +1,61 @@ +.list-group { + max-width: 460px; + margin: 4rem auto; +} + +.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-light); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-blue); +} +.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-light); +} + +.list-group-radio .form-check-input:checked + .list-group-item { + background-color: var(--bs-body); + border-color: var(--bs-blue); + box-shadow: 0 0 0 2px var(--bs-blue); +} +.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; +} diff --git a/site/content/docs/5.2/examples/masonry/index.html b/site/content/docs/5.2/examples/masonry/index.html new file mode 100644 index 0000000..b4aecaa --- /dev/null +++ b/site/content/docs/5.2/examples/masonry/index.html @@ -0,0 +1,105 @@ +--- +layout: examples +title: Masonry example +extra_js: + - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" + integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" + async: true +--- + +<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"> + {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} + <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-muted"> + 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"> + {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} + <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-muted">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-muted">Last updated 3 mins ago</small></p> + </div> + </div> + </div> + <div class="col-sm-6 col-lg-4 mb-4"> + <div class="card"> + {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} + </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-muted"> + 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-muted">Last updated 3 mins ago</small></p> + </div> + </div> + </div> + </div> + +</main> diff --git a/site/content/docs/5.2/examples/modals/index.html b/site/content/docs/5.2/examples/modals/index.html new file mode 100644 index 0000000..a68bd41 --- /dev/null +++ b/site/content/docs/5.2/examples/modals/index.html @@ -0,0 +1,173 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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="exclamation-triangle-fill" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + + <symbol id="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 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"/> + </symbol> + + <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 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"/> + </symbol> + + <symbol id="grid-fill" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> + </symbol> + + <symbol id="stars" viewBox="0 0 16 16"> + <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.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 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.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-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> + </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"/> + </symbol> + + <symbol id="github" viewBox="0 0 16 16"> + <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> + </symbol> + + <symbol id="twitter" viewBox="0 0 16 16"> + <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> + </symbol> + + <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"/> + </symbol> +</svg> + +<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet"> + <div class="modal-dialog" role="document"> + <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 border-top-0"> + <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button> + <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice"> + <div class="modal-dialog" role="document"> + <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 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 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-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour"> + <div class="modal-dialog" role="document"> + <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"> + <li class="d-flex gap-4"> + <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> + <div> + <h5 class="mb-0">Grid view</h5> + Not into lists? Try the new grid view. + </div> + </li> + <li class="d-flex gap-4"> + <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg> + <div> + <h5 class="mb-0">Bookmarks</h5> + Save items you love for easy access later. + </div> + </li> + <li class="d-flex gap-4"> + <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg> + <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-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin"> + <div class="modal-dialog" role="document"> + <div class="modal-content rounded-4 shadow"> + <div class="modal-header p-5 pb-4 border-bottom-0"> + <!-- <h1 class="modal-title fs-5" >Modal title</h1> --> + <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-muted">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-dark rounded-3" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> + Sign up with Twitter + </button> + <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> + Sign up with Facebook + </button> + <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> + Sign up with GitHub + </button> + </form> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> diff --git a/site/content/docs/5.2/examples/modals/modals.css b/site/content/docs/5.2/examples/modals/modals.css new file mode 100644 index 0000000..51ad2c4 --- /dev/null +++ b/site/content/docs/5.2/examples/modals/modals.css @@ -0,0 +1,15 @@ +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + +.modal-alert .modal-dialog { + width: 380px; +} + +.modal-tour .modal-dialog { + width: 380px; +} diff --git a/site/content/docs/5.2/examples/navbar-bottom/index.html b/site/content/docs/5.2/examples/navbar-bottom/index.html new file mode 100644 index 0000000..c0e859a --- /dev/null +++ b/site/content/docs/5.2/examples/navbar-bottom/index.html @@ -0,0 +1,41 @@ +--- +layout: examples +title: Bottom navbar example +--- + +<main class="container"> + <div class="bg-light 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="{{< docsref "/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">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> diff --git a/site/content/docs/5.2/examples/navbar-fixed/index.html b/site/content/docs/5.2/examples/navbar-fixed/index.html new file mode 100644 index 0000000..b0d9986 --- /dev/null +++ b/site/content/docs/5.2/examples/navbar-fixed/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Fixed top navbar example +extra_css: + - "navbar-top-fixed.css" +--- + +<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">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-light 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="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> + </div> +</main> diff --git a/site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css new file mode 100644 index 0000000..c77c0c1 --- /dev/null +++ b/site/content/docs/5.2/examples/navbar-fixed/navbar-top-fixed.css @@ -0,0 +1,5 @@ +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; +} diff --git a/site/content/docs/5.2/examples/navbar-static/index.html b/site/content/docs/5.2/examples/navbar-static/index.html new file mode 100644 index 0000000..b6c26c9 --- /dev/null +++ b/site/content/docs/5.2/examples/navbar-static/index.html @@ -0,0 +1,40 @@ +--- +layout: examples +title: Top navbar example +extra_css: + - "navbar-top.css" +--- + +<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">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-light 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="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> + </div> +</main> diff --git a/site/content/docs/5.2/examples/navbar-static/navbar-top.css b/site/content/docs/5.2/examples/navbar-static/navbar-top.css new file mode 100644 index 0000000..25bbdde --- /dev/null +++ b/site/content/docs/5.2/examples/navbar-static/navbar-top.css @@ -0,0 +1,4 @@ +/* Show it's not fixed to the top */ +body { + min-height: 75rem; +} diff --git a/site/content/docs/5.2/examples/navbars-offcanvas/index.html b/site/content/docs/5.2/examples/navbars-offcanvas/index.html new file mode 100644 index 0000000..9099dc9 --- /dev/null +++ b/site/content/docs/5.2/examples/navbars-offcanvas/index.html @@ -0,0 +1,147 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbar.css" +--- + +<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"> + <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-light" 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"> + <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"> + <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-light 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="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/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="{{< docsref "/components/navbar#offcanvas" >}}" role="button">Learn more about offcanvas navbars »</a> + </p> + </div> + </div> + </div> +</main> diff --git a/site/content/docs/5.2/examples/navbars-offcanvas/navbar.css b/site/content/docs/5.2/examples/navbars-offcanvas/navbar.css new file mode 100644 index 0000000..70d2094 --- /dev/null +++ b/site/content/docs/5.2/examples/navbars-offcanvas/navbar.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/5.2/examples/navbars/index.html b/site/content/docs/5.2/examples/navbars/index.html new file mode 100644 index 0000000..cc90b8c --- /dev/null +++ b/site/content/docs/5.2/examples/navbars/index.html @@ -0,0 +1,416 @@ +--- +layout: examples +title: Navbar Template +extra_css: + - "navbar.css" +--- + +<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">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">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">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">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">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">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">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">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">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-light 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">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-light 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">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> + <div class="bg-light 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="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/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="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> + </p> + </div> + </div> + </div> + </div> +</main> diff --git a/site/content/docs/5.2/examples/navbars/navbar.css b/site/content/docs/5.2/examples/navbars/navbar.css new file mode 100644 index 0000000..70d2094 --- /dev/null +++ b/site/content/docs/5.2/examples/navbars/navbar.css @@ -0,0 +1,7 @@ +body { + padding-bottom: 20px; +} + +.navbar { + margin-bottom: 20px; +} diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/index.html b/site/content/docs/5.2/examples/offcanvas-navbar/index.html new file mode 100644 index 0000000..81c9bb4 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/index.html @@ -0,0 +1,140 @@ +--- +layout: examples +title: Offcanvas navbar template +extra_css: + - "offcanvas.css" +extra_js: + - src: "offcanvas.js" +body_class: "bg-light" +aliases: "/docs/5.2/examples/offcanvas/" +--- + +<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="/docs/{{< param docs_version >}}/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-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <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-muted pt-3"> + {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <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-muted pt-3"> + {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <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-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="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-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="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-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="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> diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css new file mode 100644 index 0000000..f855b96 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css @@ -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; +} diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js new file mode 100644 index 0000000..b97a171 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js @@ -0,0 +1,7 @@ +(() => { + 'use strict' + + document.querySelector('#navbarSideCollapse').addEventListener('click', () => { + document.querySelector('.offcanvas-collapse').classList.toggle('open') + }) +})() diff --git a/site/content/docs/5.2/examples/pricing/index.html b/site/content/docs/5.2/examples/pricing/index.html new file mode 100644 index 0000000..64b856a --- /dev/null +++ b/site/content/docs/5.2/examples/pricing/index.html @@ -0,0 +1,187 @@ +--- +layout: examples +title: Pricing example +extra_css: + - "pricing.css" +include_js: false +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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"/> + </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 text-dark 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 text-dark text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> + <a class="py-2 text-dark 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">Pricing</h1> + <p class="fs-5 text-muted">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-muted 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-muted 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-muted 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"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Private</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + + <tbody> + <tr> + <th scope="row" class="text-start">Permissions</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Sharing</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Unlimited members</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Extra security</th> + <td></td> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </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="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19"> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</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> diff --git a/site/content/docs/5.2/examples/pricing/pricing.css b/site/content/docs/5.2/examples/pricing/pricing.css new file mode 100644 index 0000000..c7304d1 --- /dev/null +++ b/site/content/docs/5.2/examples/pricing/pricing.css @@ -0,0 +1,11 @@ +body { + background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); +} + +.container { + max-width: 960px; +} + +.pricing-header { + max-width: 700px; +} diff --git a/site/content/docs/5.2/examples/product/index.html b/site/content/docs/5.2/examples/product/index.html new file mode 100644 index 0000000..c2eb0eb --- /dev/null +++ b/site/content/docs/5.2/examples/product/index.html @@ -0,0 +1,148 @@ +--- +layout: examples +title: Product example +extra_css: + - "product.css" +--- + +<header class="site-header sticky-top py-1"> + <nav class="container d-flex flex-column flex-md-row justify-content-between"> + <a class="py-2" href="#" aria-label="Product"> + <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 mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> + </a> + <a class="py-2 d-none d-md-inline-block" href="#">Tour</a> + <a class="py-2 d-none d-md-inline-block" href="#">Product</a> + <a class="py-2 d-none d-md-inline-block" href="#">Features</a> + <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a> + <a class="py-2 d-none d-md-inline-block" href="#">Support</a> + <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a> + <a class="py-2 d-none d-md-inline-block" href="#">Cart</a> + </nav> +</header> + +<main> + <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> + <div class="col-md-5 p-lg-5 mx-auto my-5"> + <h1 class="display-4 fw-normal">Punny headline</h1> + <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p> + <a class="btn btn-outline-secondary" href="#">Coming soon</a> + </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-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + <div class="bg-light 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-light 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-light 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-light 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-light 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-light 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-light 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"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> + </div> + <div class="col-6 col-md"> + <h5>Features</h5> + <ul class="list-unstyled text-small"> + <li><a class="link-secondary" href="#">Cool stuff</a></li> + <li><a class="link-secondary" href="#">Random feature</a></li> + <li><a class="link-secondary" href="#">Team feature</a></li> + <li><a class="link-secondary" href="#">Stuff for developers</a></li> + <li><a class="link-secondary" href="#">Another one</a></li> + <li><a class="link-secondary" 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" href="#">Resource name</a></li> + <li><a class="link-secondary" href="#">Resource</a></li> + <li><a class="link-secondary" href="#">Another resource</a></li> + <li><a class="link-secondary" 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" href="#">Business</a></li> + <li><a class="link-secondary" href="#">Education</a></li> + <li><a class="link-secondary" href="#">Government</a></li> + <li><a class="link-secondary" 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" href="#">Team</a></li> + <li><a class="link-secondary" href="#">Locations</a></li> + <li><a class="link-secondary" href="#">Privacy</a></li> + <li><a class="link-secondary" href="#">Terms</a></li> + </ul> + </div> + </div> +</footer> diff --git a/site/content/docs/5.2/examples/product/product.css b/site/content/docs/5.2/examples/product/product.css new file mode 100644 index 0000000..5fcb582 --- /dev/null +++ b/site/content/docs/5.2/examples/product/product.css @@ -0,0 +1,69 @@ +.container { + max-width: 960px; +} + +/* + * 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; + } +} diff --git a/site/content/docs/5.2/examples/sidebars/index.html b/site/content/docs/5.2/examples/sidebars/index.html new file mode 100644 index 0000000..48889fa --- /dev/null +++ b/site/content/docs/5.2/examples/sidebars/index.html @@ -0,0 +1,391 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: 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"/> + </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 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"/> + </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"/> + </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 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"/> + </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"/> + </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"/> + </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 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"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </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 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"/> + </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"/> + </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 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"/> + </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 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 d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </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"/> + </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"/> + </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"/> + </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"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + 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-light" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center link-dark 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-light" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <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"/></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"/></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"/></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"/></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"/></svg> + </a> + </li> + </ul> + <div class="dropdown border-top"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark 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 bg-white" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></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-dark d-inline-flex text-decoration-none rounded">Overview</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li> + <li><a href="#" class="link-dark 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-dark d-inline-flex text-decoration-none rounded">Overview</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li> + <li><a href="#" class="link-dark 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-dark d-inline-flex text-decoration-none rounded">New</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li> + <li><a href="#" class="link-dark 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-dark d-inline-flex text-decoration-none rounded">New...</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li> + <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li> + <li><a href="#" class="link-dark 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-white" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">List group</span> + </a> + <div class="list-group list-group-flush border-bottom scrollarea"> + <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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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-muted">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> diff --git a/site/content/docs/5.2/examples/sidebars/sidebars.css b/site/content/docs/5.2/examples/sidebars/sidebars.css new file mode 100644 index 0000000..5dc9fba --- /dev/null +++ b/site/content/docs/5.2/examples/sidebars/sidebars.css @@ -0,0 +1,59 @@ +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: rgba(0, 0, 0, .65); + background-color: transparent; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(0, 0, 0, .85); + background-color: #d2f4ea; +} + +.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%; +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(0, 0, 0, .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: #d2f4ea; +} + +.scrollarea { + overflow-y: auto; +} diff --git a/site/content/docs/5.2/examples/sidebars/sidebars.js b/site/content/docs/5.2/examples/sidebars/sidebars.js new file mode 100644 index 0000000..4075f1f --- /dev/null +++ b/site/content/docs/5.2/examples/sidebars/sidebars.js @@ -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) + }) +})() diff --git a/site/content/docs/5.2/examples/sign-in/index.html b/site/content/docs/5.2/examples/sign-in/index.html new file mode 100644 index 0000000..8772ba3 --- /dev/null +++ b/site/content/docs/5.2/examples/sign-in/index.html @@ -0,0 +1,32 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "signin.css" +body_class: "text-center" +include_js: false +--- + +<main class="form-signin w-100 m-auto"> + <form> + <img class="mb-4" src="/docs/{{< param docs_version >}}/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="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 in</button> + <p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p> + </form> +</main> diff --git a/site/content/docs/5.2/examples/sign-in/signin.css b/site/content/docs/5.2/examples/sign-in/signin.css new file mode 100644 index 0000000..89deea4 --- /dev/null +++ b/site/content/docs/5.2/examples/sign-in/signin.css @@ -0,0 +1,33 @@ +html, +body { + height: 100%; +} + +body { + display: flex; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; + background-color: #f5f5f5; +} + +.form-signin { + max-width: 330px; + padding: 15px; +} + +.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; +} diff --git a/site/content/docs/5.2/examples/starter-template/index.html b/site/content/docs/5.2/examples/starter-template/index.html new file mode 100644 index 0000000..5a898a4 --- /dev/null +++ b/site/content/docs/5.2/examples/starter-template/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Starter Template +extra_css: + - "starter-template.css" +--- + +<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-dark 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">Starter template</span> + </a> + </header> + + <main> + <h1>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="{{< docsref "/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>Starter projects</h2> + <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <ul class="icon-list ps-0"> + <li class="d-flex align-items-start mb-1"><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> + <li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li> + </ul> + </div> + + <div class="col-md-6"> + <h2>Guides</h2> + <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> + <ul class="icon-list ps-0"> + <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> + <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> + <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> + <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/vite" >}}">Bootstrap Vite guide</a></li> + <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li> + </ul> + </div> + </div> + </main> + <footer class="pt-5 my-5 text-muted border-top"> + Created by the Bootstrap team · © {{< year >}} + </footer> +</div> diff --git a/site/content/docs/5.2/examples/starter-template/starter-template.css b/site/content/docs/5.2/examples/starter-template/starter-template.css new file mode 100644 index 0000000..582dcbe --- /dev/null +++ b/site/content/docs/5.2/examples/starter-template/starter-template.css @@ -0,0 +1,9 @@ +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath 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'/%3E%3C/svg%3E") no-repeat center center / 100% auto; +} diff --git a/site/content/docs/5.2/examples/sticky-footer-navbar/index.html b/site/content/docs/5.2/examples/sticky-footer-navbar/index.html new file mode 100644 index 0000000..1f807a6 --- /dev/null +++ b/site/content/docs/5.2/examples/sticky-footer-navbar/index.html @@ -0,0 +1,52 @@ +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: + - "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +<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">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="{{< docsref "/examples/sticky-footer" >}}">the default sticky footer</a> minus the navbar.</p> + </div> +</main> + +<footer class="footer mt-auto py-3 bg-light"> + <div class="container"> + <span class="text-muted">Place sticky footer content here.</span> + </div> +</footer> diff --git a/site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css new file mode 100644 index 0000000..3087ead --- /dev/null +++ b/site/content/docs/5.2/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -0,0 +1,7 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +main > .container { + padding: 60px 15px 0; +} diff --git a/site/content/docs/5.2/examples/sticky-footer/index.html b/site/content/docs/5.2/examples/sticky-footer/index.html new file mode 100644 index 0000000..7a6e127 --- /dev/null +++ b/site/content/docs/5.2/examples/sticky-footer/index.html @@ -0,0 +1,24 @@ +--- +layout: examples +title: Sticky Footer Template +extra_css: + - "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +include_js: false +--- + +<!-- 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="{{< docsref "/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-light"> + <div class="container"> + <span class="text-muted">Place sticky footer content here.</span> + </div> +</footer> diff --git a/site/content/docs/5.2/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.2/examples/sticky-footer/sticky-footer.css new file mode 100644 index 0000000..f8be437 --- /dev/null +++ b/site/content/docs/5.2/examples/sticky-footer/sticky-footer.css @@ -0,0 +1,9 @@ +/* Custom page CSS +-------------------------------------------------- */ +/* Not required for template or sticky footer method. */ + +.container { + width: auto; + max-width: 680px; + padding: 0 15px; +} |
