Bagaimana untuk membuat mesh bersarang di bootstrap? Pertama, gunakan kelas .container dan .row, dan kemudian tambahkan kelas .row baru di dalam lajur. 1. Gunakan bekas dan baris luaran. 2. Tambah baris dan lajur baru dalam lajur. 3. Pastikan lajur dalaman berjumlah 12.4. Tambah kelas responsif untuk memenuhi saiz skrin yang berbeza. Meshes bersarang membolehkan susun atur yang lebih kompleks, tetapi dengan perhatian terhadap respons dan prestasi.

Mari kita menyelam ke dalam dunia sistem grid bootstrap dan meneroka cara membuat grid bersarang. Sistem Grid Bootstrap adalah alat yang berkuasa untuk membuat susun atur responsif, dan memahami grid bersarang benar -benar dapat meningkatkan kemahiran reka bentuk web anda.

Sistem grid Bootstrap dibina di atas susun atur 12-kolumn, yang menjadikannya sangat fleksibel untuk semua jenis reka bentuk. Apabila kita bercakap tentang grid bersarang, kita pada dasarnya bercakap tentang membuat grid dalam grid. Teknik ini sangat berguna apabila anda perlu menyusun kandungan dengan cara yang lebih kompleks dan hierarki.

Jadi, bagaimana kita melakukannya? Mari kita mulakan dengan contoh asas dan kemudian masuk ke dalam beberapa senario yang lebih maju.

Inilah persediaan grid bersarang sederhana:

 <div class = "container">
  <div class = "row">
    <div class = "col-md-8">
      <div class = "row">
        <div class = "col-md-6"> lajur bersarang 1 </div>
        <div class = "col-md-6"> lajur bersarang 2 </div>
      </div>
    </div>
    <div class = "col-md-4"> Lajur biasa </div>
  </div>
</div>

Dalam contoh ini, kami mempunyai barisan luar dengan dua lajur. Lajur pertama (Col-MD-8) mengandungi satu lagi baris, yang mempunyai dua lajur (Col-MD-6). Inilah intipati grid bersarang.

Sekarang, mari kita bincangkan beberapa nuansa dan amalan terbaik menggunakan grid bersarang.

Apabila anda bekerja dengan grid bersarang, ia adalah kejam untuk mengingati bahawa setiap peringkat bersarang menetapkan semula kiraan lajur. Oleh itu, dalam contoh kami, baris dalaman masih menggunakan grid 12 lajur penuh, walaupun ia berada di dalam Col-MD-8. Ini bermakna anda boleh membahagikan ruang baris dalaman tetapi anda mahu, selagi jumlah lajur dalaman menambah sehingga 12.

Inilah contoh yang lebih kompleks untuk menggambarkan ini:

 <div class = "container">
  <div class = "row">
    <div class = "col-md-6">
      <div class = "row">
        <div class = "col-md-4"> lajur bersarang 1 </div>
        <div class = "col-md-8"> lajur bersarang 2 </div>
      </div>
    </div>
    <div class = "col-md-6">
      <div class = "row">
        <div class = "col-md-3"> lajur bersarang 3 </div>
        <div class = "col-md-9"> lajur bersarang 4 </div>
      </div>
    </div>
  </div>
</div>

Dalam persediaan ini, kami mempunyai dua lajur luar, masing -masing mengandungi baris bersarang. Baris bersarang pertama mempunyai perpecahan 4-8, dan yang kedua mempunyai perpecahan 3-9. Kedua -duanya menambah sehingga 12, yang penting.

Salah satu perkara yang sejuk tentang grid bersarang adalah bagaimana mereka dapat membantu anda membuat susun atur yang lebih rumit. Sebagai contoh, anda mungkin mahu membuat bar sisi dalam kawasan kandungan, atau anda mungkin perlu membahagikan seksyen ke dalam beberapa sub-bahagian.

Tetapi, terdapat beberapa perangkap yang berpotensi untuk diperhatikan. Satu kesilapan biasa adalah lupa untuk membungkus lajur bersarang anda dalam kelas .row baru. Tanpa ini, susun atur anda boleh mendapatkan semua jenis kacau.

Satu lagi perkara yang perlu dipertimbangkan ialah kesan terhadap respons. Grid bersarang boleh membuat susun atur anda lebih kompleks, yang mungkin menjejaskan seberapa baik ia menyesuaikan diri dengan saiz skrin yang berbeza. Sentiasa menguji susun atur bersarang anda pada pelbagai peranti untuk memastikan ia berfungsi seperti yang diharapkan.

Mari lihat contoh grid bersarang yang responsif:

 <div class = "container">
  <div class = "row">
    <div class = "col-md-8">
      <div class = "row">
        <div class = "col-md-6 col-sm-12"> Lajur bersarang responsif 1 </div>
        <div class = "col-md-6 col-sm-12"> Lajur bersarang responsif 2 </div>
      </div>
    </div>
    <div class = "col-md-4 col-sm-12"> Lajur biasa responsif </div>
  </div>
</div>

Dalam contoh ini, kami telah menambah beberapa kelas responsif ( col-sm-12 ) untuk memastikan bahawa pada skrin yang lebih kecil, lajur bersarang dan timbunan lajur biasa secara menegak.

Apabila ia datang kepada prestasi, grid bersarang tidak semestinya menyebabkan masalah, tetapi susun atur yang kompleks dapat meningkatkan masa yang diperlukan untuk halaman untuk diberikan. Sentiasa perhatikan masa beban halaman anda dan pertimbangkan untuk memudahkan susun atur anda jika perlu.

Dari segi amalan terbaik, sentiasa berjuang untuk kejelasan dalam struktur HTML anda. Gunakan nama dan komen kelas yang bermakna untuk menjadikan kod anda lebih mudah difahami dan diselenggarakan. Juga, jangan bersarang grid lebih daripada beberapa tahap yang mendalam, kerana ini dapat membuat susun atur anda tidak perlu kompleks dan sukar untuk dikendalikan.

Untuk membungkus, grid bersarang di Bootstrap adalah alat yang hebat untuk membuat susun atur yang lebih terperinci dan teratur. Mereka memberi anda fleksibiliti untuk menstrukturkan kandungan anda dengan cara yang tidak dapat grid satu peringkat. Ingatlah untuk menggunakannya dengan bijak, perhatikan responsif, dan sentiasa menguji susun atur anda dengan teliti.

Selamat pengekodan!

Atas ialah kandungan terperinci Sistem Grid Bootstrap: Cara Membuat Grid Bersarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!