extra_css:
- "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
- "../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">
- <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="col-4 pt-1">
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
</div>
<div class="col-4 text-center">
- <a class="blog-header-logo text-dark" href="#">كبير</a>
+ <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="بحث">
</div>
</header>
- <div class="nav-scroller py-1 mb-2">
- <nav class="nav d-flex justify-content-between">
- <a class="p-2 link-secondary" href="#">العالم</a>
- <a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
- <a class="p-2 link-secondary" href="#">التقنية</a>
- <a class="p-2 link-secondary" href="#">التصميم</a>
- <a class="p-2 link-secondary" href="#">الحضارة</a>
- <a class="p-2 link-secondary" href="#">المال والأعمال</a>
- <a class="p-2 link-secondary" href="#">السياسة</a>
- <a class="p-2 link-secondary" href="#">الرأي العام</a>
- <a class="p-2 link-secondary" href="#">العلوم</a>
- <a class="p-2 link-secondary" href="#">الصحة</a>
- <a class="p-2 link-secondary" href="#">الموضة</a>
- <a class="p-2 link-secondary" href="#">السفر</a>
+ <div class="nav-scroller py-1 mb-3 border-bottom">
+ <nav class="nav nav-underline justify-content-between">
+ <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a>
</nav>
</div>
</div>
<main class="container">
- <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
- <div class="col-md-6 px-0">
+ <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+ <div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
- <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
+ <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p>
</div>
</div>
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
- <strong class="d-inline-block mb-2 text-primary">العالم</strong>
+ <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong>
<h3 class="mb-0">مشاركة مميزة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 12</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
- <a href="#" class="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 class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
- <strong class="d-inline-block mb-2 text-success">التصميم</strong>
+ <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong>
<h3 class="mb-0">عنوان الوظيفة</h3>
<div class="mb-1 text-body-secondary">نوفمبر 11</div>
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
- <a href="#" class="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 class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
</div>
</div>
- <div class="row">
+ <div class="row g-5">
<div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
من Firehose
</h3>
<article class="blog-post">
- <h2 class="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>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
<hr>
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
- <blockquote>
+ <blockquote class="blockquote">
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
</blockquote>
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
</article>
<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>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
</article>
<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>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
</div>
+ <div>
+ <h4 class="fst-italic">المشاركات الاخيرة</h4>
+ <ul class="list-unstyled">
+ <li>
+ <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+ {{< 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">
<h4 class="fst-italic">الأرشيف</h4>
<ol class="list-unstyled mb-0">
</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>
+ <p class="mb-0">
<a href="#">عد إلى الأعلى</a>
</p>
</footer>
/* stylelint-disable stylistic/selector-list-comma-newline-after */
-.blog-header {
- border-bottom: 1px solid #e5e5e5;
-}
-
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
font-size: 2.25rem;
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}
-.display-4 {
- font-size: 2.5rem;
-}
-@media (min-width: 768px) {
- .display-4 {
- font-size: 3rem;
- }
-}
-
.flex-auto {
flex: 0 0 auto;
}
.blog-post {
margin-bottom: 4rem;
}
-.blog-post-title {
- font-size: 2.5rem;
-}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
-
-/*
- * Footer
- */
-.blog-footer {
- padding: 2.5rem 0;
- color: #727272;
- text-align: center;
- background-color: #f9f9f9;
- border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
- margin-bottom: 0;
-}
/* stylelint-disable stylistic/selector-list-comma-newline-after */
-.blog-header {
- border-bottom: 1px solid #e5e5e5;
-}
-
.blog-header-logo {
font-family: Amiri, Georgia, "Times New Roman", serif;
font-size: 2.25rem;
font-family: Amiri, Georgia, "Times New Roman", serif;
}
-.display-4 {
- font-size: 2.5rem;
-}
-@media (min-width: 768px) {
- .display-4 {
- font-size: 3rem;
- }
-}
-
.flex-auto {
flex: 0 0 auto;
}
.blog-post {
margin-bottom: 4rem;
}
-.blog-post-title {
- font-size: 2.5rem;
-}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
-
-/*
- * Footer
- */
-.blog-footer {
- padding: 2.5rem 0;
- color: #727272;
- text-align: center;
- background-color: #f9f9f9;
- border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
- margin-bottom: 0;
-}
extra_css:
- "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
- "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">
- <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="col-4 pt-1">
<a class="link-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
- <a class="blog-header-logo text-body-emphasis" href="#">Large</a>
+ <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
</div>
</header>
- <div class="nav-scroller py-1 mb-2">
- <nav class="nav d-flex justify-content-between">
- <a class="p-2 link-secondary" href="#">World</a>
- <a class="p-2 link-secondary" href="#">U.S.</a>
- <a class="p-2 link-secondary" href="#">Technology</a>
- <a class="p-2 link-secondary" href="#">Design</a>
- <a class="p-2 link-secondary" href="#">Culture</a>
- <a class="p-2 link-secondary" href="#">Business</a>
- <a class="p-2 link-secondary" href="#">Politics</a>
- <a class="p-2 link-secondary" href="#">Opinion</a>
- <a class="p-2 link-secondary" href="#">Science</a>
- <a class="p-2 link-secondary" href="#">Health</a>
- <a class="p-2 link-secondary" href="#">Style</a>
- <a class="p-2 link-secondary" href="#">Travel</a>
+ <div class="nav-scroller py-1 mb-3 border-bottom">
+ <nav class="nav nav-underline justify-content-between">
+ <a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
</nav>
</div>
</div>
<main class="container">
- <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
- <div class="col-md-6 px-0">
+ <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+ <div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
- <p class="lead mb-0"><a href="#" class="text-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 class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
- <strong class="d-inline-block mb-2 text-primary">World</strong>
+ <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-body-secondary">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="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 class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
- <strong class="d-inline-block mb-2 text-success">Design</strong>
+ <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-body-secondary">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="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 class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
</h3>
<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>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>
</article>
<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>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>
</article>
<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>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 class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div>
+ <div>
+ <h4 class="fst-italic">Recent posts</h4>
+ <ul class="list-unstyled">
+ <li>
+ <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+ {{< 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">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
</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>
+ <p class="mb-0">
<a href="#">Back to top</a>
</p>
</footer>
<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">
<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>
<div class="container">
<div class="carousel-caption text-start">
<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>
</div>
</div>
<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">
<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>
<div class="container">
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
- <p>Some representative placeholder content for the first slide of the carousel.</p>
+ <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
- "cover.css"
html_class: "h-100"
body_class: "d-flex h-100 text-center text-bg-dark"
-include_js: false
---
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
(() => {
'use strict'
- feather.replace({ 'aria-hidden': 'true' })
-
// Graphs
const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
title: قالب لوحة القيادة
direction: rtl
extra_css:
+ - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
- "../dashboard/dashboard.rtl.css"
extra_js:
- - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
- integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
- src: "dashboard.js"
---
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
- <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a>
- <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
- <span class="navbar-toggler-icon"></span>
- </button>
- <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
- <div class="navbar-nav">
- <div class="nav-item text-nowrap">
- <a class="nav-link px-3" href="#">تسجيل الخروج</a>
- </div>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+ <symbol id="calendar3" viewBox="0 0 16 16">
+ <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+ <path 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>
+ </li>
+ <li class="nav-item text-nowrap">
+ <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
+ <svg class="bi"><use xlink:href="#list"/></svg>
+ </button>
+ </li>
+ </ul>
+
+ <div id="navbarSearch" class="navbar-search w-100 collapse">
+ <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
</div>
</header>
<div class="container-fluid">
<div class="row">
- <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
- <div class="position-sticky pt-3 sidebar-sticky">
- <ul class="nav flex-column">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">
- <span data-feather="home" class="align-text-bottom"></span>
- لوحة القيادة
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file" class="align-text-bottom"></span>
- الطلبات
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="shopping-cart" class="align-text-bottom"></span>
- المنتجات
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="users" class="align-text-bottom"></span>
- الزبائن
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="bar-chart-2" class="align-text-bottom"></span>
- التقارير
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="layers" class="align-text-bottom"></span>
- التكاملات
- </a>
- </li>
- </ul>
+ <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+ <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">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
+ <svg class="bi"><use xlink:href="#house-fill"/></svg>
+ لوحة القيادة
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+ الطلبات
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#cart"/></svg>
+ المنتجات
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#people"/></svg>
+ الزبائن
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#graph-up"/></svg>
+ التقارير
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#puzzle"/></svg>
+ التكاملات
+ </a>
+ </li>
+ </ul>
- <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
- <span>التقارير المحفوظة</span>
- <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
- <span data-feather="plus-circle" class="align-text-bottom"></span>
- </a>
- </h6>
- <ul class="nav flex-column mb-2">
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- الشهر الحالي
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- الربع الأخير
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- التفاعل الإجتماعي
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- مبيعات نهاية العام
+ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+ <span>التقارير المحفوظة</span>
+ <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
+ <svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a>
- </li>
- </ul>
+ </h6>
+ <ul class="nav flex-column mb-auto">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ الشهر الحالي
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ الربع الأخير
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ التفاعل الإجتماعي
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ مبيعات نهاية العام
+ </a>
+ </li>
+ </ul>
+
+ <hr class="my-3">
+
+ <ul class="nav flex-column mb-auto">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><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>
- </nav>
+ </div>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div>
- <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
- <span data-feather="calendar" class="align-text-bottom"></span>
+ <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
+ <svg class="bi"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع
</button>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>عنوان القسم</h2>
- <div class="table-responsive">
+ <div class="table-responsive small">
<table class="table table-striped table-sm">
<thead>
<tr>
-body {
- font-size: .875rem;
-}
-
-.feather {
- width: 16px;
- height: 16px;
+.bi {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
}
/*
* Sidebar
*/
-.sidebar {
- position: fixed;
- top: 0;
- /* rtl:raw:
- right: 0;
- */
- bottom: 0;
- /* rtl:remove */
- left: 0;
- z-index: 100; /* Behind the navbar */
- padding: 48px 0 0; /* Height of navbar */
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
- .sidebar {
- top: 5rem;
+@media (min-width: 768px) {
+ .sidebar .offcanvas-lg {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 48px;
+ }
+ .navbar-search {
+ display: block;
}
-}
-
-.sidebar-sticky {
- height: calc(100vh - 48px);
- overflow-x: hidden;
- overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
+ font-size: .875rem;
font-weight: 500;
- color: #333;
-}
-
-.sidebar .nav-link .feather {
- margin-right: 4px;
- color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
- color: inherit;
-}
-
.sidebar-heading {
font-size: .75rem;
}
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
-.navbar .navbar-toggler {
- top: .25rem;
- right: 1rem;
-}
-
.navbar .form-control {
padding: .75rem 1rem;
}
-
-.form-control-dark {
- color: #fff;
- background-color: rgba(255, 255, 255, .1);
- border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
- border-color: transparent;
- box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
-/* globals Chart:false, feather:false */
+/* globals Chart:false */
(() => {
'use strict'
- feather.replace({ 'aria-hidden': 'true' })
-
// Graphs
const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
-body {
- font-size: .875rem;
-}
-
-.feather {
- width: 16px;
- height: 16px;
+.bi {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
}
/*
* Sidebar
*/
-.sidebar {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 100; /* Behind the navbar */
- padding: 48px 0 0; /* Height of navbar */
- box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
-}
-
-@media (max-width: 767.98px) {
- .sidebar {
- top: 5rem;
+@media (min-width: 768px) {
+ .sidebar .offcanvas-lg {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 48px;
+ }
+ .navbar-search {
+ display: block;
}
-}
-
-.sidebar-sticky {
- height: calc(100vh - 48px);
- overflow-x: hidden;
- overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
+ font-size: .875rem;
font-weight: 500;
- color: #333;
-}
-
-.sidebar .nav-link .feather {
- margin-left: 4px;
- color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
-.sidebar .nav-link:hover .feather,
-.sidebar .nav-link.active .feather {
- color: inherit;
-}
-
.sidebar-heading {
font-size: .75rem;
}
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
}
-.navbar .navbar-toggler {
- top: .25rem;
- left: 1rem;
-}
-
.navbar .form-control {
padding: .75rem 1rem;
}
-
-.form-control-dark {
- color: #fff;
- background-color: rgba(255, 255, 255, .1);
- border-color: rgba(255, 255, 255, .1);
-}
-
-.form-control-dark:focus {
- border-color: transparent;
- box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
-}
layout: examples
title: Dashboard Template
extra_css:
+ - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
- "dashboard.css"
extra_js:
- - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
- integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
- src: "dashboard.js"
---
-<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
- <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
- <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
- <div class="navbar-nav">
- <div class="nav-item text-nowrap">
- <a class="nav-link px-3" href="#">Sign out</a>
- </div>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+ <symbol id="calendar3" viewBox="0 0 16 16">
+ <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+ <path 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>
+ </li>
+ <li class="nav-item text-nowrap">
+ <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+ <svg class="bi"><use xlink:href="#list"/></svg>
+ </button>
+ </li>
+ </ul>
+
+ <div id="navbarSearch" class="navbar-search w-100 collapse">
+ <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
</div>
</header>
<div class="container-fluid">
<div class="row">
- <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
- <div class="position-sticky pt-3 sidebar-sticky">
- <ul class="nav flex-column">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">
- <span data-feather="home" class="align-text-bottom"></span>
- Dashboard
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file" class="align-text-bottom"></span>
- Orders
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="shopping-cart" class="align-text-bottom"></span>
- Products
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="users" class="align-text-bottom"></span>
- Customers
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="bar-chart-2" class="align-text-bottom"></span>
- Reports
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="layers" class="align-text-bottom"></span>
- Integrations
- </a>
- </li>
- </ul>
+ <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+ <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">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
+ <svg class="bi"><use xlink:href="#house-fill"/></svg>
+ Dashboard
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark"/></svg>
+ Orders
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#cart"/></svg>
+ Products
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#people"/></svg>
+ Customers
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#graph-up"/></svg>
+ Reports
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#puzzle"/></svg>
+ Integrations
+ </a>
+ </li>
+ </ul>
- <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
- <span>Saved reports</span>
- <a class="link-secondary" href="#" aria-label="Add a new report">
- <span data-feather="plus-circle" class="align-text-bottom"></span>
- </a>
- </h6>
- <ul class="nav flex-column mb-2">
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- Current month
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- Last quarter
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- Social engagement
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">
- <span data-feather="file-text" class="align-text-bottom"></span>
- Year-end sale
+ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+ <span>Saved reports</span>
+ <a class="link-secondary" href="#" aria-label="Add a new report">
+ <svg class="bi"><use xlink:href="#plus-circle"/></svg>
</a>
- </li>
- </ul>
+ </h6>
+ <ul class="nav flex-column mb-auto">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ Current month
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ Last quarter
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ Social engagement
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
+ Year-end sale
+ </a>
+ </li>
+ </ul>
+
+ <hr class="my-3">
+
+ <ul class="nav flex-column mb-auto">
+ <li class="nav-item">
+ <a class="nav-link d-flex align-items-center gap-2" href="#">
+ <svg class="bi"><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>
- </nav>
+ </div>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
- <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
- <span data-feather="calendar" class="align-text-bottom"></span>
+ <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
+ <svg class="bi"><use xlink:href="#calendar3"/></svg>
This week
</button>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
- <div class="table-responsive">
+ <div class="table-responsive small">
<table class="table table-striped table-sm">
<thead>
<tr>
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
- <h3 class="fs-2">Featured title</h3>
+ <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link">
Call to action
<svg class="bi" 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>
<a href="#" class="btn btn-primary">
Primary button
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></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>
<a href="#" class="btn btn-primary">
Primary button
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></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>
<a href="#" class="btn btn-primary">
Primary button
<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>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<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>
</div>
</div>
<div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
<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>
</div>
</div>
<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">
- <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>
<a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div>
<use xlink:href="#collection" />
</svg>
</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>
</div>
<use xlink:href="#gear-fill" />
</svg>
</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>
</div>
<use xlink:href="#speedometer" />
</svg>
</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>
</div>
<use xlink:href="#table" />
</svg>
</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>
</div>
</div>
extra_css:
- "grid.css"
body_class: "py-4"
-include_js: false
---
<main>
</form>
<div class="dropdown text-end">
- <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small">
</form>
<div class="flex-shrink-0 dropdown">
- <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow">
<nav class="py-2 bg-body-tertiary border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
- <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
- <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
- <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
- <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
- <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
</ul>
<ul class="nav">
- <li class="nav-item"><a href="#" class="nav-link link-dark 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">Login</a></li>
+ <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
</ul>
</div>
</nav>
<div class="b-example-divider"></div>
<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="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">
---
layout: examples
title: Jumbotron example
-include_js: false
---
<main>
<div class="container py-4">
<header class="pb-3 mb-4 border-bottom">
- <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+ <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Jumbotron example</span>
</a>
title: Pricing example
extra_css:
- "pricing.css"
-include_js: false
---
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
</div>
<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>
</div>
</header>
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 {
- "product.css"
---
-<header class="site-header sticky-top py-1">
- <nav class="container d-flex flex-column flex-md-row justify-content-between">
- <a class="py-2" href="#" aria-label="Product">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
+<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>
+
+<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 class="py-2 d-none d-md-inline-block" href="#">Tour</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
- <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
- </nav>
-</header>
+ <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel">
+ <div class="offcanvas-header">
+ <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+ </div>
+ <div class="offcanvas-body">
+ <ul class="navbar-nav flex-grow-1 justify-content-between">
+ <li class="nav-item"><a class="nav-link" href="#">
+ <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>
<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">
- <h1 class="display-4 fw-normal">Punny headline</h1>
- <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
- <a class="btn btn-outline-secondary" href="#">Coming soon</a>
+ <div class="col-md-6 p-lg-5 mx-auto my-5">
+ <h1 class="display-3 fw-bold">Designed for engineers</h1>
+ <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
+ <div class="d-flex gap-3 justify-content-center lead fw-normal">
+ <a class="icon-link" href="#">
+ Learn more
+ <svg class="bi"><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 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="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
- <li><a class="link-secondary" href="#">Cool stuff</a></li>
- <li><a class="link-secondary" href="#">Random feature</a></li>
- <li><a class="link-secondary" href="#">Team feature</a></li>
- <li><a class="link-secondary" href="#">Stuff for developers</a></li>
- <li><a class="link-secondary" href="#">Another one</a></li>
- <li><a class="link-secondary" href="#">Last time</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
- <li><a class="link-secondary" href="#">Resource name</a></li>
- <li><a class="link-secondary" href="#">Resource</a></li>
- <li><a class="link-secondary" href="#">Another resource</a></li>
- <li><a class="link-secondary" href="#">Final resource</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
- <li><a class="link-secondary" href="#">Business</a></li>
- <li><a class="link-secondary" href="#">Education</a></li>
- <li><a class="link-secondary" href="#">Government</a></li>
- <li><a class="link-secondary" href="#">Gaming</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
- <li><a class="link-secondary" href="#">Team</a></li>
- <li><a class="link-secondary" href="#">Locations</a></li>
- <li><a class="link-secondary" href="#">Privacy</a></li>
- <li><a class="link-secondary" href="#">Terms</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
+ <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
</ul>
</div>
</div>
max-width: 960px;
}
+.icon-link > .bi {
+ width: .75em;
+ height: .75em;
+}
+
/*
* Custom translucent site header
*/
title: Signin Template
extra_css:
- "sign-in.css"
-body_class: "text-center"
-include_js: false
+body_class: "d-flex align-items-center py-4 bg-body-tertiary"
---
<main class="form-signin w-100 m-auto">
<label for="floatingPassword">Password</label>
</div>
- <div class="checkbox mb-3">
- <label>
- <input type="checkbox" value="remember-me"> Remember me
+ <div class="form-check text-start my-3">
+ <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
+ <label class="form-check-label" for="flexCheckDefault">
+ Remember me
</label>
</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">© 2017–{{< year >}}</p>
</form>
</main>
height: 100%;
}
-body {
- display: flex;
- align-items: center;
- padding-top: 40px;
- padding-bottom: 40px;
- background-color: #f5f5f5;
-}
-
.form-signin {
max-width: 330px;
- padding: 15px;
+ padding: 1rem;
}
.form-signin .form-floating:focus-within {
- "sticky-footer.css"
html_class: "h-100"
body_class: "d-flex flex-column h-100"
-include_js: false
---
<!-- Begin page content -->
{{ .Content }}
- {{ if ne .Page.Params.include_js false -}}
- {{- 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>
- {{- else -}}
- <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
- {{- end }}
-
- {{ range .Page.Params.extra_js -}}
- <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
- {{- end -}}
+ {{- 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>
+ {{- else -}}
+ <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
{{- end }}
+
+ {{ range .Page.Params.extra_js -}}
+ <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
+ {{- end -}}
</body>
</html>
projects / thirdparty / bootstrap.git / commitdiff
