Berlaku untuk Bootstrap 3 saja.
Mengabaikan huruf (x s , sm , md , lg ) untuk saat ini , saya akan mulai dengan angka saja ...
- angka-angka (1-12) mewakili sebagian dari total lebar div apa pun
- semua div dibagi menjadi 12 kolom
- jadi,
col-*-6bentang 6 dari 12 kolom (setengah lebar), col-*-12bentang 12 dari 12 kolom (seluruh lebar), dll
Jadi, jika Anda ingin dua kolom sama untuk span div, tulis
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Atau, jika Anda ingin tiga kolom yang tidak sama membentang dengan lebar yang sama, Anda bisa menulis:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Anda akan melihat # kolom selalu berjumlah hingga 12. Ini bisa kurang dari dua belas, tetapi berhati-hatilah jika lebih dari 12, karena div yang menyinggung Anda akan turun ke baris berikutnya (bukan .row, yang merupakan cerita lain sekaligus).
Anda juga bisa membuat kolom di dalam kolom , (terbaik dengan .rowpembungkus di sekitarnya) seperti:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Setiap set div bersarang juga menjangkau hingga 12 kolom div induknya. CATATAN: Karena setiap .colkelas memiliki bantalan 15px di kedua sisi, Anda biasanya harus membungkus kolom bersarang di dalam .row, yang memiliki margin -15px. Ini menghindari duplikasi padding dan menjaga konten tetap berjajar antara kelas col bersarang dan tidak bersarang.
- Anda tidak secara khusus bertanya tentang xs, sm, md, lgpenggunaannya, tetapi mereka berjalan beriringan sehingga saya tidak bisa tidak menyentuhnya ...
Singkatnya, mereka digunakan untuk menentukan ukuran layar mana yang harus diterapkan oleh kelas:
- xs = layar ekstra kecil (ponsel)
- sm = layar kecil (tablet)
- md = layar sedang (beberapa desktop)
- lg = layar besar (desktop yang tersisa)
Membaca " Grid Options "
bab dari dokumentasi Bootstrap resmi untuk lebih jelasnya.
Anda biasanya harus mengklasifikasikan div menggunakan beberapa kelas kolom sehingga berperilaku berbeda tergantung pada ukuran layar (ini adalah jantung dari apa yang membuat bootstrap responsif). misalnya: div dengan kelas col-xs-6dan col-sm-4akan menjangkau setengah layar pada ponsel (xs) dan 1/3 layar pada tablet (sm).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
CATATAN: sesuai komentar di bawah ini, kelas kisi untuk ukuran layar yang diberikan berlaku untuk ukuran layar itu dan lebih besar kecuali pernyataan lain menimpanya (yaitu col-xs-6 col-md-4membentang 6 kolom pada xs dansm , dan 4 kolom pada md danlg , meskipun smdan lgtidak pernah secara eksplisit dinyatakan)
CATATAN: jika Anda tidak menetapkan xs, defaultnya adalah col-xs-12(yaitu col-sm-6setengah lebar aktif sm, mddan lglayar, tetapi lebar penuh pada xslayar).
CATATAN: Ini benar-benar baik-baik saja jika Anda .rowmemasukkan lebih dari 12 cols, selama Anda mengetahui bagaimana mereka akan bereaksi. --Ini adalah masalah yang diperdebatkan, dan tidak semua orang setuju.
