خواندن ۲ دقیقه·۴ سال پیش

کار با دکمه ها در بوت استرپ

در بوت استرپ میتوان از button برای ایجاد دکمه استفاده کرد.

دکمه های میتوانند کلاس های مختص به خود را بگیرند و هر کدام ویژگی مختص به خود مانند رنگی شدن دکمه , لینک دار بودن , تغیر اندازه و... را دارند .

ابتدا برای ایجاد دکمه در بوت استرپ باید از تگی به نام <button> استفاده کرد و همچنین کلاسی به نام .btn به خود بگیرد :

<button type = “button” class=”btn”> click </button>

رنگی کردن دکمه:

دکمه ها میتواند رنگ های موجود و تعریف شده در بوت استرپ را با کلاس رنگ ها به خود اختصاص دهند :

Btn-dark/ btn-danger / btn-warning / .btn-info / .btn-primary / .btn-success /

که مدل کد نویسی آن به صورت زیر است :

<button type = “ button” class=”btn btn-info”> click </button>

لینک دار شدن دکمه ها:

دکمه ها میتوانند این قابلیت را داشته باشند که تا با کلیک روی آن به ادرس مورد نظر ارجاع داده شوند همچنین باید از کلاسی به نام .btn-link نیز استفاده شود.

<button type=”button” class=”btn btn-link”>

قابلیت submit شدن دکمه :

برای اینکه همچین قابلیتی به دکمه خود اضافه کنیم باید value = “submit” به داخل تگ button اضافه شود.

<button type=”button” class=”btn btn-link” value = “submit”>

عدم رنگ در دکمه :

اگر بخواهیم دکمه مورد نظر رنگی نداشته باشد و به صورت پیش فرض برای آن رنگ تعیین شود باید از کلاسی به نام btn-outline استفاده شود :

<button type=”button” class=”btn btn-outline-info > click </button>

تغیر اندازه باکس دکمه :

اگر بخواهیم باکس دکمه مورد نظر را اندازه آن را تغییر دهیم میتوان از 4 کلاس .btn-sm / .btn-md / .btn-lg / .btn-xl استفاده کرد.

<button type=”button” class=”btn btn-info btn-sm > click </button>

همچینین اگر بخواهیم دکمه مد نظر حداکثر پهنا خود را داشته باشد باید از کلاسی به نام btn-block استفاده شود

فعال یا غیر فعال بودن دکمه :

دکمه ایجاد شده را اگر بخواهیم به حالت فعال و اکتیو و یا حالت غیر فعال در اوریم باید از active به عنوان دکمه فعال و پویا و از کلاس .disable به حالت کم رنگتر که به معنی این است که دکمه مورد نظر فعال نیست استفاده کرد

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

که روش کار به این صورت است که ابتدا یک div ایجاد میکنیم که در آن کلاسی به نام .btn-group را استفاده میکنیم و سپس درون این تگ آن دکمه هایی را که میخواهیم گروه شوند را ذکر میکنیم:

<button type = “ button” class=”btn btn-info”> click 1 </button>

<button type = “ button” class=”btn btn-info”> click 2 </button>

</div>