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

آموزش ایجاد dropdownlist با bootstrap

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

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

با استفاده از plug – inرو به پایین تویتر بوت استرپ شما می توانید تقریبا به هرچیزی از جمله دکمه ها، navbar، تب ها و غیره منوی رو به پایین اضافه کنید.

منوهای رو به پایین در navbar

مثال زیر نشان می دهد که چگونه در یک navbar منوی رو به پایین ایجاد کرد.

    

    

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

منوی رو به پایین در Navs

مثال زیر چگونگی ایجاد منوی رو به پایین را در pills navs نشان می دهد.

خروجی مثال بالا مانند تصویر زیر خواهد بود .

Bootstrap

ممکن است با قرار دادن گروه .nav-pills به جای .nav-tabs و بدون اعمال تغییرات زیاد در مارک آپ، مثال بالا را به یک تب رو به پایین تبدیل کنید.

دکمه های رو به پایین

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



        

        

        

        

        

        

        

        

        

        

        

        

        

        

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

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

مثال زیر به شما نشان خواهد داد که چگونه دکمه های منشعب رو به پایین ایجاد کنید.




    

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap
نکته:

شما می توانید از دکمه ی مربوط به اندازه گیری گروه های بوت استرپ مانند .btn-lg, .btn-sm و .btn-xs برای تغییر اندازه ی بیشتر دکمه های رو به پایین استفاده کنید. رو به پایین ها داخل گروه های دکمه برای ایجاد منوهای رو به پایین در داخل یک گروه از دکمه، فقط.btn-group را همراه با یک مارک آپ رو به پایین در داخل یک .btn-groupدیگر قرار دهید.

مثال:

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

به طور مشابه می توانید رو به پایین هایی در داخل گروه های عمودی دکمه ایجاد کنید، مانند مثال زیر.

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

منوهای رو به بالا

شما حتی می توانید با اضافه کردن گروه .drop up به منبع منوی رو به پایین را در بالای عناصر قرار دهید، مانند مثال زیر.

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

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

ویژگی های داده یک مکانیزم آسان برای اضافه کردن رو به پایین ها به هر عنصری، ارائه می دهند –تنهاکافیست data-toggle="dropdown" را برای ترتیب دادن یک dropdown، به لینک یا دکمه اضافه کنید.

مثال زیر مارک آپ پایه را که برای اضافه کردن منوی رو به پایین به یک لینک یا دکمه ها از طریق ویژگی های داده لازم است، نشان می دهد.

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

اگر می خواهید URL های شما دست نخورده باقی بمانند، به عنوان مثال # در هنگام نشان دادن drop down ها حذف می شود، از ویژگی data-target به جایhref="#" استفاده کنید.

مثال:


افزودن dropdown ها از طریق جاوا اسکریپت ممکن است dropdown هایی به صورت دستی به وسیله ی جاوااسکریپت اضافه کنید –فقط روشdropdown() بوت استرپ را با انتخابگر "id" یا "class"یا عنصر دکمه در کد جاوا اسکریپت خود، فرا بخوانید.

مثال:

 

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

یک api برنامه ای برای پیچیدن برنامه ها برای یک navbar ارائه شده یا یک مسیریابی جدول بندی شده.

مثال:


رویدادها

این ها رویدادهای استاندارد بوت استرپ برای برقراری عملکرد رو به پایین می باشند. همه ی رویدادهای رو به پایین در عنصر منبع .dropdown-menu اتفاق می افتند

Description
Event
این رویداد زمانیکه روش نمایش نمونه فراخوانده می شود، فورا اتفاق می افتد. شما می توانید از event.relatedTarget برای هدف قرار دادن عنصر پیچیده شده استفاده نمایید.
Show .b s. drop down
این رویداد زمانی اتفاق می افتد که dropdown برای یوزر قابل رویت می باشد. این رویداد برای کامل شدن تغییرات CSS منتظر می ماند. شما می توانید ازevent.relatedTarget برای هدف قرار دادن عنصر در هم پیچیده شده استفاده نمایید.
Show .b s. drop down
وقتی روش نمونه ی مخفی فیاخوانده شود، این روش فورا اتفاق می افتد. . شما می توانید ازevent.relatedTarget برای هدف قرار دادن عنصر در هم پیچیده شده استفاده نمایید.
Hide .b s. drop down
وقتی که غیرقابل رویت بودن dropdown براییوزر به پایان رسیده باشد، این رویداد اتفاق می افتد. این رویداد برای کامل شدن تغییرات CSS منتظر می ماند. . شما می توانید ازevent.relatedTarget برای هدف قرار دادن عنصر در هم پیچیده شده استفاده نمایید.
Hidden .b s. dropdown

مثال:

مثال زیر محتوای متن رو به پایین را نشان می دهد، زمانی که یوزر روی آن کلیک کرده باشد.

  • 2383
  •    1938
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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