Sebagai plug-in front-end yang mendukung tata letak responsif, Bootstrap memang memainkan peran penting. Apakah Anda menelusuri web di ponsel, tablet, atau PC Anda, Anda dapat mencapai hasil yang baik. Semua ini dibawa kepada kami oleh Bootstrap!
Hari ini saya terutama akan berbicara tentang tata letak halaman. Ini adalah hal yang paling mendasar. Saat kami merancang situs, kami harus merancang halaman standar global dan terpadu untuk itu. Kami menyebut halaman tata letak halaman semacam ini, dan apa yang tercermin pada halaman adalah elemen tata letak, yang tentu saja sangat diperlukan dalam bootstrap.
Tata letak Bootstrap adalah sistem raster, yaitu, terdiri dari baris dan kolom. Saat digunakan, perlu membungkus wadah .Container untuk konten halaman dan sistem raster.
Kelas A.Container digunakan untuk wadah yang merupakan tata letak responsif tetap dan mendukung.
<div> ... </div> Kelas .Container-Fluid digunakan untuk wadah dengan lebar 100%, menempati semua viewports. <div> ... </div>
Dalam bootstrap, baris dan kolom diwakili oleh Row dan Col, dan ada hingga 12 unit kolom dalam satu baris. Col-MD-1 mewakili lebar satu unit, dan Col-MD-7 mewakili lebar tujuh unit. Mereka ditambahkan bersama hingga 12 unit.
<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 </di v> <ver> .col-md-1 </div> <viv> .col-md-1 </div> <div> .col-md-1 </div> <viv> .col-md-1 </div> <ver> .col-md-1 </div> <v> .col-md-1 </div> < Div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </div > </div> <div> <div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
Baris kedua dan ketiga menunjukkan efek yang sama
Tiga kolom bersarang, mungkin ada kolom di kolom . Kita perlu mengubah MD ke SM di bersarang ini
<div> <div> level 1: .col-sm-9 <div> <div> level 2: .col-xs-8 .col-sm-6 </div> <div> level 2: .col-xs-4 .col-sm-6 </div> </div> </div>
Efeknya mirip dengan ini
Di atas adalah pengetahuan dasar tata letak halaman bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!