%45 تخفیف، با کد Fetr روی تمام آموزش ها، بمناسبت عید سعید فطر
زمان باقی مانده
سبد (0)

تبلیغات

دکمه های گروهی در بوت استرپ

نحوه ی گروه بندی دکمه ها در بوت استرپ

Wiki

بوت استرپ به ما امکان می دهد تا دکمه ها را بصورت خطی گروه بندی کنیم. به مثال زیر توجه کنید:

 

برای ایجاد دکمه های گروهی، می توانید از یک عنصر <div> به همراه کلاس btn-group استفاده کنید. به مثال زیر توجه کنید و سپس آن را اجرا کنید:

مثال

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

امتحان کنید»

نکته: به جای اینکه هر دکمه در یک گروه را اندازه دهی کنید، می توانید با استفاده از کلاس *-btn-group برای تمام دکمه ها، اندازه ای یکسان تهیه کنید:

مثال

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

امتحان کنید»

ایجاد دکمه های گروهی عمودی در بوت استرپ

Wiki

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

 

برای ایجاد دکمه های گروهی عمودی، می توانید از کلاس btn-group-vertical. استفاده کنید:

مثال

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

امتحان کنید »

دکمه های گروهی تو در تو و منوهای کشویی در بوت استرپ

Wiki

شما می توانید با استفاده از دکمه های گروهی تو در تو، منوی کشویی ایجاد کنید. به مثال زیر توجه کنید:

مثال

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

امتحان کنید»

 

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان