دکمه ها

دکمه های پیش فرض

بوت استرپ 6 طرح از پیش تعریف شده دکمه ها را شامل می شود که هر کدام برای هدف خاصی کاربرد دارند.

دکمه های دور خط دار

کلاس های کاربردی پیش فرض را با کلاس .btn-outline-* تعویض کنید تا هر گونه تصویر و رنگ پس زمینه از دکمه ها حذف شود.

دکمه های دور گرد

از کلاس .btn-rounded برای دکمه های دور گرد استفاده کنید.

دکمه های دارای آیکن

افزودن آیکن داخل دکمه.

اندازه های دکمه ها

افزودن .btn-lg یا .btn-sm برای سایر اندازه های دکمه ها کاربرد دارد.

عرض دکمه ها

افزودن .w-xs, .w-sm, .w-md و .w-lg برای سایر عرض های دکمه ها کاربرد دارد.

برچسب های دکمه ها

کلاس های .btn طوری طراحی شده اند که با المان <button> کار کنند. هرچند میتوانید این کلاس ها را بر روی تگ <a> یا <input> استفاده کنید (هرچند برخی مرورگر ها ممکن است نمایش متفاوتی داشته باشند).

لینک

تغییر وضعیت

افزودن data-toggle="button" برای تغییر وضعیت active دکمه ها کاربرد دارد. اگر وضعیت دکمه را میخواهید از قبل مشخص کنید، باید به صورت دستی کلاس .active و aria-pressed="true" را به <button> اضافه کنید.

دکمه های بلوک

دکمه های به عرض بلوک که به اندازه تمام عرض والد خود می باشند را با استفاده از کلاس .btn-block می توانید ایجاد کنید.

دکمه های چک باکس و رادیویی

استایل های .button قابل اعمال به سایر المان ها از جمله <label> هستند تا تغییر وضعیت دکمه با طرح چک باکس و دکمه های رادیویی را محیا کنند. افزودن data-toggle="buttons" به یک .btn-group که شامل این دکمه های تغییر یافته هستند باعث فعال شدن تغییر وضعیت برای آن ها در استایل های مربوطه خودشان می شود.

گروه دکمه ها

یک مجموعه از دکمه های دارای کلاس .btn را داخل .btn-group قرار دهید تا به صورت یک گروه نمایش داده شوند.

نوار ابزار دکمه ها

چند مجموعه از گروه های دکمه ها را در نوار ابزار های دکمه ای برای ایجاد کامپوننت های پیچیده تر ترکیب کنید. از کلاس های کاربردی در صورت نیاز استفاده کنید تا فاصله گروه ها، دکمه ها و ... از یکدیگر را تنظیم کنید.

اندازه ها

به جای افزودن کلاس های اندازه دهی به تک تک دکمه های داخل یک گروه، فقط کلاس .btn-group-* را به هر .btn-groupاضافه کنید. در صورت تو در تو بودن گروه ها به هر کدام اضافه کنید.



نوع عمودی

دسته ای از دکمه ها را به صورت عمودی روی هم نمایش دهید. منو های کشویی دارای دکمه های جدا شده در اینجا پشتیبانی نمی شود.

© کووکس.
ارائه شده در وب‌سایت راست‌چین