bootstrap toggle verbinden


klausi89

Erfahrenes Mitglied
#1
Hallo ich weiß leider nicht genau wie ich diesen Bootstrap Code:

HTML:
<div>
    <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        OFF / ON
    </div>
jetzt weiß ich leider nicht genau wie ich diesen so mit if/else oder switch verbinde damit bei OFF Stellung - code1( z.bsp. button inaktiv) angezeigt wird
und bei ON Stellung eben Code2 (z.bsp. button aktiv)

ich hoffe mir könnte da mal jemand helfen damit ich das verstehen kann. Danke schon mal im voraus
 

klausi89

Erfahrenes Mitglied
#3
sry is doch ne css dabei die sieht so aus:

CSS:
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
 
Zuletzt bearbeitet: