Anzeige

bootstrap toggle verbinden


#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
 
#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:
Anzeige
Anzeige