راهبری (Navigation) در Bootstrap

در این بخش نحوه ایجاد اجزاء Navigation (راهبری) در Bootstrap را خواهید آموخت.

اجزاء منو (Navigation) در Bootstrap :

بوت استرپ یک روش ساده برای ایجاد اجزاء اولیه یک منو مانند کلیدها (tab) ارائه میکند. کلیه اجزاء یک منو در بوت استرپ از طریق کلاس پایه nav. از کد و سبک های (style) مشترک  استفاده میکنند.

ایجاد tabهای ساده با Bootstrap :

مثال زیر نحوه ایجاد یک کلید ساده با استفاده از Bootstrap را نمایش میدهد :









خروجی مثال بالا به شکل زیر خواهد بود :



 

اضافه کردن آیکون به tabها :

همچنین میتوانید به tabها آیکون اضافه کنید تا جذاب تر به نظر بیایند.









خروجی مثال بالا به شکل زیر خواهد بود :



 

ایجاد منوی دکمه ای :

به طور مشابه میتوانید با استفاده از کلاس nav-pills. به جای کلاس nav-tabs. و بدون نیاز به هیچ گونه تغییر دیگری در کد، یک منو بر پایه دکمه ها ایجاد کنید.







خروجی مثال بالا به شکل زیر خواهد بود :



 

اضافه کردن آیکون به منوی دکمه ای :

همچنین میتوانید به راهبری دکمه ای آیکون هم اضافه کنید تا جذاب تر به نظر بیاید.









خروجی مثال بالا به شکل زیر خواهد بود :


 

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

این منو به صورت پیش فرض افقی میباشد. جهت عمودی کردن آن، کافیست کلاس nav-stacked. را به تگ ul اضافه نمایید.







خروجی مثال بالا به شکل زیر خواهد بود :





 

منوهای کشویی :

میتوانید با یک کد اضافی و اضافه کردن فایل های جاوا اسکریپت jquery.js و bootstrap.js به فایل HTML ، منوهای کشویی به یک لینک داخل tabها یا دکمه ها اضافه نمایید.
جهت این کار به چهار کلاس CSS از جمله dropdown. ، dropdown-toggle. و caret. به همراه کلاس های nav. ، nav-tabs. و nav-pills نیاز داریم.

ایجاد کلید (tab) با منوهای کشویی :

مثال زیر نحوه اضافه کردن منوهای کشویی به یک tab را نشان میدهد :
















خروجی مثال بالا به شکل زیر خواهد بود :








 

ایجاد دکمه های کشویی :

مثال زیر نحوه اضافه کردن منوهای کشویی به دکمه ها را نمایش میدهد :















خروجی مثال بالا به شکل زیر خواهد بود :









 

کلید ها و دکمه های همتراز شده (justified) :

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













خروجی مثال بالا به شکل زیر خواهد بود :





 

غیرفعال کردن لینک ها در اجزاء راهبری :

همچنین میتوانید با استفاده از کلاس disabled. ، لینک های داخل منو را به حالت غیرفعال نمایش دهید.







خروجی مثال بالا به شکل زیر خواهد بود :










مطلب بعدی -> ایجاد منو های راهبری در Bootstrap

---