Bootstrap 4 Navs
قوائم التنقل
إذا كنت ترغب في إنشاء قائمة أفقية بسيطة ، فأضف
.navالفصل إلى <ul>عنصر ، متبوعًا .nav-item
بكل فئة <li>وأضف .nav-linkالفصل إلى روابطهم:
مثال
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
محاذاة التنقل
أضف .justify-content-centerالفصل لتوسيط التنقل ، والفصل .justify-content-endلمحاذاة التنقل لليمين.
مثال
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
التنقل العمودي
أضف .flex-columnالفصل لإنشاء تنقل عمودي:
مثال
<ul class="nav
flex-column">
نوافذ التبويب
حول قائمة التنقل إلى علامات تبويب تنقل مع .nav-tabsالفصل. أضف .activeالفصل إلى الرابط النشط / الحالي. إذا كنت تريد أن تكون علامات التبويب قابلة للتبديل ، فراجع المثال الأخير في هذه الصفحة.
مثال
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
حبوب
حوّل قائمة التنقل إلى أقراص تنقل مع .nav-pillsالفصل. إذا كنت تريد أن تكون الأقراص قابلة للتبديل ، فراجع المثال الأخير في هذه الصفحة.
مثال
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
علامات التبويب / حبوب منع الحمل المبررة
ضبط علامات التبويب / الأقراص مع .nav-justifiedالفئة (عرض متساوٍ):
مثال
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
حبوب منع الحمل مع القائمة المنسدلة
مثال
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
علامات التبويب مع القائمة المنسدلة
مثال
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
علامات تبويب ديناميكية / قابلة للتبديل
الصفحة الرئيسية
الألم في حد ذاته مهم ، لكن الألم يزداد عن طريق عملية شد الدهون ، لكنني أعطيها الوقت لخفضها حتى أقوم ببعض الأعمال الرائعة والألم.
لجعل علامات التبويب قابلة للتبديل ، أضف data-toggle="tab"السمة إلى كل رابط. ثم أضف .tab-paneفصلًا بمعرف فريد لكل علامة تبويب وقم بلفها داخل
<div>عنصر مع الفصل .tab-content.
إذا كنت تريد أن تتلاشى علامات التبويب للداخل والخارج عند النقر عليها ، فأضف
.fadeالفصل إلى .tab-pane:
مثال
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
حبوب قابلة للتبديل / ديناميكية
الصفحة الرئيسية
الألم في حد ذاته مهم ، لكن الألم يزداد عن طريق عملية شد الدهون ، لكنني أعطيها الوقت لخفضها حتى أقوم ببعض الأعمال الرائعة والألم.
ينطبق نفس القانون على حبوب منع الحمل ؛ فقط قم بتغيير سمة data-toggle إلى data-toggle="pill":
مثال
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
إكمال مرجع Bootstrap 4 Nav
للحصول على مرجع كامل لجميع خيارات علامات التبويب والأساليب والأحداث ، انتقل إلى مرجع علامة تبويب Bootstrap 4 JS .