Wie ändere ich den bootstrap reaktiven Stil?

Question

Wir planen, die Reaktionsfähigkeit des Bootstrap auf andere Weise zu ändern. finden Sie in der aktuellen HTML-

$(function() { 
 
\t $('.panel-title a').on('click', function() { 
 
    \t $(this).closest('.panel').siblings().toggle(); 
 
    }); 
 
});

.panel-title a { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.panel-title a:active, 
 
.panel-title a:focus, 
 
.panel-title a:hover { 
 
    text-decoration: none; 
 
} 
 
.panel-title a:before { 
 
    content: "<"; 
 
    position: absolute; 
 
    left: 30px; 
 
} 
 
.panel-title a.collapsed { 
 
    text-align: left; 
 
} 
 
.panel-title a.collapsed:before { 
 
    content: ""; 
 
} 
 
.panel-title a.collapsed:after { 
 
    content: ">"; 
 
    position: absolute; 
 
    right: 30px; 
 
} 
 

 
.panel-body { 
 
    animation: shake; 
 
    animation-duration: 1s; 
 
} 
 

 
@-webkit-keyframes shake { 
 
    from, to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 

 
    10%, 30%, 50%, 70%, 90% { 
 
    -webkit-transform: translate3d(-10px, 0, 0); 
 
    transform: translate3d(-10px, 0, 0); 
 
    } 
 

 
    20%, 40%, 60%, 80% { 
 
    -webkit-transform: translate3d(10px, 0, 0); 
 
    transform: translate3d(10px, 0, 0); 
 
    } 
 
} 
 

 
@keyframes shake { 
 
    from, to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 

 
    10%, 30%, 50%, 70%, 90% { 
 
    -webkit-transform: translate3d(-10px, 0, 0); 
 
    transform: translate3d(-10px, 0, 0); 
 
    } 
 

 
    20%, 40%, 60%, 80% { 
 
    -webkit-transform: translate3d(10px, 0, 0); 
 
    transform: translate3d(10px, 0, 0); 
 
    } 
 
} 
 

 
.shake { 
 
    -webkit-animation-name: shake; 
 
    animation-name: shake; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div> 
 
     
 
     
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     
 
        <div class="panel-group" id="accordion"> 
 
        <div class="panel panel-default panel1"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title wobble"> 
 
          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse1" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse2" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse3" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
         
 
         <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse4" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        </div> 
 
     
 
     </div>

Hier, wenn das Fenster verkleinert wird oder Ansicht in Mobilvorrichtung die Liste Gruppe wie diese angezeigt wird. Bitte beachten Sie das Bild

Aber wir müssen das ändern .When Fenster verkleinert wird und seine Breite ist kleiner als eine Menge dann wollen wir auf der rechten Seite Teil des Fensters ein Pfeil oder Symbol Einstellungen zeigen (rechte Seite des Bildes).

Bitte beachten Sie die gewünschte Ausgabe

Wenn wir auf das Einstellungen-Symbol und klicken Sie dann das Bild durch Inhalt in der Liste Gruppe mit Schließen-Symbol ersetzt. Damit kann der Benutzer die Listengruppe im Vollbild ohne Bild sehen und er kann alle Aktionen ausführen. Danach kann er diese Liste schließen, indem er auf Schließen klickt. Bitte helfen Sie dies zu beheben.

Answer 1

Wenn Fenstergröße verändert wird, und seine Breite ist kleiner als eine Menge dann wollen wir auf der rechten Seite Teil des Fensters (rechte Seite des Bildes) ein Pfeil oder Symbol Einstellungen zeigen.

Dies kann durch Hinzufügen eines Elements mit dem gewünschten Symbol und mit Bootstrap Helfern Klasse von visible-xs wie erreichen wird:

<span id="toggle" class="visible-xs"><i class="fa fa-cog fa-2x"></i></span> 

Und füge hidden-xs in der rechten Spalte, so dass die Lasche Akkordeons nicht zeigen gleichzeitig xs Bildschirmauflösungen.

Sie werden dann brauchen $(window).width() zu verwenden, um die Fenstergröße zu erkennen und, wenn die Fenstergröße eine bestimmte Größe oder weniger ist, wird es den Trigger (klicken) des Zahnrad-Symbol erlauben das Bild auszublenden und die Registerkarte Inhalt zeigen .

Wenn Sie die Größe erhöhen, wird das Bild mit den Registern auf der rechten Seite wieder angezeigt.

bearbeiten

Danach kann er durch Klicken auf Schließen-Schaltfläche diese Liste Gruppe schließen.

Ich sehe, was Sie jetzt tun möchten.

Also, zuerst habe ich das Schriftart-Symbol auf das Symbol geändert, das Ihrem Bild entspricht.

Der Klick-Auslöser würde zunächst nur funktionieren, wenn Sie die Größe des Fensters geändert hätten. Sie können dasselbe click-Ereignis außerhalb der .resize()-Funktion hinzufügen, um das zu korrigieren.(Siehe die Ausführungen im JS aktualisiert)

Damit der Benutzer verstecken und zeigen (Toggle) zwischen den Laschen und Bild, Sie .toggle() verwenden und verwenden Sie das Symbol Bild .toggleClass()

$(this).children().toggleClass('fa-plus-square fa-minus-square'); 

zu ändern Hinweis: Behalten Sie die .resize()-Funktion bei, damit alles noch funktioniert, wenn Sie das Fenster auf größeren Bildschirmen ändern. Als Ron darauf hinwies, Ich reparierte auch die .resize() Funktion, um das gleiche zu verhalten.

statt schütteln, wie kann ich Animation Toggle-Slide von rechts ändern

TLDR nach links;

Mit @keyframes können Sie die Zwischenschritte in einer CSS-Animationssequenz steuern, indem Sie Wegpunkte entlang der Animation festlegen (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes). Ich habe eine slideInRight Keyframe-Regel hinzugefügt, damit Sie die Unterschiede zwischen diesem und dem Shake sehen können. Ich schlage vor, auf @keyframes nachzulesen, wenn Sie solche Dinge in Ihre Projekte implementieren möchten, damit Sie in Zukunft Ihre eigenen erstellen können. das Symbol Indikatoren bei kleineren Bildschirmauflösungen nicht angezeigt werden und nur

$(function() { 
 
    $('.panel-title a').on('click', function() { 
 
    $(this).closest('.panel').siblings().toggle(); 
 
    }); 
 

 
    // this takes care of screensizes that start off at small sizes 
 
    // like tablets or mobile devices 
 
    $('#toggle').on('click', function() { 
 
    $(this).children().toggleClass('fa-plus-square fa-minus-square'); 
 
    $(this).prev().toggle(); 
 
    $(this).closest('div').siblings().toggleClass('hidden-xs'); 
 
    }); 
 

 
    // provide the same size affect and fall back on desktop sizes 
 
    // when resizing window. 
 
    $(window).resize(function() { 
 
    var windowSize = $(window).width(); 
 
    if (windowSize < 768) { // BS breaking point for -xs 
 
     $('#toggle').on('click', function() { 
 
     $(this).children().toggleClass('fa-plus-square fa-minus-square'); 
 
     $(this).prev().toggle(); 
 
     $(this).closest('div').siblings().toggleClass('hidden-xs'); 
 
     }); 
 
    } else { 
 
     $('#toggle').prev().show(); 
 
     $('#toggle').closest('div').siblings().addClass('hidden-xs'); 
 
    } 
 
    }); 
 

 
});

.panel-title a { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.panel-title a:active, 
 
.panel-title a:focus, 
 
.panel-title a:hover { 
 
    text-decoration: none; 
 
} 
 
.panel-title a:before { 
 
    content: "\f177"; 
 
    font-family: "FontAwesome"; 
 
    position: absolute; 
 
    left: 30px; 
 
} 
 
.panel-title a.collapsed { 
 
    text-align: left; 
 
} 
 
.panel-title a.collapsed:before { 
 
    content: ""; 
 
} 
 
.panel-title a.collapsed:after { 
 
    content: "\f054"; 
 
    font-family: "FontAwesome"; 
 
    position: absolute; 
 
    right: 30px; 
 
} 
 

 
.panel-body { 
 
    animation: slideInRight; 
 
    animation-duration: 1s; 
 
} 
 
.img-container { 
 
    margin-bottom: 50px; 
 
} 
 
#toggle { 
 
    position: fixed; 
 
    top: 10px; 
 
    right: 20px; 
 
} 
 

 
@-webkit-keyframes slideInRight { 
 
    from { 
 
    -webkit-transform: translate3d(100%, 0, 0); 
 
    transform: translate3d(100%, 0, 0); 
 
    visibility: visible; 
 
    } 
 

 
    to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 

 
@keyframes slideInRight { 
 
    from { 
 
    -webkit-transform: translate3d(100%, 0, 0); 
 
    transform: translate3d(100%, 0, 0); 
 
    visibility: visible; 
 
    } 
 

 
    to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 

 
.slideInRight { 
 
    -webkit-animation-name: slideInRight; 
 
    animation-name: slideInRight; 
 
} 
 

 
@-webkit-keyframes shake { 
 
    from, to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 

 
    10%, 30%, 50%, 70%, 90% { 
 
    -webkit-transform: translate3d(-10px, 0, 0); 
 
    transform: translate3d(-10px, 0, 0); 
 
    } 
 

 
    20%, 40%, 60%, 80% { 
 
    -webkit-transform: translate3d(10px, 0, 0); 
 
    transform: translate3d(10px, 0, 0); 
 
    } 
 
} 
 

 
@keyframes shake { 
 
    from, to { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 

 
    10%, 30%, 50%, 70%, 90% { 
 
    -webkit-transform: translate3d(-10px, 0, 0); 
 
    transform: translate3d(-10px, 0, 0); 
 
    } 
 

 
    20%, 40%, 60%, 80% { 
 
    -webkit-transform: translate3d(10px, 0, 0); 
 
    transform: translate3d(10px, 0, 0); 
 
    } 
 
} 
 

 
.shake { 
 
    -webkit-animation-name: shake; 
 
    animation-name: shake; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<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.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-xs-12 col-sm-6 col-md-6 img-container" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> 
 
    <span id="toggle" class="visible-xs"><i class="fa fa-plus-square fa-2x"></i></span> 
 
    </div> 
 
     
 
     <div class="col-xs-12 col-sm-6 col-md-6 hidden-xs"> 
 
     
 
        <div class="panel-group" id="accordion"> 
 
        <div class="panel panel-default panel1"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title wobble"> 
 
          <a data-toggle="collapse" data-parent="#accordion" id="tab1" href="#collapse1" class="collapsed">Tab1</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse1" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse2" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Tab3</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse3" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
         
 
         <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4" class="collapsed">Tab4</a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapse4" class="panel-collapse collapse"> 
 
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
         </div> 
 
        </div> 
 
        </div> 
 
     
 
     </div>