Buttons و Button Group در Bootstrap
بهنام نوبخت · ۱۴۰۵/۷/۱۲
دکمه‌ها تقریباً در تمام وب‌سایت‌ها و برنامه‌های تحت وب وجود دارند. از دکمه‌های ساده مانند «ثبت»، «ورود» و «لغو» گرفته تا دکمه‌های پیچیده‌تر مانند «افزودن به سبد خرید»، «ویرایش»، «حذف»، «دانلود» و «ارسال فرم». در Bootstrap مجموعه‌ای کامل از کلاس‌ها برای ساخت دکمه‌های استاندارد، رنگی، Outline، بزرگ، کوچک، غیرفعال و گروه‌بندی‌شده وجود دارد. در این مقاله ابتدا ساختار Button در Bootstrap را یاد می‌گیریم، سپس انواع رنگ‌ها، اندازه‌ها، Outline، لینک‌ها، حالت Disabled و Loading را بررسی می‌کنیم و در ادامه با Button Group و ساخت دکمه‌های کاربردی در پروژه‌های واقعی آشنا می‌شویم.
Button در Bootstrap چیست؟
در HTML معمولی می‌توانیم یک Button ساده ایجاد کنیم:
<button>
Save
</button>اما ظاهر آن به مرورگر و CSS پروژه وابسته خواهد بود.
Bootstrap یک کلاس اصلی برای Buttonها دارد:
btnبنابراین یک Button ساده Bootstrap به شکل زیر است:
<button class="btn btn-primary">
Save
</button>در اینجا:
btnساختار پایه Button را ایجاد می‌کند.
و:
btn-primaryنوع رنگ و ظاهر Button را مشخص می‌کند.
ساختار کلی Button
ساختار رایج Button در Bootstrap:
<button class="btn btn-primary">
Button Text
</button>به صورت مفهومی:
btn
|
+-- Base Button Style
|
+-- btn-primary
|
+-- Button Colorمعمولاً برای ساخت Button مناسب باید هر دو کلاس btn و یکی از کلاس‌های نوع Button را استفاده کنیم.
انواع رنگ Button
Bootstrap رنگ‌های مختلفی برای Button ارائه می‌کند.
مهم‌ترین آن‌ها:
btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-darkمثال:
<button class="btn btn-primary">
Primary
</button>
<button class="btn btn-secondary">
Secondary
</button>
<button class="btn btn-success">
Success
</button>
<button class="btn btn-danger">
Delete
</button>
<button class="btn btn-warning">
Warning
</button>
<button class="btn btn-info">
Information
</button>
<button class="btn btn-light">
Light
</button>
<button class="btn btn-dark">
Dark
</button>هر کدام از این رنگ‌ها می‌توانند برای مفهوم خاصی در رابط کاربری استفاده شوند.
Button Primary
btn-primary معمولاً برای مهم‌ترین Action صفحه استفاده می‌شود.
مثلاً:
<button class="btn btn-primary">
Register
</button>یا:
<button class="btn btn-primary">
Continue
</button>Button Success
برای عملیات موفق یا Actionهایی که با مفهوم موفقیت مرتبط هستند:
<button class="btn btn-success">
Confirm
</button>مثلاً در یک فرم:
<button type="submit" class="btn btn-success">
Save Changes
</button>Button Danger
برای عملیات حساس یا خطرناک استفاده می‌شود.
مثلاً حذف:
<button class="btn btn-danger">
Delete
</button>در یک پنل مدیریت می‌توان از آن برای حذف رکورد استفاده کرد.
Button Warning
<button class="btn btn-warning">
Warning
</button>برای Actionهایی که نیاز به توجه کاربر دارند مناسب است.
Button Dark
<button class="btn btn-dark">
Dark Button
</button>برای طراحی‌های تیره و بعضی Actionهای ثانویه کاربرد دارد.
Button Light
<button class="btn btn-light">
Light Button
</button>این Button معمولاً در Backgroundهای تیره یا برای Actionهای کم‌اهمیت‌تر استفاده می‌شود.
Button Info
<button class="btn btn-info">
More Info
</button>برای Actionهایی با مفهوم اطلاعاتی مناسب است.
Button Outline
Bootstrap نسخه Outline بسیاری از Buttonها را نیز ارائه می‌کند.
مثلاً:
<button class="btn btn-outline-primary">
Primary
</button>یا:
<button class="btn btn-outline-success">
Success
</button>و:
<button class="btn btn-outline-danger">
Delete
</button>تفاوت Solid و Outline
یک Button معمولی:
<button class="btn btn-primary">
Save
</button>و یک Button Outline:
<button class="btn btn-outline-primary">
Save
</button>در طراحی رابط کاربری، معمولاً Solid Button توجه بیشتری ایجاد می‌کند و Outline Button ظاهر سبک‌تری دارد.
ترکیب چند Button
می‌توان چند Button را کنار هم قرار داد.
<div class="d-flex gap-2">
<button class="btn btn-primary">
Save
</button>
<button class="btn btn-secondary">
Cancel
</button>
</div>در اینجا از مفاهیمی که در مقالات قبلی یاد گرفتیم نیز استفاده کرده‌ایم:
d-flex
gap-2
btnButton Size
Bootstrap سه اندازه رایج برای Buttonها در اختیار ما قرار می‌دهد:
btn-sm
btn
btn-lgButton کوچک
<button class="btn btn-primary btn-sm">
Small Button
</button>Button معمولی
<button class="btn btn-primary">
Normal Button
</button>Button بزرگ
<button class="btn btn-primary btn-lg">
Large Button
</button>چه زمانی از Button کوچک استفاده کنیم؟
Button کوچک برای بخش‌هایی مانند:
Toolbar
جدول‌های مدیریتی
Actionهای کوچک
کارت‌های فشرده
مناسب است.
مثلاً:
<button class="btn btn-sm btn-outline-primary">
Edit
</button>
<button class="btn btn-sm btn-outline-danger">
Delete
</button>چه زمانی از Button بزرگ استفاده کنیم؟
Button بزرگ معمولاً برای Actionهای مهم‌تر مانند:
Hero Section
Landing Page
CTA
صفحه ثبت‌نام
صفحه خرید
کاربرد دارد.
مثلاً:
<button class="btn btn-lg btn-primary">
Start Now
</button>Button تمام عرض
برای ایجاد Button با عرض کامل می‌توان از Utilityهای Width استفاده کرد:
<button class="btn btn-primary w-100">
Login
</button>در این حالت Button عرض والد خود را پر می‌کند.
مثال فرم:
<div class="container">
<div class="col-md-6">
<button class="btn btn-primary w-100">
Login
</button>
</div>
</div>Button و Responsive Width
گاهی می‌خواهیم Button در موبایل تمام عرض باشد ولی در صفحه بزرگ‌تر فقط به اندازه محتوای خودش باشد.
می‌توان از Responsive Utility استفاده کرد:
<button class="btn btn-primary w-100 w-md-auto">
Continue
</button>در اینجا باید دقت کنیم که Utilityهای Width در نسخه مورد استفاده Bootstrap را مطابق مستندات همان نسخه انتخاب کنیم. در صورت نیاز به رفتار دقیق Responsive می‌توان از کلاس‌های Grid یا CSS اختصاصی نیز کمک گرفت.
Button با Link
Button فقط برای تگ button نیست.
می‌توانیم یک لینک را شبیه Button نمایش دهیم:
<a href="/products" class="btn btn-primary">
View Products
</a>این روش برای Navigation بسیار کاربردی است.
مثلاً:
<a href="/login" class="btn btn-outline-primary">
Login
</a>از نظر معنایی اگر هدف کاربر رفتن به یک URL باشد، استفاده از a مناسب‌تر است.
اگر هدف انجام یک Action در همان صفحه باشد، معمولاً button انتخاب مناسب‌تری است.
Button با Input
Bootstrap می‌تواند ظاهر Inputها را نیز با Buttonها هماهنگ کند.
مثلاً:
<input
type="button"
class="btn btn-primary"
value="Click Me">یا:
<input
type="submit"
class="btn btn-success"
value="Save">Button Type
در HTML بهتر است نوع Button را در فرم‌ها مشخص کنیم.
مثلاً:
<button type="submit" class="btn btn-primary">
Submit
</button>برای Button معمولی:
<button type="button" class="btn btn-secondary">
Cancel
</button>و برای Reset:
<button type="reset" class="btn btn-warning">
Reset
</button>این موضوع مخصوصاً هنگام کار با فرم‌ها اهمیت زیادی دارد.
Button Disabled
گاهی لازم است یک Button غیرفعال باشد.
در HTML:
<button
type="button"
class="btn btn-primary"
disabled>
Disabled
</button>در این حالت کاربر نمی‌تواند Button را فعال کند.
مثلاً تا زمانی که فرم کامل نشده است:
<button
type="submit"
class="btn btn-primary"
disabled>
Continue
</button>Disabled برای Link
برای لینک‌ها باید توجه بیشتری داشته باشیم.
این کد:
<a href="#" class="btn btn-primary disabled">
Disabled Link
</a>ظاهر Disabled ایجاد می‌کند، اما از نظر HTML همانند button disabled رفتار نمی‌کند.
اگر لینک واقعاً نباید قابل استفاده باشد، باید رفتار آن را نیز در JavaScript یا ساختار مناسب صفحه کنترل کنیم.
Button Active
Bootstrap امکان نمایش حالت Active را نیز دارد.
<button class="btn btn-primary active">
Active
</button>این حالت برای بعضی Interfaceها مانند Toggle یا Selection کاربرد دارد.
Button Focus
زمانی که کاربر با Keyboard روی Button حرکت می‌کند، مرورگر باید وضعیت Focus را مشخص کند.
این موضوع برای Accessibility بسیار مهم است.
به طور کلی نباید Focus Indicator را بدون دلیل حذف کنیم.
مثلاً حذف Outline با CSS مانند:
button {
outline: none;
}می‌تواند تجربه کاربران Keyboard را خراب کند.
Bootstrap بسیاری از حالت‌های Focus را به شکل مناسبی مدیریت می‌کند.
Button Group چیست؟
گاهی چند Button به یک مجموعه مرتبط هستند.
مثلاً:
+---------+---------+---------+
| Day | Week | Month |
+---------+---------+---------+برای چنین حالتی Bootstrap یک Component به نام:
Button Groupدارد.
ساخت Button Group
ساختار ساده:
<div class="btn-group">
<button type="button" class="btn btn-primary">
One
</button>
<button type="button" class="btn btn-primary">
Two
</button>
<button type="button" class="btn btn-primary">
Three
</button>
</div>Buttonها به صورت یک گروه نمایش داده می‌شوند.
Button Group با Outline
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">
Day
</button>
<button type="button" class="btn btn-outline-primary">
Week
</button>
<button type="button" class="btn btn-outline-primary">
Month
</button>
</div>این الگو برای Filterها بسیار کاربردی است.
Button Group در Toolbar
می‌توان چند گروه را در یک Toolbar قرار داد.
<div class="btn-toolbar">
<div class="btn-group me-2">
<button type="button" class="btn btn-primary">
Bold
</button>
<button type="button" class="btn btn-primary">
Italic
</button>
<button type="button" class="btn btn-primary">
Underline
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">
Undo
</button>
<button type="button" class="btn btn-secondary">
Redo
</button>
</div>
</div>ساختار کلی:
+------------------------------------------------+
| Bold | Italic | Underline Undo | Redo |
+------------------------------------------------+Button Group عمودی
گاهی لازم است Buttonها به صورت عمودی قرار بگیرند.
برای این کار:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">
Home
</button>
<button type="button" class="btn btn-primary">
Products
</button>
<button type="button" class="btn btn-primary">
Settings
</button>
</div>ساختار:
+-------------+
| Home |
+-------------+
| Products |
+-------------+
| Settings |
+-------------+این Layout برای بعضی Sidebarها و Navigationهای کوچک کاربردی است.
Button Group با Radio
یکی از کاربردهای مهم Button Group، انتخاب یکی از چند گزینه است.
مثلاً:
<div class="btn-group" role="group">
<input
type="radio"
class="btn-check"
name="options"
id="option1"
autocomplete="off"
checked>
<label
class="btn btn-outline-primary"
for="option1">
Option 1
</label>
<input
type="radio"
class="btn-check"
name="options"
id="option2"
autocomplete="off">
<label
class="btn btn-outline-primary"
for="option2">
Option 2
</label>
<input
type="radio"
class="btn-check"
name="options"
id="option3"
autocomplete="off">
<label
class="btn btn-outline-primary"
for="option3">
Option 3
</label>
</div>این الگو اجازه می‌دهد Radio Buttonها ظاهری شبیه Button داشته باشند.
btn-check چیست؟
کلاس:
btn-checkبرای مخفی کردن ظاهر پیش‌فرض Input و استفاده از Label به عنوان Button استفاده می‌شود.
مثلاً:
<input
type="checkbox"
class="btn-check"
id="check1"
autocomplete="off">
<label
class="btn btn-outline-success"
for="check1">
Select
</label>با کلیک روی Label، Checkbox انتخاب می‌شود.
این روش برای ساخت Toggleهای ساده کاربردی است.
چند انتخاب با Checkbox
می‌توان چند Checkbox را به شکل Button نمایش داد:
<div class="btn-group" role="group">
<input
type="checkbox"
class="btn-check"
id="html"
autocomplete="off">
<label
class="btn btn-outline-primary"
for="html">
HTML
</label>
<input
type="checkbox"
class="btn-check"
id="css"
autocomplete="off">
<label
class="btn btn-outline-primary"
for="css">
CSS
</label>
<input
type="checkbox"
class="btn-check"
id="javascript"
autocomplete="off">
<label
class="btn btn-outline-primary"
for="javascript">
JavaScript
</label>
</div>در این حالت کاربر می‌تواند چند گزینه را همزمان انتخاب کند.
Button Loading
Bootstrap به صورت مستقیم یک Component مستقل برای Loading Button ارائه نمی‌کند، اما می‌توانیم با Spinnerها و Utilityها یک Loading State ایجاد کنیم.
مثلاً:
<button
class="btn btn-primary"
type="button"
disabled>
<span
class="spinner-border spinner-border-sm"
aria-hidden="true">
</span>
<span role="status">
Loading...
</span>
</button>این الگو در عملیات‌هایی مانند:
ارسال فرم
Login
ثبت سفارش
پرداخت
دریافت اطلاعات از API
کاربرد زیادی دارد.
Button همراه با Icon
در پروژه‌های واقعی معمولاً Buttonها فقط متن ندارند و همراه Icon استفاده می‌شوند.
مثلاً اگر از Bootstrap Icons استفاده کنیم:
<button class="btn btn-primary">
<i class="bi bi-plus-lg"></i>
Add Product
</button>در اینجا Icon به همراه متن Button نمایش داده می‌شود.
در ادامه دوره و مقاله مربوط به Bootstrap Icons، این موضوع را به شکل کامل‌تر بررسی خواهیم کرد.
Button با Icon در سمت دیگر
برای ایجاد فاصله مناسب:
<button class="btn btn-primary d-inline-flex align-items-center gap-2">
<span>
Download
</span>
<i class="bi bi-download"></i>
</button>در این مثال از:
d-inline-flex
align-items-center
gap-2نیز استفاده کرده‌ایم.
ساخت Action Buttons برای جدول
یکی از کاربردهای بسیار رایج Buttonها در پنل‌های مدیریتی، قرار دادن Action کنار هر رکورد است.
مثلاً:
<div class="d-flex gap-2">
<button
type="button"
class="btn btn-sm btn-outline-primary">
Edit
</button>
<button
type="button"
class="btn btn-sm btn-outline-danger">
Delete
</button>
</div>در یک جدول:
+----------------------+----------------------+
| Product | Actions |
+----------------------+----------------------+
| Laptop | Edit | Delete |
+----------------------+----------------------+
| Keyboard | Edit | Delete |
+----------------------+----------------------+ساخت CTA Section
Buttonها نقش مهمی در Landing Pageها دارند.
مثال:
<section class="py-5 bg-dark text-white">
<div class="container text-center">
<h2 class="display-5 fw-bold">
Start Your Journey
</h2>
<p class="lead mt-3">
Build modern websites with Bootstrap.
</p>
<div class="d-flex justify-content-center gap-3 mt-4">
<a
href="#"
class="btn btn-primary btn-lg">
Get Started
</a>
<a
href="#"
class="btn btn-outline-light btn-lg">
Learn More
</a>
</div>
</div>
</section>این نمونه ترکیبی از چند مفهوم قبلی دوره است:
Container
Typography
Colors
Spacing
Flexbox
Buttons
Responsive DesignButtonهای Responsive
فرض کنیم در موبایل فضای کمی داریم.
می‌توانیم Buttonها را در موبایل به صورت عمودی قرار دهیم:
<div class="d-flex flex-column flex-sm-row gap-2">
<button class="btn btn-primary">
Save
</button>
<button class="btn btn-outline-secondary">
Cancel
</button>
</div>در موبایل:
+----------------------+
| Save |
+----------------------+
| Cancel |
+----------------------+در صفحه بزرگ‌تر:
+---------+-------------+
| Save | Cancel |
+---------+-------------+دسترسی‌پذیری Buttonها
Button فقط یک عنصر ظاهری نیست.
باید به Accessibility نیز توجه کنیم.
متن مناسب
بهتر است:
<button class="btn btn-primary">
Save Changes
</button>به جای:
<button class="btn btn-primary">
Click
</button>استفاده شود.
متن Button باید تا حد امکان مشخص کند چه اتفاقی رخ خواهد داد.
Icon-only Button
اگر Button فقط Icon داشته باشد، باید اطلاعات لازم برای کاربران Screen Reader نیز فراهم شود.
مثلاً:
<button
type="button"
class="btn btn-primary"
aria-label="Delete product">
<i class="bi bi-trash"></i>
</button>aria-label در این مثال مشخص می‌کند Button چه کاری انجام می‌دهد.
مثال کامل: فرم ثبت اطلاعات
حالا یک فرم ساده همراه با Button ایجاد کنیم:
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="border rounded-4 p-4 shadow-sm">
<h2 class="fw-bold mb-4">
Create Account
</h2>
<div class="mb-3">
<label class="form-label">
First Name
</label>
<input
type="text"
class="form-control">
</div>
<div class="mb-3">
<label class="form-label">
Email
</label>
<input
type="email"
class="form-control">
</div>
<div class="d-flex flex-column flex-sm-row gap-2">
<button
type="submit"
class="btn btn-primary">
Create Account
</button>
<button
type="reset"
class="btn btn-outline-secondary">
Reset
</button>
</div>
</div>
</div>
</div>
</div>این نمونه علاوه بر Buttonها، از Grid و Spacing نیز استفاده می‌کند.
بهترین روش استفاده از رنگ Buttonها
نباید صرفاً بر اساس زیبایی رنگ Button را انتخاب کنیم.
رنگ باید تا حد امکان با مفهوم Action هماهنگ باشد.
برای مثال:
Primary
Main Action
Success
Successful / Confirm Action
Danger
Delete / Destructive Action
Warning
Attention Required
Secondary
Secondary Actionاین موضوع باعث می‌شود Interface برای کاربر قابل فهم‌تر باشد.
تمرین عملی
یک بخش مدیریت محصولات ایجاد کنید.
برای هر محصول موارد زیر را نمایش دهید:
نام محصول
قیمت
وضعیت
دکمه Edit
دکمه Delete
دکمه View
نمونه ساختار:
+------------------------------------------------+
| Product | Price | Actions |
+------------------------------------------------+
| Laptop | $900 | View Edit Delete|
+------------------------------------------------+
| Keyboard | $100 | View Edit Delete|
+------------------------------------------------+شرایط:
Buttonهای Action کوچک باشند.
برای Edit از Outline استفاده کنید.
برای Delete از Danger استفاده کنید.
برای View از Primary یا Secondary استفاده کنید.
بین Buttonها فاصله مناسب ایجاد کنید.
در موبایل Buttonها بتوانند به شکل مناسب Wrap شوند.
برای Buttonهای Icon-only از
aria-labelمناسب استفاده کنید.
چالش بیشتر
یک Toolbar برای ویرایشگر متن طراحی کنید.
Toolbar باید شامل موارد زیر باشد:
Bold
Italic
Underline
Align Left
Align Center
Align Right
Undo
Redoاز:
btn-toolbar
btn-groupاستفاده کنید.
سپس یک Button Group دیگر برای انتخاب اندازه متن ایجاد کنید:
Small | Medium | Largeجمع‌بندی
در این مقاله با یکی از مهم‌ترین Componentهای Bootstrap یعنی Button آشنا شدیم.
یاد گرفتیم Button پایه را با کلاس‌های:
btn
btn-primaryایجاد کنیم و سپس با رنگ‌های مختلف مانند:
btn-success
btn-danger
btn-warning
btn-info
btn-dark
btn-lightکار کردیم.
همچنین نسخه‌های Outline را بررسی کردیم:
btn-outline-primary
btn-outline-success
btn-outline-dangerسپس اندازه‌های مختلف Button را یاد گرفتیم:
btn-sm
btn
btn-lgو با حالت‌های:
disabled
activeآشنا شدیم.
در ادامه Button Group و Button Toolbar را بررسی کردیم و یاد گرفتیم چگونه Buttonها را به صورت افقی یا عمودی گروه‌بندی کنیم.
همچنین با btn-check برای ساخت Radio و Checkboxهای ظاهری شبیه Button آشنا شدیم.
در پایان نیز نحوه ساخت Loading Button، Action Button برای جدول، CTA و Buttonهای Responsive را بررسی کردیم.
نظرات
هنوز نظری ثبت نشده است.