سبد (0)

تبلیغات

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

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

Wiki

یک منوی کشویی، درواقع منویی است که، به کاربر این امکان را می دهد تا یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند:

dropDown

 

مثال

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">مثال منوی کشویی
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

امتحان کنید »

توضیح مثال بالا:

کلاس dropdown. یک منوی کشویی را مشخص می کند.

برای باز کردن یک منوی کشویی، از یک دکمه یا یک لینک استفاده کنید و کلاس dropdown-toggle. و همچنین خصوصیت"data-toggle="dropdown  را به آن انتساب دهید.

توجه داشته باشید که کلاس caret. باعث می شود تا یک آیکن اشاره گر ایجاد شود. این اشاره گر مشخص می کند که دکمه ی مورد نظر دارای قابلیت کشویی است.

و در آخر برای اینکه به طور واقعی منوی کشویی خود را ساخته باشیم، کافی است که از کلاس dropdown-menu درون یک عنصر <ul> استفاده کنیم.



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

Wiki

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

مثال

<li class="divider"></li>

امتحان کنید »


 سرفصل منوی کشویی در بوت استرپ

Wiki

dropDownHeader

مثل

<li class="dropdown-header">سرفصل منوی 1</li>

امتحان کنید »


 غیر فعال کردن یک آیتم در منوی کشویی بوت استرپ

Wiki

disabledDropdownItem

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

مثال

<li class="disabled"><a href="#">CSS</a></li>

امتحان کنید »


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

Wiki

مثال

<ul class="dropdown-menu dropdown-menu-right">

امتحان کنید »
upDropdown
اگر تمایل دارید که منوی کشویی به جای باز شدن به سمت پایین، به سمت بالا باز شود، کافی است که کلاس عنصر <div> با کلاس drop-down را به dropup تغییر دهید:

مثال

<div class="dropup">

امتحان کنید »


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

Wiki

برای بهتر کردن دسترسی کسانی که از صفحه خوان ها استفاده می کنند، بایستی خصوصیات role و *-aria را به هنگام ایجاد یک منوی کشویی، اضافه کنید:

مثال

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>

امتحان کنید »


 با تمرین خودتان را محک بزنید!

تمرین 1 »  تمرین 2 »  تمرین 3 »  تمرین 4 »  تمرین 5 »

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان