دکمه ها در بوت استرپ گزینه های گوناگونی برای ارائه دکمه های منحصر به فرد به نظر می رسد که مطابق با استانداردهای طراحی مترونیک است.
بوت استرپ شامل چندین سبک دکمه از پیش تعریف شده است که هر یک هدف معنایی خاص خود را ارائه می دهند ، و چند کنترل اضافی برای کنترل بیشتر در اختیار شما قرار می گیرد.
استفاده از btn-{color} ست کردن کلاس با رنگ های مختلف برای دکمه {color}
white|primary|secondary|success|info|warning|danger|light|dark.
<button type="button" class="btn btn-primary">اولیه</button>
<button type="button" class="btn btn-secondary">ثانوی</button>
<button type="button" class="btn btn-success">موفقیت</button>
<button type="button" class="btn btn-danger">هشدار</button>
<button type="button" class="btn btn-warning">اخطار</button>
<button type="button" class="btn btn-info">اطلاعات</button>
<button type="button" class="btn btn-light">روشن</button>
<button type="button" class="btn btn-dark">تیره</button>
<button type="button" class="btn btn-link">لینک</button>
از .btn کلاس ها طوری طراحی شده اند که از آنها استفاده می شود <button> عنصر با این وجود می توانید از این کلاس ها نیز استفاده کنید <a> or <input>
عناصر (گرچه ممکن است برخی از مرورگرها ارائه دهند کمی متفاوت).
<a class="btn btn-secondary" href="#" role="button">لینک</a>
<button class="btn btn-secondary" type="submit">دکمه</button>
<input class="btn btn-secondary" type="button" value="ورودی"/>
<input class="btn btn-secondary" type="submit" value="ارسال"/>
<input class="btn btn-secondary" type="reset" value="Reset"/>
کلاس های اصلاح پیش فرض را با .btn-outline-* برای حذف همه پس زمینه تصاویر و رنگ ها در هر دکمه.
<button type="button" class="btn btn-outline-primary">اولیه</button>
<button type="button" class="btn btn-outline-secondary">ثانوی</button>
<button type="button" class="btn btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-outline-danger">هشدار</button>
<button type="button" class="btn btn-outline-warning">اخطار</button>
<button type="button" class="btn btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-outline-dark">تیره</button>
دکمه های بزرگتر یا کوچکتر را دوست دارید؟ اضافه کردن .btn-lg or .btn-sm برای اندازه های اضافی.
<button type="button" class="btn btn-primary btn-sm">دکمه کوچک</button>
<button type="button" class="btn btn-primary">دکمه پیش فرض</button>
<button type="button" class="btn btn-primary btn-lg">دکمه بزرگ</button>
با اضافه کردن این کلاس دکمه به حالت بلاک تغییر میکنه و تمام عرض می شود .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">دکمه بلاک</button>
<button type="button" class="btn btn-success btn-lg btn-block">دکمه بلاک</button>
با این کلاس می توانید وضعیت دکمه را فعال کنید .active.
<a href="#" class="btn btn-primary active">وضعیت فعال</a>
<a href="#" class="btn btn-success active">وضعیت فعال</a>
<a href="#" class="btn btn-danger active">وضعیت فعال</a>
<a href="#" class="btn btn-warning active">وضعیت فعال</a>
دکمه ها را با افزودن غیرفعال کنید disabled .
<button class="btn btn-primary" disabled>وضعیت غیرفعال</button>
<button class="btn btn-success" disabled>وضعیت غیرفعال</button>
<button class="btn btn-danger" disabled>وضعیت غیرفعال</button>
<button class="btn btn-warning" disabled>وضعیت غیرفعال</button>سبک های دکمه بوت استرپ برای عناوین دیگر ، مانند برچسب ها ، برای ارائه جعبه چک یا دکمه رادیویی به سبک رادیویی اعمال می شود..
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="checkbox" checked="checked"/> تیک خورده
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" checked="checked"/> فعال
</label>
<label class="btn btn-success">
<input type="radio" name="options" id="option2"/> رادیو
</label>
<label class="btn btn-success">
<input type="radio" name="options" id="option3"/> رادیو
</label>
</div>
دکمه font styles set using special helper classes font-weight-{lighter|light|normal|bold|bolder|boldest}.
<a href="#" class="btn btn-secondary font-weight-lighter mr-2">روشن تر</a>
<a href="#" class="btn btn-secondary font-weight-light mr-2">روشن</a>
<a href="#" class="btn btn-secondary font-weight-normal mr-2">نرمال</a>
<a href="#" class="btn btn-secondary font-weight-bold mr-2">برچسته</a>
<a href="#" class="btn btn-secondary font-weight-bolder">برجسته</a>
<a href="#" class="btn btn-secondary font-weight-boldest">برجسته تر</a>
استفاده از .btn-square classes to have square style buttons.
<a href="#" class="btn btn-success font-weight-bold btn-pill">موفقیت</a>
<a href="#" class="btn btn-primary font-weight-bold btn-pill">اولیه</a>
<a href="#" class="btn btn-danger font-weight-bold btn-pill">هشدار</a>
<a href="#" class="btn btn-warning font-weight-bold btn-pill">اخطار</a>
<a href="#" class="btn btn-dark font-weight-bold btn-pill">تیره</a>
استفاده از .btn-pill classes to have pill style buttons.
<a href="#" class="btn btn-success font-weight-bold btn-square">موفقیت</a>
<a href="#" class="btn btn-primary font-weight-bold btn-square">اولیه</a>
<a href="#" class="btn btn-danger font-weight-bold btn-square">هشدار</a>
<a href="#" class="btn btn-warning font-weight-bold btn-square">اخطار</a>
<a href="#" class="btn btn-dark font-weight-bold btn-square">تیره</a>
بوت استرپ با سبک دکمه های سفارشی
<a href="#" class="btn btn-default font-weight-bold mr-2">پیش فرض دکمه</a>
<a href="#" class="btn btn-light font-weight-bold mr-2">روشن دکمه</a>
<a href="#" class="btn btn-clean font-weight-bold">دکمه تمیز</a>
مترونیک بوت استرپ کلاس های استاندارد واحد برای تغییر اندازه و فاصله دکمه.
<a href="#" class="btn btn-default font-weight-bold font-size-h5 px-8 py-3 mr-2">دکمه</a>
<a href="#" class="btn btn-danger font-weight-bold font-size-h6 px-10 py-4 mr-2">دکمه</a>
<a href="#" class="btn btn-primary font-weight-bold font-size-h3 px-12 py-5">دکمه</a>
میکش دکمه های با المنت های دیگر
<div class="btn btn-icon w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
<span class="text-muted font-weight-bold font-size-base mr-1">سلام,</span>
<span class="text-dark-50 font-weight-bolder font-size-base mr-3">محسن</span>
<span class="symbol symbol-35 symbol-light-warning">
<span class="symbol-label font-size-h5 font-weight-bold">S</span>
</span>
</div>
<div class="btn btn-icon btn-light w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
<span class="text-muted font-weight-bold font-size-base mr-1">سلام,</span>
<span class="text-dark-50 font-weight-bolder font-size-base mr-3">محسن</span>
<span class="symbol symbol-35 symbol-light-primary">
<span class="symbol-label font-size-h5 font-weight-bold">S</span>
</span>
</div>
<div class="btn btn-light-success d-inline-flex align-items-center btn-lg mr-5">
<div class="d-flex flex-column text-right pr-3">
<span class="text-dark-75 font-weight-bold font-size-sm">محسن</span>
<span class="font-weight-bolder font-size-sm">طراح</span>
</div>
<span class="symbol symbol-40">
<img alt="Pic" src="media/images/users/300_25.jpg"/>
</span>
</div>
استفاده از btn-light-{color} کلاس برای داشتن یک دکمه سفارشی با رنگ سبک تر پس زمینه و رنگ قلم تیره.
<a href="#" class="btn btn-light-success font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-light-primary font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-light-warning font-weight-bold mr-2">اخطار</a>
<a href="#" class="btn btn-light-dark font-weight-bold">تیره</a>
استفاده از btn-light-{color} کلاس برای داشتن یک دکمه سفارشی با رنگ سبک تر پس زمینه و رنگ قلم تیره.
<a href="#" class="btn btn-text-success btn-hover-light-success font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-text-primary btn-hover-light-primary font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-text-warning btn-hover-light-warning font-weight-bold mr-2">اخطار</a>
<a href="#" class="btn btn-text-dark btn-hover-light-dark font-weight-bold mr-2">تیره</a>
استفاده از btn-light-{color} کلاس برای داشتن یک دکمه سفارشی با رنگ سبک تر پس زمینه و رنگ قلم تیره.
<a href="#" class="btn btn-hover-bg-success btn-text-success btn-hover-text-white border-0 font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-hover-bg-primary btn-text-primary btn-hover-text-white border-0 font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-hover-bg-danger btn-text-danger btn-hover-text-white border-0 font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-hover-bg-warning btn-text-warning btn-hover-text-white border-0 font-weight-bold mr-2">اخطار</a>
<a href="#" class="btn btn-hover-bg-dark btn-text-dark btn-hover-text-white border-0 font-weight-bold mr-2">تیره</a>
استفاده از btn-transparent-{color} کلاس برای داشتن یک دکمه سفارشی با رنگ پس زمینه شفاف..
<div class="d-flex align-items-center p-4 bg-dark">
<a href="#" class="btn btn-transparent-success font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-transparent-primary font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-transparent-danger font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-transparent-warning font-weight-bold mr-2">اخطار</a>
<a href="#" class="btn btn-transparent-white font-weight-bold">سفید</a>
</div>
استفاده از btn-hover-transparent-{color} کلاس برای داشتن یک دکمه سفارشی با رنگ پس زمینه شناور شفاف.
<div class="d-flex align-items-center p-4 bg-dark">
<a href="#" class="btn btn-hover-transparent-success font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-hover-transparent-primary font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-hover-transparent-danger font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-hover-transparent-warning font-weight-bold mr-2">اخطار</a>
<a href="#" class="btn btn-hover-transparent-white font-weight-bold">سفید</a>
</div>
استفاده از btn-link-{color} از این کلاس میتوانید استفاده کنید.
<a href="#" class="btn btn-link-success font-weight-bold">موفقیت</a>
<a href="#" class="btn btn-link-primary font-weight-bold">اولیه</a>
<a href="#" class="btn btn-link-danger font-weight-bold">هشدار</a>
<a href="#" class="btn btn-link-warning font-weight-bold">اخطار</a>
<a href="#" class="btn btn-link-dark font-weight-bold">تیره</a>
استفاده از btn-text-{font-color} کلاس برای تنظیم رنگ دلخواه برای متن های دکمه ای که در آن قرار دارد {font-color}
white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.
<a href="#" class="btn btn-light btn-text-success btn-hover-text-success font-weight-bold">موفقیت</a>
<a href="#" class="btn btn-light btn-text-primary btn-hover-text-primary font-weight-bold">اولیه</a>
<a href="#" class="btn btn-light btn-text-danger btn-hover-text-danger font-weight-bold">هشدار</a>
<a href="#" class="btn btn-light btn-text-warning btn-hover-text-dark-50 font-weight-bold">اخطار</a>
<a href="#" class="btn btn-light btn-text-dark btn-hover-text-dark font-weight-bold">تیره</a>
استفاده از btn-hover-{color} برای داشتن دکمه های رنگی ، یک رنگ شناور سفارشی داشته باشید.
<a href="#" class="btn btn-light btn-hover-success font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-light btn-hover-primary font-weight-bold">اولیه</a>
<a href="#" class="btn btn-light btn-hover-danger font-weight-bold">هشدار</a>
<a href="#" class="btn btn-light btn-hover-warning font-weight-bold">اخطار</a>
<a href="#" class="btn btn-light btn-hover-dark font-weight-bold">تیره</a>
استفاده از btn-shadow class to set box-shadow to your buttons.
<a href="#" class="btn btn-light btn-shadow font-weight-bold mr-2">روشن</a>
<a href="#" class="btn btn-success btn-shadow font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-primary btn-shadow font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-danger btn-shadow font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-warning btn-shadow font-weight-bold mr-2">اخطار</a>
استفاده از btn-shadow-hover class to set box-shadow effect on hover to your buttons.
<a href="#" class="btn btn-light btn-shadow-hover font-weight-bold mr-2">روشن</a>
<a href="#" class="btn btn-success btn-shadow-hover font-weight-bold mr-2">موفقیت</a>
<a href="#" class="btn btn-primary btn-shadow-hover font-weight-bold mr-2">اولیه</a>
<a href="#" class="btn btn-danger btn-shadow-hover font-weight-bold mr-2">هشدار</a>
<a href="#" class="btn btn-warning btn-shadow-hover font-weight-bold mr-2">اخطار</a>استفاده از buttons with a wide range of مترونیک's awesome Icon Collection.
استفاده از btn-text-{font-color} and btn-icon-{font-color} classes to set custom color for button texts and icons where {font-color}
white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.
<a href="#" class="btn btn-success">
<i class="flaticon2-pie-chart"></i> موفقیت
</a>
<a href="#" class="btn btn-outline-success">
<i class="flaticon2-poll-symbol"></i> موفقیت
</a>
<a href="#" class="btn btn-light-success">
<i class="flaticon2-chat-1"></i> موفقیت
</a>
<a href="#" class="btn btn-success">
<span class="svg-icon"><svg>...</svg></span> موفقیت
</a>
<a href="#" class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3">
<i class="flaticon2-pie-chart"></i> دکمه
</a>
استفاده از btn-icon class to have icon only square buttons.
<a href="#" class="btn btn-icon btn-success">
<i class="flaticon2-pie-chart"></i>
</a>
<a href="#" class="btn btn-icon btn-outline-success">
<i class="flaticon2-poll-symbol"></i>
</a>
<a href="#" class="btn btn-icon btn-light-success">
<i class="flaticon2-chat-1"></i>
</a>
<a href="#" class="btn btn-icon btn-success">
<span class="svg-icon"><svg>...</svg></span>
</a>
استفاده از buttons with social icons predefined with دلارsocial-colors variable in src\sass\components\_variables.bootstrap.scss.
<a href="#" class="btn btn-icon btn-facebook">
<i class="socicon-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-circle btn-facebook">
<i class="socicon-facebook"></i>
</a>
استفاده از btn-light-{social} class to have light social buttons.
<a href="#" class="btn btn-icon btn-facebook">
<i class="socicon-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-circle btn-facebook">
<i class="socicon-facebook"></i>
</a>
استفاده از btn-xs, btn-sm, btn-md and btn-lg size classes to set required button sizes.
<a href="#" class="btn btn-icon btn-xs btn-facebook">
<i class="socicon-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-sm btn-facebook">
<i class="socicon-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-facebook">
<i class="socicon-facebook"></i>
</a>
<a href="#" class="btn btn-icon btn-lg btn-facebook">
<i class="socicon-facebook"></i>
</a>
