webentwicklung-frage-antwort-db.com.de

Bootstrap 3-Formular Wizard

Hallo, ich habe ein Problem mit dem Formular-Assistenten, den ich für Bootstrap 3.0.3 verwende

Es funktioniert zwar, aber die nächsten und vorherigen Schaltflächen sind nicht, aber wenn ich auf die Navigation klicke, funktioniert es.

Ich weiß nicht, ob die Versionen kompatibel sind. Ich habe dieses Plugin heruntergeladen

https://github.com/VinceG/Twitter-bootstrap-wizard

In der Dokumentation steht jedoch, dass sie mit 3.0.3 kompatibel ist

Irgendwelche Vorschläge, die für den Formular-Assistenten für Bootstrap 3.0.3 funktionieren?

Vielen Dank. Ihre Kommentare werden sehr geschätzt :)

here's the screenshot

dies ist mein HTML-Code 

<div class="row">
        <div id="rootwizard">
            <ul>
                <li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
                <li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
                <li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
                <li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
                <li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
                <li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
                <li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane" id="tab1">
                  1
                </div>
                <div class="tab-pane" id="tab2">
                  2
                </div>
                <div class="tab-pane" id="tab3">
                    3
                </div>
                <div class="tab-pane" id="tab4">
                    4
                </div>
                <div class="tab-pane" id="tab5">
                    5
                </div>
                <div class="tab-pane" id="tab6">
                    6
                </div>
                <div class="tab-pane" id="tab7">
                    7
                </div>
                <ul class="pager wizard">
                    <li class="previous first" style="display:none;"><a href="#">First</a></li>
                    <li class="previous"><a href="#">Previous</a></li>
                    <li class="next last" style="display:none;"><a href="#">Last</a></li>
                    <li class="next"><a href="#">Next</a></li>
                </ul>
            </div>  
        </div>
    </div>

Das ist mein CSS

.bwizard-steps {
display: inline-block;
margin: 0; padding: 0;
background: #fff }
.bwizard-steps .active {
    color: #fff;
    background: #007ACC }
.bwizard-steps .active:after {
    border-left-color: #007ACC }
.bwizard-steps .active a {
    color: #fff;
    cursor: default }
.bwizard-steps .label {
    position: relative;
    top: -1px;
    margin: 0 5px 0 0; padding: 1px 5px 2px }
.bwizard-steps .active .label {
    background-color: #333;}
.bwizard-steps li {
    display: inline-block; position: relative;
    margin-right: 5px;
    padding: 12px 17px 10px 30px;
    *display: inline;
    *padding-left: 17px;
    background: #efefef;
    line-height: 18px;
    list-style: none;
    zoom: 1; }
.bwizard-steps li:first-child {
    padding-left: 12px;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px; }
.bwizard-steps li:first-child:before {
    border: none }
.bwizard-steps li:last-child {
    margin-right: 0;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0; }
.bwizard-steps li:last-child:after {
    border: none }
.bwizard-steps li:before {
    position: absolute;
    left: 0; top: 0;
    height: 0; width: 0;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    border-top: 20px inset transparent;
    content: "" }
.bwizard-steps li:after {
    position: absolute;
    right: -20px; top: 0;
    height: 0; width: 0;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    border-top: 20px inset transparent;
    content: "";
    z-index: 2; }
.bwizard-steps a {
    color: #333 }
.bwizard-steps a:hover {
    text-decoration: none }
     .bwizard-steps.clickable li:not(.active) {
cursor: pointer }
    .bwizard-steps.clickable li:hover:not(.active) {
background: #ccc }
    .bwizard-steps.clickable li:hover:not(.active):after {
border-left-color: #ccc }
    .bwizard-steps.clickable li:hover:not(.active) a {
color: #08c }
    @media (max-width: 480px) { 
/* badges only on small screens */
.bwizard-steps li:after,
.bwizard-steps li:before {
    border: none }
.bwizard-steps li,
.bwizard-steps li.active,
.bwizard-steps li:first-child,
.bwizard-steps li:last-child {
    margin-right: 0;
    padding: 0;
    background-color: transparent }
     }

Und das ist meine JS

    $(document).ready(function() {
    $('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});    
    window.prettyPrint && prettyPrint()
}); 
10
Alyssa Reyes

Von github

Die Bower-Version des Bootstrap-Assistenten Oder eines anderen Paket-Managers wird nicht mehr aktualisiert. Siehe Nr. 81 für den Grund. Bitte verwenden Sie stattdessen den 'Master'-Zweig.

verwenden Sie bower install Twitter-bootstrap-wizard#master

1
x64vs32x

Ich bin auch mit diesem Problem konfrontiert.

Es unterstützt nicht 3.0.3.

Es funktioniert gut in Bootstrap 2.x-Versionen.

Ich kann die Version nicht auf 2 ändern, also habe ich jQuery verwendet:

$('#nextTab').click(function(){
 $('#navTab').find('.active').next().children().trigger('click');
})

$('#prevTab').click(function(){
  $('#navTab').find('.active').prev().children().trigger('click');
})

Sie können Klassen hinzufügen oder entfernen, um das Erscheinungsbild zu verbessern. 

1
Prashobh

bower wird für bootsrtap 3.x nicht aktualisiert. Laden Sie stattdessen Zip von github herunter, und es empfiehlt sich, bootstrap 3.x zu verwenden.

1
Rakesh Bhalani

Dieses Problem ist auf die Inkompatibilität von Bootstrap-Javascript mit dem Javascript des Bootstrap-Assistenten zurückzuführen. Ich habe Bootstrap-Javascript-Version 2.3.2 ausprobiert. Die Zurück- und Weiter-Taste begann zu arbeiten. 

Ich habe hier einen Artikel geschrieben, der die Lösung dieses Problems erläutert

http://codezag.com/bootstrap-wizard-next-button-not-working/

Ich hatte auch dieses Problem. Die mit revox.io gebündelte Version des Bootstrap-Assistenten war mit der Bootstrap-Version nicht kompatibel. Unter https://github.com/VinceG/Twitter-bootstrap-wizard finden Sie aktuelle Versionen.

0
Aligma