Schlüsselpunkte

• Bootstrap und Mauerwerk sind beide leistungsstarke Webentwicklungs -Tools, aber gleichzeitig kann es zu Layoutfehlern führen, insbesondere wenn Sie Registerkarten ausblenden.
• Masonry, eine JavaScript -Gitter -Layout -Bibliothek, ist eine praktikable L?sung zum Erstellen eines Kartennetzes mit Ungleichheit, auch wenn bestimmte Probleme mit dem Browser -Kompatibilit?t vorliegen.
• Die Registerkarte Bootstrap mit Mauerwerk integrieren ist nicht einfach. Das Raster in der Registerkarte "Standard aktiv) wird m?glicherweise korrekt angezeigt. Wenn Sie jedoch auf die Registerkarte Navigationslink klicken, um den Inhalt des versteckten Bedienfelds anzuzeigen, k?nnen die Rasterelemente falsch gestapelt werden.
• Die L?sung für den Layoutfehler besteht darin, die Mauerwerkbibliothek neu zu initialisieren, nachdem jedes Panel sichtbar ist. Dies kann durch die Verwendung des Ereignisses "gezeigt.bs.tab" erreicht werden. Mit dieser L?sung ist es einfacher, ein gro?artiges Fliesenlayout zu erstellen.

Bootstrap ist eines der am weitesten verbreiteten Open-Source-Front-End-Frontworks. Fügen Sie Bootstrap in Ihr Projekt ein und Sie k?nnen sofort reaktionsschnelle Webseiten erstellen. Wenn Sie versuchen, Mauerwerk mit dem Registerkarte "Bootstrap" (einer der vielen JavaScript -Komponenten, die Bootstrap bietet) zu verwenden, werden Sie h?chstwahrscheinlich auf ein ?rztes Verhalten sto?en.

Auf der Mauerwerkswebsite lesen wir, dass Mauerwerk…

ist

Eine JavaScript -Gitter -Layout -Bibliothek. Es erfolgt, indem sie Elemente in der optimalen Position basieren, die auf dem verfügbaren vertikalen Raum basieren, ein bisschen wie ein Maurer, der einen Stein an einer Wand baut.

Ich bin auf dieses Problem gesto?en und dieser Artikel konzentriert sich darauf, wo das Problem liegt und welche L?sungen Sie einnehmen k?nnen.

Detaillierte Erl?uterung der Registerkarte Bootstrap

Die Registerkarte "Bootstrap" enth?lt zwei wichtige Teile: Das Registerkarten -Navigationselement und mehrere Inhaltspanel. Wenn die Seite geladen wird, wendet das erste Feld die .Active -Klasse an. Dadurch wird das Panel standardm??ig sichtbar. Diese Klasse wird über JavaScript verwendet, um die Sichtbarkeit des Panels über das Registerkarte Navigation Link -Kontakt -Ereignis zu umschalten: Wenn .aktiv existiert, ist das Panel sichtbar, andernfalls ist das Panel versteckt.

Wenn Sie über Webinhalte verfügen, die am besten in separaten Bl?cken und nicht alle an einem Ort gepresst werden, kann die Registerkarte Bootstrap -Registerkarte nützlich sein.

Warum Mauerwerk w?hlen?

In einigen F?llen eignet sich der Inhalt in jedem Panel für die Anzeige in einem reaktionsschnellen Rasterlayout. Beispielsweise sind eine Reihe von Produkt-, Dienst- und Portfolio -Projekten Inhaltstypen, die in einem Netzformat angezeigt werden k?nnen.

Wenn jedoch die H?hen der Gitterzellen nicht gleich sind, kann dies folgender auftreten.

Es gibt eine gro?e Lücke zwischen den beiden Inhaltslinien und das Layout sieht besch?digt aus.

Bootstrap l?st das Monospace -Problem mit der neuen Kartenkomponente basierend auf Flexbox. Das Hinzufügen der Karten-Deck-Klasse zu einer Reihe von Kartenkomponenten reicht aus, um Monospace-Spalten zu implementieren.

Wenn die Kartenl?nge inkonsistent ist, k?nnen Sie das CSS3-Multi-S?ulen-Layout verwenden. (Immerhin ist es insgesamt ziemlich gut, selbst bei einigen Browser -Kompatibilit?tsproblemen.) Dies ist die Grundlage für die neuen Kartenspaltenoptionen, die mit den Kartenkomponenten verfügbar sind. Wenn Sie jedoch die sch?nen Animationen immer noch aus der Box der Mauerwerks -JavaScript -Bibliothek und ihrer umfangreichen Browserkompatibilit?t m?gen, ist JavaScript in diesem Fall immer noch eine praktikable Option.

Setzen Sie die Demo -Seite

Eine Demo -Seite starten, hilft zu veranschaulichen, dass die Integration der Registerkarte Bootstrap mit Mauerwerk nicht so einfach wie erwartet ist.

Die Demo -Seite dieses Artikels basiert auf den Startervorlagen auf der Bootstrap -Website.

Folgendes ist das Framework, das durch die Registerkarte Bootstrap -Komponente gekennzeichnet ist:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="http://www.miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="http://www.miracleart.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="http://www.miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

NAV Die NAV-TABS-Klasse ist dafür verantwortlich, dem Khaki ein einzigartiges Erscheinungsbild zu verleihen. Der Wert des HREF -Attributs bildet die Beziehung zwischen einer einzelnen Registerkarte und seinem entsprechenden Registerkarteninhalt. Beispielsweise wird ein HREF -Wert von http://www.miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11 aufgebaut .

Beachten Sie au?erdem, wie sich Bootstrap auf Zug?nglichkeitseigenschaften wie Rolle, Aria-Controls usw. konzentriert.

Der folgende Code -Snippet zeigt die Struktur des Registerkarteninhalts:

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
  <div class="card-group">
    <div class="card">
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Getting Bootstrap Tabs to Play Nice with Masonry " />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card text here.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      </div>
    <div class="card">
      </div>
  </div>
</div>

Fügen Sie jedem Registerkarteninhaltsteil einfach eine ?hnliche Struktur hinzu, die dem oben geschriebenen Registerkartenelement entspricht.

Weitere Informationen finden Sie in der Codepen -Demo.

Mauerwerksbibliothek

hinzufügen

Sie k?nnen Mauerwerk von der offiziellen Website herunterladen, indem Sie auf die Schaltfl?che "Masonry.Pkgd.min.js herunterladen" klicken.

Um Layoutprobleme zu vermeiden, empfiehlt der Autor der Bibliothek die Verwendung von Mauerwerk mit dem Imagesloaded -Plugin.

Mauerwerk erfordert keine JQuery -Bibliothek, um zu arbeiten. Da die Bootstrap -JavaScript -Komponente jedoch JQuery bereits verwendet, werde ich das Leben erleichtern und Mauerwerk auf Jquery -Weise initialisieren.

Folgendes ist ein Ausschnitt aus der Initialisierung von Mauerwerk mit JQuery und Imagesload:

var $container = $('.masonry-container');
$container.imagesLoaded( function () {
  $container.masonry({
    columnWidth: '.card',
    itemSelector: '.card'
  });   
});  

Der obige Code zwischengespeichert das Div, das alle Kartenelemente in einer Variablen mit dem Namen $ Container umhüllt.

Verwenden Sie als n?chstes einige empfohlene Optionen, um Mauerwerk auf $ Container zu initialisieren. Die Option Spaltenbreite zeigt die Breite der horizontalen Gitters?ule an. Hier wird es auf die Breite eines einzelnen Kartenelements mit seinem Klassennamen eingestellt. Die Option "ItemSelector" gibt an, welche untergeordneten Elemente als Projektelemente verwendet werden sollen. Hier wird es auch als einzelner Kartenartikel festgelegt.

Es ist Zeit, den Code zu testen.

Oh! Was ist falsch daran, das Panel zu verstecken?

Der obige Code funktioniert auf Webseiten, die nicht die Registerkarte Bootstrap verwenden. In diesem Fall werden Sie jedoch bald erkennen, dass etwas Seltsames passieren wird.

Zun?chst sieht es ziemlich gut aus, weil das Raster in der Standard -Aktivit?tstafel korrekt angezeigt wird:

Wenn Sie jedoch auf den Link der Registerkarte Navigation klicken, um den Inhalt des versteckten Panels anzuzeigen, kommt es zu Folgendes:

Anzeigen des Quellcodes zeigt, dass Mauerwerk wie erwartet abgefeuert wurde, die Position jedes Elements jedoch falsch berechnet wird: Die Rasterelemente sind alle wie ein Kartenstapel miteinander gestapelt.

und mehr als das. Durch die Gr??e des Browserfensters wird sich die Rasterelemente korrekt für korrekt positionieren.

Lassen Sie uns Layout -Fehler

beheben

Da unerwartete Layout -Fehler nach dem Klicken auf den Registerkarte Navigationslink sichtbar werden, schauen wir uns die von der Registerkarte Bootstrap ausgel?sten Ereignisse genauer an.

Die Ereignisliste ist sehr kurz. Das ist es.

• show.bs.tab feuert wenn die Registerkarte angezeigt wird, aber bevor die neue Registerkarte
angezeigt wird,
gezeigt.
• hide.bs.tab wird abgefeuert, wenn Sie eine neue Registerkarte anzeigen m?chten (so dass die vorherige aktive Registerkarte versteckt ist)
• versteckt.bs.tab wird abgefeuert, nachdem die neue Registerkarte angezeigt wurde (so dass die vorherige aktive Registerkarte versteckt ist).

Da das Mauerwerkslayout nach der Anzeige der Registerkarte chaotisch wird, w?hlen Sie das Ereignis show.bs.tab. Hier ist der Code, den Sie direkt unter den vorherigen Code -Snippet setzen k?nnen:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="http://www.miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="http://www.miracleart.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="http://www.miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

Folgendes ist, was im obigen Code passiert:

Die Funktion

jQuery .each () schleifen den Link jeder Registerkarte Navigation durch und h?rt auf das Ereignis von DEAD.BS.TAB. Wenn das Ereignis feuert, wird das Panel sichtbar und das Mauerwerk wird neu initialisiert, nachdem alle Bilder geladen wurden.

Testcode

Wenn Sie gefolgt sind, starten Sie Ihre Demo in Ihrem Browser oder probieren Sie die folgende Codepen

Codepen Demo Link

Klicken Sie auf den Link der Registerkarte Navigation und beachten Sie, wie das Grid -Projekt diesmal für jedes Inhaltspanel gleichm??ig passt. Durch die Gr??e des Browsers führt das Projekt dazu, sich mit sch?nen Animationseffekten korrekt neu zu positionieren.

Das ist es, die Arbeit ist erledigt!

Schlussfolgerung

In diesem Artikel habe ich gezeigt, wie man die Registerkartenkomponente von Bootstrap in die Mauerwerks -JavaScript -Bibliothek integriert.

Beide Skripte sind einfach zu bedienen und leistungsf?hig. Stellen Sie sie jedoch zusammen und Sie werden einige nervige Layout -Fehler ausgesetzt sein, die versteckte Registerkarten beeinflussen. Wie oben gezeigt, besteht der Trick darin, die Mauerwerkbibliothek neu zu initialisieren, nachdem jedes Panel sichtbar ist.

Mit dieser L?sung ist es ein Kinderspiel, ein gro?artiges Fliesenlayout zu erzeugen.

Ich wünsche Ihnen eine glückliche Verwendung von Bootstrap!

Bootstrap -Registerkarte und FAQ (FAQ)

(Der FAQ -Teil sollte hier eingefügt werden, der Inhalt stimmt mit dem ursprünglichen FAQ -Teil überein und wird nach Bedarf leicht umgeschrieben, um den semantischen Vergleich zu halten)

Das obige ist der detaillierte Inhalt vonBootstrap Tabs bekommen, um gut mit Mauerwerk zu spielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!