DropDown ها در بوت استرپ

[saeed410]

در قسمت قبل با کامپوننت Glyphicon در بوت استرپ آشنا شدیم. یکی از موارد مهم در طراحی سایت ایجاد منوهای زیبا است. در این قسمت سعی میکنیم با استفاده از کلاسهای آماده بوت استرپ روشهای ایجاد منو ها را مورد بحث و بررسی قرار بدیم. علاوه بر این ؛بوت استرپ شامل کلاسهایی میشه که توانایی واکنش گرایی به منوها میدن و منوها در دستگاههای کوچک تغییر وضعیت میدن.همچنین علاوه بر کلاسهای گفته شده در این قسمت ؛ قابلیت استفاده از پلاگین جاوااسکریپت DropDown برای ایجاد منوهای تعاملی بهتر نیز وجود دارد که این پلاگین در قسمت پلاگین های بوت استرپ مورد بحث و بررسی قرار میگیرد.منوهای DropDown یا آبشاری قابلیت تغییر وضعیت دارند ؛ به اصطلاح انگلیسی toggleable هستند.


[h=2]toggle به چه معنی است؟[/h] toggle به هر چیزی گفته میشود که دارای دوحالت مختلف و پایدار باشد. در اینجا منظور ما از toggleable این است که منوها در دستگاههای مختلف تغییر وضعیت و حالت میدهند.زمانی که از کلاس toggle استفاده میکنیم منو به صورت فشرده نمایش داده میشود.
[h=2]استفاده از کلاس dropdown در بوت استرپ :[/h] برای ایجاد منوی dropdown کافی است یک div ایجاد کرده و کلاس dropdown را به آن اختصاص دهیم. مثال زیر یک منوی آبشاری ساده را نشان میدهد.

[HTMLS]

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
عناوین آموزشی
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">جاوااسکریپت</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">داده کاوی</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
شبکه
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">لینک جدا</a>
</li>
</ul>
</div>
​

[/HTMLS] تصویر دموی این کد:

[h=2]چیدمان منو :[/h] برای تغییر چیدمان منو میتوانید از کلاس pull-left و pull-right استفاده کنید. در مثال زیر ما از pull-left استفاده کرده ایم:
[HTMLS]

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
عناوین آموزشی
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">جاوااسکریپت</a>
</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">داده کاوی</a>
</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">
شبکه
</a>
</li>
<li role="presentation" ></li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">لینک جدا</a>
</li>
</ul>
</div>
​

[/HTMLS]
تصویر دموی این کد :

[h=2]هدر ها در بوت استرپ :[/h] برای افزودن هدر به هر کدام از قسمت های منو از کلاس dropdown-header استفاده کنید. مثال :
[HTMLS]

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
عنوان آموزش ها
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">هدر منوی آبشاری</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">جاوااسکریپت</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">داده کاوی</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
شبکه
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">هدر منوی آبشاری</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">لینک جدا</a>
</li>
</ul>
</div>

​

[/HTMLS] تصویر دموی کد :

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