Bootsnipp Étape Assistant ne rend pas correctement

J'essaie d'apprendre Bootstrap/jouer avec Bootsnipp.Bootsnipp Étape Assistant ne rend pas correctement

J'ai copié le code HTML, CSS et JS à partir du lien (même si je pense que j'ai redondance ici): http://bootsnipp.com/snippets/e3MBM

1) Est-il redondant pour ajouter le lien CDN et le CSS réelle et JS (De quoi Je comprends bien ce dernier ne serait que si je l'hôte de la CSS et les fichiers JS localement quelqu'un peut-il confirmer

2) la fichue chose ne fonctionne pas la façon dont il est censé:?

Est t héritiers - avec chaque étape montrée séparément.

mine, d'autre part a tout ensemble:

Il est probablement quelque chose d'aussi stupide et simple, mais je ne quelqu'un idea.Can s'il vous plaît aider?

J'ai essayé jsFiddle * La première fois à l'utiliser, semble facile, mais je l'espère, je l'ai juste :)

<!DOCTYPE HTML>

https://jsfiddle.net/vvstafo2/1/

Source

2017-01-20 QS Train

Voulez-vous s'il vous plaît vérifier ma réponse \ –

je l'ai fait la correction dans votre code, Maintenant, il fonctionne très bien .... –

Vous avez oublié d'ajouter bootstrap JS et fichier CSS thats why son conflit là-bas, Voulez-vous s'il vous plaît une fois essayer avec le code ci-dessous?

$(document).ready(function() { 
 
    var navListItems = $('div.setup-panel div a'), 
 
      allWells = $('.setup-content'), 
 
      allNextBtn = $('.nextBtn'); 
 

 
    allWells.hide(); 
 

 
    navListItems.click(function (e) { 
 
     e.preventDefault(); 
 
     var $target = $($(this).attr('href')), 
 
       $item = $(this); 
 

 
     if (!$item.hasClass('disabled')) { 
 
      navListItems.removeClass('btn-primary').addClass('btn-default'); 
 
      $item.addClass('btn-primary'); 
 
      allWells.hide(); 
 
      $target.show(); 
 
      $target.find('input:eq(0)').focus(); 
 
     } 
 
    }); 
 

 
    allNextBtn.click(function(){ 
 
     var curStep = $(this).closest(".setup-content"), 
 
      curStepBtn = curStep.attr("id"), 
 
      nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
 
      curInputs = curStep.find("input[type='text'],input[type='url']"), 
 
      isValid = true; 
 

 
     $(".form-group").removeClass("has-error"); 
 
     for(var i=0; i<curInputs.length; i++){ 
 
      if (!curInputs[i].validity.valid){ 
 
       isValid = false; 
 
       $(curInputs[i]).closest(".form-group").addClass("has-error"); 
 
      } 
 
     } 
 

 
     if (isValid) 
 
      nextStepWizard.removeAttr('disabled').trigger('click'); 
 
    }); 
 

 
    $('div.setup-panel div a.btn-primary').trigger('click'); 
 
});

body { 
 
    margin-top:40px; 
 
} 
 
.stepwizard-step p { 
 
    margin-top: 10px; 
 
} 
 
.stepwizard-row { 
 
    display: table-row; 
 
} 
 
.stepwizard { 
 
    display: table; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.stepwizard-step button[disabled] { 
 
    opacity: 1 !important; 
 
    filter: alpha(opacity=100) !important; 
 
} 
 
.stepwizard-row:before { 
 
    top: 14px; 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #ccc; 
 
    z-order: 0; 
 
} 
 
.stepwizard-step { 
 
    display: table-cell; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.btn-circle { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    padding: 6px 0; 
 
    font-size: 12px; 
 
    line-height: 1.428571429; 
 
    border-radius: 15px; 
 
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <script src="http://bootsnipp.com/dist/scripts.min.js"></script> 
 
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
 

 
<div class="container"> 
 
    
 
<div class="stepwizard col-md-offset-3"> 
 
    <div class="stepwizard-row setup-panel"> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> 
 
     <p>Step 1</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> 
 
     <p>Step 2</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> 
 
     <p>Step 3</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <form role="form" action="" method="post"> 
 
    <div class="row setup-content" id="step-1"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 1</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">First Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Last Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Address</label> 
 
      <textarea required="required" class="form-control" placeholder="Enter your address" ></textarea> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-2"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 2</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Name</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Address</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-3"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 3</h3> 
 
      <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    
 
</div>

Source

2017-01-20 03:53:15

Était-ce juste me laissant les références? Je vous ai dit que c'était quelque chose de stupide. Merci ... –

@HK. Oui merci... –

Bootsnipp Étape Assistant ne rend pas correctement

Répondre

Questions connexes