Artikel ini terutama akan memperkenalkan sistem grid Bootstrap.
Implementasi sistem grid adalah untuk menentukan ukuran wadah, membagi 12 bagian (atau 24 bagian atau 32 bagian, tetapi 12 bagian adalah yang paling umum), kemudian menyesuaikan margin dalam dan luar, dan akhirnya menggabungkan kueri media untuk menciptakan sistem grid responsif yang kuat.
Sistem kisi dalam bootstrap adalah untuk membagi wadah menjadi 12 bagian.
Sistem grid Bootstrap digunakan untuk tata letak, yang sebenarnya merupakan kombinasi kolom. Ada empat penggunaan dasar:
1. Kombinasi kolom
Ubah Nomor untuk Menggabungkan Kolom (Prinsip: Jumlah kolom tidak dapat melebihi 12), misalnya:
<! Doctype html> <html> <adap> <meta charset = "utf-8"> <itement> penggunaan dasar kombinasi kolom </itement> <link rel = "stylesheet" href = "http://netdna.boottrapcdn.com/boottrap/3.1.1.1/netDna.boottrapcdn.com/boottrap/3.1.1.1/netdna.boottrapcdn.com/boottrap/3.1.1.1/csss/ style-> <tyle> [class *= col-] {background-color: #eee; Perbatasan: 1px solid #ccc; } </tyle> </head> <body> <br> <div> <div> <!-Sistem kisi dalam bootstrap membagi wadah menjadi 12 buah-> <!-Baris ini dibagi secara merata dengan 1: 1: 1-> <ver> .col-md-4 </Div> <div> .col-md-4 </Div>. <div> .col-md-4 </div> </div> <div> <!-Baris ini dibagi secara merata oleh 1: 2: 1-> <div> .col-md-3 </div> <div> .col-md-6 </Div> </Div> .col-md-3 </Div> </Div> </Div> </Div>Rendering adalah sebagai berikut:
2. Offset kolom
Tambahkan nama kelas "col-md-offset-*" pada elemen kolom (di mana tanda bintang mewakili jumlah kombinasi kolom yang akan diimbangi), dan kolom dengan nama kelas ini akan diimbangi ke kanan.
<dv> <!-Jarak empat kolom yang bergerak ke kanan-> <viv> <viv> .col-md-4 </div> <div> Jarak empat kolom yang bergerak ke kanan </Div> <ver> .col-md-3 </Div> </Div> <! terjadi-> <div> <div> <div> .col-md-4 </div> <div> Jarak empat kolom yang bergerak ke kanan </div> <div> .col-md-3 </div> </div> <div> <div> .col-md-3 </Div> <d Div> <vol> <vol-md-3 </Div> </Div> <d Div> <div> col-md-4 </div> </div> </div>
Rendering adalah sebagai berikut:
3. Penyortiran kolom
Penyortiran kolom adalah untuk mengubah arah kolom, mengubah mengambang kiri dan kanan, dan mengatur jarak mengambang. Bootstrap dicapai dengan menambahkan nama kelas "col-md-push-" dan "col-md-pull-" (di mana tanda bintang mewakili jumlah kombinasi kolom bergerak).
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Penggunaan Dasar </title> <tautan rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csssstrap.bootstrap.mets" clome.coots.css.cssstrap.csstrap.cs.css.csstrap.cs.css.csstrap.cs.css.cs.css.cs.css.m *= col-] {latar belakang-warna: #eee; Perbatasan: 1px solid #ccc; } </tyle> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4. Sarang kolom
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> Penggunaan Dasar </title> <tautan rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csssstrap.bootstrap.mets" clome.coots.css.cssstrap.csstrap.cs.css.csstrap.cs.css.csstrap.cs.css.cs.css.cs.css.m *= col-] {latar belakang-warna: #eee; Perbatasan: 1px solid #ccc; } [class *= col-] [class *= col-] {background-color: #f36; Perbatasan: 1px putus #FFFF; Warna: #FFFF; } </tyle> </head> <body> <div> <div> <div> <div> Saya memiliki kisi-kisi di dalamnya <div> <div> <div> col-md-6 </div> <ver> col-md-6 </div> </Div> </Div> <div> Col-MD-4 </Div> </Div> </Div> </Div> <Div> BODY </DIV> </DIV> </DIV>Rendering adalah sebagai berikut:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Serangkaian artikel:
Pertama kali saya bersentuhan dengan Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
Pertama kali saya bersentuhan dengan formulir bootstrap magis //www.vevb.com/article/89330.htm
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.