1. Pendahuluan
Bootstrap memiliki sistem streaming grid yang responsif dan mobile-first. Ketika perangkat layar atau ukuran viewport meningkat, sistem akan secara otomatis dibagi menjadi hingga 12 kolom . Ini mencakup kelas -kelas yang sudah ditentukan sebelumnya, dan mixin yang kuat untuk menghasilkan lebih banyak tata letak semantik.
2. Opsi raster
Bootstrap3.x menggunakan empat opsi grid untuk membentuk sistem grid. Pengenalan keempat opsi ini di situs web resmi adalah sebagai berikut. Banyak orang tidak memahaminya. Di sini saya akan menjelaskan perbedaan antara empat opsi grid secara rinci. Faktanya, hanya satu perbedaan adalah bahwa mereka cocok untuk perangkat layar dengan ukuran yang berbeda . Mari kita lihat item awalan kelas. Mari kita beri nama keempat opsi grid ini untuk awalan. Mereka adalah Col-Xs, Col-SM, Col-MD, dan Col-LG. Mereka yang mengerti bahasa Inggris akan tahu bahwa LG adalah singkatan besar, MD adalah singkatan dari Mid, SM adalah singkatan dari Small, dan XS adalah singkatan dari ***. Penamaan ini mencerminkan lebar layar yang berbeda yang beradaptasi dengan kelas -kelas ini. Di bawah ini kami memperkenalkan karakteristik kelas -kelas ini.
Tabel berikut memungkinkan Anda untuk melihat secara rinci bagaimana sistem raster Bootstrap bekerja pada beberapa perangkat layar.
3. Offset kolom
Gunakan .col-md-offset-* untuk mengimbangi kolom ke kanan. Kelas -kelas ini menambahkan semua kolom ke margin kiri kolom dengan menggunakan pemilih *. Misalnya, .col-md-offset-4 menggeser .col-md-4 ke kanan dengan lebar 4 kolom.
4. Kolom bersarang
Untuk bersarang konten menggunakan raster bawaan, itu dapat dilakukan dengan menambahkan .row baru dan serangkaian kolom .col-md-* ke dalam kolom .col-md-*. Kolom yang terkandung dalam baris bersarang harus bertambah hingga 12 .
5. Penyortiran kolom
Urutan kolom dapat dengan mudah diubah dengan menggunakan .col-md-push-* dan .col-md-pull-*.
Kasus
<%@ page language = "java" pageEncoding = "UTF-8"%> <%string path = request.getContextPath ();%> <! Doctype html> <html lang = "zh-cn"> <title> <title> raster </iteme> <meta content = "ie = edge" http-quequiv = " http-equiv = "konten-tipe" content = "text /html; charset = utf-8" /> <meta http-equiv = "konten-bahasa" konten = "zh-cn" /> <meta name = "content" content "copyrige =" copyriMen = [email protected] " /<meta name. Ltd. " /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><jsp:include page="/demo/base/js_bootstrap.jsp" /><style type="text/css">.show-grid [class ^="col-"] {padding-top: 10px;padding-bottom: 10px;background-color: #eee;border: 1px solid #ddd;background-color: RGBA (86, 61, 124, .15); Border: 1px solid rgba (86, 61, 124, .2);} </tyle> <script type = "text/javascript"> $ (function () {}); </script> </head> <body> <b> col-lg- Usage </sript> </script> </head> <body> <b> col-lg- Usage </sript> </script> </head> <body> <b> col-lg- Usage </srice <br> <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*Penggunaan </b> <div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <ver> .col-md- 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <v> .col-md-1 </div> </div> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> Col-sm-*penggunaan </b> <div> <div> .col-sm-8 </div> <ver> .col-sm-4 </div> </div> <br/> <b> col-xs-*Penggunaan </b> <div> <div> .col-xs-8 </div> <ver> .col-xs-4 </div> </div> <br/> <b> offset kolom: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <viv> .col-md-4 </div> <viv> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <v> .col-m D-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </s V> <SEV> .COL-MD-4 </Div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <viv> .col-md-4 </div> </div> <br/> <b> offset kolom: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offset-4 </divet- </Div> <div>. .col-md-offset-3 </div> </div> <div> <div> .col-md-6 .col-md-offset-3 </div> </div> <br/> <b> Kolom bersarang: kolom yang terkandung dalam div divan> </Div> <v> <v> Level 1: .COL-MD-9 2: .col-md-6 </div> </div> </div> <br/> <b> penyortiran kolom: .col-md-push-* dan .col-md-pull-* </b> <verv> <vol> .col-md-9 .col-md-push-3 </Div> <v> .col-md-3 .col-9 </body> </html>
Efek demo
Di atas adalah pengetahuan yang relevan tentang sistem grid bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!