آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم

سلام دوستان. توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. با ما همراه باشید با ادامه آموزش…

 

 

آموزش ساخت منوی کشویی در بوت استرپ :

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

1

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <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> اضافه کنید .

 

جداکننده منوی کشویی :

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

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

 

سر فصل (هدر) منو کشویی :

2

از کلاس .dropdown-header برای اضافه کردن سرفصل درون منوی کشویی استفاده میشود

<li class="dropdown-header">Dropdown header 1</li>

 

غیر فعال کردن یک گزینه در منوی کشویی بوت استرپ :

3

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

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

 

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

4

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

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

منوی سمت بالا در بوت استرپ :

اگر میخواهید منوی کشویی تان به سمت بالا باز شود ، عنصر <div> به همراه کلاس dropdown را به “dropup” تغییر دهید.

5

<div class="dropup">

 

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

برای بهبود دسترسی برای افرادی که از صفحه خوان ها اسیفاده میکنند باید خصوصیات 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>

 

 

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل
  • انتشار: ۱۲ خرداد ۱۳۹۵

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.