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

آموزش منوی کشویی بوت استرپ-BootStrap Dropdown

دوره های مرتبط با این مقاله

منوی کشویی اولیه (Basic Dropdown)

منوی dropdown یا کشویی یک منوی تبدیل پذیر است که به کاربر اجازه می دهد مقدار خاصی را از یک لیستِ از پیش تعریف شده انتخاب نماید. به مثال پایین توجه کنید

نمونه 1

امتحان کنید

کلاسِ .dropdown بیانگرِ یک منوی کشویی(Dropdown) است.
برای باز کردنِ منوی کشویی(Dropdown)، از یک کلید یا لینک به همراه کلاسِ .dropdown-toggle و ویژگیِ data-toggle="dropdown"استفاده نمایید.
کلاسِ .caret موجب ایجاد یک آیکنِ اشاره گرِ caret می شود. این آیکن نشان گرِ این است که دکمه از نوعِ کشویی می باشد.
برای ایجاد منوی کشویی(Dropdown)، کلاسِ .dropdown-menu را به عنصرِ <ul> اضافه کنید.

تقسیم کننده ی منوی کشویی

برای جدا کردنِ لینک های موجود در یک منوی کشویی(DropDown)، از کلاسِ divider استفاده می شود

عنوان منوی کشویی(Dropdown Header)

به منظورِ افزودنِ عنوان (Header) در درونِ منوی کشویی(Dropdown)، از کلاسِ dropdown-header استفاده می گردد

نمونه 3


امتحان کنید

غیر فعال کردن یک آیتم

برای غیر فعال کردنِ یک آیتم یا لینک در منوی کشایی، از کلاسِ .disabled استفاده نمایید

موقعیت یک منوی کشویی

برای راست چین کردنِ منوی کشویی، کلاسِ .dropdown-menu-right را اضافه کنید

DropUP

اگر بخواهید منوی کشویی(Dropdown) شما به جای نمایش آیتم ها به سمت پایین، آنها را به سمت بالا نمایش دهد، عنصرِ <div> را به جای استفاده با "dropdown" ، با کلاسِ "dropup" به کار بگیرید

دستیابی به منوی کشویی (DropDown)

برای کمک به ارتقاءِ دستیابی برای افرادی که از screen reader استفاده می کنند، به هنگام ایجاد یک منوی کشویی باید ویژگی های role و aria-*را اضافه نمایید:

  • 4011
  •    836
  • تاریخ ارسال :   1395/10/12

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

ارسال

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

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