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

در این پست از سری آموزش های Bootstrap نحوه ایجاد منو ناوبری در بوت استرپ را به شما خواهیم گفت . منوهای ناوبری در بالای صفحه شما قرار می گیرند و در صورتی که در حالت افقی صفحه نمایش شما جای نگیرند بصورت عمودی نمایان میشوند. منوهای ناوبری خود را با استفاده از تگ <nav> و کلاس navbar ایجاد می کنیم. مثال زیر را جهت ایجاد منو ناوبری ببینید :

منو ناوبری با رنگ معکوس

توسط کلاس navbar-inverse میتوان سبک رنگ منو را معکوس کرد.

 

منو ناوبری بهمراه منو کشویی

 

راست به چپ کردن عناصر در منو ناوبری

شما توسط کلاس navbar-right میتوانید عناصر خود را در سمت راست تراز کنید.

 

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

شما توسط کلاس navbar-btn این امکان را خواهید داشت که دکمه ای را به منو اضافه کنید.

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

توسط کلاس navbar-form میتوانید فرم موردنظر خود را به منو اضافه نمایید. در مثال زیر ما یک فرم جستجو را قرار دادیم :

در فرم جستجو بالا ، به کمک دو کلاس input-group و input-group-addon  میتوان یک آیکون جستجو را به فرم پیوست کرد .

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

شما توسط کلاس navbar-text میتوانید هر متنی را به منو اضافه نمایید.

ثابت کردن منو ناوبری در سمت بالا یا پایین

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

منو ناوبری ثابت در سمت بالا

منو ناوبری ثابت در سمت پایین

جمع شدن منو ناوبری

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

 

منبع : جهان سورس