namespaces bootstrap switch classes

build/css/bootstrap2/bootstrap-switch.css

@@ -46,7 +46,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-.switch {
+.bootstrap-switch {
   display: inline-block;
   cursor: pointer;
   -webkit-border-radius: 5px;
@@ -70,17 +70,17 @@
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
-.switch.switch-mini {
+.bootstrap-switch.bootstrap-switch-mini {
   min-width: 72px;
 }
-.switch.switch-mini > div > span,
-.switch.switch-mini > div > label {
+.bootstrap-switch.bootstrap-switch-mini > div > span,
+.bootstrap-switch.bootstrap-switch-mini > div > label {
   padding-bottom: 4px;
   padding-top: 4px;
   font-size: 10px;
   line-height: 9px;
 }
-.switch.switch-mini .switch-mini-icons {
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-mini-icons {
   height: 1.20em;
   line-height: 9px;
   vertical-align: text-top;
@@ -89,36 +89,36 @@
   margin-top: -1px;
   margin-bottom: -1px;
 }
-.switch.switch-small {
+.bootstrap-switch.bootstrap-switch-small {
   min-width: 80px;
 }
-.switch.switch-small > div > span,
-.switch.switch-small > div > label {
+.bootstrap-switch.bootstrap-switch-small > div > span,
+.bootstrap-switch.bootstrap-switch-small > div > label {
   padding-bottom: 3px;
   padding-top: 3px;
   font-size: 12px;
   line-height: 18px;
 }
-.switch.switch-large {
+.bootstrap-switch.bootstrap-switch-large {
   min-width: 120px;
 }
-.switch.switch-large > div > span,
-.switch.switch-large > div > label {
+.bootstrap-switch.bootstrap-switch-large > div > span,
+.bootstrap-switch.bootstrap-switch-large > div > label {
   padding-bottom: 9px;
   padding-top: 9px;
   font-size: 16px;
   line-height: normal;
 }
-.switch.switch-animate > div {
+.bootstrap-switch.bootstrap-switch-animate > div {
   -webkit-transition: margin-left 0.5s;
   -moz-transition: margin-left 0.5s;
   -o-transition: margin-left 0.5s;
   transition: margin-left 0.5s;
 }
-.switch.switch-on > div {
+.bootstrap-switch.bootstrap-switch-on > div {
   margin-left: 0%;
 }
-.switch.switch-on > div > label {
+.bootstrap-switch.bootstrap-switch-on > div > label {
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -126,10 +126,10 @@
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
-.switch.switch-off > div {
+.bootstrap-switch.bootstrap-switch-off > div {
   margin-left: -50%;
 }
-.switch.switch-off > div > label {
+.bootstrap-switch.bootstrap-switch-off > div > label {
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
@@ -137,19 +137,19 @@
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
-.switch.switch-disabled,
-.switch.switch-readonly {
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.switch.switch-disabled > div > span,
-.switch.switch-readonly > div > span,
-.switch.switch-disabled > div > label,
-.switch.switch-readonly > div > label {
+.bootstrap-switch.bootstrap-switch-disabled > div > span,
+.bootstrap-switch.bootstrap-switch-readonly > div > span,
+.bootstrap-switch.bootstrap-switch-disabled > div > label,
+.bootstrap-switch.bootstrap-switch-readonly > div > label {
   cursor: default !important;
 }
-.switch.switch-focused {
+.bootstrap-switch.bootstrap-switch-focused {
   border-color: rgba(82, 168, 236, 0.8);
   outline: 0;
   outline: thin dotted \9;
@@ -157,7 +157,7 @@
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
 }
-.switch > div {
+.bootstrap-switch > div {
   display: inline-block;
   width: 150%;
   top: 0;
@@ -169,8 +169,8 @@
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.switch > div > span,
-.switch > div > label {
+.bootstrap-switch > div > span,
+.bootstrap-switch > div > label {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -182,12 +182,12 @@
   font-size: 14px;
   line-height: 20px;
 }
-.switch > div > span {
+.bootstrap-switch > div > span {
   text-align: center;
   z-index: 1;
   width: 33.333333333%;
 }
-.switch > div > span.switch-handle-on {
+.bootstrap-switch > div > span.bootstrap-switch-handle-on {
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
@@ -195,7 +195,7 @@
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
 }
-.switch > div > span.switch-handle-off {
+.bootstrap-switch > div > span.bootstrap-switch-handle-off {
   -webkit-border-top-right-radius: 4px;
   -moz-border-radius-topright: 4px;
   border-top-right-radius: 4px;
@@ -203,7 +203,7 @@
   -moz-border-radius-bottomright: 4px;
   border-bottom-right-radius: 4px;
 }
-.switch > div > span.switch-primary {
+.bootstrap-switch > div > span.bootstrap-switch-primary {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #005fcc;
@@ -220,21 +220,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-primary:hover,
-.switch > div > span.switch-primary:focus,
-.switch > div > span.switch-primary:active,
-.switch > div > span.switch-primary.active,
-.switch > div > span.switch-primary.disabled,
-.switch > div > span.switch-primary[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-primary:hover,
+.bootstrap-switch > div > span.bootstrap-switch-primary:focus,
+.bootstrap-switch > div > span.bootstrap-switch-primary:active,
+.bootstrap-switch > div > span.bootstrap-switch-primary.active,
+.bootstrap-switch > div > span.bootstrap-switch-primary.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-primary[disabled] {
   color: #ffffff;
   background-color: #0088cc;
   *background-color: #0077b3;
 }
-.switch > div > span.switch-primary:active,
-.switch > div > span.switch-primary.active {
+.bootstrap-switch > div > span.bootstrap-switch-primary:active,
+.bootstrap-switch > div > span.bootstrap-switch-primary.active {
   background-color: #006699 \9;
 }
-.switch > div > span.switch-info {
+.bootstrap-switch > div > span.bootstrap-switch-info {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #41a7c5;
@@ -251,21 +251,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-info:hover,
-.switch > div > span.switch-info:focus,
-.switch > div > span.switch-info:active,
-.switch > div > span.switch-info.active,
-.switch > div > span.switch-info.disabled,
-.switch > div > span.switch-info[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-info:hover,
+.bootstrap-switch > div > span.bootstrap-switch-info:focus,
+.bootstrap-switch > div > span.bootstrap-switch-info:active,
+.bootstrap-switch > div > span.bootstrap-switch-info.active,
+.bootstrap-switch > div > span.bootstrap-switch-info.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-info[disabled] {
   color: #ffffff;
   background-color: #5bc0de;
   *background-color: #46b8da;
 }
-.switch > div > span.switch-info:active,
-.switch > div > span.switch-info.active {
+.bootstrap-switch > div > span.bootstrap-switch-info:active,
+.bootstrap-switch > div > span.bootstrap-switch-info.active {
   background-color: #31b0d5 \9;
 }
-.switch > div > span.switch-success {
+.bootstrap-switch > div > span.bootstrap-switch-success {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #58b058;
@@ -282,21 +282,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-success:hover,
-.switch > div > span.switch-success:focus,
-.switch > div > span.switch-success:active,
-.switch > div > span.switch-success.active,
-.switch > div > span.switch-success.disabled,
-.switch > div > span.switch-success[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-success:hover,
+.bootstrap-switch > div > span.bootstrap-switch-success:focus,
+.bootstrap-switch > div > span.bootstrap-switch-success:active,
+.bootstrap-switch > div > span.bootstrap-switch-success.active,
+.bootstrap-switch > div > span.bootstrap-switch-success.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-success[disabled] {
   color: #ffffff;
   background-color: #62c462;
   *background-color: #4fbd4f;
 }
-.switch > div > span.switch-success:active,
-.switch > div > span.switch-success.active {
+.bootstrap-switch > div > span.bootstrap-switch-success:active,
+.bootstrap-switch > div > span.bootstrap-switch-success.active {
   background-color: #42b142 \9;
 }
-.switch > div > span.switch-warning {
+.bootstrap-switch > div > span.bootstrap-switch-warning {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #f9a123;
@@ -313,21 +313,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-warning:hover,
-.switch > div > span.switch-warning:focus,
-.switch > div > span.switch-warning:active,
-.switch > div > span.switch-warning.active,
-.switch > div > span.switch-warning.disabled,
-.switch > div > span.switch-warning[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-warning:hover,
+.bootstrap-switch > div > span.bootstrap-switch-warning:focus,
+.bootstrap-switch > div > span.bootstrap-switch-warning:active,
+.bootstrap-switch > div > span.bootstrap-switch-warning.active,
+.bootstrap-switch > div > span.bootstrap-switch-warning.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-warning[disabled] {
   color: #ffffff;
   background-color: #fbb450;
   *background-color: #faa937;
 }
-.switch > div > span.switch-warning:active,
-.switch > div > span.switch-warning.active {
+.bootstrap-switch > div > span.bootstrap-switch-warning:active,
+.bootstrap-switch > div > span.bootstrap-switch-warning.active {
   background-color: #fa9f1e \9;
 }
-.switch > div > span.switch-danger {
+.bootstrap-switch > div > span.bootstrap-switch-danger {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #d14641;
@@ -344,21 +344,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-danger:hover,
-.switch > div > span.switch-danger:focus,
-.switch > div > span.switch-danger:active,
-.switch > div > span.switch-danger.active,
-.switch > div > span.switch-danger.disabled,
-.switch > div > span.switch-danger[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-danger:hover,
+.bootstrap-switch > div > span.bootstrap-switch-danger:focus,
+.bootstrap-switch > div > span.bootstrap-switch-danger:active,
+.bootstrap-switch > div > span.bootstrap-switch-danger.active,
+.bootstrap-switch > div > span.bootstrap-switch-danger.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-danger[disabled] {
   color: #ffffff;
   background-color: #ee5f5b;
   *background-color: #ec4844;
 }
-.switch > div > span.switch-danger:active,
-.switch > div > span.switch-danger.active {
+.bootstrap-switch > div > span.bootstrap-switch-danger:active,
+.bootstrap-switch > div > span.bootstrap-switch-danger.active {
   background-color: #e9322d \9;
 }
-.switch > div > span.switch-default {
+.bootstrap-switch > div > span.bootstrap-switch-default {
   color: #333333;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   background-color: #f0f0f0;
@@ -375,21 +375,21 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > span.switch-default:hover,
-.switch > div > span.switch-default:focus,
-.switch > div > span.switch-default:active,
-.switch > div > span.switch-default.active,
-.switch > div > span.switch-default.disabled,
-.switch > div > span.switch-default[disabled] {
+.bootstrap-switch > div > span.bootstrap-switch-default:hover,
+.bootstrap-switch > div > span.bootstrap-switch-default:focus,
+.bootstrap-switch > div > span.bootstrap-switch-default:active,
+.bootstrap-switch > div > span.bootstrap-switch-default.active,
+.bootstrap-switch > div > span.bootstrap-switch-default.disabled,
+.bootstrap-switch > div > span.bootstrap-switch-default[disabled] {
   color: #333333;
   background-color: #ffffff;
   *background-color: #f2f2f2;
 }
-.switch > div > span.switch-default:active,
-.switch > div > span.switch-default.active {
+.bootstrap-switch > div > span.bootstrap-switch-default:active,
+.bootstrap-switch > div > span.bootstrap-switch-default.active {
   background-color: #e6e6e6 \9;
 }
-.switch > div > label {
+.bootstrap-switch > div > label {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -413,22 +413,22 @@
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
-.switch > div > label:hover,
-.switch > div > label:focus,
-.switch > div > label:active,
-.switch > div > label.active,
-.switch > div > label.disabled,
-.switch > div > label[disabled] {
+.bootstrap-switch > div > label:hover,
+.bootstrap-switch > div > label:focus,
+.bootstrap-switch > div > label:active,
+.bootstrap-switch > div > label.active,
+.bootstrap-switch > div > label.disabled,
+.bootstrap-switch > div > label[disabled] {
   color: #333333;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
 }
-.switch > div > label:active,
-.switch > div > label.active {
+.bootstrap-switch > div > label:active,
+.bootstrap-switch > div > label.active {
   background-color: #cccccc \9;
 }
-.switch input[type='radio'],
-.switch input[type='checkbox'] {
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
   position: absolute !important;
   top: 0;
   left: 0;

build/css/bootstrap3/bootstrap-switch.css

@@ -19,7 +19,7 @@
  * ========================================================================
  */
 
-.switch {
+.bootstrap-switch {
   display: inline-block;
   cursor: pointer;
   border-radius: 4px;
@@ -39,17 +39,17 @@
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
-.switch.switch-mini {
+.bootstrap-switch.bootstrap-switch-mini {
   min-width: 72px;
 }
-.switch.switch-mini > div > span,
-.switch.switch-mini > div > label {
+.bootstrap-switch.bootstrap-switch-mini > div > span,
+.bootstrap-switch.bootstrap-switch-mini > div > label {
   padding-bottom: 4px;
   padding-top: 4px;
   font-size: 10px;
   line-height: 9px;
 }
-.switch.switch-mini .switch-mini-icons {
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-mini-icons {
   height: 1.20em;
   line-height: 9px;
   vertical-align: text-top;
@@ -58,63 +58,63 @@
   margin-top: -1px;
   margin-bottom: -1px;
 }
-.switch.switch-small {
+.bootstrap-switch.bootstrap-switch-small {
   min-width: 80px;
 }
-.switch.switch-small > div > span,
-.switch.switch-small > div > label {
+.bootstrap-switch.bootstrap-switch-small > div > span,
+.bootstrap-switch.bootstrap-switch-small > div > label {
   padding-bottom: 3px;
   padding-top: 3px;
   font-size: 12px;
   line-height: 18px;
 }
-.switch.switch-large {
+.bootstrap-switch.bootstrap-switch-large {
   min-width: 120px;
 }
-.switch.switch-large > div > span,
-.switch.switch-large > div > label {
+.bootstrap-switch.bootstrap-switch-large > div > span,
+.bootstrap-switch.bootstrap-switch-large > div > label {
   padding-bottom: 9px;
   padding-top: 9px;
   font-size: 16px;
   line-height: normal;
 }
-.switch.switch-animate > div {
+.bootstrap-switch.bootstrap-switch-animate > div {
   -webkit-transition: margin-left 0.5s;
   transition: margin-left 0.5s;
 }
-.switch.switch-on > div {
+.bootstrap-switch.bootstrap-switch-on > div {
   margin-left: 0%;
 }
-.switch.switch-on > div > label {
+.bootstrap-switch.bootstrap-switch-on > div > label {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-.switch.switch-off > div {
+.bootstrap-switch.bootstrap-switch-off > div {
   margin-left: -50%;
 }
-.switch.switch-off > div > label {
+.bootstrap-switch.bootstrap-switch-off > div > label {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-.switch.switch-disabled,
-.switch.switch-readonly {
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly {
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default !important;
 }
-.switch.switch-disabled > div > span,
-.switch.switch-readonly > div > span,
-.switch.switch-disabled > div > label,
-.switch.switch-readonly > div > label {
+.bootstrap-switch.bootstrap-switch-disabled > div > span,
+.bootstrap-switch.bootstrap-switch-readonly > div > span,
+.bootstrap-switch.bootstrap-switch-disabled > div > label,
+.bootstrap-switch.bootstrap-switch-readonly > div > label {
   cursor: default !important;
 }
-.switch.switch-focused {
+.bootstrap-switch.bootstrap-switch-focused {
   border-color: #66afe9;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
-.switch > div {
+.bootstrap-switch > div {
   display: inline-block;
   width: 150%;
   top: 0;
@@ -122,8 +122,8 @@
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.switch > div > span,
-.switch > div > label {
+.bootstrap-switch > div > span,
+.bootstrap-switch > div > label {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -135,47 +135,47 @@
   font-size: 14px;
   line-height: 20px;
 }
-.switch > div > span {
+.bootstrap-switch > div > span {
   text-align: center;
   z-index: 1;
   width: 33.333333333%;
 }
-.switch > div > span.switch-handle-on {
+.bootstrap-switch > div > span.bootstrap-switch-handle-on {
   color: #f00;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-.switch > div > span.switch-handle-off {
+.bootstrap-switch > div > span.bootstrap-switch-handle-off {
   color: #000;
   background: #eeeeee;
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-.switch > div > span.switch-primary {
+.bootstrap-switch > div > span.bootstrap-switch-primary {
   color: #fff;
   background: #428bca;
 }
-.switch > div > span.switch-info {
+.bootstrap-switch > div > span.bootstrap-switch-info {
   color: #fff;
   background: #5bc0de;
 }
-.switch > div > span.switch-success {
+.bootstrap-switch > div > span.bootstrap-switch-success {
   color: #fff;
   background: #5cb85c;
 }
-.switch > div > span.switch-warning {
+.bootstrap-switch > div > span.bootstrap-switch-warning {
   background: #f0ad4e;
   color: #fff;
 }
-.switch > div > span.switch-danger {
+.bootstrap-switch > div > span.bootstrap-switch-danger {
   color: #fff;
   background: #d9534f;
 }
-.switch > div > span.switch-default {
+.bootstrap-switch > div > span.bootstrap-switch-default {
   color: #000;
   background: #eeeeee;
 }
-.switch > div > label {
+.bootstrap-switch > div > label {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
@@ -184,8 +184,8 @@
   color: #333333;
   background: #ffffff;
 }
-.switch input[type='radio'],
-.switch input[type='checkbox'] {
+.bootstrap-switch input[type='radio'],
+.bootstrap-switch input[type='checkbox'] {
   position: absolute !important;
   top: 0;
   left: 0;

build/js/bootstrap-switch.js

@@ -39,8 +39,9 @@
         labelText: " "
       };
 
+      BootstrapSwitch.prototype.name = "bootstrap-switch";
+
       function BootstrapSwitch(element, options) {
-        var _this = this;
         if (options == null) {
           options = {};
         }
@@ -58,11 +59,11 @@
           labelText: this.$element.data("label-text")
         });
         this.$on = $("<span>", {
-          "class": "switch-handle-on switch-" + this.options.onColor,
+          "class": "" + this.name + "-handle-on " + this.name + "-" + this.options.onColor,
           html: this.options.onText
         });
         this.$off = $("<span>", {
-          "class": "switch-handle-off switch-" + this.options.offColor,
+          "class": "" + this.name + "-handle-off " + this.name + "-" + this.options.offColor,
           html: this.options.offText
         });
         this.$label = $("<label>", {
@@ -70,27 +71,29 @@
           html: this.options.labelText
         });
         this.$wrapper = $("<div>", {
-          "class": function() {
-            var classes;
-            classes = ["switch"];
-            classes.push(_this.options.state ? "switch-on" : "switch-off");
-            if (_this.options.size != null) {
-              classes.push("switch-" + _this.options.size);
-            }
-            if (_this.options.animate) {
-              classes.push("switch-animate");
-            }
-            if (_this.options.disabled) {
-              classes.push("switch-disabled");
-            }
-            if (_this.options.readonly) {
-              classes.push("switch-readonly");
-            }
-            if (_this.$element.attr("id")) {
-              classes.push("switch-id-" + (_this.$element.attr("id")));
-            }
-            return classes.join(" ");
-          }
+          "class": (function(_this) {
+            return function() {
+              var classes;
+              classes = ["" + _this.name];
+              classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
+              if (_this.options.size != null) {
+                classes.push("" + _this.name + "-" + _this.options.size);
+              }
+              if (_this.options.animate) {
+                classes.push("" + _this.name + "-animate");
+              }
+              if (_this.options.disabled) {
+                classes.push("" + _this.name + "-disabled");
+              }
+              if (_this.options.readonly) {
+                classes.push("" + _this.name + "-readonly");
+              }
+              if (_this.$element.attr("id")) {
+                classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
+              }
+              return classes.join(" ");
+            };
+          })(this)
         });
         this.$div = this.$element.wrap($("<div>")).parent();
         this.$wrapper = this.$div.wrap(this.$wrapper).parent();
@@ -122,6 +125,7 @@
         return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
       };
 
+
       /*
       TODO: refactor
       toggleRadioState: (uncheck, skip) ->
@@ -132,17 +136,16 @@
         else
           $element.prop("checked", not @$element.is ":checked").trigger "change.bootstrapSwitch", skip
         @$element
-      */
-
+       */
 
       BootstrapSwitch.prototype.size = function(value) {
         if (typeof value === "undefined") {
           return this.options.size;
         }
         if (this.options.size != null) {
-          this.$wrapper.removeClass("switch-" + this.options.size);
+          this.$wrapper.removeClass("" + this.name + "-" + this.options.size);
         }
-        this.$wrapper.addClass("switch-" + value);
+        this.$wrapper.addClass("" + this.name + "-" + value);
         this.options.size = value;
         return this.$element;
       };
@@ -152,7 +155,7 @@
           return this.options.animate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("switch-animate");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-animate");
         this.options.animate = value;
         return this.$element;
       };
@@ -162,7 +165,7 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("switch-disabled");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-disabled");
         this.$element.prop("disabled", value);
         this.options.disabled = value;
         return this.$element;
@@ -170,7 +173,7 @@
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
         this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("switch-disabled");
+        this.$wrapper.toggleClass("" + this.name + "-disabled");
         this.options.disabled = !this.options.disabled;
         return this.$element;
       };
@@ -180,7 +183,7 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("switch-readonly");
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-readonly");
         this.$element.prop("readonly", value);
         this.options.readonly = value;
         return this.$element;
@@ -188,7 +191,7 @@
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
         this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("switch-readonly");
+        this.$wrapper.toggleClass("" + this.name + "-readonly");
         this.options.readonly = !this.options.readonly;
         return this.$element;
       };
@@ -200,9 +203,9 @@
           return color;
         }
         if (color != null) {
-          this.$on.removeClass("switch-" + color);
+          this.$on.removeClass("" + this.name + "-" + color);
         }
-        this.$on.addClass("switch-" + value);
+        this.$on.addClass("" + this.name + "-" + value);
         this.options.onColor = value;
         return this.$element;
       };
@@ -214,9 +217,9 @@
           return color;
         }
         if (color != null) {
-          this.$off.removeClass("switch-" + color);
+          this.$off.removeClass("" + this.name + "-" + color);
         }
-        this.$off.addClass("switch-" + value);
+        this.$off.addClass("" + this.name + "-" + value);
         this.options.offColor = value;
         return this.$element;
       };
@@ -260,124 +263,141 @@
       };
 
       BootstrapSwitch.prototype._elementHandlers = function() {
-        var _this = this;
         return this.$element.on({
-          "change.bootstrapSwitch": function(e, skip) {
-            var checked;
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            checked = _this.$element.is(":checked");
-            if (checked === _this.options.state) {
-              return;
-            }
-            _this.options.state = checked;
-            _this.$wrapper.removeClass(checked ? "switch-off" : "switch-on").addClass(checked ? "switch-on" : "switch-off");
-            if (!skip) {
-              if (_this.$element.is(":radio")) {
-                $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
+          "change.bootstrapSwitch": (function(_this) {
+            return function(e, skip) {
+              var checked;
+              e.preventDefault();
+              e.stopPropagation();
+              e.stopImmediatePropagation();
+              checked = _this.$element.is(":checked");
+              if (checked === _this.options.state) {
+                return;
               }
-              return _this.$element.trigger("switchChange", {
-                el: _this.$element,
-                value: checked
-              });
-            }
-          },
-          "focus.bootstrapSwitch": function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            return _this.$wrapper.addClass("switch-focused");
-          },
-          "blur.bootstrapSwitch": function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            return _this.$wrapper.removeClass("switch-focused");
-          },
-          "keydown.bootstrapSwitch": function(e) {
-            if (!e.which || _this.options.disabled || _this.options.readonly) {
-              return;
-            }
-            switch (e.which) {
-              case 32:
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                return _this.toggleState();
-              case 37:
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                return _this.state(false);
-              case 39:
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                return _this.state(true);
-            }
-          }
+              _this.options.state = checked;
+              _this.$wrapper.removeClass(checked ? "" + _this.name + "-off" : "" + _this.name + "-on").addClass(checked ? "" + _this.name + "-on" : "" + _this.name + "-off");
+              if (!skip) {
+                if (_this.$element.is(":radio")) {
+                  $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
+                }
+                return _this.$element.trigger("switchChange", {
+                  el: _this.$element,
+                  value: checked
+                });
+              }
+            };
+          })(this),
+          "focus.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.stopImmediatePropagation();
+              return _this.$wrapper.addClass("" + _this.name + "-focused");
+            };
+          })(this),
+          "blur.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              e.stopImmediatePropagation();
+              return _this.$wrapper.removeClass("" + _this.name + "-focused");
+            };
+          })(this),
+          "keydown.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              if (!e.which || _this.options.disabled || _this.options.readonly) {
+                return;
+              }
+              switch (e.which) {
+                case 32:
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.stopImmediatePropagation();
+                  return _this.toggleState();
+                case 37:
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.stopImmediatePropagation();
+                  return _this.state(false);
+                case 39:
+                  e.preventDefault();
+                  e.stopPropagation();
+                  e.stopImmediatePropagation();
+                  return _this.state(true);
+              }
+            };
+          })(this)
         });
       };
 
       BootstrapSwitch.prototype._handleHandlers = function() {
-        var _this = this;
-        this.$on.on("click.bootstrapSwitch", function(e) {
-          _this.state(false);
-          return _this.$element.trigger("focus.bootstrapSwitch");
-        });
-        return this.$off.on("click.bootstrapSwitch", function(e) {
-          _this.state(true);
-          return _this.$element.trigger("focus.bootstrapSwitch");
-        });
+        this.$on.on("click.bootstrapSwitch", (function(_this) {
+          return function(e) {
+            _this.state(false);
+            return _this.$element.trigger("focus.bootstrapSwitch");
+          };
+        })(this));
+        return this.$off.on("click.bootstrapSwitch", (function(_this) {
+          return function(e) {
+            _this.state(true);
+            return _this.$element.trigger("focus.bootstrapSwitch");
+          };
+        })(this));
       };
 
       BootstrapSwitch.prototype._labelHandlers = function() {
-        var _this = this;
         return this.$label.on({
-          "mousemove.bootstrapSwitch": function(e) {
-            var left, percent, right;
-            if (!_this.drag) {
-              return;
-            }
-            percent = ((e.pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
-            left = 25;
-            right = 75;
-            if (percent < left) {
-              percent = left;
-            } else if (percent > right) {
-              percent = right;
-            }
-            _this.$div.css("margin-left", "" + (percent - right) + "%");
-            return _this.$element.trigger("focus.bootstrapSwitch");
-          },
-          "mousedown.bootstrapSwitch": function(e) {
-            if (_this.drag || _this.options.disabled || _this.options.readonly) {
-              return;
-            }
-            _this.drag = true;
-            if (_this.options.animate) {
-              _this.$wrapper.removeClass("switch-animate");
-            }
-            return _this.$element.trigger("focus.bootstrapSwitch");
-          },
-          "mouseup.bootstrapSwitch": function(e) {
-            if (!_this.drag) {
-              return;
-            }
-            _this.drag = false;
-            _this.$element.prop("checked", parseInt(_this.$div.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
-            _this.$div.css("margin-left", "");
-            if (_this.options.animate) {
-              return _this.$wrapper.addClass("switch-animate");
-            }
-          },
-          "click.bootstrapSwitch": function(e) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-            _this.toggleState();
-            return _this.$element.trigger("focus.bootstrapSwitch");
-          }
+          "mousemove.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              var left, percent, right;
+              if (!_this.drag) {
+                return;
+              }
+              percent = ((e.pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
+              left = 25;
+              right = 75;
+              if (percent < left) {
+                percent = left;
+              } else if (percent > right) {
+                percent = right;
+              }
+              _this.$div.css("margin-left", "" + (percent - right) + "%");
+              return _this.$element.trigger("focus.bootstrapSwitch");
+            };
+          })(this),
+          "mousedown.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              if (_this.drag || _this.options.disabled || _this.options.readonly) {
+                return;
+              }
+              _this.drag = true;
+              if (_this.options.animate) {
+                _this.$wrapper.removeClass("" + _this.name + "-animate");
+              }
+              return _this.$element.trigger("focus.bootstrapSwitch");
+            };
+          })(this),
+          "mouseup.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              if (!_this.drag) {
+                return;
+              }
+              _this.drag = false;
+              _this.$element.prop("checked", parseInt(_this.$div.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
+              _this.$div.css("margin-left", "");
+              if (_this.options.animate) {
+                return _this.$wrapper.addClass("" + _this.name + "-animate");
+              }
+            };
+          })(this),
+          "click.bootstrapSwitch": (function(_this) {
+            return function(e) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+              _this.toggleState();
+              return _this.$element.trigger("focus.bootstrapSwitch");
+            };
+          })(this)
         });
       };
 

index.html

@@ -9,7 +9,6 @@
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
-    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
     <link rel="stylesheet" href="build/css/bootstrap3/bootstrap-switch.css" />
     <link rel="stylesheet" href="docs/lib/prism.css">
     <link rel="stylesheet" href="docs/index.css">
@@ -232,16 +231,10 @@ $('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
           <div class="page-header">
             <h3><a name="icon-label-text" class="anchor" href="#html-text-label-icon">Icon Label Text</a></h3>
           </div>
-
           Standard <input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>"> &nbsp;&nbsp;
-
           Font Awesome <input type="checkbox" checked data-size="large" data-label-text="<span class='fa fa-youtube fa-lg'></span>" data-on-text="<span class='fa fa-thumbs-up fa-lg'></span>" data-off-text="<span class='fa fa-thumbs-down fa-lg'></span>"> &nbsp;&nbsp;
-
-          Flat UI <input type="checkbox" data-size="large" checked data-label-text="<span class='fui-video'></span>" data-on-text="<span class='fui-check'></span>" data-off-text="<span class='fui-cross'></span>">
-
           <pre class="language-markup"><code>&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='glyphicon glyphicon-fullscreen'>&lt;/span>" data-on-text="&lt;span class='glyphicon glyphicon-ok'>&lt;/span>" data-off-text="&lt;span class='glyphicon glyphicon-remove'>&lt;/span>">
-&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='fa fa-youtube fa-lg'>&lt;/span>" data-on-text="&lt;span class='fa fa-thumbs-up fa-lg'>&lt;/span>" data-off-text="&lt;span class='fa fa-thumbs-down fa-lg'>&lt;/span>">
-&lt;input type="checkbox" data-size="large" checked data-label-text="&lt;span class='fui-video'>&lt;/span>" data-on-text="&lt;span class='fui-check'>&lt;/span>" data-off-text="&lt;span class='fui-cross'>&lt;/span>"></code></pre>
+&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='fa fa-youtube fa-lg'>&lt;/span>" data-on-text="&lt;span class='fa fa-thumbs-up fa-lg'>&lt;/span>" data-off-text="&lt;span class='fa fa-thumbs-down fa-lg'>&lt;/span>"></code></pre>
         </section>
         <section id="event-handler" class="section">
           <div class="page-header">
@@ -266,7 +259,7 @@ $('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
           <pre class="language-javascript"><code>$('#label-toggle-switch').on('click', function(e, data) {
     $('.label-toggle-switch').bootstrapSwitch('toggleState');
 });
-$('.label-toggle-switch').on('switch-change', function (e, data) {
+$('.label-toggle-switch').on('switchChange', function (e, data) {
     alert(data.value);
 });</code></pre>
         </section>

src/coffee/bootstrap-switch.coffee

@@ -13,6 +13,7 @@
       onText: "ON"
       offText: "OFF"
       labelText: " "
+    name: "bootstrap-switch"
 
     constructor: (element, options = {}) ->
       @$element = $ element
@@ -28,24 +29,24 @@
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
       @$on = $ "<span>",
-        class: "switch-handle-on switch-#{@options.onColor}"
+        class: "#{@name}-handle-on #{@name}-#{@options.onColor}"
         html: @options.onText
       @$off = $ "<span>",
-        class: "switch-handle-off switch-#{@options.offColor}"
+        class: "#{@name}-handle-off #{@name}-#{@options.offColor}"
         html: @options.offText
       @$label = $ "<label>",
         for: @$element.attr "id"
         html: @options.labelText
       @$wrapper = $ "<div>",
         class: =>
-          classes = ["switch"]
-
-          classes.push if @options.state then "switch-on" else "switch-off"
-          classes.push "switch-#{@options.size}" if @options.size?
-          classes.push "switch-animate" if @options.animate
-          classes.push "switch-disabled" if @options.disabled
-          classes.push "switch-readonly" if @options.readonly
-          classes.push "switch-id-#{@$element.attr("id")}" if @$element.attr "id"
+          classes = ["#{@name}"]
+
+          classes.push if @options.state then "#{@name}-on" else "#{@name}-off"
+          classes.push "#{@name}-#{@options.size}" if @options.size?
+          classes.push "#{@name}-animate" if @options.animate
+          classes.push "#{@name}-disabled" if @options.disabled
+          classes.push "#{@name}-readonly" if @options.readonly
+          classes.push "#{@name}-id-#{@$element.attr("id")}" if @$element.attr "id"
           classes.join " "
 
       # reassign elements after dom modification
@@ -93,8 +94,8 @@
     size: (value) ->
       return @options.size if typeof value is "undefined"
 
-      @$wrapper.removeClass "switch-#{@options.size}" if @options.size?
-      @$wrapper.addClass "switch-#{value}"
+      @$wrapper.removeClass "#{@name}-#{@options.size}" if @options.size?
+      @$wrapper.addClass "#{@name}-#{value}"
       @options.size = value
       @$element
 
@@ -103,7 +104,7 @@
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("switch-animate")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-animate")
       @options.animate = value
       @$element
 
@@ -112,14 +113,14 @@
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("switch-disabled")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-disabled")
       @$element.prop "disabled", value
       @options.disabled = value
       @$element
 
     toggleDisabled: ->
       @$element.prop "disabled", not @options.disabled
-      @$wrapper.toggleClass "switch-disabled"
+      @$wrapper.toggleClass "#{@name}-disabled"
       @options.disabled = not @options.disabled
       @$element
 
@@ -128,14 +129,14 @@
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("switch-readonly")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@name}-readonly")
       @$element.prop "readonly", value
       @options.readonly = value
       @$element
 
     toggleReadonly: ->
       @$element.prop "readonly", not @options.readonly
-      @$wrapper.toggleClass "switch-readonly"
+      @$wrapper.toggleClass "#{@name}-readonly"
       @options.readonly = not @options.readonly
       @$element
 
@@ -144,8 +145,8 @@
 
       return color if typeof value is "undefined"
 
-      @$on.removeClass "switch-#{color}" if color?
-      @$on.addClass "switch-#{value}"
+      @$on.removeClass "#{@name}-#{color}" if color?
+      @$on.addClass "#{@name}-#{value}"
       @options.onColor = value
       @$element
 
@@ -154,8 +155,8 @@
 
       return color if typeof value is "undefined"
 
-      @$off.removeClass "switch-#{color}" if color?
-      @$off.addClass "switch-#{value}"
+      @$off.removeClass "#{@name}-#{color}" if color?
+      @$off.addClass "#{@name}-#{value}"
       @options.offColor = value
       @$element
 
@@ -201,8 +202,8 @@
 
           @options.state = checked
           @$wrapper
-          .removeClass(if checked then "switch-off" else "switch-on")
-          .addClass if checked then "switch-on" else "switch-off"
+          .removeClass(if checked then "#{@name}-off" else "#{@name}-on")
+          .addClass if checked then "#{@name}-on" else "#{@name}-off"
 
           unless skip
             $("[name='#{@$element.attr('name')}']").not(@$element).prop("checked", false).trigger "change.bootstrapSwitch", true if @$element.is ":radio"
@@ -213,14 +214,14 @@
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.addClass "switch-focused"
+          @$wrapper.addClass "#{@name}-focused"
 
         "blur.bootstrapSwitch": (e) =>
           e.preventDefault()
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.removeClass "switch-focused"
+          @$wrapper.removeClass "#{@name}-focused"
 
         "keydown.bootstrapSwitch": (e) =>
           return if not e.which or @options.disabled or @options.readonly
@@ -275,7 +276,7 @@
           return if @drag or @options.disabled or @options.readonly
 
           @drag = true
-          @$wrapper.removeClass "switch-animate" if @options.animate
+          @$wrapper.removeClass "#{@name}-animate" if @options.animate
           @$element.trigger "focus.bootstrapSwitch"
 
         "mouseup.bootstrapSwitch": (e) =>
@@ -284,7 +285,7 @@
           @drag = false
           @$element.prop("checked", (parseInt(@$div.css("margin-left"), 10) > -25)).trigger "change.bootstrapSwitch"
           @$div.css "margin-left", ""
-          @$wrapper.addClass "switch-animate" if @options.animate
+          @$wrapper.addClass "#{@name}-animate" if @options.animate
 
         "click.bootstrapSwitch": (e) =>
           e.preventDefault()

src/less/bootstrap2/bootstrap-switch.less

@@ -1,4 +1,6 @@
-.switch {
+@bootstrap-switch-name: bootstrap-switch;
+
+.@{bootstrap-switch-name} {
   display: inline-block;
   cursor: pointer;
   .border-radius(5px);
@@ -13,7 +15,7 @@
   min-width: 100px;
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &.switch-mini {
+  &.@{bootstrap-switch-name}-mini {
     min-width: 72px;
 
     > div > span,
@@ -24,7 +26,7 @@
       line-height: 9px;
     }
 
-    .switch-mini-icons {
+    .@{bootstrap-switch-name}-mini-icons {
       height: 1.20em;
       line-height: 9px;
       vertical-align: text-top;
@@ -35,7 +37,7 @@
     }
   }
 
-  &.switch-small {
+  &.@{bootstrap-switch-name}-small {
     min-width: 80px;
 
     > div > span,
@@ -47,7 +49,7 @@
     }
   }
 
-  &.switch-large {
+  &.@{bootstrap-switch-name}-large {
     min-width: 120px;
 
     > div > span,
@@ -59,14 +61,14 @@
     }
   }
 
-  &.switch-animate {
+  &.@{bootstrap-switch-name}-animate {
 
     > div {
       .transition(margin-left 0.5s);
     }
   }
 
-  &.switch-on {
+  &.@{bootstrap-switch-name}-on {
 
     > div {
       margin-left: 0%;
@@ -77,7 +79,7 @@
     }
   }
 
-  &.switch-off {
+  &.@{bootstrap-switch-name}-off {
 
     > div {
       margin-left: -50%;
@@ -88,8 +90,8 @@
     }
   }
 
-  &.switch-disabled,
-  &.switch-readonly {
+  &.@{bootstrap-switch-name}-disabled,
+  &.@{bootstrap-switch-name}-readonly {
     .opacity(50);
     cursor: default !important;
 
@@ -99,7 +101,7 @@
     }
   }
 
-  &.switch-focused {
+  &.@{bootstrap-switch-name}-focused {
     border-color: rgba(82, 168, 236, .8);
     outline: 0;
     outline: thin dotted \9;
@@ -130,35 +132,35 @@
       z-index: 1;
       width: 33.333333333%;
 
-      &.switch-handle-on {
+      &.@{bootstrap-switch-name}-handle-on {
         .border-left-radius(4px);
       }
 
-      &.switch-handle-off {
+      &.@{bootstrap-switch-name}-handle-off {
         .border-right-radius(4px);
       }
 
-      &.switch-primary {
+      &.@{bootstrap-switch-name}-primary {
         .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
       }
 
-      &.switch-info {
+      &.@{bootstrap-switch-name}-info {
         .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
       }
 
-      &.switch-success {
+      &.@{bootstrap-switch-name}-success {
         .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
       }
 
-      &.switch-warning {
+      &.@{bootstrap-switch-name}-warning {
         .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
       }
 
-      &.switch-danger {
+      &.@{bootstrap-switch-name}-danger {
         .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
       }
 
-      &.switch-default {
+      &.@{bootstrap-switch-name}-default {
         .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
       }
     }

src/less/bootstrap3/bootstrap-switch.less

@@ -1,4 +1,6 @@
-.switch {
+@bootstrap-switch-name: bootstrap-switch;
+
+.@{bootstrap-switch-name} {
   display: inline-block;
   cursor: pointer;
   border-radius: @border-radius-base;
@@ -13,7 +15,7 @@
   min-width: 100px;
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &.switch-mini {
+  &.@{bootstrap-switch-name}-mini {
     min-width: 72px;
 
     > div > span,
@@ -24,7 +26,7 @@
       line-height: 9px;
     }
 
-    .switch-mini-icons {
+    .@{bootstrap-switch-name}-mini-icons {
       height: 1.20em;
       line-height: 9px;
       vertical-align: text-top;
@@ -35,7 +37,7 @@
     }
   }
 
-  &.switch-small {
+  &.@{bootstrap-switch-name}-small {
     min-width: 80px;
 
     > div > span,
@@ -47,7 +49,7 @@
     }
   }
 
-  &.switch-large {
+  &.@{bootstrap-switch-name}-large {
     min-width: 120px;
 
     > div > span,
@@ -59,14 +61,14 @@
     }
   }
 
-  &.switch-animate {
+  &.@{bootstrap-switch-name}-animate {
 
     > div {
       .transition(margin-left 0.5s);
     }
   }
 
-  &.switch-on {
+  &.@{bootstrap-switch-name}-on {
 
     > div {
       margin-left: 0%;
@@ -77,7 +79,7 @@
     }
   }
 
-  &.switch-off {
+  &.@{bootstrap-switch-name}-off {
 
     > div {
       margin-left: -50%;
@@ -88,8 +90,8 @@
     }
   }
 
-  &.switch-disabled,
-  &.switch-readonly {
+  &.@{bootstrap-switch-name}-disabled,
+  &.@{bootstrap-switch-name}-readonly {
     .opacity(.5);
     cursor: default !important;
 
@@ -99,7 +101,7 @@
     }
   }
 
-  &.switch-focused {
+  &.@{bootstrap-switch-name}-focused {
     @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
     border-color: @input-border-focus;
     outline: 0;
@@ -130,43 +132,43 @@
       z-index: 1;
       width: 33.333333333%;
 
-      &.switch-handle-on {
+      &.@{bootstrap-switch-name}-handle-on {
         color: #f00;
         .border-left-radius(@border-radius-base - 1);
       }
 
-      &.switch-handle-off {
+      &.@{bootstrap-switch-name}-handle-off {
         color: #000;
         background: @gray-lighter;
         .border-right-radius(@border-radius-base - 1);
       }
 
-      &.switch-primary {
+      &.@{bootstrap-switch-name}-primary {
         color: #fff;
         background: @btn-primary-bg;
       }
 
-      &.switch-info {
+      &.@{bootstrap-switch-name}-info {
         color: #fff;
         background: @btn-info-bg;
       }
 
-      &.switch-success {
+      &.@{bootstrap-switch-name}-success {
         color: #fff;
         background: @btn-success-bg;
       }
 
-      &.switch-warning {
+      &.@{bootstrap-switch-name}-warning {
         background: @btn-warning-bg;
         color: #fff;
       }
 
-      &.switch-danger {
+      &.@{bootstrap-switch-name}-danger {
         color: #fff;
         background: @btn-danger-bg;
       }
 
-      &.switch-default {
+      &.@{bootstrap-switch-name}-default {
         color: #000;
         background: @gray-lighter;
       }