Sistem grid adalah "sistem grid" dalam bahasa Inggris, dan beberapa orang menerjemahkannya sebagai "sistem grid". Ini menggunakan tata letak desain grid tetap. Gayanya rapi dan ringkas. Itu menjadi sangat populer setelah Perang Dunia II dan telah menjadi salah satu gaya utama desain publikasi saat ini.
Pada tahun 1692, Louis XIV, raja Prancis yang baru naik, merasa bahwa tingkat pencetakan Prancis tidak memuaskan, jadi ia memerintahkan pembentukan komite khusus kerajaan untuk mengelola pencetakan. Tugas pertama mereka adalah merancang font baru yang ilmiah, masuk akal, dan nilai fungsional. Komite dipimpin oleh ahli matematika Nicolas Jaugeon. Mereka didasarkan pada tubuh Romawi dan menggunakan kotak sebagai dasar desain. Setiap kisi persegi dibagi menjadi 64 unit persegi dasar, dan setiap unit persegi dibagi menjadi 36 kisi kecil. Dengan cara ini, tata letak cetak terdiri dari 2.304 kisi kecil. Dalam jaringan grid geometris yang ketat ini, bentuk font, pengaturan tata letak, dan efektivitas fungsi komunikasi dirancang. Ini adalah kegiatan paling awal di dunia untuk melakukan eksperimen ilmiah pada font dan tata letak, dan juga merupakan prototipe paling awal dari sistem grid.
Definisi sistem raster halaman web adalah: menggunakan array grid reguler untuk memandu dan menstandarkan tata letak dan distribusi informasi di halaman web. Sistem raster web dikembangkan dari sistem raster planar. Untuk desain web, penggunaan sistem grid tidak hanya dapat membuat informasi di halaman web lebih indah dan mudah dibaca, tetapi juga lebih bermanfaat. Selain itu, untuk pengembangan front-end, halaman web akan lebih fleksibel dan terstandarisasi.
Bootstrap menyediakan sistem grid streaming yang responsif dan mobile. Ketika layar atau ukuran viewport meningkat, sistem akan secara otomatis dibagi menjadi hingga 12 kolom. Ini termasuk kelas yang sudah mudah digunakan, dan juga mixin yang kuat untuk menghasilkan lebih banyak tata letak semantik.
Dengan kata lain, bootstrap membagi lebar elemen menjadi 12 bagian. Kami mengatur elemen -elemen di baris ini yang dibagi menjadi 12 bagian.
1. Tujuan Dasar
Buat dua baris berikut, dan lebar masing -masing sel dalam dua baris ini akan berubah karena perangkat yang berbeda:
Pada layar kecil ponsel, Aass A atas 2 bagian B menyumbang 10 bagian, A ke bawah A menyumbang 1 bagian B untuk 10 bagian C menyumbang 1 bagian, dan ABC membagikan 12 bagian ini.
Pada layar menengah tablet, ke atas, A menyumbang 8 bagian B menyumbang 4 bagian, AB membagikan 12 bagian ini, ke bawah A menyumbang 10 bagian B akun untuk 1 bagian C menyumbang 1 bagian, ABC membagikan 12 bagian ini.
Pada layar besar PC, Accounts ke atas untuk 4 B akun untuk 8 saham, AB saham ini 12 saham ini, ke bawah A akun untuk 1 B akun untuk 10 C akun untuk 1, ABC saham 12 saham ini.
2. Proses Produksi
Pertama, konfigurasikan bootstrap di folder web, dan unduh komponen di situs web resmi (klik untuk membuka tautan). Versi bootstrap yang digunakan di lingkungan produksi (klik untuk membuka tautan). Bootstrap3 tidak kompatibel dengan 2. Disarankan untuk menggunakan bootstrap3 secara langsung sesuai dengan dokumen pengembangannya. Setelah mendekompresi bootstrap, salin 3 folder CSS, font, dan JS yang diperoleh ke direktori situs. Jika itu adalah proyek web JSP Eclipse, letakkan di bawah folder webroot.
Kode adalah sebagai berikut, silakan lihat komentar untuk detailnya:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!--Web encoding, external files to be used, automatically adapt to the screen --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/bootstrap.css" rel = "stylesheet" media = "screen"> <meta name = "viewport" content = "width = device-width, skala awal = 1.0, skala user = no"> <itement> sistem grid </iteme> </head> <will> <!-menggunakan bootstrap jika Anda tidak menggunakan panel, masukkan elemen ke dalam container for container untuk container untuk container for ootstrap jika Anda tidak menggunakan panel, masukkan elemen ke dalam container for container untuk container for ootstrap jika Anda tidak menggunakan panel, masukkan elemen ke dalam container for container untuk container for oottrap jika Anda tidak menggunakan panel, masukkan elemen ke dalam container for container for oottrap jika Anda tidak menggunakan panel, masukkan ke dalam container for container for quacer —m! --><div><!--Define a line --><div><!--xs represents the small screen of the mobile phone, md represents the screen in the tablet, and lg represents the large screen of the PC --><!--The sum of the elements of the same pair must be equal to 12, otherwise an error occurs, such as col-xs-2+B of A is equal to 12 --><!--bg-warning is the background color that defines a light yellow color -> <div> a </div> <div> b </div> </div> <ver> <!-Kebenaran di sini sama seperti di atas, col-xs-1+b dari col-xs-1+c dari col-xs-10 sama dengan 12-> <v> A </div> </Div> </Div> <Div> C </Div> </Div>