Problèmes avec Bootstrap commutateur

Je suis en train d'utiliser bootstrap interrupteur et je suis confronté à quelques problèmes. Je suis l'aide de ces exemples ici http://www.jque.re/plugins/version3/bootstrap.switch/ et quels que soient les cours, je suis en utilisant les boutons reste avec le même style et avec de très petite taille, que je ne peux même pas voir la SUR et HORS texte. Je ne sais vraiment pas ce que je fais mal. Toute aide? grâce

voici mon code html:

<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/_custom.css" rel="stylesheet">   
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/bootstrap-switch.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body> 
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="NÃO">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div></div>
</form>
</div>  
<script type="text/javascript">
$("[name='my-checkbox']").bootstrapSwitch();
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
InformationsquelleAutor Paulo Frutuoso | 2015-09-20
  1. 7

    Vous les dépendances sont de l'ordre; ils devraient être comme ça.

    En-tête

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<link href="path/custom.css" rel="stylesheet" type="text/css"/>

    Fin de corps

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script>$("[name='my-checkbox']").bootstrapSwitch();</script>

    CSS Afin

    1. Bootstrap CSS
    2. Commutateur de bootstrap CSS
    3. CSS personnalisé

    JS Afin

    1. jQuery
    2. Bootstrap JS
    3. Bootstrap Commutateur JS

    Vous êtes également le chargement de jQuery deux fois sur la page, (une fois dans votre tête, et une fois dans l'extrémité du corps) de l'utiliser une fois avant que tous les JS dépendances.

    La $("[name='my-checkbox']").bootstrapSwitch(); doit également être placé après tous les autres JS dépendances afin qu'il se charge.

    **Note: il Vous manque une ouverture form balise ainsi.

    JS:

    $("[name='my-checkbox']").bootstrapSwitch();

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="NÃO">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div>
</div>
</div>
</form>

    • Merci @vanburenx. Qui fonctionne! Je suis en train de changer l'étiquette à l'intérieur de boutons (OUI et NON) mais ça ne marche pas.. 🙁
    • Voir les Docs: bootstrap-switch.org/options.html <input type="checkbox" name="mon-case"données-sur-text="Oui" de données hors-texte="Non" checked/>
    InformationsquelleAutor vanburen