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

تاریخ انتشار: 14 دی 1394

تعداد بازدید: 27 نفر

در این بخش نحوه ایجاد اجزاء 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

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.