Bootstrap Grid Playground
Bina susun atur grid Bootstrap 5.3 yang responsif secara visual dan salin kelas yang tepat — row, col, ofset, susunan, gutter dan penjajaran.
—
Semuanya berjalan dalam pelayar anda — tiada apa-apa yang dimuat naik.
Kelas yang anda tetapkan berkuat kuasa dari breakpoint ini dan ke atas. Tukar breakpoint untuk membina susun atur responsif.
Mengenai Bootstrap Grid Playground
Ruang Uji Grid Bootstrap membina susun atur baris-dan-lajur responsif dengan sistem grid Bootstrap 5.3 sebenar. Tambah sehingga 12 lajur ke satu baris, klik mana-mana lajur untuk menetapkan lebar, ofset dan susunannya, dan laraskan gutter serta penjajaran pada baris — pratonton dan markup yang dijana dikemas kini secara langsung dengan setiap perubahan.
Oleh kerana grid Bootstrap adalah mudah alih-dahulu, suis titik putus adalah teras: tetapkan lajur kepada col-6 pada asas dan col-md-4 pada md, dan anda telah membina corak klasik bertindan-pada-mudah-alih, tiga-sebaris-pada-desktop tanpa menulis sebaris kod pun. Ofset, susunan dan kelas gutter semuanya menerima awalan responsif yang sama.
Output ialah HTML salin-tampal yang bersih — div baris dengan anak lajurnya dan tepat kelas yang anda konfigurasikan. Salin keseluruhan serpihan atau hanya kelas baris; semuanya berjalan secara tempatan dalam pelayar anda.
Cara menggunakan Bootstrap Grid Playground
- Tambah lajur ke baris — sehingga 12 — dan klik satu untuk memilihnya.
- Tetapkan span, ofset dan susunan lajur yang dipilih untuk titik putus semasa.
- Tukar titik putus (sm hingga xxl) untuk menentukan cara susun atur mengalir semula pada skrin lebih besar.
- Laraskan gutter baris dan utiliti penjajarannya.
- Semak pratonton langsung, kemudian salin HTML yang dijana atau kelas baris.