قوائم التنقل العمودية الجانبية | قوائم التنقل Navs في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحتاج صفحات إعدادات الحساب والفهارس الجانبية للتوثيق إلى رصّ الروابط عمودياً فوق بعضها. أضف الكلاس .flex-column بجانب .nav ليصبح المحور المرن رأسياً ويمتد كل رابط على كامل عرض القائمة الجانبية.

ويمكنك دمج الاستجابة المتدرجة بذكاء عبر .flex-column .flex-sm-row؛ فتتراص الروابط عمودياً على الهواتف الضيقة لسهولة النقر بالإبهام، ثم تتحول تلقائياً إلى صف أفقي بدءاً من عرض 576px فأعلى.

الصف 2 كود برمجي

HTML

<nav class="nav flex-column flex-sm-row">
  <a class="nav-link active" href="#">Profile</a>
  <a class="nav-link" href="#">Billing</a>
  <a class="nav-link disabled"
    aria-disabled="true">Audit</a>
</nav>

جرّب بنفسك

الصف 3 ملاحظة هامة

Vertical Stacked Navs قوائم التنقل العمودية الجانبية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (قوائم التنقل Navs في بوتستراب 5)