لوگو
  1. صفحه نخست
  2. مقالات آموزشی
  3. آموزش Bootstrap
  4. منوهای راهبری در Bootstrap

منوهای راهبری در Bootstrap

منوهای راهبری در Bootstrap

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

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

در این بخش نحوه ایجاد منوها یا هدر های راهبری (navigation header) استاتیک و ثابت را با استفاده از نوار راهبری (navbar)  در بوت استرپ خواهید آموخت.

ایجاد یک منوی راهبری ساده با Bootstrap :

میتوانید با استفاده از نوار راهبری ( navbar ) در بوت استرپ، برای وب سایت خود هدرهای راهبری responsive ایجاد نمایید. این منوی راهبری رسپانسیو در دستگاه ها با صفحه نمایش کوچک مانند تلفن های همراه در ابتدا به حالت فشرده است و با کلیک بر روی دکمه مبدل (toggle) باز میشود. همچنین در دستگاه های متوسط و بزرگ مانند لپ تاپ و pc مانند قبل افقی خواهد بود.
همچنین میتوانید انواع مختلفی از منوهای راهبری مانند منوهای کشویی، جعبه های جستجو و منوهای راهبری ثابت ایجاد کنید. مثال زیر نحوه ایجاد یک منوی راهبری استاتیک ساده با لینک های راهبری را نمایش میدهد :




















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





نکته : جهت تنظیم لینک های راهبری، فرم ها، دکمه ها یا متن داخل منوی راهبری از کلاس های navbar-left. یا navbar-right. به جای pull-left. و pull-right. استفاده کنید.
همچنین میتوانید آیتم های کشویی و فرم جستجو در منوهای راهبری داشته باشید :
































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






نکته : جهت ایجاد منوهای راهبری که در بالا یا پایین صفحه ثابت نباشند، آن ها را داخل یک container. که پهنای وب سایت و محتوای آن را تنظیم میکند، قرار دهید.

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

ایجاد منوی راهبری ثابت در بالای صفحه :

جهت ایجاد منوی راهبری که در بالای صفحه ثابت میباشد، علاوه بر کلاس پایه navbar. و navbar-default. یک کلاس دیگر به نام navbar-fixed-top. اضافه کنید.























نکته : محتوای منوی راهبری ثابت را جهت padding و تنظیم مناسب با بقیه محتوا، داخل یک container. یا container-fluid. قرار دهید.

ایجاد منوی راهبری ثابت در پایین صفحه :

به طور مشابه جهت ایجاد منوی راهبری ثابت در پایین صفحه، کلاس navbar-fixed-bottom. را اضافه کنید.























نکته : به یاد داشته باشید در حالتی که منوی راهبری ثابت در بالا یا پایین صفحه دارید، padding (حداقل 70px) به بالا یا پایین body  اضافه نمایید تا از قرار گرفتن محتوا در زیر منوی راهبری جلوگیری شود. همچنین style sheet دلخواه را بعد از فایل CSS اصلی بوت استرپ اضافه کنید در غیر این صورت عمل نخواهد کرد.

منوی راهبری استاتیک در بالای صفحه :

همچنین میتوانید با استفاده از کلاس navbar-static-top. ، یک منوی راهبری با پهنای کامل که در بالای صفحه قرار میگیرد و با scroll شدن صفحه دیگر دیده نمیشود، ایجاد کنید. بر خلاف کلاس navbar-fixed-top. ، در این حالت نیازی به تغییر در padding برای body نمیباشد.






















 

منوی راهبری Bootstrap با فرم جستجو :

فرم جستجو از اجزاء رایج در منوهای راهبری میباشد و بارها آن را در وب سایت های مختلف مشاهده کرده اید. فرم جستجو را میتوان با استفاده از کلاس navbar-form. بر روی تگ form، داخل منوی راهبری جایگذاری نمود.



















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


 

ایجاد تغییر به نسبت عکس (inverted variation) برای منوی راهبری :

برای انجام این کار کلاس navbar-inverse. را به کلاس پایه navbar. اضافه کنید. نیاز به تغییر دیگری در کد نمی باشد.

































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





مطلب بعدی -> ایجاد پنل در Bootstrap
اشتراک گذاری:
مشاهده نمونه های بیشتر
ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام
24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام
اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic
20 تیر 1403

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

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

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

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

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

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

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

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

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

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

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

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

021-41658