آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Navbar در bootstrap

در این آموزش فرا خواهید گرفت که چگونه مولفه های ثابت و استاتیک nav bar را با استفاده از تویتر بوت استرپ ایجاد کنید.

ایجاد یک nav bar ساده با تویتر بوت استرپ

تویتر بوت استرپ شما را قادر می کند تا انواع مختلفی از nav bar را به سرعت و بدون نیاز به تلاش زیاد ایجاد کنید. شما nav barهای استاتیک با مسیریابی ساده و همچنین nav barهایی با منوهای رو به پایین و جعبه های جستجو ایجاد می کنید.

مثال :

مثال زیر چگونگی ایجاد nav bar استاتیک با مسیریابی پایه را نشان می دهد.

        

        

        

        

    

خروجی مثال بالا مانند زیر می باشد .

Bootstrap

همچنین می توانید فرم جستجو در داخل nav بارها اضافه کنید.

مثال :

	

        

        

        

        

    

خروجی مثال بالا مانند زیر می باشد .

Bootstrap
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.

Nav bar ثابت تویتر بوت استرپ

تویتربوت استرپ مکانیزمی برای ایجاد nav bar ارائه می دهد که در بالا یا پایین ViewPort ثابت است و با محتوای روی صفحه اسکرول می کند.

ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.

ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.

مثال :

 

        

    
 
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.

Nav bar استاتیک تویتربوت استرپ در بالا

شما می توانید nav bar تمام عرض ایجاد کنید که در بالا ظاهر می شود اما با اضافه کردن گروه .navbar-static-top از فهرست صفحه دور می شود. برخلاف گروه .navbar-fixed-top لازم نیست هیچ لایه ای را درbodyتغییر دهید.

مثال :

 
   

        

    
  

Nav bar تویتربوت استرپ با فرم جستجو

فرم جستجو یک مولفه ی متداول بر روی navbarها می باشد و شما آن ها را روی وب سایت های متفاوت دیده اید. فرم جستجو با استفاده از گروه .navbar-form روی عنصر

می تواند در داخل navbar قرار بگیرد.

 

مثال :

 

        

        

    
 

ایجاد گونه ی معکوس یک nav bar

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

مثال :

  

        

        

        

        

    
 

خروجی مثال بالا مانند زیر می باشد.

Bootstrap
  • 2799
  •    2122
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .