Mendapatkan tab bootstrap untuk bermain bagus dengan batu

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.

Bootstrap adalah salah satu rangka kerja front-end sumber terbuka yang paling banyak digunakan. Sertakan bootstrap dalam projek anda dan anda akan dapat membuat laman web responsif dengan segera. Jika anda cuba menggunakan batu dengan widget tab bootstrap (salah satu daripada banyak komponen JavaScript yang disediakan Bootstrap), anda kemungkinan besar akan menghadapi beberapa jenis tingkah laku yang menjengkelkan.

Di laman web Masonry, kami membaca bahawa batu itu ...

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.

Saya menghadapi masalah ini dan artikel ini memberi tumpuan kepada masalah yang terletak dan penyelesaian apa yang boleh anda ambil.

Penjelasan terperinci mengenai tab bootstrap

Komponen tab Bootstrap mengandungi dua bahagian yang berkaitan dengan utama: elemen navigasi tab dan panel kandungan berganda. Apabila halaman dimuatkan, panel pertama menggunakan kelas aktif. Ini menjadikan panel kelihatan secara lalai. Kelas ini digunakan melalui JavaScript untuk bertukar -tukar penglihatan panel melalui Peristiwa Perhubungan Link Navigasi Tab: Jika. Aktif wujud, panel dapat dilihat, jika tidak, panel tersembunyi.

Jika anda mempunyai beberapa kandungan web yang paling baik diberikan dalam blok berasingan dan bukannya semua diperas di satu tempat, komponen tab bootstrap mungkin berguna.

Mengapa memilih batu?

Dalam beberapa kes, kandungan dalam setiap panel sesuai untuk dipamerkan dalam susun atur grid responsif. Sebagai contoh, pelbagai projek produk, perkhidmatan, dan portfolio adalah jenis kandungan yang boleh dipaparkan dalam format grid.

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.

Bootstrap menyelesaikan masalah monospace dengan komponen kad baru berdasarkan Flexbox. Hanya menambah kelas dek kad ke satu set komponen kad cukup untuk melaksanakan lajur monospace.

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:

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

<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="/static/imghwm/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></code>

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:

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

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:

Melihat kod sumber akan mendedahkan bahawa batu telah dipecat seperti yang diharapkan, tetapi kedudukan setiap item dikira dengan tidak betul: Item grid semuanya disusun bersama -sama seperti timbunan kad.

dan lebih daripada itu. Saiz semula tetingkap penyemak imbas akan menyebabkan item grid betul kedudukannya.

mari memperbaiki ralat susun atur

Sejak kesilapan susun atur yang tidak dijangka menjadi jelas selepas mengklik pautan navigasi tab, mari kita lihat dengan lebih dekat peristiwa yang dicetuskan oleh tab Bootstrap.

Senarai acara sangat pendek. Ini.

Show.bs.tab Fires Apabila tab dipaparkan, tetapi sebelum tab baru dipaparkan

• ditunjukkan.bs.tab pencetus
selepas tab dipaparkan.
• hide.bs.tab dipecat apabila anda ingin memaparkan tab baru (jadi tab aktif sebelumnya akan tersembunyi)
• tersembunyi.bs.tab dipecat selepas tab baru dipaparkan (jadi tab aktif sebelumnya tersembunyi).
Kerana susun atur batu menjadi kemas selepas tab dipaparkan, pilih acara Show.bs.tab. Berikut adalah kod yang anda boleh letakkan terus di bawah coretan kod sebelumnya:

Berikut adalah apa yang berlaku dalam kod di atas:

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

Gelung fungsi

jQuery .eech () melalui setiap pautan navigasi tab dan mendengar untuk acara yang ditunjukkan.bs.tab. Apabila peristiwa kebakaran, panel menjadi kelihatan dan batu dihidupkan semula selepas semua imej dimuatkan.

kod ujian

Jika anda telah mengikuti, mulakan demo anda dalam penyemak imbas anda, atau cuba demo Codepen di bawah untuk melihat hasilnya:

pautan demo codepen

Klik pautan navigasi tab dan perhatikan bagaimana projek grid sama rata sesuai dengan setiap panel kandungan kali ini. Saiz semula penyemak imbas akan menyebabkan projek itu betul -betul meletakkan semula dirinya dengan kesan animasi yang indah.

itu sahaja, kerja itu selesai!

Kesimpulan

Dalam artikel ini, saya menunjukkan cara mengintegrasikan komponen tab bootstrap dengan perpustakaan javascript batu.

kedua -dua skrip mudah digunakan dan berkuasa. Walau bagaimanapun, meletakkannya bersama -sama dan anda akan menghadapi beberapa kesilapan susun atur yang menjengkelkan yang mempengaruhi tab tersembunyi. Seperti yang ditunjukkan di atas, silap mata adalah untuk memulakan semula Perpustakaan Masonry selepas setiap panel dapat dilihat.

Dengan penyelesaian ini, mewujudkan susun atur jubin yang hebat akan menjadi angin.

Saya doakan anda gembira menggunakan bootstrap!

tab bootstrap dan Soalan Lazim Masonry (FAQ)

(bahagian Soalan Lazim harus dimasukkan di sini, kandungannya selaras dengan bahagian FAQ yang asal, dan ia akan ditulis semula sedikit seperti yang diperlukan untuk mengekalkan semantik tidak berubah)

Atas ialah kandungan terperinci Mendapatkan tab bootstrap untuk bermain bagus dengan batu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!