|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

دکمه ها در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 بوت استرپ داشت.مرسی موفق باشید.

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد