دکمه ها درBootstrap ورژن 4

استایل های دکمه ها

بوت استرپ 4 سبک های مختلف دکمه ها را فراهم می کند:

سبک دکمه ها
 <button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button> 
مشاهده مثال

کلاس های دکمه را می توان بر روی یک عنصر  <a>, <button> یا  <input> استفاده کرد:

سبک دکمه ها تگ a
 <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"> 
مشاهده مثال

چرا ما # را در ویژگی href پیوند قرار می دهیم؟ از آنجایی که ما هیچ صفحه ای برای پیوند آن نداریم و نمی خواهیم پیام 404 را بدست آوریم، ما # را به عنوان پیوند قرار می دهیم البته باید URL واقعی به صفحه "جستجو" ارجاع داده شده باشد.

طرح کلی دکمه

بوت استرپ 4 دارای 8 دکمه طرح / حاشیه است:

PrimarySecondarySuccessInfoWarningDangerDarkLight

حاشیه دکمه ها
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
مشاهده مثال

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

بوت استرپ 4 اندازه دکمه های مختلف را فراهم می کند:

LargeDefaultSmall

اندازه دکمه ها
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
مشاهده مثال

دکمه های سطح بلوک

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

 

Button 1Button 2

دکمه تمام صفحه
 <button type="button" class="btn btn-primary btn-block">Button 1</button> 
مشاهده مثال

دکمه های فعال / غیرفعال

یک دکمه را می توان به حالت فعال (ظاهر فشار داده) یا وضعیت غیر فعال (غیر قابل کلیک) تنظیم کرد:

 

Button 1Button 2

کلاس .active باعث می شود یک دکمه ظاهر شود و خصیصه disabled یک دکمه را غیرقابل کلیک می کند. توجه داشته باشید که عناصر از خصیصه غیرفعال پشتیبانی نمی کند و بنابراین باید از کلاس .disabledاستفاده شود تا بصری به نظر برسد.

دکمه فعال/غیرفعال
 <button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a> 
مشاهده مثال

نظر شما

نظرات

هادی خسته نباشید. دسستون درد نکنه. برام خیلی مفید بود مخصوصا توی بخش شبکه بندی که تغییراتی رو نسبت به نسخه 3 بوت استرپ داشت.مرسی موفق باشید.

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز