Navigation Elements در بوت استرپ

saeed410

عضو جدید
در این قسمت قصد داریم با کلاسهایی از بوت استرپ اشنا بشیم که برای استایل دهی به المان های Navigation یا ناوبری استفاده میشوند. منو ها و ابزار ناوبری از قسمت های مهم در طراحی وب سایت به شما میروند. حتماً سعی کنید در طراحی سایت خود از navigation زیبا استفاده کنید. برای استفاده از ناوبری ایجاد شده در بوت استرپ از یک کلاس عمومی به نام nav استفاده میکنیم. در ادامه به این کلاسها اشاره خواهیم کرد
[h=2]Tabular Navigation یا tabs در بوت استرپ[/h] بوت استرپ امکاناتی فراهم کرده است که با استفاده از آن میتوانید منوهای تب دار در طراحی سایت خود داشته باشید. برای ایجاد یک منوی تب دار در بوت استرپ مراحل زیر را اجرا کنید:


  • یک لیست ساده ایجاد کنید که داخل کلاس nav قرار داشته باشد.
  • کلاس nav-tabs را به آن اضافه کنید.
کد زیر روش ایجاد یک منوی تب دار را نمایش میدهد :
HTML:
[LEFT]<p>مثال منوی تب دار</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> 
[/LEFT]
تصویر این کد به صورت زیراست:

Pill Navigation با منوی دانه ایی در بوت استرپ :
برای ایجاد منوی تب دار که هر کدام از دکمه های آن از هم جدا هستند میتوانید از این کلاسها استفاده کنید. در این حالت هر دکمه جدا از دیگری نمایش داده میشود. برای ایجاد Pill از کلاس nav-pills بجای nav-tabs استفاده کنید. کد زیر مثال استفاده از این کلاس را نشان میدهد:
HTML:
 [LEFT]<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>
[/LEFT]
تصویر این کد به صورت زیر است:

Virtical Pills یا منوهای عمودی در بوت استرپ :

با استفاده از بوت استرپ میتوانید منوهای عمودی در طراحی سایت خود داشته باشید. برای این کار از کلاس nav-stacked همراه با کلاس های nav و nav-pills استفاده کنید. کد زیر روش استفاده از این کلاس را نشان میدهد:
HTML:
[LEFT]<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>
[/LEFT]
تصویر کد بالا به صورت زیر است :

[h=2]منوی هم تراز در بوت استرپ (Justified Nav):[/h] با استفاده از کلاس nav-justified میتوانید تمام دکمه ها در منوی خود را به صورت یک اندازه و هم تراز ایجاد کنید. در دستگاهها با صفحه نمایش های کمتر از 768 پیکسل تب ها تبدیل به منوهای عمودی یا پشته ایی میشوند. مثال زیر استفاده از این کلاس را نشان میدهد:
HTML:
 [LEFT]<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>[/LEFT]
تصویر زیر اجرای کد بالا را نشان میدهد:

[h=2]لینک های غیر فعال در بوت استرپ:[/h] برای ایجاد لینک های غیر فعال در منوهای خود میتوانید از کلاس disables استفاده کنید. این کلاس رنگ منوهای غیر فعال را تغییر میدهد و خاصیت hover را غیر فعال میکند:
HTML:
 [LEFT]<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>
[/LEFT] تصویر کد زیر به صورت زیر است:

[h=2]منوهای آبشاری یا بازشو در بوت استرپ :[/h] برای ایجاد منوهای بازشو یا آبشاری میتوانید از کلاس dropdown-menu استفاده کنید. که این کلاس ها را هم میتوانید در تب ها و هم در pill ها استفاده کنید.
[h=3]تب ها و منوهای آبشاری در بوت استرپ :[/h] برای اضافه کردن منوی آبشاری به تب ها مراحل زیر را انجام دهید:

  • یک لیست ساده با کلاس nav ایجاد کنید.
  • کلاسه nav-tabs را به آن اضافه کنید.
  • اکنون به هر لیستی که میخواهید تبدیل به منوی آبشاری شود کلاس dropdown-menu را اضافه کنید.
مثال :
HTML:
[LEFT]<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> 
[/LEFT]
تصویر کد بالا به صورت زیر است :

[h=3]منوی آبشاری و Pills در بوت استرپ :[/h] برای ایجاد منوی ابشاری در pill ها میتوانید از مثال زیر استفاده کنید:
HTML:
 [LEFT]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>[/LEFT]
تصویر این کد به صورت زیر است:

در قسمت بعد با کامپوننت های navbar در بوت استرپ آشنا میشویم.


در گروه: کامپوننت های لایه بندی
منبع : طراحی سایت
 

Similar threads

بالا