دکمه ها
از سبکهای دکمه سفارشی فالکون برای اعمال در فرمها، دیالوگها و موارد دیگر با پشتیبانی از چندین اندازه، حالت و موارد دیگر استفاده کنید.
دکمه های روی بوت استرپدکمه های شاهین
<button class="btn btn-falcon-primary me-1 mb-1" type="button">Primary</button>
<button class="btn btn-falcon-success me-1 mb-1" type="button">Success</button>
<button class="btn btn-falcon-info me-1 mb-1" type="button">Info</button>
<button class="btn btn-falcon-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-falcon-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-falcon-default me-1 mb-1" type="button">Default</button>
دکمه های جامد
<button class="btn btn-primary me-1 mb-1" type="button">Primary</button>
<button class="btn btn-secondary me-1 mb-1" type="button">Secondary</button>
<button class="btn btn-success me-1 mb-1" type="button">Success</button>
<button class="btn btn-info me-1 mb-1" type="button">Info</button>
<button class="btn btn-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-danger me-1 mb-1" type="button">Danger</button><br class='d-none d-xl-block d-xxl-none' />
<button class="btn btn-light me-1 mb-1" type="button">Light</button>
<button class="btn btn-dark me-1 mb-1" type="button">Dark</button>
<button class="btn btn-link me-1 mb-1" type="button">Link</button>
دکمه های طرح کلی
به یک دکمه نیاز دارید، اما نه به رنگهای پسزمینه سنگینی که میآورند؟ کلاسهای اصلاحکننده پیشفرض را با کلاسهایی .btn-outline-*
جایگزین کنید تا همه تصاویر پسزمینه و رنگهای روی هر دکمه حذف شوند.
<button class="btn btn-outline-primary me-1 mb-1" type="button">Primary</button>
<button class="btn btn-outline-secondary me-1 mb-1" type="button">Secondary</button>
<button class="btn btn-outline-success me-1 mb-1" type="button">Success</button>
<button class="btn btn-outline-info me-1 mb-1" type="button">Info</button>
<button class="btn btn-outline-warning me-1 mb-1" type="button">Warning</button>
<button class="btn btn-outline-danger me-1 mb-1" type="button">Danger</button>
<button class="btn btn-outline-light me-1 mb-1" type="button">Light</button>
<button class="btn btn-outline-dark me-1 mb-1" type="button">Dark</button>
دکمه های بستن
حتماً متنی را برای صفحهخوانها اضافه کنید ، همانطور که با آن انجام دادیم aria-label
. دکمههای غیرفعال بستن وجود دارد pointer-events: none
و user-select: none
روی آن اعمال میشود و از راهاندازی حالت شناور و فعال جلوگیری میکند.
<button class="btn-close" type="button" aria-label="Close"></button><button class="btn-close" type="button" disabled="" aria-label="Close"></button>
دکمه های بستن نوع سفید
پیش فرض .btn-close
را با .btn-close-white
کلاس به رنگ سفید تغییر دهید. این کلاس از backdrop-filter
ویژگی برای معکوس کردن استفاده می کندbackground-image.
<div class="bg-1000 rounded-1 p-3 light"><button class="btn-close btn-close-white" type="button" aria-label="Close"></button><button class="btn-close btn-close-white" type="button" disabled="" aria-label="Close"></button></div>
دکمه بستن شاهین
دکمه بستن فالکون برای هر دو حالت روشن و تاریک به راستی بهینه شده است. از .btn-close-falcon
کلاس برای دکمه بستن شاهین استفاده کنید.
<div class="btn-close-falcon"></div>
اندازه دکمه ها
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ اضافه کردن .btn-lg
یا .btn-sm
برای اندازه های اضافی.
<div class="btn btn-secondary btn-sm">Small</div>
<div class="btn btn-secondary">Regular</div>
<div class="btn btn-secondary btn-lg">Large</div>
دکمه های آیکون
<button class="btn btn-falcon-default btn-sm me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Small
</button>
<button class="btn btn-falcon-default me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-falcon-default btn-lg me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Large
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-outline-primary me-1 mb-1" type="button">
<span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Outline
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
Delete<span class="fas fa-trash ms-1" data-fa-transform="shrink-3"></span>
</button>
کپسول دکمه ای
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">Example
</button><button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">
<span class="fas fa-align-left me-1" data-fa-transform="shrink-3"></span>Icon Left</button>
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">
Icon Right<span class="fas fa-align-right" data-fa-transform="shrink-3"></span>
</button><button class="btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Outline</button>
<hr />
<button class="btn btn-sm btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-falcon-default rounded-pill me-1 mb-1" type="button">Capsule Large</button>
گروه دکمه
مجموعهای از دکمهها را روی یک خط با گروه دکمهها گروهبندی کنید و با جاوا اسکریپت به آنها قدرت دهید.
دکمه-گروه در بوت استرپمثال پایه
یک سری دکمه را با .btn
داخل بپیچید .btn-group
. رادیو اختیاری جاوا اسکریپت و رفتار سبک چک باکس را اضافه کنید
<div class="btn-group" role="group" aria-label="Basic example">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
نوار ابزار دکمه
مجموعهای از گروههای دکمهها را در نوار ابزار دکمهها برای اجزای پیچیدهتر ترکیب کنید. در صورت نیاز از کلاس های کاربردی برای فاصله بین گروه ها، دکمه ها و موارد دیگر استفاده کنید.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2 mb-2" role="group" aria-label="First group">
<button class="btn btn-secondary" type="button">1</button>
<button class="btn btn-secondary" type="button">2</button>
<button class="btn btn-secondary" type="button">3</button>
<button class="btn btn-secondary" type="button">4</button>
</div>
<div class="btn-group mb-2 me-2" role="group" aria-label="Second group">
<button class="btn btn-secondary" type="button">5</button>
<button class="btn btn-secondary" type="button">6</button>
<button class="btn btn-secondary" type="button">7</button>
</div>
<div class="btn-group mb-2" role="group" aria-label="Third group">
<button class="btn btn-secondary" type="button">8</button>
</div>
</div>
نوار ابزار دکمه با گروه ورودی
به راحتی می توانید گروه های ورودی را با گروه های دکمه ای در نوار ابزار خود ترکیب کنید. مشابه مثال بالا، احتمالاً به برخی از ابزارهای کمکی نیاز دارید تا به راستی فضاها را جابجا کنید.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mb-2 me-2" role="group" aria-label="First group">
<button class="btn btn-secondary" type="button">1</button>
<button class="btn btn-secondary" type="button">2</button>
<button class="btn btn-secondary" type="button">3</button>
<button class="btn btn-secondary" type="button">4</button>
</div>
<div class="input-group mb-2">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mb-2" role="group" aria-label="First group">
<button class="btn btn-secondary" type="button">1</button>
<button class="btn btn-secondary" type="button">2</button>
<button class="btn btn-secondary" type="button">3</button>
<button class="btn btn-secondary" type="button">4</button>
</div>
<div class="input-group mb-2">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
</div>
</div>
سایز بندی
بهجای اعمال کلاسهای اندازه دکمهها برای هر دکمه در یک گروه، فقط .btn-gorup-*
به هر یک اضافه کنید .btn-group
، از جمله هر یک در هنگام تودرتو کردن چند گروه.
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group" aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
تنوع عمودی
کاری کنید که مجموعه ای از دکمه ها به جای افقی به صورت عمودی چسبیده به نظر برسند. کشویی دکمه تقسیم در اینجا پشتیبانی نمی شود.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
</div>
تغییرات عمودی با کشویی
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<div class="btn-group" role="group">
<button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop1" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown</a>
</div>
</div>
<button class="btn btn-secondary" type="button">Button</button>
<button class="btn btn-secondary" type="button">Button</button>
<div class="btn-group" role="group">
<button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop2" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"><a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop3" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"><a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop4" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
حالت غیر فعال
با افزودن ویژگی boolean غیرفعال به هر <button>
عنصر، دکمهها را غیرفعال کنید. دکمههای غیرفعال روی آن pointer-events: none;
اعمال شدهاند و از راهاندازی حالت شناور و فعال جلوگیری میکنند.
<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>
<button class="btn btn-secondary btn-lg ms-2" type="button" disabled="disabled">Button</button>
دکمه های مسدود کردن
<div class="d-grid gap-2"><button class="btn btn-primary" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>