مونو انواع مختلفی از اجزای Switches را ارائه می‌دهد که با استانداردهای طراحی آن مطابقت دارند. برای اضافه کردن یا سفارشی‌سازی سوئیچ‌ها، به _switches.scss بروید و سوئیچ‌های خود را ویرایش یا ایجاد کنید.

سوئیچ‌های پیشفرض


<label class="switch switch-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-secondary  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-success  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-info  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-warning  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-danger  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-dark  form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های توخالی


<label class="switch switch-outline-primary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-secondary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-success form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-info form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-warning form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-danger form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های متناوب توخالی


<label class="switch switch-outline-alt-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های دارای متن




          

سوئیچ‌های توخالی دارای متن


<label class="switch switch-text switch-outline-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های متناوب توخالی دارای متن


<label class="switch switch-text switch-outline-alt-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-danger form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-dark form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های دارای آیکون


<label class="switch switch-icon switch-primary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-secondary form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-success form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-info form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-warning form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-danger form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-dark form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های توخالی دارای آیکون


<label class="switch switch-icon switch-outline-primary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-secondary form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-success form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-info form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-warning form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های متناوب توخالی دارای آیکون

    

    
              

سوئیچ‌های کپسولی پیشفرض


<label class="switch switch-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-danger switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-dark switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی توخالی


<label class="switch switch-outline-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-danger switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-dark switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی متناوب توخالی


<label class="switch switch-outline-alt-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-outline-alt-danger switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی دارای متن


<label class="switch switch-text switch-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-danger switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی توخالی دارای متن


<label class="switch switch-text switch-outline-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی متناوب توخالی دارای متن


<label class="switch switch-text switch-outline-alt-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-text switch-outline-alt-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی دارای آیکون


<label class="switch switch-icon switch-primary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-secondary switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-success switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-info switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-warning switch-pill form-control-label mr-2">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی توخالی دارای آیکون


<label class="switch switch-icon switch-outline-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

سوئیچ‌های کپسولی متناوب توخالی دارای آیکون


<label class="switch switch-icon switch-outline-alt-primary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-secondary switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-success switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-info switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

<label class="switch switch-icon switch-outline-alt-warning switch-pill form-control-label">
  <input type="checkbox" class="switch-input form-check-input" value="on" checked>
  <span class="switch-label"></span>
  <span class="switch-handle"></span>
</label>

          

مخاطبین

افزودن مخاطب جدید