mata utama

bootstrap dan batu adalah alat pembangunan web yang kuat, tetapi menggunakannya pada masa yang sama boleh menyebabkan kesilapan susun atur, terutama jika anda menyembunyikan tab.
Masonry, perpustakaan susun atur grid JavaScript, adalah penyelesaian yang berdaya maju untuk mewujudkan grid kad dengan ketidaksamaan walaupun terdapat masalah keserasian pelayar tertentu.
Mengintegrasikan tab bootstrap dengan batu tidak mudah. Grid di dalam panel tab aktif lalai mungkin muncul dengan betul, tetapi mengklik pautan navigasi tab untuk menunjukkan kandungan panel tersembunyi boleh menyebabkan item grid disusun dengan tidak betul.
Penyelesaian kepada ralat susun atur adalah untuk menghidupkan semula perpustakaan batu selepas setiap panel dapat dilihat. Ini boleh dicapai dengan menggunakan acara "ditunjukkan.bs.tab". Dengan penyelesaian ini, lebih mudah untuk membuat susun atur jubin yang hebat.

Perpustakaan susun atur grid JavaScript. Ia berfungsi dengan meletakkan unsur -unsur dalam kedudukan yang optimum berdasarkan ruang menegak yang ada, sedikit seperti mason membina batu di dinding.

Penjelasan terperinci mengenai tab bootstrap

Mengapa memilih batu?

Walau bagaimanapun, jika ketinggian sel grid tidak sama, yang berikut mungkin berlaku.

Terdapat jurang yang besar di antara kedua -dua garis kandungan dan susun atur kelihatan rosak.

Jika anda mahu panjang kad tidak konsisten, anda boleh menggunakan susun atur multi-lajur CSS3. (Lagipun, ia cukup baik secara keseluruhan, walaupun dengan beberapa isu keserasian pelayar.) Ini adalah asas bagi pilihan lajur kad baru yang tersedia dengan komponen kad. Walau bagaimanapun, jika anda masih menyukai animasi yang indah dari kotak Perpustakaan JavaScript Masonry dan keserasian penyemak imbasnya yang luas, JavaScript masih merupakan pilihan yang sesuai dalam kes ini.

Tetapkan halaman demo

Memulakan halaman demo membantu menggambarkan bahawa mengintegrasikan tab bootstrap dengan batu tidak semudah yang diharapkan.

Halaman demo artikel ini didasarkan pada templat starter yang disediakan di laman web Bootstrap.

Berikut adalah rangka kerja yang ditandai oleh komponen tab bootstrap:

<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://ipnx.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://ipnx.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://ipnx.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

NAV Kelas Nav-Tabs bertanggungjawab untuk memberikan Khaki penampilan yang unik. Nilai atribut HREF membentuk hubungan antara tab tunggal dan kandungan tab yang sepadan. Contohnya, nilai href http://ipnx.cn/link/6fbb2c2ee065c77a193d0057aab8fa11 akan menjalin hubungan dengan kandungan tab di div dengan nilai id rumah: klik tab tertentu .

Di samping itu, sila ambil perhatian bagaimana bootstrap memberi tumpuan kepada sifat kebolehaksesan seperti peranan, kawalan Aria, dll.

Coretan kod berikut menggambarkan struktur kandungan tab:

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

Cukup tambahkan struktur yang sama untuk setiap bahagian kandungan tab yang sepadan dengan elemen tab yang ditulis di atas.

Untuk kod penuh, lihat demo Codepen.

Tambah perpustakaan batu

Anda boleh memuat turun batu dari laman web rasmi dengan mengklik butang "muat turun masonry.pkgd.min.js".

Untuk mengelakkan masalah susun atur, penulis perpustakaan mengesyorkan menggunakan Masonry dengan plugin Imagesloaded.

Masonry tidak memerlukan perpustakaan jQuery untuk berfungsi. Walau bagaimanapun, sejak komponen Bootstrap JavaScript sudah menggunakan jQuery, saya akan membuat hidup lebih mudah dan memulakan batu dengan cara jQuery.

Berikut adalah coretan permulaan batu menggunakan jQuery dan imageseded:

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

kod di atas cache div yang membungkus semua elemen kad dalam pembolehubah bernama $ container.

Seterusnya, gunakan beberapa pilihan yang disyorkan untuk memulakan batu pada container $. Pilihan lajur menunjukkan lebar lajur grid mendatar. Di sini ia ditetapkan pada lebar item kad tunggal dengan menggunakan nama kelasnya. Pilihan itemSelector menunjukkan unsur -unsur kanak -kanak yang akan digunakan sebagai elemen projek. Di sini, ia juga ditetapkan sebagai item kad tunggal.

sudah tiba masanya untuk menguji kod tersebut.

Oh! Apa yang salah dengan menyembunyikan panel?

Kod di atas berfungsi dengan baik di laman web yang tidak menggunakan tab Bootstrap. Walau bagaimanapun, dalam kes ini, anda akan menyedari bahawa sesuatu yang pelik akan berlaku.

Pertama sekali, ia kelihatan cantik kerana grid di dalam panel tab aktif lalai dipaparkan dengan betul:

Walau bagaimanapun, jika anda mengklik pautan navigasi tab untuk menunjukkan kandungan panel tersembunyi, yang berikut berlaku:

<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://ipnx.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://ipnx.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://ipnx.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>