در این بخش به بررسی دکمه های گروهی در بوت استرپ می‌پردازدیم. این ویزگی، چند دکمه را به صورت افقی یا عمودی در یک خط کنار هم قرار می‌دهد.
مثال ساده
برای ایجاد یک گروه دکمه، کافی است دکمه ها را با کلاس .btn درون یک عنصر با کلاس .btn-group قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label="Basic Example"> <button type="button" class="btn btn-info">Register</button> <button type="button" class="btn btn-danger">Submit</button> <button type="button" class="btn btn-warning">Cancel</button> </div> </body> </html> |
برای اینکه دکمه های گروهی برای فناوری های کمکی مانند صفحه خوان ها قابل دسترسی باشند، باید از ویژگی role مناسب استفاده کنید و برای آن ها برچسب مشخص تعیین کنید.
برای دکمه های گروهی از
role="group"و برای نوار ابزار دکمه ها ازrole="toolbar"استفاده کنید.
برای برچسب گذاری می توانید از ویژگی هایaria-labelیاaria-labelledbyاستفاده کنید.
همچنین به عنوان جایگزینی برای کامپوننت های ناوبری .nav، می توانید همین کلاس ها را روی مجموعه ای از لینک ها نیز اعمال کنید.
برای مشخص کردن یک لینک فعال، از کلاس .active استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2"> <a href="#" class="btn btn-success active" aria-current="page">Registration Link</a> <a href="#" class="btn btn-success">Submit</a> <a href="#" class="btn btn-success">Cancel</a> </div> </body> </html> |
دکمه های گروهی با استایل ترکیبی در بوت استرپ
در حالت استایل ترکیبی، میتوانید یک دکمه گروهی ایجاد کنید که هر دکمه در آن دارای رنگ پس زمینه متفاوتی باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group mt-2" role="group" aria-label="Mixed styles"> <button type="button" class="btn btn-info">Register</button> <button type="button" class="btn btn-success">Cancel</button> <button type="button" class="btn btn-warning">Submit</button> </div> </body> </html> |
استایل های حاشیه (Outlined)
برای نمایش فقط رنگ حاشیه دکمه ها در یک دکمه گروهی، میتوانید از کلاس هایی مانند btn-outline-primary، btn-outline-dark و سایر کلاس های مشابه استفاده کنید. این استایل ها رنگ دکمه را به جای پس زمینه، روی مرز (border) دکمه اعمال می‌کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2" role="group" aria-label="Basic outlined"> <button type="button" class="btn btn-outline-primary">Register</button> <button type="button" class="btn btn-outline-dark">Submit</button> <button type="button" class="btn btn-outline-warning">Cancel</button> </div> </body> </html> |
دکمه های گروهی به صورت چک باکس و رادیویی
با استفاده از دکمه هایی شبیه به چک باکس (toggle buttons)، می‌توان دکمه های گروهی با ظاهر یکپارچه ایجاد کرد. برای این کار باید از کلاس .btn-check همراه با ویژگی type="checkbox" استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group my-2" role="group" aria-label="checkbox toggle button group"> <input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off"> <label class="btn btn-outline-primary" for="btnCheckbox1">Register</label> <input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off"> <label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label> <input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off"> <label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label> </div> </body> </html> |
با استفاده از دکمه هایی شبیه به دکمه رادیویی (radio toggle button)، میتوانید دکمه های گروهی با ظاهر یکپارچه بسازید. برای این منظور، از کلاس .btn-check به همراه ویژگی type="radio" استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group" role="group" aria-label="radio toggle button group"> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="buttonRadio1">Register</label> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off"> <label class="btn btn-outline-warning" for="buttonRadio2">Submit</label> <input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off"> <label class="btn btn-outline-success" for="buttonRadio3">Cancel</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نوار ابزار دکمه (Button Toolbar)
برای ساخت یک نوار ابزار دکمه میتوانید چند مجموعه از دکمه های گروهی را با هم ترکیب کنید. برای ایجاد فاصله بین گروه ها یا بین دکمه ها، از کلاس های کمکی (utility classes) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups"> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-secondary">Secondary</button> </div> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-dark">Dark</button> </div> <div class="btn-group" role="group" aria-label="toolbarButtonGroup3"> <button type="button" class="btn btn-warning">Warning</button> </div> </div> </body> </html> |
میتوانید مجموعه های ورودی (input groups) و دکمه های گروهی را در یک نوار ابزار با هم ترکیب کنید. برای تنظیم فاصله بین اجزا، از کلاس های کمکی (utilities) به شکل مناسب استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1"> <div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-secondary">secondary</button> </div> <div class="input-group"> <div class="input-group-text" id="inputbtnGroup1">@</div> <input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1"> </div> </div> <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4"> <div class="btn-group" role="group" aria-label="toolbarButtonGroup1"> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-success">Success</button> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2"> <div class="input-group-text" id="inputbtnGroup2">@example.com</div> </div> </div> </body> </html> |
تنظیم اندازه (Sizing)
هنگام تو در تو کردن چند دکمه گروهی، به جای استفاده از کلاس های اندازه‌گیری برای هر دکمه به صورت جداگانه، از کلاس هایی مانند .btn-group-sm یا .btn-group-lg روی هر عنصر .btn-group استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h6 class="mt-4">Default size button group</h6> <div class="btn-group" role="group" aria-label="Default size button group"> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-warning">Warning</button> </div> <h6 class="mt-4">Small size button group</h6> <div class="btn-group btn-group-sm" role="group" aria-label="Small size button group"> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> </div> <h6 class="mt-4">Large size button group</h6> <div class="btn-group btn-group-lg" role="group" aria-label="Large size button group"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-info">Info</button> </div> </body> </html> |
تو در تو کردن (Nesting)
برای ترکیب منوی کشویی (dropdown menu) با مجموعه ای از دکمه ها، کافی است یک .btn-group را درون یک .btn-group دیگر قرار دهید. این ساختار به شما اجازه می‌دهد منوی کشویی را در کنار سایر دکمه ها به صورت یکپارچه نمایش دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group mt-2" role="group" aria-label="Nested dropdown"> <button type="button" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-warning">Cancel</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Languages </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">English</a></li> <li><a class="dropdown-item" href="#">Hindi</a></li> </ul> </div> </div> </body> </html> |
حالت عمودی (Vertical Variation)
برای ایجاد یک دکمه گروهی به صورت عمودی (یعنی دکمه ها به شکل ستونی زیر هم قرار بگیرند)، از کلاس .btn-group-vertical استفاده کنید. توجه داشته باشید که بوت استرپ از منوهای کشویی دکمه به صورت تقسیم شده (split dropdown) در این حالت پشتیبانی نمی‌کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> </div> </body> </html> |
یک دکمه گروهی عمودی همراه با منوی کشویی ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Secondary</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Languages </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">English</a></li> <li><a class="dropdown-item" href="#">French</a></li> </ul> </div> <button type="button" class="btn btn-success">Success</button> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
دکمه گروهی عمودی با دکمه های رادیویی ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Button Groups</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio"> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" > <label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked> <label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label> <input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off"> <label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر با خواندن این مقاله به دنیای قدرتمند بوت استرپ علاقه‌مند شدید، پیشنهاد می‌کنیم حتماً نگاهی به آموزش پروژه محور بوت استرپ بیندازید. در این دوره، تمامی مفاهیم بوت استرپ از پایه تا سطح حرفه‌ای به صورت کاربردی و همراه با پروژه واقعی آموزش داده می‌شود تا بتوانید رابط‌های کاربری زیبا، واکنش گرا و حرفه‌ای طراحی کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
دوره آموزش طراحی وب سایت مدرسه با PHP و MySql
- انتشار: ۶ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
