rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

More darkmode examples (#38058)

Browse Source 
* WIP darkmode examples

* Fix product css error, redo parts of blog

* wip dashboard

* updated rtl generated

* fix up some examples, namely dashboard

* jumbotron and sign-in fixes

* more fixes

* more

* Fixes from code review

* Remove duplicate `data-bs-target` in dashboard/index.html

* Modify `blog-rtl/index.html`

* Modify `dashboard-rtl/index.html`

* Modify `carousel-rtl/index.html`

* Keep JS on all pages for switcher

* Remove Feather from dashboard examples

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Mark Otto 2023-04-27 18:13:35 -07:00 committed by GitHub
parent 6182c0d962
commit e468daac25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 656 additions and 511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -5,17 +5,29 @@ direction: rtl
extra_css: extra_css:
- "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
- "../blog/blog.rtl.css" - "../blog/blog.rtl.css"
include_js: false
--- ---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<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"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<div class="container"> <div class="container">
<header class="blog-header lh-1 py-3"> <header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center"> <div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1"> <div class="col-4 pt-1">
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a> <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">كبير</a> <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a>
</div> </div>
<div class="col-4 d-flex justify-content-end align-items-center"> <div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="بحث"> <a class="link-secondary" href="#" aria-label="بحث">
@ -26,30 +38,30 @@ include_js: false
</div> </div>
</header> </header>
<div class="nav-scroller py-1 mb-2"> <div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav d-flex justify-content-between"> <nav class="nav nav-underline justify-content-between">
<a class="p-2 link-secondary" href="#">العالم</a> <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a>
<a class="p-2 link-secondary" href="#">الولايات المتحدة</a> <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a>
<a class="p-2 link-secondary" href="#">التقنية</a> <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
<a class="p-2 link-secondary" href="#">التصميم</a> <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
<a class="p-2 link-secondary" href="#">الحضارة</a> <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
<a class="p-2 link-secondary" href="#">المال والأعمال</a> <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a>
<a class="p-2 link-secondary" href="#">السياسة</a> <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
<a class="p-2 link-secondary" href="#">الرأي العام</a> <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a>
<a class="p-2 link-secondary" href="#">العلوم</a> <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
<a class="p-2 link-secondary" href="#">الصحة</a> <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
<a class="p-2 link-secondary" href="#">الموضة</a> <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
<a class="p-2 link-secondary" href="#">السفر</a> <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
</nav> </nav>
</div> </div>
</div> </div>
<main class="container"> <main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
<div class="col-md-6 px-0"> <div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1> <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p> <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p> <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p>
</div> </div>
</div> </div>
@ -57,11 +69,14 @@ include_js: false
<div class="col-md-6"> <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="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"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">العالم</strong> <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong>
<h3 class="mb-0">مشاركة مميزة</h3> <h3 class="mb-0">مشاركة مميزة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 12</div> <div class="mb-1 text-body-secondary">نوفمبر 12</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@ -71,11 +86,14 @@ include_js: false
<div class="col-md-6"> <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="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"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">التصميم</strong> <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong>
<h3 class="mb-0">عنوان الوظيفة</h3> <h3 class="mb-0">عنوان الوظيفة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 11</div> <div class="mb-1 text-body-secondary">نوفمبر 11</div>
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
@ -84,20 +102,20 @@ include_js: false
</div> </div>
</div> </div>
<div class="row"> <div class="row g-5">
<div class="col-md-8"> <div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom"> <h3 class="pb-4 mb-4 fst-italic border-bottom">
من Firehose من Firehose
</h3> </h3>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">مثال على تدوينة</h2> <h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2>
<p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p> <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p> <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
<hr> <hr>
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p> <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
<blockquote> <blockquote class="blockquote">
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
</blockquote> </blockquote>
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
@ -126,7 +144,7 @@ include_js: false
</article> </article>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">تدوينة أخرى</h2> <h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2>
<p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
<p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p> <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@ -138,7 +156,7 @@ include_js: false
</article> </article>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">ميزة جديدة</h2> <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>
<p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
<p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p> <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@ -166,6 +184,39 @@ include_js: false
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
</div> </div>
<div>
<h4 class="fst-italic">المشاركات الاخيرة</h4>
<ul class="list-unstyled">
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
<small class="text-body-secondary">15 يناير 2023</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
<small class="text-body-secondary">14 يناير 2023</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
<small class="text-body-secondary">13 يناير 2023</small>
</div>
</a>
</li>
</ul>
</div>
<div class="p-4"> <div class="p-4">
<h4 class="fst-italic">الأرشيف</h4> <h4 class="fst-italic">الأرشيف</h4>
<ol class="list-unstyled mb-0"> <ol class="list-unstyled mb-0">
@ -198,9 +249,9 @@ include_js: false
</main> </main>
<footer class="blog-footer"> <footer class="py-5 text-center text-body-secondary bg-body-tertiary">
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p> <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
<p> <p class="mb-0">
<a href="#">عد إلى الأعلى</a> <a href="#">عد إلى الأعلى</a>
</p> </p>
</footer> </footer>

30
site/content/docs/5.3/examples/blog/blog.css
View File

@ -1,9 +1,5 @@
/* stylelint-disable stylistic/selector-list-comma-newline-after */ /* stylelint-disable stylistic/selector-list-comma-newline-after */
.blog-header {
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo { .blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
font-size: 2.25rem; font-size: 2.25rem;
@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
} }
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.flex-auto { .flex-auto {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post { .blog-post {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.blog-post-title {
font-size: 2.5rem;
}
.blog-post-meta { .blog-post-meta {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
color: #727272; 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;
}

30
site/content/docs/5.3/examples/blog/blog.rtl.css
View File

@ -1,9 +1,5 @@
/* stylelint-disable stylistic/selector-list-comma-newline-after */ /* stylelint-disable stylistic/selector-list-comma-newline-after */
.blog-header {
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo { .blog-header-logo {
font-family: Amiri, Georgia, "Times New Roman", serif; font-family: Amiri, Georgia, "Times New Roman", serif;
font-size: 2.25rem; font-size: 2.25rem;
@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: Amiri, Georgia, "Times New Roman", serif; font-family: Amiri, Georgia, "Times New Roman", serif;
} }
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.flex-auto { .flex-auto {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post { .blog-post {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.blog-post-title {
font-size: 2.5rem;
}
.blog-post-meta { .blog-post-meta {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
color: #727272; 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;
}

109
site/content/docs/5.3/examples/blog/index.html
View File

@ -4,17 +4,29 @@ title: Blog Template
extra_css: extra_css:
- "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
- "blog.css" - "blog.css"
include_js: false
--- ---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"/>
<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"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<div class="container"> <div class="container">
<header class="blog-header lh-1 py-3"> <header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center"> <div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1"> <div class="col-4 pt-1">
<a class="link-secondary" href="#">Subscribe</a> <a class="link-secondary" href="#">Subscribe</a>
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<a class="blog-header-logo text-body-emphasis" href="#">Large</a> <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
</div> </div>
<div class="col-4 d-flex justify-content-end align-items-center"> <div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search"> <a class="link-secondary" href="#" aria-label="Search">
@ -25,30 +37,30 @@ include_js: false
</div> </div>
</header> </header>
<div class="nav-scroller py-1 mb-2"> <div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav d-flex justify-content-between"> <nav class="nav nav-underline justify-content-between">
<a class="p-2 link-secondary" href="#">World</a> <a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
<a class="p-2 link-secondary" href="#">U.S.</a> <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
<a class="p-2 link-secondary" href="#">Technology</a> <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
<a class="p-2 link-secondary" href="#">Design</a> <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
<a class="p-2 link-secondary" href="#">Culture</a> <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
<a class="p-2 link-secondary" href="#">Business</a> <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
<a class="p-2 link-secondary" href="#">Politics</a> <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
<a class="p-2 link-secondary" href="#">Opinion</a> <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
<a class="p-2 link-secondary" href="#">Science</a> <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
<a class="p-2 link-secondary" href="#">Health</a> <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
<a class="p-2 link-secondary" href="#">Style</a> <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
<a class="p-2 link-secondary" href="#">Travel</a> <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
</nav> </nav>
</div> </div>
</div> </div>
<main class="container"> <main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
<div class="col-md-6 px-0"> <div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1> <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 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> <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
</div> </div>
</div> </div>
@ -56,11 +68,14 @@ include_js: false
<div class="col-md-6"> <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="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"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong> <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<h3 class="mb-0">Featured post</h3> <h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-body-secondary">Nov 12</div> <div class="mb-1 text-body-secondary">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <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> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@ -70,11 +85,14 @@ include_js: false
<div class="col-md-6"> <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="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"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong> <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<h3 class="mb-0">Post title</h3> <h3 class="mb-0">Post title</h3>
<div class="mb-1 text-body-secondary">Nov 11</div> <div class="mb-1 text-body-secondary">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <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> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@ -90,7 +108,7 @@ include_js: false
</h3> </h3>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">Sample blog post</h2> <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p> <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p> <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@ -144,7 +162,7 @@ include_js: false
</article> </article>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">Another blog post</h2> <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p> <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p> <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@ -192,7 +210,7 @@ include_js: false
</article> </article>
<article class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title mb-1">New feature</h2> <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p> <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p> <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@ -218,6 +236,39 @@ include_js: false
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p> <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div> </div>
<div>
<h4 class="fst-italic">Recent posts</h4>
<ul class="list-unstyled">
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">Example blog post title</h6>
<small class="text-body-secondary">January 15, 2023</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">This is another blog post title</h6>
<small class="text-body-secondary">January 14, 2023</small>
</div>
</a>
</li>
<li>
<a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
{{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
<div class="col-lg-8">
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
<small class="text-body-secondary">January 13, 2023</small>
</div>
</a>
</li>
</ul>
</div>
<div class="p-4"> <div class="p-4">
<h4 class="fst-italic">Archives</h4> <h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0"> <ol class="list-unstyled mb-0">
@ -250,9 +301,9 @@ include_js: false
</main> </main>
<footer class="blog-footer"> <footer class="py-5 text-center text-body-secondary bg-body-tertiary">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p> <p class="mb-0">
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
</footer> </footer>

4
site/content/docs/5.3/examples/carousel-rtl/index.html
View File

@ -36,7 +36,7 @@ extra_css:
<main> <main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
<div class="carousel-indicators"> <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="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="1" aria-label="Slide 2"></button>
@ -48,7 +48,7 @@ extra_css:
<div class="container"> <div class="container">
<div class="carousel-caption text-start"> <div class="carousel-caption text-start">
<h1>عنوان المثال.</h1> <h1>عنوان المثال.</h1>
<p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> <p class="opacity-75">تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p> <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
</div> </div>
</div> </div>

4
site/content/docs/5.3/examples/carousel/index.html
View File

@ -35,7 +35,7 @@ extra_css:
<main> <main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
<div class="carousel-indicators"> <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="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="1" aria-label="Slide 2"></button>
@ -47,7 +47,7 @@ extra_css:
<div class="container"> <div class="container">
<div class="carousel-caption text-start"> <div class="carousel-caption text-start">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p> <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div> </div>
</div> </div>

1
site/content/docs/5.3/examples/cover/index.html
View File

@ -5,7 +5,6 @@ extra_css:
- "cover.css" - "cover.css"
html_class: "h-100" html_class: "h-100"
body_class: "d-flex h-100 text-center text-bg-dark" body_class: "d-flex h-100 text-center text-bg-dark"
include_js: false
--- ---
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

4
site/content/docs/5.3/examples/dashboard-rtl/dashboard.js
View File

@ -1,10 +1,8 @@
/* globals Chart:false, feather:false */ /* globals Chart:false */
(() => { (() => {
'use strict' 'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs // Graphs
const ctx = document.getElementById('myChart') const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars

158
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -3,66 +3,128 @@ layout: examples
title: قالب لوحة القيادة title: قالب لوحة القيادة
direction: rtl direction: rtl
extra_css: extra_css:
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
- "../dashboard/dashboard.rtl.css" - "../dashboard/dashboard.rtl.css"
extra_js: extra_js:
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
- src: "dashboard.js" - src: "dashboard.js"
--- ---
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a> <symbol id="calendar3" viewBox="0 0 16 16">
<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="عرض/إخفاء لوحة التنقل"> <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<span class="navbar-toggler-icon"></span> <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
<symbol id="door-closed" viewBox="0 0 16 16">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</symbol>
<symbol id="file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</symbol>
<symbol id="file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</symbol>
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
</symbol>
<symbol id="graph-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
</symbol>
<symbol id="house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</symbol>
<symbol id="list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
</symbol>
<symbol id="plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="puzzle" viewBox="0 0 16 16">
<path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
</symbol>
<symbol id="search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</symbol>
</svg>
<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">اسم الشركة</a>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
<svg class="bi"><use xlink:href="#search"/></svg>
</button> </button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث"> </li>
<div class="navbar-nav"> <li class="nav-item text-nowrap">
<div class="nav-item text-nowrap"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<a class="nav-link px-3" href="#">تسجيل الخروج</a> <svg class="bi"><use xlink:href="#list"/></svg>
</div> </button>
</li>
</ul>
<div id="navbarSearch" class="navbar-search w-100 collapse">
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
</div> </div>
</header> </header>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse"> <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="position-sticky pt-3 sidebar-sticky"> <div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="يغلق"></button>
</div>
<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#house-fill"/></svg>
لوحة القيادة لوحة القيادة
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark"/></svg>
الطلبات الطلبات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="shopping-cart" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#cart"/></svg>
المنتجات المنتجات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="users" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#people"/></svg>
الزبائن الزبائن
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="bar-chart-2" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#graph-up"/></svg>
التقارير التقارير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="layers" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#puzzle"/></svg>
التكاملات التكاملات
</a> </a>
</li> </li>
@ -71,37 +133,55 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span> <span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<span data-feather="plus-circle" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي الشهر الحالي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير الربع الأخير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي التفاعل الإجتماعي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام مبيعات نهاية العام
</a> </a>
</li> </li>
</ul> </ul>
<hr class="my-3">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg>
خروج
</a>
</li>
</ul>
</div>
</div>
</div> </div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <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"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
@ -111,8 +191,8 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button> <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<span data-feather="calendar" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع هذا الأسبوع
</button> </button>
</div> </div>
@ -121,7 +201,7 @@ extra_js:
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>عنوان القسم</h2> <h2>عنوان القسم</h2>
<div class="table-responsive"> <div class="table-responsive small">
<table class="table table-striped table-sm"> <table class="table table-striped table-sm">
<thead> <thead>
<tr> <tr>

70
site/content/docs/5.3/examples/dashboard/dashboard.css
View File

@ -1,61 +1,33 @@
body { .bi {
font-size: .875rem; display: inline-block;
} width: 1rem;
height: 1rem;
.feather {
width: 16px;
height: 16px;
} }
/* /*
* Sidebar * Sidebar
*/ */
.sidebar { @media (min-width: 768px) {
position: fixed; .sidebar .offcanvas-lg {
top: 0; position: -webkit-sticky;
/* rtl:raw: position: sticky;
right: 0; top: 48px;
*/ }
bottom: 0; .navbar-search {
/* rtl:remove */ display: block;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
} }
} }
.sidebar-sticky {
height: calc(100vh - 48px);
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link { .sidebar .nav-link {
font-size: .875rem;
font-weight: 500; font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #2470dc; color: #2470dc;
} }
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
} }
@ -71,22 +43,6 @@ body {
box-shadow: inset -1px 0 0 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 { .navbar .form-control {
padding: .75rem 1rem; padding: .75rem 1rem;
} }
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

4
site/content/docs/5.3/examples/dashboard/dashboard.js
View File

@ -1,10 +1,8 @@
/* globals Chart:false, feather:false */ /* globals Chart:false */
(() => { (() => {
'use strict' 'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs // Graphs
const ctx = document.getElementById('myChart') const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars

66
site/content/docs/5.3/examples/dashboard/dashboard.rtl.css
View File

@ -1,57 +1,33 @@
body { .bi {
font-size: .875rem; display: inline-block;
} width: 1rem;
height: 1rem;
.feather {
width: 16px;
height: 16px;
} }
/* /*
* Sidebar * Sidebar
*/ */
.sidebar { @media (min-width: 768px) {
position: fixed; .sidebar .offcanvas-lg {
top: 0; position: -webkit-sticky;
right: 0; position: sticky;
bottom: 0; top: 48px;
z-index: 100; /* Behind the navbar */ }
padding: 48px 0 0; /* Height of navbar */ .navbar-search {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); display: block;
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
} }
} }
.sidebar-sticky {
height: calc(100vh - 48px);
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link { .sidebar .nav-link {
font-size: .875rem;
font-weight: 500; font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-left: 4px;
color: #727272;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #2470dc; color: #2470dc;
} }
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
} }
@ -67,22 +43,6 @@ body {
box-shadow: inset 1px 0 0 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 { .navbar .form-control {
padding: .75rem 1rem; padding: .75rem 1rem;
} }
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

158
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -2,66 +2,128 @@
layout: examples layout: examples
title: Dashboard Template title: Dashboard Template
extra_css: extra_css:
- "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
- "dashboard.css" - "dashboard.css"
extra_js: extra_js:
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
- src: "dashboard.js" - src: "dashboard.js"
--- ---
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a> <symbol id="calendar3" viewBox="0 0 16 16">
<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"> <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
<span class="navbar-toggler-icon"></span> <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
<symbol id="door-closed" viewBox="0 0 16 16">
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
</symbol>
<symbol id="file-earmark" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</symbol>
<symbol id="file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</symbol>
<symbol id="gear-wide-connected" viewBox="0 0 16 16">
<path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/>
</symbol>
<symbol id="graph-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
</symbol>
<symbol id="house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</symbol>
<symbol id="list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/>
</symbol>
<symbol id="plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="puzzle" viewBox="0 0 16 16">
<path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/>
</symbol>
<symbol id="search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</symbol>
</svg>
<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Company name</a>
<ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
<svg class="bi"><use xlink:href="#search"/></svg>
</button> </button>
<input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> </li>
<div class="navbar-nav"> <li class="nav-item text-nowrap">
<div class="nav-item text-nowrap"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<a class="nav-link px-3" href="#">Sign out</a> <svg class="bi"><use xlink:href="#list"/></svg>
</div> </button>
</li>
</ul>
<div id="navbarSearch" class="navbar-search w-100 collapse">
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
</div> </div>
</header> </header>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse"> <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="position-sticky pt-3 sidebar-sticky"> <div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#house-fill"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="shopping-cart" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#cart"/></svg>
Products Products
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="users" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#people"/></svg>
Customers Customers
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="bar-chart-2" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#graph-up"/></svg>
Reports Reports
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="layers" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#puzzle"/></svg>
Integrations Integrations
</a> </a>
</li> </li>
@ -70,37 +132,55 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span> <span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> <a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Current month Current month
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Last quarter Last quarter
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Social engagement Social engagement
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<span data-feather="file-text" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale Year-end sale
</a> </a>
</li> </li>
</ul> </ul>
<hr class="my-3">
<ul class="nav flex-column mb-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg>
Sign out
</a>
</li>
</ul>
</div>
</div>
</div> </div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <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"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
@ -110,8 +190,8 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<span data-feather="calendar" class="align-text-bottom"></span> <svg class="bi"><use xlink:href="#calendar3"/></svg>
This week This week
</button> </button>
</div> </div>
@ -120,7 +200,7 @@ extra_js:
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2> <h2>Section title</h2>
<div class="table-responsive"> <div class="table-responsive small">
<table class="table table-striped table-sm"> <table class="table table-striped table-sm">
<thead> <thead>
<tr> <tr>

38
site/content/docs/5.3/examples/features/index.html
View File

@ -68,7 +68,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div> </div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
@ -79,7 +79,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div> </div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
@ -90,7 +90,7 @@ body_class: ""
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div> </div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
@ -110,7 +110,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary"> <a href="#" class="btn btn-primary">
Primary button Primary button
@ -122,7 +122,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary"> <a href="#" class="btn btn-primary">
Primary button Primary button
@ -134,7 +134,7 @@ body_class: ""
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary"> <a href="#" class="btn btn-primary">
Primary button Primary button
@ -224,56 +224,56 @@ body_class: ""
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
@ -287,7 +287,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"> <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="col d-flex flex-column align-items-start gap-2"> <div class="col d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn btn-primary btn-lg">Primary button</a> <a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div> </div>
@ -300,7 +300,7 @@ body_class: ""
<use xlink:href="#collection" /> <use xlink:href="#collection" />
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
@ -310,7 +310,7 @@ body_class: ""
<use xlink:href="#gear-fill" /> <use xlink:href="#gear-fill" />
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
@ -320,7 +320,7 @@ body_class: ""
<use xlink:href="#speedometer" /> <use xlink:href="#speedometer" />
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
@ -330,7 +330,7 @@ body_class: ""
<use xlink:href="#table" /> <use xlink:href="#table" />
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>

1
site/content/docs/5.3/examples/grid/index.html
View File

@ -4,7 +4,6 @@ title: Grid Template
extra_css: extra_css:
- "grid.css" - "grid.css"
body_class: "py-4" body_class: "py-4"
include_js: false
--- ---
<main> <main>

20
site/content/docs/5.3/examples/headers/index.html
View File

@ -139,7 +139,7 @@ body_class: ""
</form> </form>
<div class="dropdown text-end"> <div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a> </a>
<ul class="dropdown-menu text-small"> <ul class="dropdown-menu text-small">
@ -179,7 +179,7 @@ body_class: ""
</form> </form>
<div class="flex-shrink-0 dropdown"> <div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a> </a>
<ul class="dropdown-menu text-small shadow"> <ul class="dropdown-menu text-small shadow">
@ -210,15 +210,15 @@ body_class: ""
<nav class="py-2 bg-body-tertiary border-bottom"> <nav class="py-2 bg-body-tertiary border-bottom">
<div class="container d-flex flex-wrap"> <div class="container d-flex flex-wrap">
<ul class="nav me-auto"> <ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
</ul> </ul>
<ul class="nav"> <ul class="nav">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -237,7 +237,7 @@ body_class: ""
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<header> <header>
<div class="px-3 py-2 text-bg-dark"> <div class="px-3 py-2 text-bg-dark border-bottom">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">

3
site/content/docs/5.3/examples/jumbotron/index.html
View File

@ -1,13 +1,12 @@
--- ---
layout: examples layout: examples
title: Jumbotron example title: Jumbotron example
include_js: false
--- ---
<main> <main>
<div class="container py-4"> <div class="container py-4">
<header class="pb-3 mb-4 border-bottom"> <header class="pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Jumbotron example</span> <span class="fs-4">Jumbotron example</span>
</a> </a>

3
site/content/docs/5.3/examples/pricing/index.html
View File

@ -3,7 +3,6 @@ layout: examples
title: Pricing example title: Pricing example
extra_css: extra_css:
- "pricing.css" - "pricing.css"
include_js: false
--- ---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@ -30,7 +29,7 @@ include_js: false
</div> </div>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1> <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
<p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div> </div>
</header> </header>

2
site/content/docs/5.3/examples/pricing/pricing.css
View File

@ -1,5 +1,5 @@
body { body {
background-image: linear-gradient(180deg, var(--bs-body-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
} }
.container { .container {

111
site/content/docs/5.3/examples/product/index.html
View File

@ -5,27 +5,68 @@ extra_css:
- "product.css" - "product.css"
--- ---
<header class="site-header sticky-top py-1"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<nav class="container d-flex flex-column flex-md-row justify-content-between"> <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
<a class="py-2" href="#" aria-label="Product"> <circle cx="12" cy="12" r="10"/>
<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> <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"/>
</symbol>
<symbol id="cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</symbol>
</svg>
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand d-md-none" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
Aperture
</a> </a>
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation">
<a class="py-2 d-none d-md-inline-block" href="#">Product</a> <span class="navbar-toggler-icon"></span>
<a class="py-2 d-none d-md-inline-block" href="#">Features</a> </button>
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a> <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel">
<a class="py-2 d-none d-md-inline-block" href="#">Support</a> <div class="offcanvas-header">
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a> <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5>
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</nav> </div>
</header> <div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg>
</a></li>
</ul>
</div>
</div>
</div>
</nav>
<main> <main>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary"> <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
<div class="col-md-5 p-lg-5 mx-auto my-5"> <div class="col-md-6 p-lg-5 mx-auto my-5">
<h1 class="display-4 fw-normal">Punny headline</h1> <h1 class="display-3 fw-bold">Designed for engineers</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> <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
<a class="btn btn-outline-secondary" href="#">Coming soon</a> <div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#">
Learn more
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
<a class="icon-link" href="#">
Buy
<svg class="bi"><use xlink:href="#chevron-right"/></svg>
</a>
</div>
</div> </div>
<div class="product-device shadow-sm d-none d-md-block"></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 class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
@ -109,39 +150,39 @@ extra_css:
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>Features</h5> <h5>Features</h5>
<ul class="list-unstyled text-small"> <ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Cool stuff</a></li> <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li><a class="link-secondary" href="#">Random feature</a></li> <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
<li><a class="link-secondary" href="#">Team feature</a></li> <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
<li><a class="link-secondary" href="#">Stuff for developers</a></li> <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li><a class="link-secondary" href="#">Another one</a></li> <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
<li><a class="link-secondary" href="#">Last time</a></li> <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
</ul> </ul>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>Resources</h5> <h5>Resources</h5>
<ul class="list-unstyled text-small"> <ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Resource name</a></li> <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
<li><a class="link-secondary" href="#">Resource</a></li> <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
<li><a class="link-secondary" href="#">Another resource</a></li> <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
<li><a class="link-secondary" href="#">Final resource</a></li> <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
</ul> </ul>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>Resources</h5> <h5>Resources</h5>
<ul class="list-unstyled text-small"> <ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Business</a></li> <li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
<li><a class="link-secondary" href="#">Education</a></li> <li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
<li><a class="link-secondary" href="#">Government</a></li> <li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
<li><a class="link-secondary" href="#">Gaming</a></li> <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
</ul> </ul>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>About</h5> <h5>About</h5>
<ul class="list-unstyled text-small"> <ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Team</a></li> <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
<li><a class="link-secondary" href="#">Locations</a></li> <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
<li><a class="link-secondary" href="#">Privacy</a></li> <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
<li><a class="link-secondary" href="#">Terms</a></li> <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
</ul> </ul>
</div> </div>
</div> </div>

5
site/content/docs/5.3/examples/product/product.css
View File

@ -2,6 +2,11 @@
max-width: 960px; max-width: 960px;
} }
.icon-link > .bi {
width: .75em;
height: .75em;
}
/* /*
* Custom translucent site header * Custom translucent site header
*/ */

12
site/content/docs/5.3/examples/sign-in/index.html
View File

@ -3,8 +3,7 @@ layout: examples
title: Signin Template title: Signin Template
extra_css: extra_css:
- "sign-in.css" - "sign-in.css"
body_class: "text-center" body_class: "d-flex align-items-center py-4 bg-body-tertiary"
include_js: false
--- ---
<main class="form-signin w-100 m-auto"> <main class="form-signin w-100 m-auto">
@ -21,12 +20,13 @@ include_js: false
<label for="floatingPassword">Password</label> <label for="floatingPassword">Password</label>
</div> </div>
<div class="checkbox mb-3"> <div class="form-check text-start my-3">
<label> <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
<input type="checkbox" value="remember-me"> Remember me <label class="form-check-label" for="flexCheckDefault">
Remember me
</label> </label>
</div> </div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p> <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
</form> </form>
</main> </main>

10
site/content/docs/5.3/examples/sign-in/sign-in.css
View File

@ -3,17 +3,9 @@ body {
height: 100%; height: 100%;
} }
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin { .form-signin {
max-width: 330px; max-width: 330px;
padding: 15px; padding: 1rem;
} }
.form-signin .form-floating:focus-within { .form-signin .form-floating:focus-within {

1
site/content/docs/5.3/examples/sticky-footer/index.html
View File

@ -5,7 +5,6 @@ extra_css:
- "sticky-footer.css" - "sticky-footer.css"
html_class: "h-100" html_class: "h-100"
body_class: "d-flex flex-column h-100" body_class: "d-flex flex-column h-100"
include_js: false
--- ---
<!-- Begin page content --> <!-- Begin page content -->

2
site/layouts/_default/examples.html
View File

@ -153,7 +153,6 @@
{{ .Content }} {{ .Content }}
{{ if ne .Page.Params.include_js false -}}
{{- if eq hugo.Environment "production" -}} {{- if eq hugo.Environment "production" -}}
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script> <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script>
{{- else -}} {{- else -}}
@ -163,6 +162,5 @@
{{ range .Page.Params.extra_js -}} {{ range .Page.Params.extra_js -}}
<script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script> <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
{{- end -}} {{- end -}}
{{- end }}
</body> </body>
</html> </html>