Başlangıçta HTML, CSS ve JavaScript'te bir web uygulaması oluşturdum, ardından Bootstrap'ta da yeniden oluşturmam istendi. Her şeyi iyi yaptım, ancak web uygulamasında, orijinal olarak sahip olduğum geçiş düğmeleri yerine radyo (orijinal olarak onay kutusu) düğmelerine dönüşen geçiş düğmeleri vardı.

Düğmelerin kodu:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

ve HTML sayfasının bağlı olduğu JavaScript ve CSS dosyaları şunlardır:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

Geçiş düğmesini geri alabilmem için kodu değiştirmenin bir yolu var mı?

2013'ten ilk cevap

Mükemmel (resmi olmayan) bir Bootstrap Anahtarı mevcuttur .

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

Anahtar olarak radyo türlerini veya onay kutularını kullanır . typeV.1.8'den beri bir öznitelik eklendi.

Kaynak kodu Github'da mevcuttur .

2018 Notu

Pek çok kişinin işaret ettiği gibi her zaman kullanılabilirlik sorunlarından muzdarip göründüklerinden, bu tür eski Anahtar düğmelerini şimdi kullanmanızı tavsiye etmem .

Bakmak zorunda düşünün bunun gibi çağdaş Anahtarları gelen Bileşen çerçeveyi Tepki (ilgili olmayan Bootstrap ama Önyükleme ızgara ve UI olsa entegre edilebilir).

Angular, View veya jQuery için başka uygulamalar mevcuttur.

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

Yerel Önyükleme Anahtarları

Bkz ohkts11 cevabını hakkında aşağıda yerli Bootstrap anahtarları .

HTML'nizi değiştirmenin bir sakıncası yoksa, e- data-togglepostadaki özniteliği kullanabilirsiniz <button>. Düğme örneklerinin Tek geçiş bölümüne bakın :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Bootstrap 3, onay kutularına veya radyo düğmelerine göre geçiş düğmeleri oluşturma seçeneklerine sahiptir: http://getbootstrap.com/javascript/#buttons

Onay kutuları

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Radyo düğmeleri

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Bunların çalışması için, .btns'yi Bootstrap'ın Javascript'i ile başlatmanız gerekir :

$('.btn').button();

Javascript ile manuel olarak 'aktif' sınıfı etkinleştirmeye çalışıyorum. Eksiksiz bir kütüphane kadar kullanışlı değil, ancak kolay durumlar için yeterli gibi görünüyor:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

Dikkatlice düşünürseniz, 'active' sınıfı, düğmeye basıldığında önyükleme tarafından kullanılır, bundan önce veya sonra (bizim durumumuz), dolayısıyla aynı sınıfın yeniden kullanımında herhangi bir çatışma olmaz.

Bu örneği deneyin ve başarısız olup olmadığını bana söyleyin: http://jsbin.com/oYoSALI/1/edit?html,js,output

Küçük bir kod tabanı tutmak istiyorsanız ve uygulamanın sadece küçük bir kısmı için geçiş düğmesine ihtiyacınız olacak. Bunun yerine javascript kodunuzu (angularjs, javascript, jquery) ve sadece düz CSS kullanmanızı öneririm.

İyi geçiş düğmesi oluşturucu: https://proto.io/freebies/onoff/

İşte bu Bootstrap Toggle Button için çok faydalı . Kod parçacığında örnek !! ve aşağıda jsfiddle.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Bootstrap 4 için 2020 Güncellemesi

Ben tavsiye bootstrap4-durumlu 2020 yılında.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

CSS Geçiş Anahtarı kitaplığını kullanabilirsiniz. Sadece CSS'yi ekleyin ve JS'yi kendiniz programlayın: http://ghinda.net/css-toggle-switch/bootstrap.html

Bootstrap 3.3.0 için Materyal Tasarım Anahtarını kullanabilirsiniz

http://bootsnipp.com/snippets/featured/material-design-switch

Bootstrap 4 çözümü

bootstrap 4 yerleşik geçişle birlikte gelir. İşte belgeler. https://getbootstrap.com/docs/4.3/components/forms/#switches

Birisinin hala güzel bir anahtar / geçiş düğmesi araması durumunda, Rick'in önerisini izledim ve etrafında basit bir açısal yönerge oluşturdum, açısal anahtar . Windows tarzı bir anahtarı tercih etmenin yanı sıra, toplam indirme de yukarıda birlikte bahsedilen açısal önyükleme anahtarı ve önyükleme anahtarı ile karşılaştırıldığında çok daha küçüktür (2kb ve 23kb küçültülmüş css + js).

Aşağıdaki gibi kullanırsınız. Önce gerekli js ve css dosyasını ekleyin:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

Ve açısal uygulamanızda etkinleştirin:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Artık aşağıdaki gibi kullanmaya hazırsınız:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>