diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/examples/cheatsheet-rtl/index.html (renamed from site/content/docs/5.2/examples/cheatsheet-rtl/index.html) | 56 |
1 files changed, 30 insertions, 26 deletions
diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html index a057998..8ffbb57 100644 --- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -5,7 +5,7 @@ extra_css: - "../cheatsheet/cheatsheet.rtl.css" extra_js: - src: "../cheatsheet/cheatsheet.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" direction: rtl --- @@ -18,7 +18,7 @@ direction: rtl <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a> </div> </header> -<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> +<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2"> <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2> <nav class="small" id="toc"> <ul class="list-unstyled"> @@ -623,36 +623,36 @@ direction: rtl {{< example show_markup="false" >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> - <h4 class="accordion-header" id="headingOne"> + <h4 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> عنصر المطوية الأول </button> </h4> - <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingTwo"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> عنصر المطوية الثاني </button> </h4> - <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingThree"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> عنصر المطوية الثالث </button> </h4> - <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> @@ -821,7 +821,7 @@ direction: rtl <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> <a href="#" class="btn btn-primary">اذهب لمكان ما</a> </div> - <div class="card-footer text-muted"> + <div class="card-footer text-body-secondary"> منذ يومان </div> </div> @@ -853,7 +853,7 @@ direction: rtl <div class="card-body"> <h5 class="card-title">عنوان البطاقة</h5> <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> - <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p> + <p class="card-text"><small class="text-body-secondary">آخر تحديث منذ 3 دقائق</small></p> </div> </div> </div> @@ -1221,7 +1221,7 @@ direction: rtl <div> {{< example show_markup="false" >}} - <nav class="navbar navbar-expand-lg bg-light"> + <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" @@ -1397,27 +1397,31 @@ direction: rtl <div> {{< example show_markup="false" >}} - <div class="progress mb-3"> - <div class="progress-bar" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> + <div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar">0%</div> </div> - <div class="progress mb-3"> - <div class="progress-bar bg-success w-25" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> + <div class="progress mb-3" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-success w-25">25%</div> </div> - <div class="progress mb-3"> - <div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> + <div class="progress mb-3" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar text-bg-info w-50">50%</div> </div> - <div class="progress mb-3"> - <div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> + <div class="progress mb-3" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar text-bg-warning w-75">75%</div> </div> - <div class="progress"> - <div class="progress-bar bg-danger w-100" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> + <div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-danger w-100">100%</div> </div> {{< /example >}} {{< example show_markup="false" >}} - <div class="progress"> - <div class="progress-bar" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> - <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-stacked"> + <div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar"></div> + </div> + <div class="progress" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div> + </div> </div> {{< /example >}} </div> @@ -1430,7 +1434,7 @@ direction: rtl <div> <div class="bd-example"> - <nav id="navbar-example2" class="navbar bg-light px-3"> + <nav id="navbar-example2" class="navbar bg-body-tertiary px-3"> <a class="navbar-brand" href="#">شريط التنقل</a> <ul class="nav nav-pills"> <li class="nav-item"> @@ -1506,7 +1510,7 @@ direction: rtl <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">قبل 11 دقيقة</small> + <small class="text-body-secondary">قبل 11 دقيقة</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> </div> <div class="toast-body"> |