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

0 دیدگاه

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

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

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

<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>

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example

<li><a href="#">JavaScript</a></li>

</ul>

</div>

توضیح مثال :

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

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

کلاس .caret یک ایکن فلش مانند میسازد که حاکی از یک منوی کشویی ست .برای ساخت منوی کشویی کلاس .dropdown-menu را به عنصر <ul> اضافه کنید .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="dropup">

1	<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>

<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials

<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>

<li role="presentation"><a role="menuitem" href="#">About Us</a></li>

</ul>

</div>

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

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

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ

انتشار: ۱۲ خرداد ۱۳۹۵

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

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

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

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

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

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط