Arti angka dalam "col-md-4", "col-xs-1", "col-lg-2" di Bootstrap

Saya bingung dengan sistem grid di Bootstrap baru, khususnya kelas-kelas ini:

col-lg-*
col-md-*
col-xs-*

(di mana * mewakili beberapa nomor).

Adakah yang bisa menjelaskan hal berikut:

1. Bagaimana angka itu menyelaraskan grid?
2. Bagaimana cara menggunakan angka-angka ini?
3. Apa yang sebenarnya mereka wakili?

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.

Sistem grid Bootstrap memiliki empat kelas:
xs (untuk ponsel)
sm (untuk tablet)
md (untuk desktop)
lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat tata letak yang lebih dinamis dan fleksibel.

Kiat: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm, Anda hanya perlu menentukan xs.

OK, jawabannya mudah, tetapi baca terus:

col-lg- singkatan kolom besar ≥ 1200px
col-md- singkatan media kolom ≥ 992px
col-xs- singkatan kolom ekstra kecil≥ 768px

Angka-angka piksel adalah titik istirahat, jadi misalnya col-xsmenargetkan elemen ketika jendela lebih kecil dari 768px (kemungkinan perangkat seluler) ...

Saya juga membuat gambar di bawah ini untuk menunjukkan bagaimana sistem grid bekerja, dalam contoh ini saya menggunakannya dengan 3, ingin col-lg-6menunjukkan kepada Anda bagaimana sistem grid bekerja di halaman, lihat caranya lg, mddan xsresponsif terhadap ukuran jendela:

Poin utamanya adalah ini:

col-lg-* col-md-* col-xs-* col-sm tentukan berapa banyak kolom dalam ukuran layar yang berbeda ini.

Contoh: jika Anda ingin ada dua kolom di layar desktop dan di layar ponsel Anda menempatkan dua col-md-6dan dua col-xs-6kelas di kolom Anda.

Jika Anda ingin ada dua kolom di layar desktop dan hanya satu kolom di layar ponsel (yaitu dua baris ditumpuk di atas satu sama lain) Anda meletakkan two col-md-6dan dua col-xs-12di kolom Anda dan karena jumlah akan 24 mereka akan secara otomatis menumpuk di atas masing-masing lainnya, atau tinggalkan xsgaya saja.

Dari dokumentasi Bootstrap Twitter :

• kisi kecil (≥ 768px) = .col-sm-*,
• kisi sedang (≥ 992px) = .col-md-*,
• kisi besar (≥ 1200px) = .col-lg-*.

untuk Baca Lebih Lanjut ...

Ini dia

col-lg-2: jika layar besar ( lg ) maka komponen ini akan memakan waktu 2 elemen mengingat seluruh baris dapat memuat 12 elemen (sehingga Anda akan melihat bahwa pada layar besar komponen ini membutuhkan ruang 16% berturut-turut)

col-lg-6: jika layarnya besar ( lg ) maka komponen ini akan memakan waktu 6 elemen mengingat seluruh baris dapat memuat 12 elemen - ketika diterapkan Anda akan melihat bahwa komponen tersebut telah mengambil setengah ruang yang tersedia di baris.

Aturan di atas hanya diterapkan ketika layarnya besar. ketika layarnya kecil aturan ini dibuang dan hanya satu komponen per baris yang ditampilkan.

Gambar di bawah ini menunjukkan berbagai lebar ukuran layar: