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

[saeed410]

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


یک لیست ساده ایجاد کنید که داخل کلاس nav قرار داشته باشد.
کلاس nav-tabs را به آن اضافه کنید.

کد زیر روش ایجاد یک منوی تب دار را نمایش میدهد :



<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> تصویر این کد به صورت زیراست:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/Tabular-Navigation-Bootstrap-Demo.JPG
Pill Navigation با منوی دانه ایی در بوت استرپ :
برای ایجاد منوی تب دار که هر کدام از دکمه های آن از هم جدا هستند میتوانید از این کلاسها استفاده کنید. در این حالت هر دکمه جدا از دیگری نمایش داده میشود. برای ایجاد Pill از کلاس nav-pills بجای nav-tabs استفاده کنید. کد زیر مثال استفاده از این کلاس را نشان میدهد:



<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>
تصویر این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/Pill-Navigation-Bootstrap-Demo.JPG Virtical Pills یا منوهای عمودی در بوت استرپ :
با استفاده از بوت استرپ میتوانید منوهای عمودی در طراحی سایت خود داشته باشید. برای این کار از کلاس 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>

تصویر کد بالا به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/Vertical-Pill-Navigation-Bootstrap-Demo.JPG
منوی هم تراز در بوت استرپ (Justified Nav): با استفاده از کلاس nav-justified میتوانید تمام دکمه ها در منوی خود را به صورت یک اندازه و هم تراز ایجاد کنید. در دستگاهها با صفحه نمایش های کمتر از 768 پیکسل تب ها تبدیل به منوهای عمودی یا پشته ایی میشوند. مثال زیر استفاده از این کلاس را نشان میدهد:



<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> تصویر زیر اجرای کد بالا را نشان میدهد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/Justified-Navigation-Bootstrap-Demo.JPG
لینک های غیر فعال در بوت استرپ: برای ایجاد لینک های غیر فعال در منوهای خود میتوانید از کلاس disables استفاده کنید. این کلاس رنگ منوهای غیر فعال را تغییر میدهد و خاصیت 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>
تصویر کد زیر به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/DisabledLink-Navigation-Bootstrap-Demo.JPG
منوهای آبشاری یا بازشو در بوت استرپ : برای ایجاد منوهای بازشو یا آبشاری میتوانید از کلاس dropdown-menu استفاده کنید. که این کلاس ها را هم میتوانید در تب ها و هم در pill ها استفاده کنید.
تب ها و منوهای آبشاری در بوت استرپ : برای اضافه کردن منوی آبشاری به تب ها مراحل زیر را انجام دهید:


یک لیست ساده با کلاس 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>
تصویر کد بالا به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/DropDownTabs-Navigation-Bootstrap-Demo.JPG
منوی آبشاری و Pills در بوت استرپ : برای ایجاد منوی ابشاری در pill ها میتوانید از مثال زیر استفاده کنید:



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> تصویر این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/NavigationElements/DropDownPills-Navigation-Bootstrap-Demo.JPG
در قسمت بعد با کامپوننت های navbar در بوت استرپ آشنا میشویم.


در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)