آموزش عناصر ناوبری در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش عناصر ناوبری در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش عناصر ناوبری در بوت استرپ خواهیم پرداخت.

بوت استرپ چند گزینه مختلف برای یک ظاهر طراحی شده در عناصر ناوبری فراهم می کند. همه آنها دارای یک نشانه گذاری و کلاس پایه هستند .nav. بوت استرپ همچنین یک کلاس کمکی برای به اشتراک گذاری نشانه گذاری و حالت ها ارائه می دهد. کلاس های تغییر دهنده را برای جابجایی بین هر سبک تغییر دهید.

Tabular Navigation یا Tabs

برای ایجاد یک منوی ناوبری تب دار –

با یک لیست غیر مرتب اولیه با کلاس پایه nav. شروع کنید

اضافه کردن کلاس .nav-tabs.

مثال زیر این را نشان می دهد –

&lt;p&gt;Tabs Example&lt;/p&gt;

&lt;ul class = "nav nav-tabs"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Java&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Tabs Example

</ul>

پیمایش pill

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

مثال زیر این را نشان می دهد –

&lt;p&gt;Pills Example&lt;/p&gt;

&lt;ul class = "nav nav-pills"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Java&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Pills Example

</ul>

pill های عمودی

شما می توانید قرص ها را به صورت عمودی با استفاده از کلاس nav-stacked. همراه با کلاس ها روی هم قرار دهید – .nav ، .nav-pills.

مثال زیر این را نشان می دهد –

&lt;p&gt;Vertical Pills Example&lt;/p&gt;

&lt;ul class = "nav nav-pills nav-stacked"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Java&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Vertical Pills Example

</ul>

Justified Nav

با استفاده از کلاس nav-justified. همراه با .nav ، .nav-tabs یا .nav ، .nav-قرص ها می توانید برگه ها یا قرص هایی با عرض مساوی از نظر والدین در صفحه های گسترده تر از 768px ایجاد کنید. در صفحه های کوچکتر ، پیوندهای nav انباشته می شوند.

مثال زیر این را نشان می دهد –

&lt;p&gt;Justified Nav Elements Example&lt;/p&gt;

&lt;ul class = "nav nav-pills nav-justified"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Java&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;br&gt;
&lt;br&gt;
&lt;br&gt;

&lt;ul class = "nav nav-tabs nav-justified"&gt;
   &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;VB.Net&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;Java&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = "#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

Justified Nav Elements Example

</ul>

</ul>

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

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

&lt;p&gt;Disabled Link Example&lt;/p&gt;

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

&lt;br&gt;
&lt;br&gt;

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

Disabled Link Example

<li class = "disabled"><a href = "#">iOS(disabled link)</a></li>

</ul>

<li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>

</ul>

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

منوهای کشویی

منوهای پیمایش یک نحو مشابه با منوهای کشویی دارند. به طور پیش فرض، شما یک لیست لیست دارید که دارای یک لنگر است که با برخی از ویژگی های داده کار می کند تا یک لیست غیر مرتب را با یک کلاس.dropdown-menu. ایجاد کند.

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

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

حالا یک لیست مرتب نشده با کلاس menu.dropdown اضافه کنید.

&lt;p&gt;Tabs With Dropdown Example&lt;/p&gt;

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

Tabs With Dropdown Example

Java

</a>

<li><a href = "#">Swing</a></li>

<li><a href = "#">jMeter</a></li>

<li><a href = "#">Separated link</a></li>

</ul>

</li>

</ul>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش عناصر ناوبری در بوت استرپ

آموزش عناصر ناوبری در بوت استرپ

Tabular Navigation یا Tabs

پیمایش pill

pill های عمودی

Justified Nav

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

منوهای کشویی

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش عناصر ناوبری در بوت استرپ

Tabular Navigation یا Tabs

پیمایش pill

pill های عمودی

Justified Nav

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

منوهای کشویی

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه