آموزش گروه های دکمه ای در بوت استرپ
4 سال پیش
آموزش گروه های دکمه ای در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش گروه های دکمه ای در بوت استرپ خواهیم پرداخت.
گروه های دکمه ای اجازه می دهند چندین دکمه روی یک خط قرار بگیرند. این کار هنگامی مفید است که می خواهید مواردی مانند دکمه های تراز را در کنار هم قرار دهید. با افزونه دکمه بوت استرپ می توانید به سبک اختیاری رادیو جاوا اسکریپت و استایل چک باکس اضافه کنید.
جدول زیر خلاصه ای از کلاسهای مهم بوت استرپ را برای استفاده از گروه های دکمه ای ارائه می دهد
| کلاس | توضیحات | نمونه کد | ||
|---|---|---|---|---|
| btn-group. | این کلاس برای یک گروه دکمه ای اصلی استفاده می شود. یک سری دکمه ها را با کلاس btn. در btn-group. قرار دهید |
|
||
| btn-toolbar. | این به ترکیب مجموعه های <div class = “btn-group”> در <div class = “btn-toolbar”> برای اجزای پیچیده تر کمک می کند. |
|
||
| .btn-group-lg, .btn-group-sm, .btn-group-xs | این کلاسها را می توان به جای تغییر اندازه هر دکمه ، روی گروه دکمه ها اعمال کرد. |
|
||
| .btn-group-vertical | این کلاس مجموعه ای از دکمه ها را به جای افقی به صورت عمودی انباشته شده نشان می دهد. |
|
گروه دکمه های پایه
مثال زیر استفاده از btn-group. کلاس را نشان می دهد که در جدول بالا بحث شده است –
|
1 2 3 4 5 6 7 |
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> |
نوار ابزار دکمه
مثال زیر استفاده از کلاس btn-toolbar. را نشان می دهد که در جدول بالا بحث شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </div> </div> |
اندازه دکمه
مثال زیر استفاده از کلاس – *-btn-group. است که در جدول بالا بحث شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class = "btn-group btn-group-lg"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> <div class = "btn-group btn-group-sm"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> <div class = "btn-group btn-group-xs"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </div> |
تودرتو
می توانید گروه های دکمه را درون یک گروه دکمه دیگر قرار دهید ، به عنوان مثال ، یک btn-group. را در یک.btn-group. دیگر قرار دهید. این کار زمانی انجام می شود که می خواهید منوهای کشویی مخلوط با یک سری دکمه ها داشته باشید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div> </div> |
گروه دگمه ای عمودی
مثال زیر استفاده از کلاس btn-group-vertical. است که در جدول بالا بحث شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div> </div> |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
- آموزش Glyphicons در بوت استرپ
- آموزش منوهای کشویی در بوت استرپ
نویسنده مطلب
saber
.svg)
دیدگاه شما