نحوه استفاده از دکمه ها و پیام ها در Bootstrap

در بخش های مختلفی از یک سایت نیاز به استفاده از دکمه های عملیاتی می باشد و این دکمه ها برای جلب نظر کاربر، باید با استایل های مختلف در محل مناسب نمایش داده شود. در Bootstrap این قابلیت وجود دارد که علاوه بر تگ button به سایر عناصر مانند لینک ها، divها و ... نیز استایل مربوط به دکمه را اعمال نمود تا شکل ظاهری آنها شبیه به یک دکمه عملیاتی باشد.

دکمه ها

برای تخصیص استایل به دکمه های عملیاتی ابتدا باید کلاس btn و سپس یکی از پسوند های رنگی مانند btn-primary را به عنصر مورد نظر اعمال نمود.

در مثال زیر نمونه هایی اس چند دکمه را مشاهده می نمایید.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-light">Light</button>

همچنین در Bootstrap 4 این امکان وجود دارد که از دکمه های بدون رنگ اما حاشیه دار (تو خالی) استفاده نمایید. بدین منظور کافی است به جای btn-primary عبارت btn-outline-primary را استفاده نمایید.

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-dark">Dark</button>
<button class="btn btn-outline-light">Light</button>

پیام ها

در برخی از صفحات نیاز است پیام هایی متمایز از سایر بخش هایم موجود در صفحه به کاربر نمایش داده شود. در این مواقع می توانید با اختصاص دادن کلاس alrt به همراه یکی از پسوندهای رنگی، پیام ها را با رنگبندی متفاوتی به کاربران نمایش دهید.

<div class="alert alert-primary">Primary Alert</div>
<div class="alert alert-success">Success Alert</div>
<div class="alert alert-danger">Danger Alert</div>
<div class="alert alert-info">Info Alert</div>
<div class="alert alert-warning">Warning Alert</div>
<div class="alert alert-dark">Dark Alert</div>
<div class="alert alert-light">Light Alert</div>

در صورتیکه قصد داشته باشید کادر پیغامی قابلیت بسته شدن داشته باشد می توانید درون آن از یک button با آیکن X جهت بستن کادر استفاده نمایید.

<div class="alert alert-primary alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  جهت بستن پیام روی دکمه X کلیک کنید.
</div>

در این مثال به div حاوی پیام کلاس های زیر اضافه شده اند:

• alert-dismissible
• fade
• show

همچنین دکمه استفاده شده جهت بستن دارای کلاس close می باشد و خاصیت data-dismiss آن نیز برابر alert قرار گرفته است تا با کلیک روی آن، alert مربوطه را ببندد.