لیست گروهی در بوت استرپ (List Group) یکی از کاربردی ترین اجزای رابط کاربری است که به شما امکان می دهد مجموعه ای از آیتم ها را به صورت مرتب، تعاملی و کاملاً واکنش گرا نمایش دهید. چه در حال طراحی یک داشبورد مدیریتی باشید و چه بخواهید یک بخش اعلان یا منوی جانبی ایجاد کنید، این قابلیت به کارتان خواهد آمد. اگر قبلاً در یک دوره طراحی سایت با بوت استرپ شرکت کرده باشید، احتمالاً با اصول اولیه این کامپوننت آشنا هستید. اما در این مقاله می خواهیم به صورت کامل و با مثال های عملی، تمام جزئیات و نکات حرفه ای آن را بررسی کنیم.
آیتم های پایه
لیست گروهی در اصل یک فهرست بدون ترتیب (unordered list) است که از آیتم های لیست و کلاس های مناسب تشکیل می شود. شما می توانید این لیست را با استفاده از CSS دلخواه خود طراحی و سفارشی سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html> |
آیتم های فعال در لیست گروهی بوت استرپ
برای نمایش آیتمی که در حال حاضر به عنوان انتخاب فعال شناخته می شود، کافی است کلاس .active را به عنصر .list-group-item اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item">item 1</li> <li class="list-group-item active" aria-current="true">An active item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html> |
آیتم های غیرفعال در لیست گروهی
برای غیرفعال کردن یک آیتم در لیست گروهی، کافی است کلاس .disabled را به عنصر .list-group-item اضافه کنید. توجه داشته باشید که برای برخی آیتم ها با کلاس .disabled، لازم است با استفاده از کدهای جاوااسکریپت سفارشی، عملکرد کلیک آن ها را به طور کامل غیرفعال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item ">item 1</li> <li class="list-group-item ">item 2</li> <li class="list-group-item disabled" aria-disabled="true">A disabled item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </body> </html> |
لینک ها و دکمه ها در لیست گروهی
با افزودن کلاس .list-group-item-action، می توانید از تگ های <a> یا <button> برای ایجاد یک لیست گروهی تعاملی استفاده کنید. این لیست می تواند حالت های مختلفی مانند هاور (hover)، غیرفعال (disabled) و فعال (active) داشته باشد.
به خاطر داشته باشید که در اینجا نباید از کلاس های استاندارد
.btnاستفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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="list-group"> <a href="#" class="list-group-item list-group-item-action ">item 1</a> <a href="#" class="list-group-item list-group-item-action">item 2</a> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item 3</a> <a href="#" class="list-group-item list-group-item-action">item 4</a> <a class="list-group-item list-group-item-action disabled">item 5</a> </div> </body> </html> |
شما می توانید برای تگ <button> به جای استفاده از کلاس .disabled، از ویژگی disabled استفاده کنید. توجه داشته باشید که تگ <a> از ویژگی disabled پشتیبانی نمی کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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="list-group"> <button type="button" class="list-group-item list-group-item-action ">item 1</button> <button type="button" class="list-group-item list-group-item-action">item 2</button> <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button> <button type="button" class="list-group-item list-group-item-action">item 4</button> <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
حالت Flush لیست گروهی در بوت استرپ
برای نمایش عناصر لیست گروهی به صورت چسبیده به لبه های ظرف والد (مانند کارت ها)، می توانید با افزودن کلاس .list-group-flush، حاشیه ها و گوشه های گرد را حذف کنید.
|
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 - List Group</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> <ul class="list-group list-group-flush"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> <li class="list-group-item">item 4</li> <li class="list-group-item">item 5</li> </ul> </button> </body> </html> |
لیست های شماره دار در بوت استرپ
برای استفاده از آیتم های لیست گروهی شماره دار، می توانید کلاس کمکی .list-group-numbered را اضافه کنید (در این حالت نیازی به استفاده از تگ <ol> نیست).
در این حالت، از ویژگی counter-reset روی تگ <ol> برای تولید شماره ها استفاده می شود. این شماره ها سپس با کمک counter-increment و ویژگی content، از طریق شبه عنصر ::before بر روی تگ <li> نمایش داده و استایل دهی می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ol class="list-group list-group-numbered"> <li class="list-group-item">Item One</li> <li class="list-group-item">Item Two</li> <li class="list-group-item">Item Three</li> </ol> </button> </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 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 1</div> Content of list item </div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 2</div> Content of list item </div> <span class="badge bg-primary rounded-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading 3</div> Content of list item </div> <span class="badge bg-primary rounded-pill">8</span> </li> </ol> </button> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
حالت افقی لیست گروهی در بوت استرپ
با افزودن کلاس .list-group-horizontal می توانید چینش آیتم های لیست گروهی را از حالت عمودی به حالت افقی تغییر دهید. این تغییر در تمام نقاط شکست (breakpoints) اعمال می شود.
برای ایجاد لیست گروهی افقی که از یک نقطه شکست خاص به بعد (min-width) شروع شود، می توانید از کلاس های واکنش گرا (responsive) به صورت .list-group-horizontal-{sm|md|lg|xl|xxl} استفاده کنید.
نکته مهم این است که نمی توانید حالت افقی را با حالت Flush به طور همزمان ترکیب کنید.
نکته: اگر می خواهید آیتم های لیست گروهی در حالت افقی عرض یکسان داشته باشند، کافی است به هر آیتم کلاس
.flex-fillاضافه کنید.
|
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 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group list-group-horizontal"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-sm"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-md"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-lg"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-xl"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> <ul class="list-group list-group-horizontal-xxl"> <li class="list-group-item">item 1</li> <li class="list-group-item">item 2</li> <li class="list-group-item">item 3</li> </ul> </button> </body> </html> |
انواع استایل ها برای لیست گروهی در بوت استرپ
شما می توانید با استفاده از کلاس های زمینه ای مانند .list-group-item-primary، .list-group-item-secondary و سایر کلاس های مشابه، آیتم های لیست گروهی را با پس زمینه و رنگ مشخص و دارای وضعیت (stateful) استایل دهی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item">Default list group item</li> <li class="list-group-item list-group-item-primary">Primary list group item</li> <li class="list-group-item list-group-item-secondary">secondary list group item</li> <li class="list-group-item list-group-item-success">Success list group item</li> <li class="list-group-item list-group-item-danger">Danger list group item</li> <li class="list-group-item list-group-item-warning">Warning list group item</li> <li class="list-group-item list-group-item-info">Info list group item</li> <li class="list-group-item list-group-item-light">Light list group item</li> <li class="list-group-item list-group-item-dark">Dark list group item</li> </ul> </body> </html> |
استایل لینک ها و دکمه ها در لیست گروهی
شما می توانید کلاس های زمینه ای (contextual classes) را همراه با .list-group-item-action برای عناصر <a> و <button> به کار ببرید.
برای مشخص کردن یک آیتم فعال در لیست گروهی زمینه ای، کافی است کلاس .active را به آن اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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="list-group"> <a href="#" class="list-group-item list-group-item-action">item 1</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">item 2</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a> </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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> item 1 <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> item 2 <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> item 3 <span class="badge bg-primary rounded-pill">1</span> </li> </ul> </body> </html> |
محتوای سفارشی
با استفاده از ابزارهای کمکی Flex، می توانید تقریباً هر نوع محتوای 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 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1"> Heading 1</h5> <small>3 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small>muted small print</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Heading 2</h5> <small class="text-body-secondary">2 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small class="text-body-secondary">muted small print</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Heading 3</h5> <small class="text-body-secondary">1 days ago</small> </div> <p class="mb-1">Some content in paragraph</p> <small class="text-body-secondary">muted small print</small> </a> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
چک باکس ها و دکمه های رادیویی
می توانید چک باکس ها و دکمه های رادیویی بوت استرپ را داخل آیتم های لیست گروهی اضافه کنید و مطابق نیاز خود آن ها را سفارشی سازی کنید. استفاده از این عناصر حتی بدون تگ <label> نیز امکان پذیر است. فقط فراموش نکنید که برای رعایت اصول دسترسی پذیری، ویژگی aria-label و مقدار مناسب آن را به این عناصر اضافه کنید.
|
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 - List Group</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> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"> <label class="form-check-label" for="firstCheckbox">Male</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"> <label class="form-check-label" for="secondCheckbox">Female</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"> <label class="form-check-label" for="thirdCheckbox">Other's</label> </li> </ul> </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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - List Group</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> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked> <label class="form-check-label" for="firstRadio">Male</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"> <label class="form-check-label" for="secondRadio">Female</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"> <label class="form-check-label" for="thirdRadio">Other's</label> </li> </ul> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای این که کل آیتم لیست گروهی قابلیت کلیک داشته باشد، می توانید از کلاس .stretched-link بر روی تگ های label استفاده کنید.
|
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 - List Group</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> <ul class="list-group mt-2"> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1"> <label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label> </li> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2"> <label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label> </li> <li class="list-group-item"> <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3"> <label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label> </li> </ul> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)
- انتشار: ۱۱ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
