آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم
سلام دوستان. توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. با ما همراه باشید با ادامه آموزش…
آموزش ساخت منوی کشویی در بوت استرپ :
منوی کشویی ساده : منوی کشویی در واقع منویی ست که به کاربر اجازه میدهد تا لز یک لیست از پیش تعیین شده یک مقدار را انتخاب کند.
<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>
سر فصل (هدر) منو کشویی :
از کلاس .dropdown-header برای اضافه کردن سرفصل درون منوی کشویی استفاده میشود
<li class="dropdown-header">Dropdown header 1</li>
غیر فعال کردن یک گزینه در منوی کشویی بوت استرپ :
برای غیر فعال کردن یک ایتم در منوی کشویی از کلاس .disabled استفاده کنید.
<li class="disabled"><a href="#">CSS</a></li>
موقعیت منوی کشویی در بوت استرپ :
برای اینکه منوی کشویی را در سمت راست نشان دهید کلاس .dropdown-menu-right را به عنصور حاوی منوی کشویی اضافه کنید.
<ul class="dropdown-menu dropdown-menu-right">
منوی سمت بالا در بوت استرپ :
اگر میخواهید منوی کشویی تان به سمت بالا باز شود ، عنصر <div> به همراه کلاس dropdown را به “dropup” تغییر دهید.
<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>
The post آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم appeared first on آموزش برنامه نویسی.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
آموزش برنامه نویسی