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

[saeed410]

در قسمت قبل با کامپوننت Glyphicon در بوت استرپ (http://sypna.ir/AllArticles/ID/17/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-Glyphicons) آشنا شدیم. یکی از موارد مهم در طراحی سایت (http://Sypna.ir) ایجاد منوهای زیبا است. در این قسمت سعی میکنیم با استفاده از کلاسهای آماده بوت استرپ روشهای ایجاد منو ها را مورد بحث و بررسی قرار بدیم. علاوه بر این ؛ بوت استرپ شامل کلاسهایی میشه که توانایی واکنش گرایی به منوها میدن و منوها در دستگاههای کوچک تغییر وضعیت میدن.همچنین علاوه بر کلاسهای گفته شده در این قسمت ؛ قابلیت استفاده از پلاگین جاوااسکریپت DropDown برای ایجاد منوهای تعاملی بهتر نیز وجود دارد که این پلاگین در قسمت پلاگین های بوت استرپ مورد بحث و بررسی قرار میگیرد.منوهای DropDown یا آبشاری قابلیت تغییر وضعیت دارند ؛ به اصطلاح انگلیسی toggleable هستند.


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


<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>
تصویر دموی این کد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootstrapDropDownComponent/Bootstrap-DropDown-Menu-Demo.png
چیدمان منو : برای تغییر چیدمان منو میتوانید از کلاس pull-left و pull-right استفاده کنید. در مثال زیر ما از pull-left استفاده کرده ایم:


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

تصویر دموی این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootstrapDropDownComponent/Bootstrap-DropDown-Menu-alignmentDemo.JPG
هدر ها در بوت استرپ : برای افزودن هدر به هر کدام از قسمت های منو از کلاس dropdown-header استفاده کنید. مثال :


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

تصویر دموی کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootstrapDropDownComponent/Bootstrap-DropDown-Menu-Header-Demo.jpg
در آموزش بعدی با کامپوننت دکمه ها آشنا خواهیم شد.

در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)