Bootstrap 3 adalah mobile-first, dalam hal ini, kode bootstrap dimulai dengan perangkat layar kecil (seperti perangkat seluler, tablet) dan kemudian mengembang ke komponen dan kisi-kisi di perangkat layar besar (seperti laptop, desktop).
1. Strategi Prioritas Perangkat Seluler
1. Konten: Memutuskan apa yang paling penting.
2. Tata letak
Desain preferensial lebar yang lebih kecil.
CSS dasar lebih disukai untuk perangkat seluler, dan kueri media ditargetkan pada tablet dan komputer desktop.
3. Secara bertahap ditingkatkan
Tambahkan elemen saat ukuran layar meningkat.
Ketika layar atau ukuran viewport meningkat, sistem akan secara otomatis dibagi menjadi hingga 12 kolom. Seperti yang ditunjukkan pada gambar di bawah ini:
2. Prinsip kerja Sistem Grid Bootstrap (Sistem Grid)
Sistem grid membuat tata letak halaman melalui serangkaian baris dan kolom yang berisi konten. Berikut adalah daftar cara kerja sistem bootstrap mesh:
1. Baris harus ditempatkan di kelas .Container untuk mendapatkan penyelarasan dan bantalan yang sesuai.
2. Gunakan baris untuk membuat grup horizontal kolom.
3. Konten harus ditempatkan di kolom, dan hanya kolom yang dapat menjadi elemen anak langsung dari baris.
4. Kelas grid yang telah ditentukan, seperti .row dan .col-xs-4, dapat digunakan untuk dengan cepat membuat tata letak kisi. Kelas hibrida yang lebih sedikit dapat digunakan untuk lebih banyak tata letak semantik.
5. Kolom membuat celah di antara konten kolom melalui padding. Margin dalam ini negatif dengan margin pada .rows, menunjukkan offset baris dari kolom ke -6, pertama dan kolom terakhir.
7. Sistem grid dibuat dengan menentukan dua belas kolom yang tersedia yang ingin Anda rentang. Misalnya, untuk membuat tiga kolom yang sama, gunakan tiga .col-xs-4.
3. Pertanyaan Media
Pertanyaan media adalah "aturan CSS bersyarat" yang sangat chic. Ini hanya berlaku untuk beberapa CSS berdasarkan kondisi tertentu yang ditentukan. Jika kondisi tersebut dipenuhi, gaya yang sesuai diterapkan.
Media kueri di Bootstrap memungkinkan Anda untuk memindahkan, menampilkan, dan menyembunyikan konten berdasarkan ukuran viewport. Kueri media berikut digunakan dalam file yang lebih sedikit untuk membuat ambang batas breakpoint kritis dalam sistem grid bootstrap.
/* Ultra-Small Device (ponsel, kurang dari 768px)* //* Tidak ada kueri media secara default di bootstrap*//* perangkat kecil (tablet, mulai dari 768px)*/ @media (Min-width: @scen-min) {...}/* Perangkat menengah (desktop, mulai dari 992px (Min-min) {Min-Min (Min-Min (Min-Min (Min-Min (Min-Min (Min-Min (Min-Min) {Min-Min (Min) / * Perangkat besar (desktop besar, mulai dari 1200px) * / @media (min-lebar: @screen-lg-min) {...}Kami kadang-kadang memasukkan max-width dalam kode kueri media kami, membatasi dampak CSS ke beragam ukuran layar.
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Ada dua bagian untuk kueri media, pertama spesifikasi perangkat, dan kemudian aturan ukuran. Dalam kasus di atas, aturan berikut ditetapkan:
Mari kita lihat baris kode berikut:
@media (min-lebar: @screen-sm-min) dan (max-lebar: @screen-sm-max) {...}
Untuk semua perangkat dengan Min-lebar: @screen-sm-min, beberapa pemrosesan akan dilakukan jika lebar layar lebih kecil dari @screen-sm-max.
4. Opsi Grid
Tabel berikut merangkum bagaimana sistem bootstrap mesh bekerja di beberapa perangkat:
5. Struktur Grid Dasar
Berikut ini adalah struktur dasar grid bootstrap:
<verv> <verv> <verv> </div> <viv> </div> </div> <viv> ... </div> </div> <viv> ....
Berikut adalah contoh kode tertentu:
<div> <h1>Hello, world!</h1> <div> <!--Small device mobile phone (<768px) --> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "latar belakang: #ff006e"> 10 </div> <div style = "latar belakang: #ac5050"> 11 </div> <div style = "latar belakang: #54bd4f"> 12 </div> </div> <v> <!-Tablet perangkat kecil (≥768px)-> <div style = "latar belakang: #B2B0: latar belakang: #B2B0 B2B0 B2B0 B2B0" #ffd800 "> 1 </div> <div style =" latar belakang: #AC5050 "> 1 </div> </div> <v div> <!-Komputer desktop berukuran sedang (≥992px)-> <div style =" latar belakang: #AC5050 "> 1 </Div> <div style =" latar belakang: #54bd4f "> 1> </Div> </Div> <Div style =" latar belakang: #54bd4f "> 1> </Div> </Div> <Div style =" latar belakang: #54bd4f ">> 1> </Div> </Div> latar belakang: #54bd4f">> 1 </Div> </Div> <Div style = "latar belakang: #54bd4f"> (≥1200px) -> <div style = "latar belakang: #ac5050"> 1 </div> <div style = "latar belakang: #54bd4f"> 1 </div> </div> </div> </div>
6. Kolom offset
Offset adalah fitur yang berguna untuk lebih banyak tata letak profesional. Mereka dapat digunakan untuk membuat lebih banyak ruang untuk kolom. Misalnya, kelas .col-xs =* tidak mendukung offset, tetapi mereka dapat mencapainya dengan menggunakan sel kosong.
Untuk menggunakan offset pada monitor layar besar, gunakan kelas .col-md-offset-*. Kelas -kelas ini akan meningkatkan margin kiri kolom dengan * kolom, di mana * rentang dari 1 hingga 11.
Dalam contoh di bawah ini, kami memiliki <VET> .. </Div>, dan kami akan menggunakan kelas .col-md-offset-3 untuk memusatkan div ini.
<dv> <div> <div style = "latar belakang-warna: #dedef8;"> <p> Kolom offset uji --- 3 kolom diimbangi ke kanan di sini </p> </div> </div> <Div> <div style = "latar belakang: #f00"> </div> <Div style = "latar belakang: #b2b0b0"> </div> </div> <Div style = "latar belakang: #b2b0b0"> 2 </div> </div> <Div = "latar belakang: #b2b0b0"> </div> </div> <v style = "latar belakang: #b2b0b0"> 2 </div> </Div> latar belakang = "latar belakang: #b2b0b0"> 2 </div> </div> <Div = "Latar Belak style = "latar belakang: #ffd800"> 4 </div> <div style = "latar belakang: #4cff00"> 5 </div> <div style = "latar belakang: #0ff"> 6 </div> <div style = "latar belakang: #0094ff"> 7 </div> <div style = "latar belakang: #b200ff"> div> </div> </div> <Div style = "latar belakang: #b200ff"> div> div> div> </div> <Div style = "latar belakang: #b200ff"> 8 </div> </div> <”latar belakang: latar belakang #b200ff"> 8/div style = "latar belakang: #ff006e"> 10 </div> <div style = "latar belakang: #ac5050"> 11 </div> <div style = "latar belakang: #54bd4f"> 12 </div> </div> </div> </div>
Efek tampilan:
7. Kolom bersarang
Untuk menyarangkan kisi-kisi default di konten, tambahkan .row baru dan tambahkan satu set kolom .col-md-* dalam kolom .col-md-*. Baris bersarang harus berisi satu set kolom, dan jumlah kolom dalam set kolom ini tidak dapat melebihi 12 (sebenarnya, tidak ada persyaratan bahwa Anda harus menempati 12 kolom).
Dalam contoh berikut, tata letak memiliki dua kolom, dan kolom kedua dibagi menjadi dua baris dan empat kotak.
<dv> <ver> <div style = "latar belakang: #b2b0b0"> Kolom pertama </div> <div style = "latar belakang: #dedef8"> Kolom kedua-ada empat div bersarang di dalamnya <Div> <div style = "latar belakang: #0094ff"> I'm Contate One <br /> <bR /<br /> < /Div> Div> LAYANAN = "LAYANAN (BR /BR /BR /<BR /< /DIV> KOPODE =" LAYANAN = "LAYANAN" <BR /BR /BR /BR / /DIV> DUA PENULIAN = "LAYANAN =" LAYANAN "<BR /<BR /BR / /DIV> DIV> AMA:" </div> <v> <div style = "latar belakang: #ff00dc"> Saya puas tiga <br/> <br/> <br/> </div> <div style = "latar belakang: #ff006e"> Saya puas empat </div> </div> </div> </div> </div>
Efek tampilan:
8. Penyortiran kolom
Fitur sempurna lain dari sistem bootstrap mesh adalah Anda dapat dengan mudah menulis kolom dalam satu urutan dan kemudian menampilkannya di yang lain.
Anda dapat dengan mudah mengubah urutan kolom grid bawaan dengan kelas .col-md-push-* dan .col-md-pull-*, di mana* berkisar dari 1 hingga 11.
Dalam contoh di bawah ini, kami memiliki dua tata letak kolom, kolom kiri sempit, sebagai bilah samping. Kami akan menggunakan kelas .col-md-push-* dan .col-md-pull-* untuk pertukaran urutan kedua kolom.
<verv> <ver> <div style = "latar belakang: #ff00dc"> kiri </div> <div style = "latar belakang: #ff006e"> kanan </div> </div> </div>
Efek tampilan:
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
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.