Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش bootstrap5 کار با دکمه ها در بوت استرپ

آموزش Bootstrap                                                                             قسمت پنجم

کار با دکمه ها در بوت استرپ چگونه است؟

برای جلوه دادن به دکمه ها به صورت بوت استرپی از کلاس های btn استفاده می کنیم بوت استرپ هفت سبک از دکمه ها را برای ما فراهم می کند

6357851048469242991.png 

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

 

  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-link

 

مثال زیر کد سبک دکمه های مختلف را نشان می دهد

 

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

 

 

 

سبک های یا کلاس های مربوط به دکمه ها را می توان به 3 تگ <a> , <input> و <button> اعمال کرد

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

6357851065618923902.png 

بوت استرپ چهار اندازه دکمه را نیز فراهم می کند

کلاس های زیر اندازه های مختلف دکمه ها را آماده می کند :

  • btn-lg
  • btn-md
  • btn-sm
  • btn-xs

مثال زیر اعمال این کلاس ها را بر روی دکمه ها نشان می دهند

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

 6357851069830964813.png

 

کلاس .btn-block :

اضافه کردن این کلاس باعث برای ایجاد یک دکمه به اندازه یک بلوک است

<button type="button" class="btn btn-primary btn-block">Button 1</button>

6357851075081465124.png 

پایان قسمت پنجم

منبع : https://www.w3schools.com/

 

 

 

 

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.