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

آموزش Nav و Tab و Pill در bootstrap

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

مولفه های nav تویتر بوت استرپ

تویتر بوت استرپ راه ساده ای برای ایجاد مولفه های پایه ی Nav از قبیل تب ها و پیل ها، ارائه می دهد. همه ی مولفه های nav بوت استرپ همان مارک آپ پایه و طرح ها را از طریق گروه .nav به اشتراک می گذارند.

ایجاد تب های پایه با استفاده از تویتر بوت استرپ

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

  

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

Bootstrap

افزودن آیکن ها به تب ها

شما همچنین می توایند به تب های خود آیکن هایی اضافه کرده و آن ها جذاب تر کنید.


	

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

Bootstrap

ایجاد پیل های Nav با توییتر بوت استرپ

به طور مشابه می توانید یک pillپایه بر اساس مسیریابی و با استفاده از گروه پایه ی .nav-pills به جای .nav-tabs ایجاد کنید، بدون اینکه تغییرات زیادی در مارک آپ ایجاد کنید.

مثال:


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

Bootstrap

Navافزودن آیکن به پیل های

شما همچنین می توایند به پیل های خود آیکن هایی اضافه کرده و آن ها جذاب تر کنید.

مثال:


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

Bootstrap

مسیریابی های pillها به طور پیش فرض افقی می باشند. برای اینکه آنها را عمودی سازید فقط کافیست گروه .nav-stacked را به عنصر

مثال:



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

Bootstrap

تب ها و pills nav تویتر بوت استرپ با منوهای رو به پایین

شما می توانید منوهای رو به پایین به یک لینک در داخل تب ها و مسیر pill ها را با اضافه کردن فایل های جاوا اسکریپت jquery.js و bootstrap.jsبه فایل HTML خود اضافه کنید. برای ایجاد یک منوی روبه پایین ساده چهار گروه CSS که عبارتند از .drop downو .drop down-toggle و .drop down-menu و .caretبه علاوه .nav, .nav-tabs, .nav-pills لازم می باشند.

ایجاد تب های رو به پایین

مثال زیر به شما نشان می دهد که چگونه یک منوی رو به پایین ساده به یک تب اضافه کرد

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

Bootstrap

ایجاد پیل های رو به پایین

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

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

Bootstrap

تب ها و pill های توجیه شده

شما می توانید به سادگی با اضافه کردن گروه .nav-justifiedتب ها و pill های خود را که دارای عرضی برابر با عنصر منبع خود هستند، بسازید. به هرحال این برنامه تنها روی صفحاتی کار می کند که عریض تر از 768px هستند. روی صفحات کوچکتر لینک ای nav روی هم قرار می گیرند.

مثال:

 

    

        

لینک های غیرفعال در داخل مولفه های nav

شما می توانید هر لینکی در داخل nav ها ایجاد کنید که با استفاده از گروه .disabled غیرفعال به نظر برسد.

مثال:

  

    

Pills with Disable Links

نکته:

گروه .disabled بوت استرپ فقط ظاهر لینک را با خاکستری کردن آن و حذف افکت hover تغییر می دهد، به هرحال لینک قابل کلیک شدن باقی می ماند، مگر اینکه ویژگی "href" را حذف کنید.

  • 2191
  •    2160
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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