جلسه هجدهم از دوره آموزش Bootstrap : عناصر ناوبری

عناصر ناوبری

مؤلفه های چیدمان Bootstrap

Bootstrap گزینه های مختلفی را برای سبک بندی عناصر ناوبری (navigation elements) فراهم می کند. همه این عناصر ، یک نشانه گذاری (markup) و کلاس پایه مشابهی دارند ، کلاس nav. بوت استرپ هم چنین یک کلاس کمکی را برای به اشتراک گذاری این نشانه گذاری ها و حالت ها فراهم می کند. کلاس های modifier مربوط به Swap برای تغییر بین هر سبک استفاده می شوند.

ناوبری جدولی یا Tab ها

برای ایجاد یک منوی ناوبری جدول بندی شده ، به صورت زیر عمل می کنیم :

• با یک لیست غیر ترتیبی اولیه با کلاس پایه nav. شروع می کنیم.
• کلاس nav-tabs. را اضافه می کنیم.

مثال زیر نحوه انجام این کار را نشان می دهد :

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

ناوبری با Pill ها

Pill های پایه ایی

برای تبدیل tab ها به pill ها ، مراحل مشابهی را که در بالا شرح داده ایم ، دنبال می کنیم ، به جای کلاس nav-tabs. از کلاس nav-pills. استفاده می کنیم.

مثال زیر نحوه انجام این کار را نشان می دهد :

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Pill های عمودی

هم چنین ، ما می توانیم Pill ها را به طور عمومی با استفاده از کلاس nav-stacked. همراه با کلاس های nav . و nav-pills. قرار دهیم.

مثال زیر نحوه انجام این کار را نشان می دهد :

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Nav همتراز شده (Justified Nav)

ما می توانیم tab ها و یا pill هایی با اندازه های برابر با والد خود را در صفحات گسترده تر از 768px ، با استفاده از کلاس nav-justify. به ترتیب همراه با کلاس nav ، .nav-tabs. یا .nav ، .nav-pills بسازیم. در صفحه نمایش های کوچک تر، لینک های nav به صورت انباشته دیده می شوند.

مثال زیر نحوه انجام این کار را نشان می دهد :

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

لینک های غیر فعال شده

اگر برای هر کلاس .nav ، کلاس disabled. را اضافه کنیم ، این کار موجب ایجاد یک لینک خاکستری می شود که وضعیت hover: آن نیز غیرفعال می باشد ، همان طور که در مثال زیر نشان داده شده است :

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

این کلاس فقط ظاهر تگ <a> را تغییر خواهد داد ، نه عملکرد آن را. برای غیر فعال کردن لینک ها از جاوا اسکریپت سفارشی استفاده می کنیم.

منوهای کشویی

منوهای ناوبری ، syntax مشابهی با منوهای کشویی دارند. به طور پیش فرض ، ما یک آیتم لیست داریم که یک anchor دارد که با برخی از صفت های داده کار می کند تا یک لیست غیر ترتیبی با یک کلاس dropdown-menu. را راه اندازی کند.

Tab همراه با منوهای کشویی

برای اضافه کردن منو کشویی به tab به صورت زیر عمل می کنیم :

• با یک لیست غیر ترتیبی اولیه با کلاس پایه nav. شروع می کنیم.
• کلاس nav-tabs. را اضافه می کنیم.
• اکنون یک لیست غیرترتیبی با کلاس dropdown-menu. اضافه می کنیم.

مثال زیر نحوه انجام این کار را نشان می دهد :

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Pill ها با منوهای کشویی

برای انجام کارهای مشابه با pill ها که در بالا تشریح کردیم ، به سادگی کلاس nav-tabs. را با کلاس nav-pills. تعویض می کنیم ، همان طور که در مثال زیر نشان داده شده است :

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

خروجی قطعه کد فوق ، به صورت زیر می باشد :