Analisis mendalam sistem grid dalam Bootstrap

Artikel ini akan memperkenalkan anda kepada sistem grid reka letak halaman web dalam Bootstrap, dan memahami prinsip kerja, tetapan lebar sel dan kaedah reka letak responsif sistem grid Bootstrap awak.

1. Bagaimana sistem grid Bootstrap berfungsi

1.1 Sistem dua belas grid

Grid ialah Grid Bahasa Inggeris Sebab beberapa tempat adalah grid dan beberapa tempat adalah raster kerana tabiat terjemahannya berbeza. Sistem dua belas grid bermaksud bahawa keseluruhan skrin dibahagikan kepada dua belas bahagian yang sama mengikut lebar, dan satu bahagian yang sama mewakili satu perdua belas daripada lebar skrin Mengapa ia dibahagikan kepada dua belas bahagian yang sama, bukannya sepuluh bahagian yang sama atau yang lain bahagian? Bagi bahagian, ini kerana 12 ialah gandaan sepunya terkecil bagi 1, 2, 3, 4, dan 6. Mengikut pengalaman, pembahagian ini adalah yang paling cantik dan praktikal. Sudah tentu, saya juga telah melihat sistem 36-grid dan 10-grid Dari perspektif penggunaan, mereka sememangnya tidak semudah sistem 12-grid. [Cadangan berkaitan: "tutorial bootstrap"]

Dalam sistem dua belas grid, jika saya ingin membahagikan skrin kepada bahagian kiri dan kanan, bahagian kiri mengambil satu pertiga dan sebelah kanan mengambil tiga pertiga Kedua, anda boleh menetapkan lebar kiri kepada 4 grid dan lebar kanan kepada 8 grid. Jika saya memerlukan separuh bahagian kiri dan kanan, saya hanya perlu menetapkan setiap satu kepada 6 grid. Jika saya hanya perlu menetapkan satu halaman untuk mengisi skrin, saya boleh menetapkannya terus kepada 12 grid. Lihat, bukankah ia sangat mudah?

1.2 Teg sistem grid Bootstrap

Reka bentuk sistem grid Bootstrap tiga teg, iaitu bekas, baris, kol:

• Bekas adalah bekas, yang telah diperkenalkan secara terperinci di bahagian sebelumnya.
• baris bermaksud baris, mewakili baris mendatar
• col ialah sel, mewakili setiap sel tertentu Terdapat tiga cara untuk menulisnya: col, nombor grid kol (seperti col-3 ), saiz skrin ko-nombor grid (seperti col-md-3).

Berikut ialah kod sampel yang membahagikan skrin kepada tiga unit yang sama lebar. Anda tidak perlu mendalami kaedah penulisan kod tertentu. Anda hanya perlu memahami secara ringkas struktur grid Sistem. Kami akan membincangkannya kemudian.

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

1.3 Peraturan Sistem Grid Bootstrap

• Gunakan baris untuk mencipta kumpulan lajur mendatar .

• Boleh terdapat berbilang baris dalam halaman. Garisan

• mesti diletakkan di dalam bekas untuk mendapatkan penjajaran dan pelapik yang betul.

• Kandungan hendaklah diletakkan di dalam lajur (col), dan hanya lajur boleh menjadi elemen anak langsung bagi baris.

• Baris juga boleh bersarang dalam lajur. Baris dalam lajur tidak memerlukan bekas kerana lajur itu sendiri adalah bekas.

• Anda boleh terus menggunakan kelas grid yang dipratentukan, seperti bilangan grid saiz skrin kol, untuk membuat reka letak grid dengan cepat.

• Dalam kelas yang dipratentukan, saiz skrin mempunyai 5 nilai, terutamanya digunakan untuk reka bentuk responsif, lihat 3.1. Bilangan grid ialah nombor dari 1 hingga 12, mewakili lebar skrin.

2. Tetapan lebar sel dalam sistem grid Bootstrap

2.1 Reka letak lebar sama lalai

Jika kita tidak menetapkan lebar setiap lajur, bilangan lalai lajur akan diedarkan sama rata, tetapi jika terdapat lebih daripada 12 lajur berturut-turut, fenomena yang tidak dapat diramalkan akan berlaku ( saya melakukan beberapa ujian untuk penyelidikan. Anda tidak perlu menguji ini Jika anda ingin susun atur lebih daripada 12, anda boleh menggunakan jadual). Saya akan memberikan sekeping kod di bawah, yang akan digunakan mulai sekarang, dengan beberapa perubahan kecil, jadi saya tidak akan memberikannya lagi.

Apabila menggunakan col, nombor col-grid untuk menetapkan lebar, sila tetapkan lebar tetingkap kepada maksimum untuk kesan pratonton, jika tidak, ia boleh menyebabkan sisihan kesan Selain itu, kami tidak mengesyorkan tetapan ini secara sebenar aplikasi. Sila gunakan reka letak Grid responsif, walaupun anda tidak mahu responsif.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div>
        <div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Kesan kod ini ditunjukkan dalam gambar di atas. Anda boleh menyalin beberapa sel lagi di bawah untuk melihat kesannya.

              <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>

2.2 Tetapkan setiap lebar lajur

Cuba tambah tiga <div class="col"> Gantikan kol dengan nilai kol-3, kol-6, kol-3 atau lain-lain Ringkasnya, jumlah tiga nombor ialah 12. Sudah tentu, anda juga boleh memadam atau menambah satu atau beberapa sel, asalkan jumlah satu baris ialah 12. Melalui tetapan yang begitu mudah, lebar sel boleh diubah suai dengan sangat mudah. Gambar di bawah menunjukkan kesan paparan menukar kol kepada col-2, col-2, col-4, col-4 masing-masing <p><img src="https://img.php.cn/upload/image/470/902/110/163152969673133Analisis%20mendalam%20sistem%20grid%20dalam%20Bootstrap" title="163152969673133Analisis mendalam sistem grid dalam Bootstrap" alt="Analisis mendalam sistem grid dalam Bootstrap"></p> <p><strong><span style="font-size: 18px;">2.3 Lajur lebar boleh ubah </span></strong></p> <p>Jika anda menetapkan nilai sel, jika terdapat tiga sel dan hanya satu ditetapkan, baki Dua sel di bawah akan membahagikan ruang yang tinggal sama, menjadikannya mudah untuk menyediakan lajur lebar berubah-ubah. Sebagai peringatan, sel di mana nilai tetap ditetapkan tidak perlu berada di hadapan Contohnya, dalam kod 2.1, anda boleh menetapkan sel kedua untuk menduduki keseluruhan skrin (col-6), dan sel lain berada. sama rata. </p> <p><img src="https://img.php.cn/upload/image/580/548/577/1631529701545798.png" title="1631529701545798.png" alt="Analisis mendalam sistem grid dalam Bootstrap"></p> <p><strong><span style="font-size: 18px;">2.4 Lajur yang dibalut secara automatik </span></strong></p> <p>Apabila setiap sel mempunyai nilai lebar yang ditetapkan, apabila Dalam satu baris , apabila ruang yang tinggal tidak lagi menampung sel, ia akan secara automatik membalut. </p> <ul style="list-style-type: disc;"><li><p> Ambil contoh dalam 2.1 dan gantikan kol dalam empat <code><div class="col"> dengan col-6 untuk melihat kesannya. <p><img src="https://img.php.cn/upload/image/569/508/978/1631529707575018.png" title="1631529707575018.png" alt="Analisis mendalam sistem grid dalam Bootstrap"></p> <ul style="list-style-type: disc;"><li><p> Ambil contoh dalam 2.1 dan gantikan kol dalam empat <code><div class="col"> dengan col-12 untuk melihat kesannya . <p><img src="https://img.php.cn/upload/image/288/939/606/1631529713379410.png" title="1631529713379410.png" alt="Analisis mendalam sistem grid dalam Bootstrap"></p> <ul style="list-style-type: disc;"><li><p> Ambil contoh dalam 2.1 dan gantikan kol dalam empat <code><div class="col"> dengan col-8 untuk melihat kesannya . <p><img src="https://img.php.cn/upload/image/677/573/414/163152971963671Analisis%20mendalam%20sistem%20grid%20dalam%20Bootstrap" title="163152971963671Analisis mendalam sistem grid dalam Bootstrap" alt="Analisis mendalam sistem grid dalam Bootstrap"></p> <p>Ia boleh dilihat bahawa walaupun menetapkannya kepada col-8 juga boleh mempunyai satu baris setiap sel, teks hanya mengambil 12/8 daripada skrin itu adalah dua pertiga, jadi jika tiada keperluan khas, cuba tambah nilai sel dalam setiap baris kepada tepat 12. </p> <h2><strong>3. Reka letak responsif grid Bootstrap </strong></h2> <p><strong><span style="font-size: 16px;">3.1 Apakah itu reka letak responsif </span></strong></p> <p> Mengenai reka letak responsif , secara ringkasnya, ini bermakna susun atur halaman yang dipaparkan adalah berbeza apabila saiz skrin berbeza. Sebagai contoh, apabila melihat pada telefon bimbit, terdapat hanya satu sel dalam satu baris, apabila melihat pada tablet, terdapat dua sel dalam satu baris, dan apabila melihat pada komputer, terdapat tiga. Bootstrap boleh melaksanakan fungsi ini dengan mudah. </p> <p><strong><span style="font-size: 18px;">3.2 Pembahagian saiz skrin sistem grid Bootstrap </span></strong></p> <p>Lihat jadual di bawah. Adakah ianya sama dengan titik putus peraturan. Ia hanya xs tambahan Sebenarnya, lalai ialah xs, jadi ia boleh diabaikan secara langsung. Seperti yang anda lihat, Bootstrap membahagikan skrin kepada 6 jenis saiz melalui 5 titik putus. </p> <table><tbody> <tr class="firstRow"> <th><br></th> <th>xs<br>          </th> <th>sm<br>          ≥576px</th> <th>md<br>          ≥768px</th> <th>lg<br>          ≥992px</th> <th>xl<br>          ≥1200px</th> <th>xxl<br>          ≥1400px</th> </tr> <tr> <td>Container容器</td> <td>None (auto)</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> <td>1320px</td> </tr> <tr> <td>屏幕大小类前缀</td> <td><code>.col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

Contoh Reka Letak Responsif Grid Bootstrap 3.3

Ganti empat <div class="col"> dengan <code><div class="col-12 col-md-6 col-lg-4"> dalam contoh 2.1 dan tukar saiz Tetingkap penyemak imbas, semak kesan, kod ini bermakna apabila ia adalah <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d333468f544f4c93537e842e7d7db6~tplv-k3u1fbpfcp-watermark.awebp" alt="Analisis mendalam sistem grid dalam Bootstrap" ></p> <p> Sudah tentu, anda juga boleh menukar mata untuk menjadi lebih terperinci dan menggantikannya dengan <code><div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">. <p>Berikut adalah helah kecil Jika anda ingin memaparkan beberapa lajur dalam satu baris, lebarnya hanya dibahagikan dengan 12. Haha, saya rasa anda juga boleh memikirkannya. </p> <p><strong><span style="font-size: 18px;">3.4 Jika anda tidak mahu membalas</span></strong></p> <p>Jika anda mahu semua pelayar memaparkan kesan yang sama, ia dibahagikan kepada dua lajur , iaitu, anda tidak mahu membalas Untuk menjadikannya dipaparkan secara responsif, ia adalah sangat mudah Anda boleh menetapkan bilangan grid pada semua skrin kepada nilai yang sama <code><div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">, supaya ia boleh konsisten pada mana-mana skrin. <blockquote> <p>Alamat asal: https://juejin.cn/post/6970846739293011998#heading-9</p> <p>Pengarang: I Lao Liu</p> </blockquote> <p>Lebih banyak pengaturcaraan Untuk pengetahuan berkaitan, sila layari: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">Video Pengaturcaraan</a>! ! </p> </div>