diff options
Diffstat (limited to 'site/content/docs/5.0/examples')
54 files changed, 0 insertions, 8209 deletions
diff --git a/site/content/docs/5.0/examples/.stylelintrc b/site/content/docs/5.0/examples/.stylelintrc deleted file mode 100644 index dc76dedbd..000000000 --- a/site/content/docs/5.0/examples/.stylelintrc +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": [ - "stylelint-config-twbs-bootstrap/css" - ], - "rules": { - "at-rule-no-vendor-prefix": null, - "comment-empty-line-before": null, - "media-feature-name-no-vendor-prefix": null, - "property-blacklist": 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.0/examples/_index.md b/site/content/docs/5.0/examples/_index.md deleted file mode 100644 index 4d747cd78..000000000 --- a/site/content/docs/5.0/examples/_index.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -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 -}} - <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> - <p>{{ $entry.description }}</p> - {{ if eq $entry.category "RTL" -}} - <div class="bd-callout bd-callout-warning"> - <p>The RTL feature is still <strong>experimental</strong> and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? <a href="{{ $.Site.Params.repo }}/issues/new">Open an issue</a>, we'd love to get your insights.</p> - </div> - {{ end -}} - - {{ 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 col-xl-3 mb-3"> - <a 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 -}} -{{ end -}} -{{< /list-examples.inline >}} diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.0/examples/album-rtl/index.html deleted file mode 100644 index ff84f122b..000000000 --- a/site/content/docs/5.0/examples/album-rtl/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -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.0/examples/album/index.html b/site/content/docs/5.0/examples/album/index.html deleted file mode 100644 index 2d25d726a..000000000 --- a/site/content/docs/5.0/examples/album/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -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.0/examples/blog-rtl/index.html b/site/content/docs/5.0/examples/blog-rtl/index.html deleted file mode 100644 index c72171770..000000000 --- a/site/content/docs/5.0/examples/blog-rtl/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -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 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 text-white rounded 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">عينة مشاركة مدونة</h2> - <p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p> - - <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p> - <hr> - <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p> - <blockquote> - <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p> - </blockquote> - <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p> - <h2>عنوان</h2> - <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p> - <h3>العنوان الفرعي</h3> - <p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p> - <pre><code>Example code block</code></pre> - <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p> - <h3>العنوان الفرعي</h3> - <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p> - <ul> - <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li> - <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li> - <li>ذات مئات المشترك بالمحور عن وشعار.</li> - </ul> - <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p> - <ol> - <li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li> - <li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li> - <li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li> - </ol> - <p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p> - </article><!-- /.blog-post --> - - <article class="blog-post"> - <h2 class="blog-post-title">مشاركة مدونة أخرى</h2> - <p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p> - - <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p> - <blockquote> - <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p> - </blockquote> - <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p> - <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p> - </article><!-- /.blog-post --> - - <article class="blog-post"> - <h2 class="blog-post-title">ميزة جديدة</h2> - <p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p> - - <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p> - <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p> - <ul> - <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li> - <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li> - <li>ذات مئات المشترك بالمحور عن وشعار.</li> - </ul> - <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p> - </article><!-- /.blog-post --> - - <nav class="blog-pagination" aria-label="Pagination"> - <a class="btn btn-outline-primary" href="#">أقدم الوظائف</a> - <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a> - </nav> - - </div> - - <div class="col-md-4"> - <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="#">مارس 2014</a></li> - <li><a href="#">شباط 2014</a></li> - <li><a href="#">يناير 2014</a></li> - <li><a href="#">ديسمبر 2013</a></li> - <li><a href="#">نوفمبر 2013</a></li> - <li><a href="#">أكتوبر 2013</a></li> - <li><a href="#">سبتمبر 2013</a></li> - <li><a href="#">اغسطس 2013</a></li> - <li><a href="#">يوليو 2013</a></li> - <li><a href="#">يونيو 2013</a></li> - <li><a href="#">مايو 2013</a></li> - <li><a href="#">ابريل 2013</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><!-- /.row --> - -</main><!-- /.container --> - -<footer class="blog-footer"> - <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p> - <p> - <a href="#">عد إلى الأعلى</a> - </p> -</footer> diff --git a/site/content/docs/5.0/examples/blog/blog.css b/site/content/docs/5.0/examples/blog/blog.css deleted file mode 100644 index 437a540f6..000000000 --- a/site/content/docs/5.0/examples/blog/blog.css +++ /dev/null @@ -1,103 +0,0 @@ -/* stylelint-disable selector-list-comma-newline-after */ - -.blog-header { - line-height: 1; - 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; - } -} - -.nav-scroller { - position: relative; - z-index: 2; - height: 2.75rem; - overflow-y: hidden; -} - -.nav-scroller .nav { - display: flex; - flex-wrap: nowrap; - padding-bottom: 1rem; - margin-top: -1px; - overflow-x: auto; - text-align: center; - white-space: nowrap; - -webkit-overflow-scrolling: touch; -} - -.nav-scroller .nav-link { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: .875rem; -} - -.card-img-right { - height: 100%; - border-radius: 0 3px 3px 0; -} - -.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-pagination > .btn { - border-radius: 2rem; -} - -/* - * Blog posts - */ -.blog-post { - margin-bottom: 4rem; -} -.blog-post-title { - margin-bottom: .25rem; - 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.0/examples/blog/blog.rtl.css b/site/content/docs/5.0/examples/blog/blog.rtl.css deleted file mode 100644 index 35eac731f..000000000 --- a/site/content/docs/5.0/examples/blog/blog.rtl.css +++ /dev/null @@ -1,103 +0,0 @@ -/* stylelint-disable selector-list-comma-newline-after */ - -.blog-header { - line-height: 1; - 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; - } -} - -.nav-scroller { - position: relative; - z-index: 2; - height: 2.75rem; - overflow-y: hidden; -} - -.nav-scroller .nav { - display: flex; - flex-wrap: nowrap; - padding-bottom: 1rem; - margin-top: -1px; - overflow-x: auto; - text-align: center; - white-space: nowrap; - -webkit-overflow-scrolling: touch; -} - -.nav-scroller .nav-link { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: .875rem; -} - -.card-img-right { - height: 100%; - border-radius: 3px 0 0 3px; -} - -.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-pagination > .btn { - border-radius: 2rem; -} - -/* - * Blog posts - */ -.blog-post { - margin-bottom: 4rem; -} -.blog-post-title { - margin-bottom: .25rem; - 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.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html deleted file mode 100644 index e25d740b9..000000000 --- a/site/content/docs/5.0/examples/blog/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -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 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 text-white rounded 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"> - <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">Sample blog post</h2> - <p class="blog-post-meta">January 1, 2014 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, images, and code are all supported.</p> - <hr> - <p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p> - <blockquote> - <p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p> - </blockquote> - <p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p> - <h2>Heading</h2> - <p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p> - <h3>Sub-heading</h3> - <p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p> - <pre><code>Example code block</code></pre> - <p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p> - <h3>Sub-heading</h3> - <p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p> - <ul> - <li>Got a motel and built a fort out of sheets.</li> - <li>Your kiss is cosmic, every move is magic.</li> - <li>Suiting up for my crowning battle.</li> - </ul> - <p>Takes you miles high, so high, 'cause she’s got that one international smile.</p> - <ol> - <li>Scared to rock the boat and make a mess.</li> - <li>I could have rewrite your addiction.</li> - <li>I know you get me so I let my walls come down.</li> - </ol> - <p>After a hurricane comes a rainbow.</p> - </article><!-- /.blog-post --> - - <article class="blog-post"> - <h2 class="blog-post-title">Another blog post</h2> - <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> - - <p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p> - <blockquote> - <p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p> - </blockquote> - <p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p> - <p>This is transcendental, on another level, boy, you're my lucky star.</p> - </article><!-- /.blog-post --> - - <article class="blog-post"> - <h2 class="blog-post-title">New feature</h2> - <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> - - <p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p> - <ul> - <li>I hope you got a healthy appetite.</li> - <li>You're never gonna be unsatisfied.</li> - <li>Got a motel and built a fort out of sheets.</li> - </ul> - <p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p> - </article><!-- /.blog-post --> - - <nav class="blog-pagination" aria-label="Pagination"> - <a class="btn btn-outline-primary" href="#">Older</a> - <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a> - </nav> - - </div> - - <div class="col-md-4"> - <div class="p-4 mb-3 bg-light rounded"> - <h4 class="fst-italic">About</h4> - <p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p> - </div> - - <div class="p-4"> - <h4 class="fst-italic">Archives</h4> - <ol class="list-unstyled mb-0"> - <li><a href="#">March 2014</a></li> - <li><a href="#">February 2014</a></li> - <li><a href="#">January 2014</a></li> - <li><a href="#">December 2013</a></li> - <li><a href="#">November 2013</a></li> - <li><a href="#">October 2013</a></li> - <li><a href="#">September 2013</a></li> - <li><a href="#">August 2013</a></li> - <li><a href="#">July 2013</a></li> - <li><a href="#">June 2013</a></li> - <li><a href="#">May 2013</a></li> - <li><a href="#">April 2013</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><!-- /.row --> - -</main><!-- /.container --> - -<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.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html deleted file mode 100644 index 7f162efd0..000000000 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">معاق</a> - </li> - </ul> - <form class="d-flex"> - <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> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</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>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</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>عنوان</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>عنوان</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>عنوان</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">العنوان الأول المميز. <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"> - - <div class="row featurette"> - <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading">أوه نعم ، هذا جيد. <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">وأخيرًا ، هذا. <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.0/examples/carousel/carousel.css b/site/content/docs/5.0/examples/carousel/carousel.css deleted file mode 100644 index f91faec76..000000000 --- a/site/content/docs/5.0/examples/carousel/carousel.css +++ /dev/null @@ -1,93 +0,0 @@ -/* 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; -} -.carousel-item > img { - position: absolute; - top: 0; - left: 0; - min-width: 100%; - 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 h2 { - font-weight: 400; -} -/* 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 */ -.featurette-heading { - font-weight: 300; - line-height: 1; - /* rtl:remove */ - letter-spacing: -.05rem; -} - - -/* 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.0/examples/carousel/carousel.rtl.css b/site/content/docs/5.0/examples/carousel/carousel.rtl.css deleted file mode 100644 index 853640b97..000000000 --- a/site/content/docs/5.0/examples/carousel/carousel.rtl.css +++ /dev/null @@ -1,89 +0,0 @@ -/* 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; -} -.carousel-item > img { - position: absolute; - top: 0; - right: 0; - min-width: 100%; - 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 h2 { - font-weight: 400; -} -.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 */ -.featurette-heading { - font-weight: 300; - line-height: 1; -} - - -/* 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.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html deleted file mode 100644 index da5f3ab7a..000000000 --- a/site/content/docs/5.0/examples/carousel/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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>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>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>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">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">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">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.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html deleted file mode 100644 index e124936db..000000000 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ /dev/null @@ -1,1614 +0,0 @@ ---- -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/5.0/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" 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" href="#typography">الطباعة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li> - </ul> - </li> - <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" 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" href="#overview">نظرة عامة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li> - </ul> - </li> - <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" 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" href="#accordion">الأكورديون</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li> - <li><a class="d-inline-flex align-items-center rounded" 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> لتحديد نص .</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" >}} - <blockquote class="blockquote"> - <p>بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.</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> - <li>الشتاء العالم، أي.</li> - </ul> - </li> - <li>ودول يتسنّى بتطويق لمّ في.</li> - <li>بعض و مرمى يتسنّى, في.</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>@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">الاسم الاول</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>@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">عنوان</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>@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>رقم</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 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"> - <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" 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" 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=".form-control-lg" aria-label=".form-control-lg مثال"> - </div> - <div class="mb-3"> - <select class="form-select form-select-lg mb-3" 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=".form-control-sm" 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="Username" aria-label="اسم المستخدم" aria-describedby="basic-addon1"> - </div> - <div class="input-group mb-3"> - <input type="text" class="form-control" placeholder="Recipient's username" aria-label="اسم مستخدم المستلم" aria-describedby="basic-addon2"> - <span class="input-group-text" id="basic-addon2">@example.com</span> - </div> - <label for="basic-url" class="form-label">عنوان 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="المبلغ (لأقرب دولار)"> - <span class="input-group-text">.00</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" >}}">Documentation</a> - </div> - - <div> - {{< example show_markup="false" >}} - <form> - <div class="form-floating mb-3"> - <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> - <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"> - <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"> - يرجى اختيار اسم المستخدم. - </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"> - عنصر الأكورديون #1 - </button> - </h4> - <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> - <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. - </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"> - عنصر الأكورديون #2 - </button> - </h4> - <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> - <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. - </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"> - عنصر الأكورديون #3 - </button> - </h4> - <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> - <div class="accordion-body"> - أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة. - </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 bg-warning text-dark">جديد</span></p> - <p class="h6">عنوان المثال <span class="badge bg-info text-dark">جديد</span></p> - <p class="h6">عنوان المثال <span class="badge bg-light text-dark">جديد</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 bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .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"> - 2 منذ أيام - </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" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false"> - زر القائمة المنسدلة - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> - <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" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر القائمة المنسدلة - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <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" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false"> - زر القائمة المنسدلة - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> - <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" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropend - </button> - <ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> - <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" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropup - </button> - <ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> - <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" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - زر Dropstart - </button> - <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> - <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" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - قائمة بمحاذاة النهاية - </button> - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> - <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 active" aria-current="true">الفرنسية الأثناء، أي.</li> - <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> - </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">كلّ في تعداد.</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" href="#" tabindex="-1" aria-disabled="true">معطل</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" href="#" tabindex="-1" aria-disabled="true">معطل</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 navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - اسقاط - </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> - <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" href="#" tabindex="-1" aria-disabled="true">معطل</a> - </li> - </ul> - <form class="d-flex"> - <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="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - اسقاط - </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown2"> - <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" href="#" tabindex="-1" aria-disabled="true">معطل</a> - </li> - </ul> - <form class="d-flex"> - <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" href="#" tabindex="-1" aria-disabled="true">السابق</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="عنوان Popover" 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="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - popover في النهاية - </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="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق."> - popover عند البدء - </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-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-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> - </div> - <div class="progress mb-3"> - <div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> - </div> - <div class="progress mb-3"> - <div class="progress-bar bg-warning text-dark w-75" role="progressbar" 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-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" 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" 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 navbar-light 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">@fat</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#mdo">@mdo</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"> - <h4 id="fat">@fat</h4> - <p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p> - <h4 id="mdo">@mdo</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"> - <h5 class="modal-title" id="exampleModalLabel">عنوان مشروط</h5> - <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"> - <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان مشروط</h5> - <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-sm modal-dialog-centered modal-dialog-scrollable"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مشروط</h5> - <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>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</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"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">مشروط ملء الشاشة</h5> - <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>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p> - <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p> - <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p> - <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p> - <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p> - <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</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.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css deleted file mode 100644 index 77aa0f23c..000000000 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css +++ /dev/null @@ -1,169 +0,0 @@ -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); - text-decoration: none; -} - -.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); - border: 0; -} - -.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 { - position: relative; - height: 200px; - margin-top: .5rem; - overflow: auto; -} - -[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; - gap: 1rem; - grid-template-columns: 1fr 4fr 1fr; - grid-template-rows: auto; - } - - .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 */ - gap: inherit; /* 1 */ - grid-template-columns: 1fr 4fr; - grid-column: 1 / span 2; - grid-template-rows: auto; - } - - .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.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js deleted file mode 100644 index 541cf9350..000000000 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js +++ /dev/null @@ -1,68 +0,0 @@ -/* global bootstrap: false */ - -(function () { - 'use strict' - - // Tooltip and popover demos - document.querySelectorAll('.tooltip-demo') - .forEach(function (tooltip) { - new bootstrap.Tooltip(tooltip, { - selector: '[data-bs-toggle="tooltip"]' - }) - }) - - document.querySelectorAll('[data-bs-toggle="popover"]') - .forEach(function (popover) { - new bootstrap.Popover(popover) - }) - - document.querySelectorAll('.toast') - .forEach(function (toastNode) { - var toast = new bootstrap.Toast(toastNode, { - autohide: false - }) - - toast.show() - }) - - // Disable empty links - document.querySelectorAll('[href="#"]') - .forEach(function (link) { - link.addEventListener('click', function (event) { - event.preventDefault() - }) - }) - - function setActiveItem() { - var hash = window.location.hash - - if (hash === '') { - return - } - - var link = document.querySelector('.bd-aside a[href="' + hash + '"]') - var active = document.querySelector('.bd-aside .active') - var parent = link.parentNode.parentNode.previousElementSibling - - link.classList.add('active') - - if (parent.classList.contains('collapsed')) { - parent.click() - } - - if (!active) { - return - } - - var 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.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css deleted file mode 100644 index c1a4a1ccc..000000000 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css +++ /dev/null @@ -1,162 +0,0 @@ -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); - text-decoration: none; -} - -.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); - border: 0; -} - -.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 { - position: relative; - height: 200px; - margin-top: .5rem; - overflow: auto; -} - -[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; - gap: 1rem; - grid-template-columns: 1fr 4fr 1fr; - grid-template-rows: auto; - } - - .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 */ - gap: inherit; /* 1 */ - grid-template-columns: 1fr 4fr; - grid-column: 1 / span 2; - grid-template-rows: auto; - } - - .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.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html deleted file mode 100644 index de9817845..000000000 --- a/site/content/docs/5.0/examples/cheatsheet/index.html +++ /dev/null @@ -1,1598 +0,0 @@ ---- -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/5.0/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" 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" href="#typography">Typography</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li> - </ul> - </li> - <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" 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" href="#overview">Overview</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li> - </ul> - </li> - <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed" 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" href="#accordion">Accordion</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li> - <li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li> - <li><a class="d-inline-flex align-items-center rounded" 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" >}} - <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 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" 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" 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 mb-3" 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="[email protected]"> - <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 bg-warning text-dark">New</span></p> - <p class="h6">Example heading <span class="badge bg-info text-dark">New</span></p> - <p class="h6">Example heading <span class="badge bg-light text-dark">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 bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .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" id="dropdownMenuButtonSM" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown button - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM"> - <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" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown button - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <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" id="dropdownMenuButtonLG" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown button - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG"> - <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" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - Dropend button - </button> - <ul class="dropdown-menu" aria-labelledby="dropendMenuButton"> - <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" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - Dropup button - </button> - <ul class="dropdown-menu" aria-labelledby="dropupMenuButton"> - <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" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - Dropstart button - </button> - <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton"> - <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" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> - End-aligned menu - </button> - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton"> - <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" href="#" tabindex="-1" aria-disabled="true">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>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> - </div> - <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> - <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> - </div> - <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> - <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</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" href="#" tabindex="-1" aria-disabled="true">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 navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown - </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> - <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown - </a> - <ul class="dropdown-menu" aria-labelledby="navbarDropdown2"> - <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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" href="#" tabindex="-1" aria-disabled="true">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-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-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> - </div> - <div class="progress mb-3"> - <div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> - </div> - <div class="progress mb-3"> - <div class="progress-bar bg-warning text-dark w-75" role="progressbar" 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-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" 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" 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 navbar-light bg-light px-3"> - <a class="navbar-brand" href="#">Navbar</a> - <ul class="nav nav-pills"> - <li class="nav-item"> - <a class="nav-link" href="#fat">@fat</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#mdo">@mdo</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="#one">one</a></li> - <li><a class="dropdown-item" href="#two">two</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#three">three</a></li> - </ul> - </li> - </ul> - </nav> - <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> - <h4 id="fat">@fat</h4> - <p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> - <h4 id="mdo">@mdo</h4> - <p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p> - <h4 id="one">one</h4> - <p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> - <h4 id="two">two</h4> - <p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p> - <h4 id="three">three</h4> - <p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p> - <p>And some more placeholder content, for good measure.</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"> - <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> - <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"> - <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> - <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"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> - </div> - <div class="modal-body"> - <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p> - <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p> - <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> - <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</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"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> - </div> - <div class="modal-body"> - <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p> - <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p> - <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p> - <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p> - <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p> - <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p> - <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p> - <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p> - </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.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html deleted file mode 100644 index 5839cb112..000000000 --- a/site/content/docs/5.0/examples/checkout-rtl/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -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="[email protected]"> - <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 Main St" required> - <div class="invalid-feedback"> - يرجى إدخال عنوان الشحن الخاص بك. - </div> - </div> - - <div class="col-12"> - <label for="address2" class="form-label"><span class="text-muted">(اختياري)</span>عنوان 2 </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">بلد</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="debit" name="paymentMethod" type="radio" class="form-check-input" required> - <label class="form-check-label" for="debit">بطاقة ائتمان</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.0/examples/checkout/form-validation.css b/site/content/docs/5.0/examples/checkout/form-validation.css deleted file mode 100644 index e5ea31c40..000000000 --- a/site/content/docs/5.0/examples/checkout/form-validation.css +++ /dev/null @@ -1,3 +0,0 @@ -.container { - max-width: 960px; -} diff --git a/site/content/docs/5.0/examples/checkout/form-validation.js b/site/content/docs/5.0/examples/checkout/form-validation.js deleted file mode 100644 index f8fd583de..000000000 --- a/site/content/docs/5.0/examples/checkout/form-validation.js +++ /dev/null @@ -1,20 +0,0 @@ -// Example starter JavaScript for disabling form submissions if there are invalid fields -(function () { - 'use strict' - - // Fetch all the forms we want to apply custom Bootstrap validation styles to - var forms = document.querySelectorAll('.needs-validation') - - // Loop over them and prevent submission - Array.prototype.slice.call(forms) - .forEach(function (form) { - form.addEventListener('submit', function (event) { - if (!form.checkValidity()) { - event.preventDefault() - event.stopPropagation() - } - - form.classList.add('was-validated') - }, false) - }) -})() diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html deleted file mode 100644 index fc9cfb6f8..000000000 --- a/site/content/docs/5.0/examples/checkout/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -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-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">Your cart</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">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="[email protected]"> - <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.0/examples/cover/cover.css b/site/content/docs/5.0/examples/cover/cover.css deleted file mode 100644 index 87afc3be9..000000000 --- a/site/content/docs/5.0/examples/cover/cover.css +++ /dev/null @@ -1,53 +0,0 @@ -/* - * 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 { - padding: .25rem 0; - font-weight: 700; - color: rgba(255, 255, 255, .5); - background-color: transparent; - 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.0/examples/cover/index.html b/site/content/docs/5.0/examples/cover/index.html deleted file mode 100644 index 10362083e..000000000 --- a/site/content/docs/5.0/examples/cover/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: examples -title: Cover Template -extra_css: - - "cover.css" -html_class: "h-100" -body_class: "d-flex h-100 text-center text-white 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 active" aria-current="page" href="#">Home</a> - <a class="nav-link" href="#">Features</a> - <a class="nav-link" 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.0/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js deleted file mode 100644 index 2a511ef8b..000000000 --- a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js +++ /dev/null @@ -1,53 +0,0 @@ -/* globals Chart:false, feather:false */ - -(function () { - 'use strict' - - feather.replace() - - // Graphs - var ctx = document.getElementById('myChart') - // eslint-disable-next-line no-unused-vars - var 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.0/examples/dashboard-rtl/index.html b/site/content/docs/5.0/examples/dashboard-rtl/index.html deleted file mode 100644 index 848c67c0b..000000000 --- a/site/content/docs/5.0/examples/dashboard-rtl/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -layout: examples -title: قالب لوحة القيادة -direction: rtl -extra_css: - - "../dashboard/dashboard.rtl.css" -extra_js: - - src: "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" - integrity: "sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" - - src: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" - integrity: "sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" - - 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" 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" type="text" placeholder="بحث" aria-label="بحث"> - <ul class="navbar-nav px-3"> - <li class="nav-item text-nowrap"> - <a class="nav-link" href="#">خروج</a> - </li> - </ul> -</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"> - <ul class="nav flex-column"> - <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#"> - <span data-feather="home"></span> - لوحة القيادة - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file"></span> - أوامر - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="shopping-cart"></span> - منتجات - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="users"></span> - الزبائن - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="bar-chart-2"></span> - التقارير - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="layers"></span> - التكامل - </a> - </li> - </ul> - - <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> - <span>التقارير المحفوظة</span> - <a class="link-secondary" href="#" aria-label="أضف تقرير جديد"> - <span data-feather="plus-circle"></span> - </a> - </h6> - <ul class="nav flex-column mb-2"> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - الشهر الحالي - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - الربع الأخير - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - ارتباط اجتماعي - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></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"></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>#</th> - <th>العنوان</th> - <th>العنوان</th> - <th>العنوان</th> - <th>العنوان</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.0/examples/dashboard/dashboard.css b/site/content/docs/5.0/examples/dashboard/dashboard.css deleted file mode 100644 index 8b0fa7253..000000000 --- a/site/content/docs/5.0/examples/dashboard/dashboard.css +++ /dev/null @@ -1,100 +0,0 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; - vertical-align: text-bottom; -} - -/* - * 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 { - position: relative; - top: 0; - height: calc(100vh - 48px); - padding-top: .5rem; - 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: #007bff; -} - -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - -.sidebar-heading { - font-size: .75rem; - text-transform: uppercase; -} - -/* - * Navbar - */ - -.navbar-brand { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: 1rem; - 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; - border-width: 0; - border-radius: 0; -} - -.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.0/examples/dashboard/dashboard.js b/site/content/docs/5.0/examples/dashboard/dashboard.js deleted file mode 100644 index d3f549928..000000000 --- a/site/content/docs/5.0/examples/dashboard/dashboard.js +++ /dev/null @@ -1,53 +0,0 @@ -/* globals Chart:false, feather:false */ - -(function () { - 'use strict' - - feather.replace() - - // Graphs - var ctx = document.getElementById('myChart') - // eslint-disable-next-line no-unused-vars - var 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.0/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.0/examples/dashboard/dashboard.rtl.css deleted file mode 100644 index 2406ce5cc..000000000 --- a/site/content/docs/5.0/examples/dashboard/dashboard.rtl.css +++ /dev/null @@ -1,96 +0,0 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; - vertical-align: text-bottom; -} - -/* - * 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 { - position: relative; - top: 0; - height: calc(100vh - 48px); - padding-top: .5rem; - 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: #007bff; -} - -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - -.sidebar-heading { - font-size: .75rem; - text-transform: uppercase; -} - -/* - * Navbar - */ - -.navbar-brand { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: 1rem; - 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; - border-width: 0; - border-radius: 0; -} - -.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.0/examples/dashboard/index.html b/site/content/docs/5.0/examples/dashboard/index.html deleted file mode 100644 index 21d78e47f..000000000 --- a/site/content/docs/5.0/examples/dashboard/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: examples -title: Dashboard Template -extra_css: - - "dashboard.css" -extra_js: - - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js" - integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" - - src: "https://cdn.jsdelivr.net/npm/[email protected]/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" 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" type="text" placeholder="Search" aria-label="Search"> - <ul class="navbar-nav px-3"> - <li class="nav-item text-nowrap"> - <a class="nav-link" href="#">Sign out</a> - </li> - </ul> -</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"> - <ul class="nav flex-column"> - <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#"> - <span data-feather="home"></span> - Dashboard - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file"></span> - Orders - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="shopping-cart"></span> - Products - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="users"></span> - Customers - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="bar-chart-2"></span> - Reports - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="layers"></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"> - <span>Saved reports</span> - <a class="link-secondary" href="#" aria-label="Add a new report"> - <span data-feather="plus-circle"></span> - </a> - </h6> - <ul class="nav flex-column mb-2"> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - Current month - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - Last quarter - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></span> - Social engagement - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text"></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"></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>#</th> - <th>Header</th> - <th>Header</th> - <th>Header</th> - <th>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.0/examples/grid/grid.css b/site/content/docs/5.0/examples/grid/grid.css deleted file mode 100644 index 18e3568b1..000000000 --- a/site/content/docs/5.0/examples/grid/grid.css +++ /dev/null @@ -1,13 +0,0 @@ -.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.0/examples/grid/index.html b/site/content/docs/5.0/examples/grid/index.html deleted file mode 100644 index f26829b4f..000000000 --- a/site/content/docs/5.0/examples/grid/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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 v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra 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 and xl, you only need to specify md.</p> - <div class="row mb-3"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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"> - <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">.container</div> - <div class="container-sm themed-container">.container-sm</div> - <div class="container-md themed-container">.container-md</div> - <div class="container-lg themed-container">.container-lg</div> - <div class="container-xl themed-container">.container-xl</div> - <div class="container-xxl themed-container">.container-xxl</div> - <div class="container-fluid themed-container">.container-fluid</div> -</main> diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html deleted file mode 100644 index 9061d7cce..000000000 --- a/site/content/docs/5.0/examples/masonry/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -layout: examples -title: Masonry example -extra_js: - - src: "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 bg-primary text-white 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.0/examples/navbar-bottom/index.html b/site/content/docs/5.0/examples/navbar-bottom/index.html deleted file mode 100644 index aee772e20..000000000 --- a/site/content/docs/5.0/examples/navbar-bottom/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropup"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a> - <ul class="dropdown-menu" aria-labelledby="dropdown10"> - <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.0/examples/navbar-fixed/index.html b/site/content/docs/5.0/examples/navbar-fixed/index.html deleted file mode 100644 index 848137eff..000000000 --- a/site/content/docs/5.0/examples/navbar-fixed/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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.0/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.0/examples/navbar-fixed/navbar-top-fixed.css deleted file mode 100644 index c77c0c147..000000000 --- a/site/content/docs/5.0/examples/navbar-fixed/navbar-top-fixed.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Show it is fixed to the top */ -body { - min-height: 75rem; - padding-top: 4.5rem; -} diff --git a/site/content/docs/5.0/examples/navbar-static/index.html b/site/content/docs/5.0/examples/navbar-static/index.html deleted file mode 100644 index fe95dab47..000000000 --- a/site/content/docs/5.0/examples/navbar-static/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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.0/examples/navbar-static/navbar-top.css b/site/content/docs/5.0/examples/navbar-static/navbar-top.css deleted file mode 100644 index 25bbdde09..000000000 --- a/site/content/docs/5.0/examples/navbar-static/navbar-top.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Show it's not fixed to the top */ -body { - min-height: 75rem; -} diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.0/examples/navbars/index.html deleted file mode 100644 index 38281f3dd..000000000 --- a/site/content/docs/5.0/examples/navbars/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <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> - <input class="form-control" type="text" 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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown03"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown04"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown05"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown06"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdownXxl"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown07"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown07XL"> - <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> - <input class="form-control" type="text" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown08"> - <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 navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown09"> - <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> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> - </form> - </div> - </div> - </nav> - - <nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown10"> - <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.0/examples/navbars/navbar.css b/site/content/docs/5.0/examples/navbars/navbar.css deleted file mode 100644 index 70d209409..000000000 --- a/site/content/docs/5.0/examples/navbars/navbar.css +++ /dev/null @@ -1,7 +0,0 @@ -body { - padding-bottom: 20px; -} - -.navbar { - margin-bottom: 20px; -} diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas/index.html deleted file mode 100644 index 9aed0aed7..000000000 --- a/site/content/docs/5.0/examples/offcanvas/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -layout: examples -title: Offcanvas template -extra_css: - - "offcanvas.css" -extra_js: - - src: "offcanvas.js" -body_class: "bg-light" ---- - -<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" data-bs-toggle="offcanvas" 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="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <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"> - <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 nav-underline" aria-label="Secondary navigation"> - <a class="nav-link active" aria-current="page" href="#">Dashboard</a> - <a class="nav-link" href="#"> - Friends - <span class="badge bg-light text-dark 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.0/examples/offcanvas/offcanvas.css b/site/content/docs/5.0/examples/offcanvas/offcanvas.css deleted file mode 100644 index 29e26b11b..000000000 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.css +++ /dev/null @@ -1,67 +0,0 @@ -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 { - position: relative; - z-index: 2; - height: 2.75rem; - overflow-y: hidden; -} - -.nav-scroller .nav { - display: flex; - flex-wrap: nowrap; - padding-bottom: 1rem; - margin-top: -1px; - overflow-x: auto; - color: rgba(255, 255, 255, .75); - text-align: center; - white-space: nowrap; - -webkit-overflow-scrolling: touch; -} - -.nav-underline .nav-link { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: .875rem; - color: #6c757d; -} - -.nav-underline .nav-link:hover { - color: #007bff; -} - -.nav-underline .active { - font-weight: 500; - color: #343a40; -} - -.text-white-50 { color: rgba(255, 255, 255, .5); } - -.bg-purple { background-color: #6f42c1; } diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.0/examples/offcanvas/offcanvas.js deleted file mode 100644 index 793ea86cd..000000000 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js +++ /dev/null @@ -1,7 +0,0 @@ -(function () { - 'use strict' - - document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () { - document.querySelector('.offcanvas-collapse').classList.toggle('open') - }) -})() diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html deleted file mode 100644 index 57d4747dd..000000000 --- a/site/content/docs/5.0/examples/pricing/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: examples -title: Pricing example -extra_css: - - "pricing.css" -include_js: false ---- - -<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm"> - <p class="h5 my-0 me-md-auto fw-normal">Company name</p> - <nav class="my-2 my-md-0 me-md-3"> - <a class="p-2 text-dark" href="#">Features</a> - <a class="p-2 text-dark" href="#">Enterprise</a> - <a class="p-2 text-dark" href="#">Support</a> - <a class="p-2 text-dark" href="#">Pricing</a> - </nav> - <a class="btn btn-outline-primary" href="#">Sign up</a> -</header> - -<main class="container"> - <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> - <h1 class="display-4">Pricing</h1> - <p class="lead">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> - - <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <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">/ 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 shadow-sm"> - <div class="card-header"> - <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">/ 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 shadow-sm"> - <div class="card-header"> - <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">/ 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> - - <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><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</a></li> - <li><a class="link-secondary" href="#">Resource name</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>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> -</main> diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css deleted file mode 100644 index 70afca134..000000000 --- a/site/content/docs/5.0/examples/pricing/pricing.css +++ /dev/null @@ -1,7 +0,0 @@ -.container { - max-width: 960px; -} - -.pricing-header { - max-width: 700px; -} diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.0/examples/product/index.html deleted file mode 100644 index 291901efa..000000000 --- a/site/content/docs/5.0/examples/product/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -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="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white 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="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white 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.0/examples/product/product.css b/site/content/docs/5.0/examples/product/product.css deleted file mode 100644 index 5fcb582b4..000000000 --- a/site/content/docs/5.0/examples/product/product.css +++ /dev/null @@ -1,69 +0,0 @@ -.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.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html deleted file mode 100644 index 6fefc45e6..000000000 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: examples -title: Signin Template -extra_css: - - "signin.css" -body_class: "text-center" -include_js: false ---- - -<main class="form-signin"> - <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> - <label for="inputEmail" class="visually-hidden">Email address</label> - <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> - <label for="inputPassword" class="visually-hidden">Password</label> - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> - <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.0/examples/sign-in/signin.css b/site/content/docs/5.0/examples/sign-in/signin.css deleted file mode 100644 index eaa08ba61..000000000 --- a/site/content/docs/5.0/examples/sign-in/signin.css +++ /dev/null @@ -1,42 +0,0 @@ -html, -body { - height: 100%; -} - -body { - display: flex; - align-items: center; - padding-top: 40px; - padding-bottom: 40px; - background-color: #f5f5f5; -} - -.form-signin { - width: 100%; - max-width: 330px; - padding: 15px; - margin: auto; -} -.form-signin .checkbox { - font-weight: 400; -} -.form-signin .form-control { - position: relative; - box-sizing: border-box; - height: auto; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { - 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.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html deleted file mode 100644 index 0cd64c75f..000000000 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -layout: examples -title: Starter Template -extra_css: - - "starter-template.css" ---- - -<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> - <div class="container-fluid"> - <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <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"> - <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="starter-template text-center py-5 px-3"> - <h1>Bootstrap starter template</h1> - <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> - </div> - -</main><!-- /.container --> diff --git a/site/content/docs/5.0/examples/starter-template/starter-template.css b/site/content/docs/5.0/examples/starter-template/starter-template.css deleted file mode 100644 index 6fb709105..000000000 --- a/site/content/docs/5.0/examples/starter-template/starter-template.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - padding-top: 5rem; -} diff --git a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html deleted file mode 100644 index ce036dc09..000000000 --- a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - </ul> - <form class="d-flex"> - <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.0/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css deleted file mode 100644 index 3087ead7d..000000000 --- a/site/content/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css +++ /dev/null @@ -1,7 +0,0 @@ -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -main > .container { - padding: 60px 15px 0; -} diff --git a/site/content/docs/5.0/examples/sticky-footer/index.html b/site/content/docs/5.0/examples/sticky-footer/index.html deleted file mode 100644 index 7a6e127cd..000000000 --- a/site/content/docs/5.0/examples/sticky-footer/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -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.0/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.0/examples/sticky-footer/sticky-footer.css deleted file mode 100644 index f8be43729..000000000 --- a/site/content/docs/5.0/examples/sticky-footer/sticky-footer.css +++ /dev/null @@ -1,9 +0,0 @@ -/* Custom page CSS --------------------------------------------------- */ -/* Not required for template or sticky footer method. */ - -.container { - width: auto; - max-width: 680px; - padding: 0 15px; -} |