2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00

Docs: replace CSS by utilities in examples (#35699)

* Drop .opacity-50 and .opacity-75 redefinition in examples

* Drop unused .card-img-right from blog example CSS files

* Use line-height utilities when possible

* Use rounded-* utilities in examples

* Replace .nav-underline by .nav-scroller and use it in examples.html default

* Use .mb-1 for .blog-post-title

* Remove unused CSS rule and use .fw-* utilities for carousels examples

* Use utilities for cheatsheet examples

* Extract some CSS to utilities for .nav-masthead .nav-link in cover example

* Dashboard group of minor modifications

* Dropdowns example: refactoring

* Dropdowns example refactoring: fix linting by removing selector by id

* Features example refactoring

* Headers example refactoring

* List groups example refactoring

* Sidebars example refactoring

* Sign-in example refactoring

* Starter template refactoring

* Fix RTL examples

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Julien Déramond
2022-02-23 19:31:18 +01:00
committed by GitHub
parent 36765912c6
commit 333d89e498
36 changed files with 262 additions and 436 deletions
@@ -23,48 +23,48 @@ direction: rtl
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">الجداول</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">النماذج البيانية</a></li>
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">الأحجام</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">مجموعة الإدخال</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">التحقق</a></li>
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">الشارة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">مجموعة الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">البطاقة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">شرائح العرض</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">القوائم المنسدلة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">مجموعة العناصر</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">الصندوق العائم</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">شريط التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">ترقيم الصفحات</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">الصناديق المنبثقة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">شريط التقدم</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">المخطوطة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">الدوائر المتحركة</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">الإشعارات</a></li>
<li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">التلميحات</a></li>
</ul>
</li>
</ul>
@@ -1441,7 +1441,7 @@ direction: rtl
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>