نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه هجدهم (Navs)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه هجدهم (Navs)

آموزش Bootstrap 4 جلسه هجدهم (Navs) از سری آموزش های تک قسمتی است.

کار را شروع میکنیم!!!!!!!!!!!؟؟

 

ساخت یک nav ساده

nav مخفف navigation است به معنی جهت یابی است این نام مخفف نیز برای همین موضوع قرار داده شده است هدف از ساخت Nav ها هدایت و دسترسی سریع است که از جهتی به آنها منو هم گفته میشود. اما ما برای ساخت یک منو ساده یا همان nav باید از کلاس های آماده بوت استرپ استفاده کنیم قبل از هرچیز باید بدانیم که برای ساخت منو ها از ul و li استفاده میشود.

ما کلاس nav را به ul خود میدهیم و کلاس nav-item را به تگ های li میدهیم البته داخل تگ li از تگ a استفاده میشود که به آن کلاس nav-link داده میشود با همین ۳ کلاس و تگ های ul و li و a توانستیم یک nav ساده بسازیم . همچنین اگر بخواهیم هر کدام از گزینه های منو را غیر فعال کنیم کافیست کلاس disabled را به تگ a آن بدهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

موقعیت nav

از آنجایی که بوت استرپ به زبان انگلیسی است حالت پیشفرض آن سمت چپ است اما شما میتوانید آن را وسط چین و یا راست چین کنید از آنجایی که ما میخواهیم این تغییر موقعیت روی کل موارد اعمال شود باید کلاس آن را به تگ ul بدهیم اما چه کلاسی ؟ کلاسی که منو ما را وسط چین میکند justify-content-center و کلاسی که منو ما را به سمت راست میبرد کلاس justify-content-end است به همین راحتی توانستیم جایگاه منو خود را تعیین کنیم برای واضح شدن موضوع از کد زیر کمک بگیرید:

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

 

ساخت منو عمودی

اگر بخواهیم nav عمودی بسازیم میتوانیم از کلاس بوت استرپ استفاده کنیم از آنجایی که ما میخواهیم همه المان های صفحه عمودی شوند پس باید کلاس را به تگ ul بدهیم. کلاس nav کلاسی ثابت است کافیست کلاس flex-column را کنار آن بنویسید تا منو شما به همین راحتی از حالت افقی به حالت عمودی در بیاید برای واضح شدن موضوع از کد زیر کمک بگیرید:

<ul class="nav flex-column">

 

ساخت تب (Tab) 

نمایش منو در قالب تب یکی دیگر از مواردی است که به آن میپردازیم. ابتدا حالت ساده آن را برای شما بیان میکنیم اگر بخواهیم یک تب منو ساده بسازیم باید در تگ ul کنار کلاس nav کلاس nav-tabs را قرار دهیم و نیاز است یکی از تب ها را به صورت فعال در بیاوریم که برای این کار کافیست کلاس active را به تگ a بدهیم به همین راحتی توانستیم یک تب منو ساده بسازیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<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 ها نیز یکی از مواردی است که میخواهیم به آن بپردازیم ساده بخواهیم توضیح دهیم هیچ فرقی بین tab و pill در نحوه ساخت وجود ندارد فقط باید یک کلاس را با کلاسی دیگر جایگزین کرد آن هم کلاس nav-pills است که باید با nav-tabs جا به جا شود تنها با همین تغییر کلاس ظاهر نمایش شما از tab به pill تغییر پیدا میکند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

تمام صفحه کردن pill ها و tab ها

همانطور که مشخص است یکی از موارد مهم برای ما رسپانسیو بودن است. پس مطمئنا بوت استرپ برای رسپانسیو کردن pill ها و tab ها نیز اقدامی کرده است. برای رسپانسیو کردن این موارد کافیست در کنار کلاس های nav-pills و nav-tabs کلاس nav-justified را نیز قرار دهیم به همین راحتی میتوانیم هم موارد را وسط قراردهیم و فاصله بین آنها را تنظیم کنیم و هم رسپانسیو بودن را رعایت کنیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

 

pill با زیر منو

درست است pill ها نیز میتوانند زیر منو داشته باشند و به سادگی میتوان این کار را با بوت استرپ انجام داد برای این کار کافیست به آن li که قرار است زیر منو داشته باشد در کنار کلاس nav-item کلاس dropdown را نیز اضافه کنید و به تگ a آن کلاس dropdown-toggle و attribute با نام data-toggle با مقدار dropdown را اضافه کنیم سپس div با کلاس dropdown-menu اضافه میکنیم که باکس زیر منو ما را بسازد و سپس المان های زیر منو را با تگ a و کلاس dropdown-item میسازیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

tab با زیر منو

مشابه کاری که برای pill انجام دادیم میتوانیم برای tab نیز انجام دهیم تنها تفاوت در تگ ul است که به جای کلاس nav-pills از کلاس nav-tabs استفاده میکنیم به همین راحتی امکان داشتن زیر منو را به تب ها نیز دادیم برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید :

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

 

ساخت toggle tab

میخواهیم درباره ساخت تب هایی صحبت کنیم که شما آنها را همه جا دیده اید با کلیک روی تب ها محتوای آن تغییر میکند. برای این کار کافیست به تگ های a خود attribute با نام data-toggle و با مقدار tab اضافه کنید و برای href مقدار # با یک نام تعیین کنید با این نام جلو تر کار داریم . بعد بستن ul یک div  تعریف میکنیم با کلاس tab-content که کل محتوای تب ها را داخل آن قرار دهیم. حال نوبت محتوای هر تب میشود ،باید برای هرکدام div با کلاس tab-pane و کلاس container بسازید همچنین تبی که میخواهد فعال باشد باید کلاس active و الباقی کلاس fade داشته باشند و id را برابر با نامی که در href قرار داده ایم میگذاریم برای واضح شدن موضوع از کد زیر کمک بگیرید:

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

 

ساخت toggle pill

مشابه روش قبل عمل میکنیم تنها چند تفاوت وجود دارد :

  • در تگ ul از کلاس nav-pills استفاده میکنیم.
  • در تگ a از attribute با مقدار pill استفاده میکنیم.

برای واضح شدن موضوع از کد زیر کمک بگیرید:

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

 

آموزش nav در این قسمت به پایان میرسد.

امیدوارم این آموزش برای شما مفید بوده باشد.

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه هفدهم (Dropdown)

آموزش Bootstrap 4 جلسه نوزدهم (Navbar)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه هجدهم (Navs): نوع فایل:mp4 حجم فایل:40.43 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

4 دیدگاه برای “آموزش Bootstrap 4 جلسه هجدهم (Navs)”

  1. خوشرو گفت:

    بسیار عالی ممنون از وقتی که میذارید و ممنون که این آموزش ها رایگان هستند

    1. amir گفت:

      خواهش میکنم خوشحالیم که مفید بوده

  2. سعید گفت:

    سلام خسته نباشین , ممنون از سایت خوبتون, خیلی عاالی بود این دوره هیچکجا انقد توضیحات کاملی درباره بوت استرپ پیدا نکردم.
    فقط جلسه ۱۸ جلسه آخر بود یا بازهم هست
    اگر زمان انتشار قسمت بعدی رو اعلام کنید ممنون میشم.
    درباره affix و انواع منو ها اگر توضیح بدین ممنون میشم
    با تشکر 🙂

    1. amir گفت:

      سلام ممنون از لطف شما خیر جلسه آخر نیست تمام تلاش ما این است که روزی یک جلسه برای شما آموزش بدهیم اما گاهی اوقات این برنامه بهم میریزد

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.