Apa perbedaan antara col-lg- *, col-md- * dan col-sm- * di Bootstrap?

Apa perbedaan di antara col-lg-*,col-md-* dan col-sm-*di Twitter Bootstrap?

Updated 2019 ... Mimpi Buruk

Kotak Bootstrap 3 hadir dalam 4 tingkatan (atau "breakpoints") ...

• Ekstra kecil (untuk ponsel cerdas .col-xs-*)
• Kecil (untuk tablet .col-sm-*)
• Sedang (untuk laptop .col-md-*)
• Besar (untuk laptop / desktop .col-lg-*).

Ukuran kisi ini memungkinkan Anda untuk mengontrol perilaku kisi pada lebar yang berbeda. Tingkatan yang berbeda dikendalikan oleh kueri media CSS .

Jadi dalam kotak 12-kolom Bootstrap ...

col-sm-3adalah 3 dari 12 kolom lebar (25%) pada lebar perangkat kecil khas (> 768 piksel)

col-md-3adalah 3 dari 12 kolom lebar (25%) pada lebar perangkat menengah khas (> 992 piksel)

Tingkat yang lebih kecil ( xs, smatau md) juga menentukan ukuran untuk lebar layar yang lebih besar . Jadi, untuk kolom ukuran yang sama di semua tingkatan, cukup atur lebar untuk viewport terkecil ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> sama dengan,

<div class="col-sm-3">..</div>

Tingkat yang lebih besar tersirat. Karena col-sm-3berarti 3 units on sm-and-up, kecuali jika secara khusus ditimpa oleh tingkat yang lebih besar yang menggunakan ukuran yang berbeda.

xs(default)> ditimpa oleh sm> ditimpa oleh md> ditimpa olehlg

Gabungkan kelas untuk menggunakan lebar kolom ubah pada ukuran kisi yang berbeda . Ini menciptakan tata letak yang responsif.

<div class="col-md-3 col-sm-6">..</div>

Kotak sm, mddan lgsemua grid akan "menumpuk" secara vertikal di layar / viewports kurang dari 768 piksel. Di sinilah xsgrid cocok. Kolom yang menggunakan col-xs-*kelas tidak akan menumpuk secara vertikal, dan terus menurunkan pada layar terkecil.

Ubah ukuran browser Anda menggunakan demo ini dan Anda akan melihat efek penskalaan grid.

Bootstrap 4

Di Bootstrap 4 ada -xl-ukuran baru , lihat demo ini . Juga -xs-infiks telah dihapus , jadi kolom terkecil hanyalah col-1, col-2.. col-12, dll.

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Demo

Selain itu, Bootstrap 4 menyertakan kolom tata letak otomatis baru . Ini juga memiliki breakpoints responsif ( col, col-sm, col-md, dll ..), tetapi tidak memiliki% lebar didefinisikan. Oleh karena itu, kolom tata letak otomatis mengisi lebar yang sama di seluruh baris.

Artikel ini menjelaskan lebih banyak tentang kisi Bootstrap

Bootstrap docs memang menjelaskannya, tetapi saya masih butuh waktu untuk mendapatkannya. Lebih masuk akal ketika saya menjelaskannya kepada diri saya sendiri dalam satu dari dua cara:

Jika Anda memikirkan kolom yang dimulai secara horizontal, maka Anda dapat memilih kapan Anda ingin menumpuknya .

Misalnya, jika Anda mulai dengan kolom: ABC

Anda memutuskan kapan mereka akan menjadi seperti ini:

SEBUAH

B

C

Jika Anda memilih col-lg, maka kolom akan menumpuk ketika lebarnya <1200px.

Jika Anda memilih col-md, maka kolom akan menumpuk ketika lebarnya <992px.

Jika Anda memilih col-sm, maka kolom akan menumpuk ketika lebarnya <768px.

Jika Anda memilih col-xs, maka kolom tidak akan pernah menumpuk.

Di sisi lain, jika Anda berpikir tentang kolom yang mulai ditumpuk, maka Anda dapat memilih pada titik mana kolom tersebut menjadi horizontal :

Jika Anda memilih col-sm, maka kolom akan menjadi horizontal ketika lebarnya> = 768px.

Jika Anda memilih col-md, maka kolom akan menjadi horizontal ketika lebarnya> = 992px.

Jika Anda memilih col-lg, maka kolom akan menjadi horizontal ketika lebarnya> = 1200px.

Dari dokumentasi Bootstrap Twitter :

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

Saya pikir aspek yang membingungkan dari ini adalah fakta bahwa BootStrap 3 adalah sistem responsif pertama yang mobile dan gagal menjelaskan bagaimana ini memengaruhi hierarki col-xx-n di bagian dokumentasi Bootstrap itu. Ini membuat Anda bertanya-tanya apa yang terjadi pada perangkat yang lebih kecil jika Anda memilih nilai untuk perangkat yang lebih besar dan membuat Anda bertanya-tanya apakah ada kebutuhan untuk menentukan beberapa nilai. (Kamu tidak)

Saya akan mencoba mengklarifikasi ini dengan menyatakan bahwa ... Jenis butir yang lebih rendah (xs, sm) berupaya mempertahankan tampilan tata letak pada layar yang lebih kecil dan tipe yang lebih besar (md, lg) akan ditampilkan dengan benar hanya pada layar yang lebih besar tetapi akan membungkus kolom pada perangkat yang lebih kecil. Nilai-nilai yang dikutip dalam contoh-contoh sebelumnya merujuk pada ambang batas saat bootstrap menurunkan tampilan agar sesuai dengan estate layar yang tersedia.

Apa artinya ini dalam praktek adalah bahwa jika Anda membuat kolom col-xs-n maka mereka akan mempertahankan penampilan yang benar bahkan pada layar yang sangat kecil, sampai jendela turun ke ukuran yang sangat ketat sehingga halaman tidak dapat ditampilkan dengan benar. Ini harus berarti bahwa perangkat yang memiliki lebar 768px atau kurang harus menunjukkan tabel Anda saat Anda mendesainnya daripada dalam bentuk terdegradasi (bentuk kolom tunggal atau terbungkus). Jelas ini masih tergantung pada konten kolom dan itulah intinya. Jika halaman mencoba menampilkan beberapa kolom data besar, berdampingan di layar kecil maka kolom itu akan secara alami membungkus dengan cara yang mengerikan jika Anda tidak memperhitungkannya. Oleh karena itu, tergantung pada data di dalam kolom Anda dapat menentukan titik di mana tata letak disakralkan untuk menampilkan konten secara memadai.

mis. Jika halaman Anda mengandung tiga kolom col-sm-n bootstrap akan membungkus kolom menjadi baris ketika lebar halaman turun di bawah 992px. Ini berarti bahwa data masih terlihat tetapi akan memerlukan pengguliran vertikal untuk melihatnya. Jika Anda tidak ingin tata letak Anda menurun, pilih xs (selama data Anda dapat ditampilkan secara memadai pada perangkat resolusi yang lebih rendah dalam tiga kolom)

Jika posisi horisontal data penting maka Anda harus mencoba memilih nilai granularitas yang lebih rendah untuk mempertahankan sifat visual. Jika posisi kurang penting tetapi halaman harus terlihat di semua perangkat maka nilai yang lebih tinggi harus digunakan.

Jika Anda memilih col-lg-n maka kolom akan ditampilkan dengan benar sampai lebar layar turun di bawah ambang xs 1200px.

Ukuran Perangkat dan awalan kelas:

• Perangkat ekstra kecil Ponsel (<768px) - .col-xs-
• Tablet perangkat kecil (≥768px) - .col-sm-
• Desktop perangkat menengah (≥992px) - .col-md-
• Perangkat besar Desktop (≥1200px) - .col-lg-

Opsi kisi:

Referensi: Sistem Grid

TL; DR

.col-X-Yartinya pada ukuran layar X dan ke atas , regangkan elemen ini untuk mengisi kolom Y .

Bootstrap menyediakan kisi 12 kolom per .row, jadi Y = 3 berarti lebar = 25%.

xs, sm, md, lg adalah ukuran untuk smartphone, tablet, laptop, desktop masing-masing.

Tujuan dari menentukan lebar yang berbeda pada ukuran layar yang berbeda adalah untuk membuat Anda membuat hal-hal lebih besar pada layar yang lebih kecil.

Contoh

<div class="col-lg-6 col-xs-12">

Artinya: Lebar 50% di Desktop, 100% lebar di Ponsel, Tablet, dan Laptop.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Satu kasus khusus: Sebelum mempelajari sistem grid bootstrap, pastikan zoom browser diatur ke 100% (seratus persen). Misalnya: Jika resolusi layar (1600px x 900px) dan zoom browser 175%, maka elemen "bootstrap-ped" akan ditumpuk.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Zoom Chrome 100%

Browser 100 persen - elemen ditempatkan secara horizontal

Zoom Chrome 175%

Browser 175 persen - elemen bertumpuk

Mari kita lepaskan dari Bootstrap!

Perhatikan bagaimana col-sm menempati lebar 100% (dengan kata lain masuk ke baris baru) di bawah ini 576pxtetapi col tidak. Anda dapat melihat lebar saat ini di tengah atas di gif.

Di sinilah kodenya:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap secara default meluruskan semua kolom (col) dalam satu baris dengan lebar yang sama. Dalam hal ini tiga colakan menempati masing-masing 100% / 3 lebar, berapa pun ukuran layarnya. Anda bisa melihatnya di gif.

Sekarang bagaimana jika kita ingin membuat hanya satu kolom per baris yaitu memberikan lebar 100% untuk setiap kolom tetapi untuk layar yang lebih kecil saja ? Sekarang hadir col-xxkelas!

Saya menggunakan col-smkarena saya ingin memecah kolom menjadi baris terpisah di bawah 576px. Keempat col-xxkelas ini disediakan oleh Bootstrap untuk berbagai perangkat tampilan seperti ponsel, tablet, laptop, monitor besar, dll.

Jadi, col-smakan menembus di bawah 576px, col-mdakan menembus di bawah 768px, col-lgakan menembus di bawah 992px dan col-xlakan menembus di bawah 1200px

Perhatikan bahwa tidak ada col-xskelas di bootstrap 4.

Ini jumlah yang cukup banyak. Anda bisa kembali bekerja.

Tetapi ada sedikit lebih dari itu. Sekarang tiba col-*dan col-xx-*untuk menyesuaikan lebar.

Ingat dalam contoh di atas yang saya sebutkan itu colatau col-xxmengambil lebar yang sama dalam satu baris. Jadi, jika kita ingin memberi lebar lebih untuk spesifik colkita dapat melakukan ini.

Baris bootstrap dibagi menjadi 12 bagian, jadi dalam contoh di atas ada 3 colsehingga masing-masing mengambil 12/3 = 4 bagian. Anda dapat mempertimbangkan bagian-bagian ini sebagai cara untuk mengukur lebar.

Kita juga bisa menulis itu dalam format col-*yaitu col-4seperti ini:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

Dan itu tidak ada bedanya karena secara default bootstrap memberikan lebar yang sama dengan col(4 + 4 + 4 = 12).

Tetapi, bagaimana jika kita ingin memberikan 7 bagian ke 1 col, 3 bagian ke 2 coldan sisanya 2 bagian (12-7-3 = 2) ke 3 col(7 + 3 + 2 sehingga totalnya adalah 12), kita bisa melakukan ini:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

dan Anda dapat menyesuaikan lebar col-xx-*kelas juga.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

Bagaimana kelihatannya dalam aksinya?

Bagaimana jika jumlah collebih dari 12? Kemudian colakan bergeser / menyesuaikan ke bawah garis. Ya, bisa ada sejumlah kolom untuk satu baris!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

Bagaimana jika kita ingin 3 kolom berturut-turut untuk layar besar tetapi membagi kolom ini menjadi 2 baris untuk layar kecil?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Anda dapat bermain-main di sini: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Saya pikir gambar ini cukup bagus untuk memahami konsep dengan lebih baik!

untuk pemahaman lebih detail silakan kunjungi tautan di bawah ini:

https://getbootstrap.com/docs/3.4/css/

baik itu digunakan untuk memberitahu bootstrap berapa banyak kolom yang harus ditempatkan dalam satu baris tergantung pada ukuran layar-

col-xs-2

akan menunjukkan hanya 2 kolom berturut-turut di layar ekstra kecil (xs), dengan cara yang sama seperti sm mendefinisikan layar kecil, md (berukuran sedang), lg (berukuran besar), tetapi menurut bootstrap aturan pertama yang lebih kecil, jika Anda menyebutkan

xs-col-2 md-col-4

kemudian 2 kolom akan ditampilkan di setiap baris untuk ukuran layar dari xs hingga sm (termasuk) dan berubah ketika mendapat ukuran berikutnya yaitu untuk md hingga lg (termasuk) untuk pemahaman yang lebih baik tentang ukuran layar coba jalankan di berbagai mode layar di mode pengembang chrome (ctr + shift + i) dan coba berbagai piksel atau perangkat