Bootstrap Tabs bekommen, um gut mit Mauerwerk zu spielen

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:

<code class="language-html"><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="https://www.php.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="https://www.php.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="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

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 https://www.php.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:

<code class="language-html"><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="https://img.php.cn/" 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></code>

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:

<code class="language-javascript">var $container = $('.masonry-container');
$container.imagesLoaded( function () {
  $container.masonry({
    columnWidth: '.card',
    itemSelector: '.card'
  });   
});  </code>

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:

<code class="language-html"><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="https://www.php.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="https://www.php.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="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

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!