آموزش کار با نوار هدایتی-مسیریابی بوت استرپReviewed by صابر بوستانی on Jun 22Rating: 5.0
آموزش کار با نوار هدایتی-مسیریابی بوت استرپ

آموزش کار با نوار هدایتی-مسیریابی بوت استرپ

توی این پست در خدمت دوستان هستیم با جلسه چهاردهم دوره آموزش متنی بوت استرپ به زبان فارسی. اینبار از وب سایت سورس باران در جلسه چهاردهم آموزش بوت استرپ آموزش کار با نوار هدایتی-مسیریابی بوت استرپ رو به اشتراک گذاشته ایم. و در این بخش با نوار هدایتی – مسیریابی بوت استرپ به خوبی آشنا خواهید شد.

نوار هدایتی-مسیریابی بوت استرپ :

نوار مسیریابی یک هدر/سرفصل مسیر یابی ست که بر بالای صفحه قرار میگیر.

1

بوسیله بوت استرپ ، یک نوار مسیریابی میتواند میتواند به اندازه صفحه گسترش یابد یا نزول پیدا کند.

یک نوار مسیریابی استاندارد توسط <nav class=”navbar navbar-default”> ساخته میشود. مثال زیر چگونگی اضافه کردن نوار مسیریابی ب بالای صفحه را نشان میدهد :

نکته : همه مثال های درون این صفحه، یک نوار مسیریابی را نشان میدهند که فضای زیادی را بر روی صفحه نمایش کوچک اشغال می کند اما نوار مسیریابی در صفحات نمایش بزرگ، یک خط واحد خواهد بود چرا که بوتسترپ واکنش گرا/ریسپانسیو می باشد.

این مشکل(در رابطه با صفحه نمایش های کوچک) در مثال آخر این مجموعه اموزشی ، حل خواهد شد.

 

نوار مسیریابی برعکس در بوت استرپ :

اگر استایل نوار مسیریابی پیش فرض را نمیپسندید ، بوت استرپ یک نوار پیمایش جایگزین در اختیار شما قرار میدهد.

2

کافیست کلاس .navbar-default را به .navbar-inverse تغییر دهید :

 

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

نوار مسیریابی را میتوان در بالا یا پایین صفحه ثابت قرار داد. یک نوار مسیریابی ثابت صرف نظر از اینکه در کجای صفحه قرار دارید در بالا یا پایین آن ثابت میماند .

کلاس .navbar-fixed-top باعث ثابت شدن نوار مسیریابی در بالای صفحه میشود :

 

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

 

نوار مسیر یابی با منوی کشویی در بوت استرپ :

3

نوار های مسیریابی نیز میتوانند دارای منوهای کشویی باشند، مثال بالا در قسمت page1 یک منوی کشویی استفاده میکند

 

نوار مسیریابی راست چین شده در بوت استرپ :

4

کلاس .navbar-right برای راست چین کردن دکمه های نوار مسیریابی استفاده میشود :

در مثال زیر ما یک دکمه “Sign Up” و یک دکمه “Login” به سمت راست نوار مسیریابی اضافه میکنیم . ما همچنین یک glyphicon کنار هر یک از دکمه ها اضافه میکنیم.

 

نوار مسیریابی نزولی در بوت استرپ :

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

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

لینک منبع : http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

موفق و پیروز باشید