ناوبری در Bootstrap ورژن 4

یادگیری Bootstrap

تعداد بازدید : 2317

تاریخ و ساعت انتشار : سه شنبه 10 بهمن 1396 00:01

منو ناوبری

اگر می خواهید یک منوی افقی ساده ایجاد کنید، کلاس .nav را به یک عنصر <ul> اضافه کنید، سپس عنصر 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">

مشاهده مثال

منو عمودی

برای ایجاد یک نوبت عمودی کلاس class-column را اضافه کنید:

ناوبری عمودی

<ul class="nav flex-column">

مشاهده مثال

منو را به زبانه های ناوبری با کلاس .nav-tabs غیرفعال کنید. کلاس فعال را به لینک فعال / فعلی اضافه کنید. اگر می خواهید زبانه ها را فعال کنید، آخرین مثال را در این صفحه ببینید.

تب

 <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>

مشاهده مثال

Pills

منوی را به pill های ناوبری با کلاس .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>

مشاهده مثال

PILL با منوی کشویی

تب کشویی

 <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-tab با یک شناسه منحصر به فرد برای هر برگه اضافه کنید و آنها را داخل عنصر <div> با کلاس tab-content قرار دهید.

تب داینامیک

<!-- 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 active container" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

مشاهده مثال

PILL های داینامیک

همان کد برای PILL ها اعمال می شود؛ فقط ویژگی ویژگی 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 active container" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی