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

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

---