Saya belajar Bootstrap beberapa hari yang lalu dan memilah sistem grid. Jika ada kesalahan, jangan ragu untuk memperbaikinya.
Ringkasan: Sistem grid telah mengembangkan halaman web responsif untuk terminal PC, PAD dan seluler, dan ada solusi yang berbeda berdasarkan resolusi layar yang berbeda.
(0,1, ukuran perangkat layar lebih besar dari 1200px pilih col-lg
(0.2. Ukuran perangkat layar antara 970px dan 1200px Select Col-MD
(0,3. Ukuran perangkat layar antara 768px dan 970px Pilih Col-SM
(0,4. Ukuran perangkat layar kurang dari 768px Pilih Col-XS
1. Sistem grid membagi halaman menjadi 12 kolom (hingga 12 kolom), sebagai berikut :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, skala awal = 1, maxinum-skala, skala user = no"> <title> Sistem raster </title> </<pote rel = " href = "library/bootstrap.min.css"> <tyle> .a {height: 50px; Perbatasan: 1px Red Solid; Latar Belakang: Merah Muda; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <dv> 1 </div> <div> 1 </div> <viv> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </Div> Div> 1 </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> <Div> </div> </div> <script src = "pustaka/jq.js"> </script> <skrip src = "library/bootstrap.min.js"> </script> </body> </html>(2.1, col-md-1 adalah kolom, dengan total 12 kolom ditutupi dengan "baris horizontal". Jumlah yang tertinggal setelah MD adalah jumlah kolom yang ditetapkan, (col-lg, col-sm, col-xs adalah sama)
3. Di bawah perangkat dengan resolusi layar yang berbeda, halaman yang disajikan adalah "halaman batang format raster" yang sesuai, sehingga mewujudkan tata letak yang responsif, sebagai berikut :
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, skala awal = 1, maxinum-skala, skala user = no"> <title> Sistem raster </title> </<pote rel = " href = "library/bootstrap.min.css"> <tyle> .a {height: 50px; Perbatasan: 1px Red Solid; Latar Belakang: Merah Muda; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <dv> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <verv> 1 </div> </div> </div> </div> <script src = "library/jq.js"> </skrip> <script src = "library/bootstrap.js"> </script> <script src = "library/boottrap.js"> </script> <skrip src = "library/bootstrap.ml/jq.js"> </skrip> <script src = "library/bootstrap.ml/jq.js"> </Script> <Script src = "library/bootstrap.ml/jq.js"(3.1. Kode di atas menunjukkan bahwa ketika ukuran perangkat layar lebih besar dari 1200px, satu baris horizontal memiliki empat kolom, satu kolom besar memiliki tiga kolom kecil, dan kolom kecil memiliki total 12 kolom.
(3.2, menunjukkan bahwa ketika ukuran perangkat layar antara 970px dan 1200px (pertama -tama Anda dapat melihat browser menyusut ke tahap ini), ada tiga kolom dalam baris horizontal, dan empat kolom dalam kolom besar, dengan total 12 kolom.
(3.2, menunjukkan bahwa ketika ukuran perangkat layar antara 768px dan 970px (pertama -tama Anda dapat melihat browser menyusut ke tahap ini), ada dua kolom besar dalam baris horizontal, dan enam kolom kecil dalam kolom besar, dengan total 12 kolom.
(3.2, menunjukkan bahwa ketika ukuran perangkat layar kurang dari 768px (pertama -tama Anda dapat melihat browser menyusut ke tahap ini), ada kolom besar dalam baris horizontal, dan kolom besar memiliki dua belas kolom kecil, dengan total 12 kolom.
4. Kolom offset, sarang dan menukar posisi dalam sistem raster
(4.1, offset kolom
<div> <div> 8 </div> <div> 3 </div> <!-Kolom mengimbangi satu per satu di sebelah kanan-> </div>
(4.2, bersarang
<div> <!-bersarang-> <div style = "padding: 0;"> <viv> </div> <ver> </div> <viv> </div> </div> <verv> 3 </div> </div>
(4.3, posisi swap
<div> <!-SWAP Posisi-> <div> 9 </div> <!-Tekan, Pindah ke kanan-> <ver> 3 </div> <!-Tarik, Pindah ke kiri-> </Div>
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Artikel ini menggunakan kasus paling sederhana untuk menganalisis titik tata letak utama yang terlibat dalam kasus ini, berharap dapat membantu untuk belajar semua orang.