القوائم والاقتباسات

<!-- قائمة غير مرتبة افتراضية --> <ul> <li>العنصر الأول</li> <li>العنصر الثاني</li> <li>العنصر الثالث</li> </ul> <!-- قائمة غير منسقة --> <ul class="list-unstyled"> <li>العنصر الأول (بدون نقطة)</li> <li>العنصر الثاني (بدون نقطة)</li> <li>العنصر الثالث (بدون نقطة)</li> </ul> <!-- قائمة متداخلة غير منسقة --> <ul class="list-unstyled"> <li>عنصر أب</li> <li> عنصر أب <ul> <li>العنصر الفرعي المتداخل لا يزال لديه نقطة</li> <li>عنصر فرعي متداخل آخر</li> </ul> </li> </ul>

<!-- قائمة مضمنة --> <ul class="list-inline"> <li class="list-inline-item">العنصر 1</li> <li class="list-inline-item">العنصر 2</li> <li class="list-inline-item">العنصر 3</li> </ul> <!-- قائمة مضمنة مع فواصل --> <ul class="list-inline text-muted"> <li class="list-inline-item">الرئيسية</li> <li class="list-inline-item">&middot;</li> <li class="list-inline-item">من نحن</li> <li class="list-inline-item">&middot;</li> <li class="list-inline-item">اتصل بنا</li> </ul> <!-- قائمة مضمنة بنمط التنقل --> <ul class="list-inline mb-0"> <li class="list-inline-item"><a href="#">الخصوصية</a></li> <li class="list-inline-item"><a href="#">الشروط</a></li> <li class="list-inline-item"><a href="#">الدعم</a></li> </ul>

<!-- قائمة وصف قياسية --> <dl> <dt>مصطلح الوصف</dt> <dd>تفاصيل الوصف للمصطلح.</dd> <dt>مصطلح آخر</dt> <dd>مزيد من التفاصيل حول هذا المصطلح.</dd> <dt>مصطلح بتفاصيل متعددة</dt> <dd>سطر التفاصيل الأول</dd> <dd>سطر التفاصيل الثاني</dd> </dl> <!-- قائمة وصف أفقية --> <dl class="row"> <dt class="col-sm-3">الاسم</dt> <dd class="col-sm-9">أحمد محمد</dd> <dt class="col-sm-3">البريد الإلكتروني</dt> <dd class="col-sm-9">ahmad@example.com</dd> <dt class="col-sm-3">الهاتف</dt> <dd class="col-sm-9">+966 50 123 4567</dd> <dt class="col-sm-3 text-truncate">مصطلح طويل جداً</dt> <dd class="col-sm-9">هذا وصف أطول</dd> </dl> <!-- قائمة وصف منسقة --> <dl class="row border-bottom pb-2 mb-2"> <dt class="col-sm-4 fw-bold text-primary">المنتج</dt> <dd class="col-sm-8 mb-0">دورة Bootstrap 5</dd> </dl> <dl class="row border-bottom pb-2 mb-2"> <dt class="col-sm-4 fw-bold text-primary">السعر</dt> <dd class="col-sm-8 mb-0">199 ريال</dd> </dl>

<!-- اقتباس أساسي --> <blockquote class="blockquote"> <p>اقتباس معروف، موجود في عنصر blockquote.</p> </blockquote> <!-- اقتباس مع استشهاد --> <figure> <blockquote class="blockquote"> <p>النجاح ليس نهائياً، والفشل ليس قاتلاً: الشجاعة للاستمرار هي ما يهم.</p> </blockquote> <figcaption class="blockquote-footer"> ونستون تشرشل في <cite title="عنوان المصدر">عنوان المصدر</cite> </figcaption> </figure> <!-- اقتباس في الوسط --> <figure class="text-center"> <blockquote class="blockquote"> <p>أفضل طريقة للتنبؤ بالمستقبل هي اختراعه.</p> </blockquote> <figcaption class="blockquote-footer"> آلان كاي </figcaption> </figure> <!-- اقتباس منسق --> <figure class="border-start border-primary border-4 ps-3 py-2"> <blockquote class="blockquote mb-0"> <p>التصميم ليس فقط كيف يبدو ويشعر به. التصميم هو كيف يعمل.</p> </blockquote> <figcaption class="blockquote-footer mt-2"> ستيف جوبز </figcaption> </figure>

<!-- شفرة مضمنة --> <p> استخدم فئة <code>.container</code> لإنشاء حاوية. يعرض عنصر <code>&lt;code&gt;</code> الشفرة بشكل مضمن. </p> <!-- كتلة شفرة مع Pre --> <pre><code>&lt;div class="container"&gt; &lt;h1&gt;مرحباً بالعالم&lt;/h1&gt; &lt;/div&gt;</code></pre> <!-- كتلة شفرة قابلة للتمرير --> <pre class="pre-scrollable"><code> <!-- شفرة طويلة جداً سيتم تمريرها --> function exampleFunction() { // السطر 1 // السطر 2 // ... أسطر كثيرة ... // السطر 50 } </code></pre> <!-- إدخال لوحة المفاتيح --> <p> اضغط <kbd>Ctrl</kbd> + <kbd>C</kbd> للنسخ. استخدم <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> للحفظ. </p> <!-- مخرجات نموذجية --> <p> <samp>هذا النص يُقصد به أن يُعامل كمخرجات نموذجية من برنامج كمبيوتر.</samp> </p> <!-- المتغيرات --> <p>المعادلة هي <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

<!-- قائمة بالأيقونات --> <ul class="list-unstyled"> <li class="mb-2"> <i class="bi bi-check-circle-fill text-success me-2"></i> الميزة الأولى مع أيقونة </li> <li class="mb-2"> <i class="bi bi-check-circle-fill text-success me-2"></i> الميزة الثانية مع أيقونة </li> <li class="mb-2"> <i class="bi bi-check-circle-fill text-success me-2"></i> الميزة الثالثة مع أيقونة </li> </ul> <!-- قائمة مرقمة بشارات --> <ul class="list-unstyled"> <li class="d-flex align-items-start mb-3"> <span class="badge bg-primary me-3">1</span> <div> <strong>الخطوة الأولى</strong> <p class="mb-0 text-muted">وصف الخطوة الأولى</p> </div> </li> <li class="d-flex align-items-start mb-3"> <span class="badge bg-primary me-3">2</span> <div> <strong>الخطوة الثانية</strong> <p class="mb-0 text-muted">وصف الخطوة الثانية</p> </div> </li> </ul> <!-- قائمة بنمط الجدول الزمني --> <ul class="list-unstyled border-start border-2 border-primary ps-3"> <li class="mb-3 position-relative"> <strong>2024</strong> <p class="mb-0">تحقيق إنجاز كبير</p> </li> <li class="mb-3 position-relative"> <strong>2023</strong> <p class="mb-0">إطلاق المشروع بنجاح</p> </li> </ul>

<div class="container py-5"> <h2 class="mb-4">توثيق API</h2> <!-- قائمة المعاملات --> <h3 class="h5 mb-3">معاملات الطلب</h3> <dl class="row"> <dt class="col-sm-3"><code>api_key</code></dt> <dd class="col-sm-9"> <span class="badge bg-danger">مطلوب</span> مفتاح المصادقة API الخاص بك </dd> <dt class="col-sm-3"><code>limit</code></dt> <dd class="col-sm-9"> <span class="badge bg-secondary">اختياري</span> عدد النتائج (افتراضي: 10) </dd> </dl> <!-- مثال الطلب --> <h3 class="h5 mb-3 mt-4">مثال الطلب</h3> <pre><code>GET /api/users?api_key=YOUR_KEY&amp;limit=20</code></pre> <!-- قائمة الميزات --> <h3 class="h5 mb-3 mt-4">الميزات</h3> <ul class="list-unstyled"> <li class="mb-2"> <i class="bi bi-check2 text-success me-2"></i> سريع وموثوق </li> <li class="mb-2"> <i class="bi bi-check2 text-success me-2"></i> مصادقة آمنة </li> <li class="mb-2"> <i class="bi bi-check2 text-success me-2"></i> توثيق شامل </li> </ul> <!-- ملاحظة مهمة --> <figure class="mt-4 bg-light p-3 border-start border-warning border-4"> <blockquote class="blockquote mb-0"> <p>احتفظ دائماً بمفتاح API آمناً. لا تعرضه أبداً في شفرة من جانب العميل أو المستودعات العامة.</p> </blockquote> </figure> </div>