Bootsnipp Step Wizard wird nicht korrekt gerendert

Ich versuche Bootstrap zu lernen/spielen mit Bootsnipp.Bootsnipp Step Wizard wird nicht korrekt gerendert

ich kopiert habe das HTML, CSS und JS aus dem Link (obwohl ich glaube, ich habe Redundanz hier): http://bootsnipp.com/snippets/e3MBM

1) Ist es Redundante den CDN-Link und die tatsächliche CSS und JS hinzufügen (Von dem, was ich verstehe diese wäre nur, wenn ich die CSS-Host und JS-Dateien lokal Kann jemand dies bestätigen

2) das verdammte Ding ist nicht so funktionieren, es soll:?

Ist t Erben - mit jedem Schritt separat dargestellt.

Mine, auf der anderen Seite hat alles zusammen:

Es ist wahrscheinlich etwas so dumm und einfach, aber ich habe keine idea.Can jemand bitte helfen?

Ich versuchte JSFiddle * Zum ersten Mal in Gebrauch ist, sieht einfach aus, aber ich hoffe, ich habe es richtig :)

<!DOCTYPE HTML>

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

Quelle

2017-01-20 QS Train

bitte Sie meine Antwort \ –

überprüfen Ich habe in Ihrem Code getan Korrektur, nun Seine adaequat .... –

Sie haben vergessen, Bootstrap-JS und CSS-Datei, das ist hinzuzufügen, warum seinen Konflikt da drüben, Würden Sie bitte einmal mit dem untenstehenden Code versuchen?

$(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>

Quelle

2017-01-20 03:53:15

War es mir nur die Verweise auszulassen? Ich sagte dir, es war etwas dummes. Danke ... –

@HK. Ja dank... –

Bootsnipp Step Wizard wird nicht korrekt gerendert

Antwort

Verwandte Themen