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

منو ناوبری

اگر می خواهید یک منوی افقی ساده ایجاد کنید، کلاس .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>
مشاهده مثال

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز