در این جلسه از دوره آموزش بوت استرپ به بررسی گروه بندی دکمه ها می پردازیم.
بررسی گروه بندی دکمه ها
گروه بندی دکمه ها در بوت استرپ را می توان به صورت خطی و گروهی ایجاد کرد.این ویژگی به شما این امکان را می دهد که دسته ای ازدکمه ها را به صورت خطی در کنار هم قرار دهید.
به مثال زیر دقت کنید:
<div class="container">
<h2>Justified Button Groups</h2>
<p>To span the entire width of the screen, use the .btn-group-justified class:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
سایز بندی های مختلف را می توان به گروه بندی دکمه ها به راحتی اعمال کرد.به جای استفاده از سایز برای هر دکمه می توان کلاس سایزها را به گروه بندی دکمه ها در بوت استرپ اعمال کرد.در مثال زیر این موضوع مورد بررسی قرار گرفته است.به نحوی که یک بارکلاس به div والد اعمال شده است و همه div ها را تحت تاثیر قرار داده است.
<div class="container">
<h2>Button Groups - Set Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h3>Default Buttons:</h3>
<div class="btn-group">
<div class="container">
<h2>Button Groups - Set Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h3>Extra Small Buttons:</h3>
<div class="btn-group btn-group-xm">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
کلاس BTN-GROUP-VERTICAL :
دربوت استرپ می توان دکمه ها را به صورت گروه بندی عمودی در کنار هم به صورت خطی ایجاد کرد.برای ایجاد این نوع گروه بندی دکمه ها از کلاس btn-group-vertical استفاده می شود.
<div class="container">
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
کلاس BTN-GROUP-JUSTIFIED :
به وسیله این کلاس دکمه هایی می سازیم که تمام عرض صفحه را در بر می گیرند.تعداداین دکمه ها را می توان به صورت دلخواه تعیین کرد.
به مثال زیر دقت نمایید.این کلاس به عنصر a اعمال شده است.
<div class="container">
<h2>Justified Button Groups</h2>
<p>To span the entire width of the screen, use the .btn-group-justified class:</p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
</div>
این کلاس را می توان به گروه بندی دکمه ها اعمال کرد.
<div class="container">
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
</div>ایجاد دکمه هایی با منو کشویی در بوت استرپ :
- در بوت استرپ این امکان وجود دارد که دکمه هایی به صورت منو های کشویی در یک گروه دکمه ایجاد کرد.
- این کلاس ها به صورت پیش فرض در بوت استرپ تعریف شده اند و شما می توانید آنها را به کار ببندید.
- در زیر مثال زیر گروهی از دکمه ها را داریم که به صورت خطی در کنار هم قراردارند و یکی از آنها را به منوی کشوی تبدیل کرده ایم.
<div class="container">
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create drop down menus:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
تقسیم بندی دکمه به صورت کشویی:
در بوت استرپ می توانید بخش منو و دکمه را به صورت مجزادر کنار هم ایجاد کنید .
به مثال زیر دقت کنید.
<div class="container">
<h2>Split Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
