Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Poin -poin penting untuk belajar:
1. Perangkat seluler lebih disukai
2. Wadah tata letak
3. Sistem Grid
Dalam pelajaran ini, kami terutama akan belajar tentang sistem grid Bootstrap dan menyediakan sistem grid streaming yang responsif dan mobile.
satu. Perangkat seluler lebih disukai
Dalam proyek HTML5, kami melakukan proyek seluler. Ini memiliki meta yang sangat penting untuk mengatur layar quad layar dan perangkat dan apakah akan menjalankan penskalaan pengguna, dan penskalaan.
// Lebar layar konsisten dengan perangkat, skalabel awal, skalabel maksimum dan larangan penskalaan pengguna.
dua. Wadah tata letak
Bootstrap membutuhkan wadah .container untuk konten halaman dan sistem raster. Karena atribut seperti padding, kedua kelas kontainer ini tidak dapat bersarang satu sama lain.
// Lebar Memperbaiki <div> ... </div> // Lebar 100% <viv> ... </div>
Dalam sistem raster, browser akan secara otomatis mengalokasikan hingga 12 kolom saat ukuran layar meningkat atau berkurang. Buat tata letak halaman dengan menggabungkan serangkaian baris dan kolom. Prinsip kerja adalah sebagai berikut:
1. "Baris" harus dimasukkan dalam .container (lebar tetap) atau .container-fluid (lebar 100%) untuk memberikan perataan dan bantalan yang sesuai.
2. Buat satu set "kolom" secara horizontal melalui "baris".
3. Konten Anda harus ditempatkan di "kolom", dan hanya "kolom" yang dapat digunakan sebagai elemen anak langsung dari baris.
4. Kelas yang telah ditentukan seperti .row dan .col-xs-4 dapat digunakan untuk dengan cepat membuat tata letak raster.
Mixin yang didefinisikan dalam kode sumber bootstrap juga dapat digunakan untuk membuat tata letak semantik.
5. Buat selokan di antara kolom dengan mengatur properti padding untuk "kolom". Dengan menetapkan nilai negatif untuk elemen .row
Margin dengan demikian mengimbangi set bantalan untuk elemen .Container, yang secara tidak langsung mengimbangi bantalan untuk "kolom" yang terkandung dalam "baris".
6. Margin negatif adalah alasan mengapa contoh berikut ini menyoroti ke luar. Isi di kolom raster disusun berturut -turut.
7. Kolom dalam sistem raster mewakili kisaran yang dibentang dengan menentukan nilai dari 1 hingga 12. Misalnya, tiga kolom dengan lebar yang sama dapat dibuat menggunakan tiga .col-xs-4.
8. Jika "kolom" yang terkandung dalam "baris" lebih besar dari 12, elemen -elemen di mana "kolom" tambahan berada akan diatur di baris lain secara keseluruhan.
9. Kelas grid cocok untuk perangkat dengan lebar layar lebih besar dari atau sama dengan ukuran titik pemisah, dan mencakup kelas grid untuk perangkat layar kecil. Oleh karena itu, menerapkan kelas raster .col-md-* pada elemen cocok untuk perangkat dengan lebar layar lebih besar dari atau sama dengan ukuran titik pemisah dan menimpa kelas raster untuk perangkat layar kecil. Oleh karena itu, menerapkan .col-lg-* pada elemen tidak ada, yang juga mempengaruhi perangkat layar besar.
// Buat baris responsif <div> <div> ... </div> </div> // Buat baris responsif dengan hingga 12 kolom <div><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></div> //To show obvious Css.a {height: 100px; latar belakang-warna: #eee; border: 1px solid #ccc;} // Jumlah total kolom adalah 12, dan setiap kolom ditetapkan beberapa kolom <dv> <div> <div> 1-4 </Div> <div> 5-8 </Div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </Div> </Div> </Div> 9-12 </Div> </Div >> </Div> 9-12 </Div> div> </Div> </Div >> </div> 9-12 </Div> div> </Div> </Div >> </Div> 9-12 </Div> div>Tabel Parameter Raster
Seperti yang ditunjukkan pada gambar di atas, lapisan terluar dari sistem grid membedakan empat lebar browser: layar ultra-kecil (<768px), layar kecil (> = 768px), layar sedang (> = 992px), dan layar besar (> = 1200px). Lebar adaptif dari wadah kontainer dalam adalah: otomatis, 750px, 970px dan 1170px. Otomatis berarti bahwa jika Anda berada di layar ponsel, Anda akan secara eksklusif menampilkan satu baris.
// Aktifkan keempat layar Kategori <dv> <div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 // Kadang-kadang kita dapat mengatur offset kolom untuk menjaga celah di tengah <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> // Ini juga dapat bersarang, dan embedding juga 12. Div> <Div> <v> 1-8 </Div> <Div> 9-12 </Div> <Div> <v> </Div </Div> <Div> 9-12 </Div> <Div> <v> </div </Div> <Div> 9-12 </Div> </Div> </Div> </Div> <Div> dapat menukar dua kolom, dorong ke kiri, dan menarik ke kanan <viv> <div> <div> 9 </div> <div> 3 </div> </div> </div>
Di atas adalah informasi terkait untuk sistem grid bootstrap, saya harap ini akan membantu semua orang!