Inilah Bagaimana Cara Bootstrap 4 Grid Bekerja

Apa itu "Kotak" Bootstrap?

Bootstrap Grid System digunakan untuk tata letak, khususnya Tata Letak Responsif. Memahami cara kerjanya sangat penting untuk memahami Bootstrap. Kisi terdiri dari pengelompokan Baris & Kolom di dalam 1 atau lebih Kontainer.

Bootstrap Grid dapat digunakan sendiri, tanpa Bootstrap JavaScript dan Komponen CSS lainnya. Anda hanya perlu mengunduh dan mereferensikan “bootstrap-grid.css” yang berisi kelas Grid dan Flexbox. Info lebih lanjut tentang hanya menggunakan Bootstrap Grid CSS ada di sini di dokumen.

Inilah contoh paling dasar menggunakan Grid:

<div class="container"> 
   <div class="row"> 
      <div class="col">I'm your content inside the grid!</div> 
   </div> 
</div>

Yang memberi kita satu "kolom" besar secara horizontal melintasi viewport…

2 Kolom…

<div class="container"> 
   <div class="row"> 
      <div class="col">Left column</div>
      <div class="col">Right column</div> 
   </div> 
</div>

3 Kolom…

<div class="container"> 
   <div class="row"> 
      <div class="col">Left column</div>
      <div class="col">Center column</div>
      <div class="col">Right column</div> 
   </div> 
</div>

Catatan: Garis tepi berwarna abu-abu terang di sekitar kolom pada contoh di atas telah ditambahkan sehingga Anda dapat memvisualisasikan kerangka setiap kolom. Lihat tata letak yang berfungsi di Codeply.

Konsep Grid dasar dengan cepat dipahami, tetapi Anda mungkin bertanya-tanya mengapa semua markup HTML ini diperlukan. Anda mungkin memiliki beberapa pertanyaan seperti...

__Mengapa saya membutuhkan Kontainer?

__Bisakah saya membuat satu Kolom lebih lebar dari yang lain?

Saya akan menjawab pertanyaan Grid seperti ini sebentar lagi. Tapi, pertama saya ingin mengambil langkah mundur untuk menjelaskan sesuatu yang sangat penting tentang penggunaan Grid.

Percayalah padaku. Memahami "Aturan Grid" akan menghemat banyak waktu dan frustrasi Anda. Bacalah dengan cermat…

Aturan Grid:

Kolom harus anak langsung dari Baris.
Baris hanya digunakan untuk memuat Kolom, tidak ada yang lain.
Baris harus ditempatkan di dalam Wadah.

Aturan-aturan itu sangat PENTING. Baris & Kolom selalu bekerja sama, dan Anda tidak boleh memiliki salah satunya tanpa yang lain.

Hal buruk akan terjadi jika Anda tidak mengikuti 3 aturan Grid sederhana itu, tepatnya. Saya telah menjawab pertanyaan Bootstrap yang tak terhitung jumlahnya di Stack Overflow hanya dengan menerapkan aturan tersebut. Pada awalnya ini mungkin terdengar rumit, tetapi sangat mudah setelah Anda memahami cara kerja Grid.

Cara Menggunakan Bootstrap Grid __Cara yang Benar.

Container

Pada contoh dasar sebelumnya Anda mungkin memperhatikan bahwa saya menggunakan .container untuk membungkus .row. Container adalah elemen root (a.k.a: top-level, terluar) dari Bootstrap Grid.

<div class="container"> 
   <div class="row"> 
      <div class="col">I'm content inside the grid!</div> 
   </div> 
</div>

Wadah dapat digunakan untuk menampung elemen dan konten apa pun. Ini tidak hanya digunakan untuk Baris & Kolom Kotak. Misalnya, ini adalah markup Bootstrap yang benar-benar valid:

<div class="container">
   <h2>My Heading</h2> 
   <div class="row"> 
      <div class="col">I'm content inside the grid!</div> 
   </div> 
</div>

Jangan Abaikan Wadahnya.

Pada awalnya, Container mungkin tampak sepele atau tidak perlu, tetapi sangat penting untuk mengontrol lebar tata letak. Kontainer juga digunakan untuk meratakan tepi kiri dan kanan tata letak secara merata di area pandang browser. Wadah digunakan untuk menangkal margin negatif Baris yang akan saya jelaskan sedikit lebih jauh ke bawah.

FYI: Viewport — Area yang terlihat di dalam jendela browser.

Bootstrap 4 memiliki 2 jenis Container. Dalam contoh saya, saya menggunakan .container, tetapi ada juga .container-fluid dengan lebar penuh. Anda dapat menggunakan salah satu:

1 — Kontainer dengan lebar tetap untuk memusatkan tata letak Anda di tengah:

<div class="container"></div>

2 — Penampung lebar penuh untuk tata letak yang mencakup seluruh lebar:

<div class="container-fluid"></div>

.container memperkecil lebar secara responsif (saat lebar layar menyempit) sehingga akhirnya menjadi lebar penuh seperti perangkat .container-fluidon yang lebih kecil.

Pengingat : Wadah dapat digunakan untuk menampung konten apa pun, bukan hanya Baris & Kolom Kisi. Tapi, jika Anda menggunakan Grid Rows & Columns, Rows harus ditempatkan di dalam Container. Coba demo Container di Codeply

Saat menggunakan Grid, satu lagi Baris akan ditempatkan di dalam Container. Anda dapat memiliki banyak Baris dalam sebuah Penampung, dan Anda dapat memiliki banyak Penampung dalam satu halaman. Itu semua tergantung pada tata letak apa yang ingin Anda capai, tetapi jangan terlalu khawatir dengan itu.

Kontainer harus digunakan untuk menampung Baris petak (.row ).

Baris memiliki margin kiri/kanan negatif sebesar -15px. Padding Wadah 15px digunakan untuk menetralkan margin negatif Baris. Ini untuk menjaga agar konten tetap rata di tepi tata letak. Jika Anda tidak memasukkan Baris ke dalam Penampung, Baris tersebut akan meluap ke penampungnya, menyebabkan pengguliran horizontal yang tidak diinginkan.

Baris & Kolom

Untuk sementara sekarang saya berharap Bootstrap .row tidak benar-benar bernama "baris". Nama “baris” seringkali menyesatkan, dan mengaburkan tujuan sebenarnya dari .baris.

Ketika Anda berpikir "baris", Anda mungkin berpikir garis horizontal, tidak apa-apa, TETAPI, lebih baik menganggap .row hanya sebagai induk dari kolom.

Pikirkan Baris sebagai sekelompok Kolom

Ini karena kolom di dalam .row tidak selalu ditata secara horizontal di viewport. Kadang-kadang kita ingin tata letak kolom menjadi horizontal, sementara di lain waktu kita ingin tata letak kolom vertikal ke viewport. Konsep tata letak horizontal vs. vertikal adalah inti dari Desain Responsif. Satu-satunya tujuan dari "baris" adalah untuk memuat 1 atau lebih "kolom".

JANGAN MENEMPATKAN KONTEN LANGSUNG DI DALAM BARIS!

⛔
<div class="row">
   This is very bad, wrong way, no bueno!!
</div><div class="row">
   <p>This is also very bad, the wrong way!!</p>
</div><div class="row">
   <h2>No headings either! This is the wrong way!!</h2>
</div>

Columns, and only columns, are placed inside the Row.

Content is placed inside the Columns.

✅
<div class="row">
   <div class="col">Happy :-) This is the right way.</div>
</div>

Penting juga untuk menyebutkan bahwa .row adalah display:flex. Sebagai anak-anak Flexbox, Kolom di setiap baris memiliki tinggi yang sama. Karena Flexbox, perataan horizontal dan vertikal (sejajarkan kanan, tengah, bawah, dll.) dengan mudah dilakukan menggunakan kelas Flex dan Auto-margin Utility dari Bootstrap 4.

Sekarang saatnya untuk melihat lebih dalam pada Baris & Kolom, dan bagaimana persisnya mereka bekerja sama. Ada berbagai “jenis” Kolom, dan berbagai cara untuk menggunakannya dalam tata letak Anda. Mereka seperti sihir.

Kebahagiaan adalah, Kolom…

Buat pembagian horizontal melintasi viewport.
Dapat memiliki lebar yang ditentukan berbeda.
Dapat mengubah lebar pada lebar layar yang berbeda.
Tata letak secara horizontal dari kiri ke kanan, lalu vertikal ke atas dan ke bawah.
Dapat mengubah posisi (urutan ulang) relatif terhadap saudara kandung di baris yang sama.
Tingginya sama dengan saudara kandung lainnya di baris yang sama. Bisa "tumbuh" atau "menyusut" lebarnya.
Dapat secara otomatis "membungkus" atau "menumpuk" secara vertikal sesuai kebutuhan, atau pada lebar layar yang berbeda.
Dapat berisi lebih banyak Baris & Kolom__ bersarang.

Semua yang perlu Anda ketahui tentang Kolom Bootstrap.

Jangan lupa bahwa Kolom harus menjadi anak langsung dari Baris.

Kolom membuat pembagian horizontal melintasi viewport. Ruang antar kolom disebut "selokan".

Kisi Bootstrap klasik memiliki 12 unit kolom:

Catatan untuk Dummies : Kolom sebenarnya tidak berwarna merah muda terang. Itu hanya digunakan bagi Anda untuk melihat batas kiri/kanan Kolom. Dalam kebanyakan kasus, Anda tidak akan menggunakan semua 12 kolom individual seperti yang diilustrasikan di atas. Alih-alih, Anda akan menggunakan beberapa kombinasi dari 12 untuk memuat konten halaman…

Jadi, kolom dapat dibagi rata menjadi faktor dari 12. Misalnya, 6 kolom (12/6 = 2):

Dan, Anda bisa menghitungnya…

Kolom dapat dipisahkan menggunakan bagian mana saja dari 12 unit. Dan, tidak apa-apa menggunakan kurang dari 12. Tidak apa-apa juga menggunakan lebih dari 12 yang akan saya tunjukkan nanti.

Dengan semua fleksibilitas ini, kemungkinan tata letak tampaknya tidak terbatas…

Sekarang Anda tahu cara menggunakan Kolom untuk membuat tata letak horizontal. Tapi tunggu, masih ada lagi! Mari kita bicara tentang beberapa hal menarik yang dapat dilakukan Kolom.

Seperti yang baru saja Anda lihat di atas, Kolom dapat memiliki lebar yang berbeda:

Tahukah Anda bahwa Lebar kolom dapat berubah bergantung pada lebar layar?

Ini disebut Desain Responsif, dan saya akan memberi tahu Anda dengan tepat cara kerjanya.

Tapi, hal pertama yang pertama, saya harus selesai memberi tahu Anda tentang Kolom. Ingat sebelumnya ketika saya mengatakan "Tidak apa-apa menggunakan lebih dari 12 Kolom dalam Satu Baris"?

Kolom di baris yang sama ditata secara horizontal, lalu ditumpuk secara vertikal ke bawah. "Penumpukan" atau "pembungkusan" vertikal ini terjadi ketika unit Kolom dalam satu Baris melebihi 12. Ini dikenal sebagai "Pembungkusan Kolom"

Kolom di Baris yang sama membungkus ke baris berikutnya setiap 12 unit:

Lebar kolom dan “wrapping” dapat dikontrol menggunakan Tingkatan Grid Responsif yang berbeda (alias “Titik Hentakan Grid”):

Kolom dapat mengubah posisi (pengurutan ulang) relatif terhadap saudara kandung di Baris yang sama:

Kolom dapat berisi Baris & Kolom bayi. Ini disebut “Bersarang”:

Kolom dapat "tumbuh" atau "menyusut" lebarnya. Ini adalah Kolom Tata Letak Otomatis:

ara Desain Responsif dengan Bootstrap.

Tingkat Kisi, Kueri Media, dan Breakpoints, Astaga!

Saya belum selesai berbicara tentang Baris & Kolom, karena mereka adalah bintang pertunjukan dalam hal Desain Responsif.

Ini semua tentang lebar.

Bootstrap 4 memiliki 5 Tingkat Responsif (a.k.a. “Breakpoints”) yang mungkin Anda perhatikan di beberapa contoh Kolom sebelumnya (yaitu; col-lg-4, col-md).

Breakpoint Responsif, berdasarkan lebar layar:

(xs) — lebar layar <576px (Ini adalah tingkatan “default”)
sm — lebar layar ≥ 576px
md — lebar layar ≥ 768px
lg — lebar layar ≥ 992px
xl — lebar layar ≥ 1200px

Selain itu: Mengapa saya meletakkan (xs) di dalam tanda kurung, dan bukan breakpoint lainnya? Karena xs (extra-small) adalah breakpoint default, infix -xs yang digunakan untuk Bootstrap 3.x lebih lama digunakan di Bootstrap 4.x. Jadi alih-alih menggunakan col-xs-6, itu hanya col-6.

Bootstrap menggunakan kueri media CSS untuk menetapkan Titik Istirahat Responsif ini. Mereka memungkinkan Anda untuk mengontrol perilaku Kolom pada lebar layar yang berbeda.

Misalnya: berikut adalah 2 kolom, masing-masing lebarnya 50%:

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-6">Column 1</div>
      <div class="col-sm-6">Column 2</div> 
   </div> 
</div>

Col-sm-6 berarti menggunakan lebar 6 dari 12 kolom (50%), pada lebar perangkat kecil biasa (lebih besar dari atau sama dengan 768 px):

Kurang dari 768px, 2 kolom menjadi 100% lebar dan menumpuk secara vertikal:

Ini karena (xs) adalah default atau breakpoint tersirat. Karena saya tidak menentukan lebar Kolom default, lebar 50% hanya diterapkan pada 768px dan lebih lebar untuk sm breakpoint.

Seluler dulu!

Karena (xs) adalah breakpoint default, col-12 tersirat. Jadi ini:

<div class="col-12 col-sm-6">Column</div>

Bekerja dengan cara yang sama seperti ini:

<div class="col-sm-6">Column</div>

Breakpoint yang lebih besar, ganti breakpoint yang lebih kecil.

xs(default) >

diganti dengan sm >

diganti oleh md >

diganti dengan lg >

diganti dengan xl

Atau sebaliknya…

xl > overrides lg > overrides md > overrides sm > overrides (xs)

Oleh karena itu, col-sm-6 benar-benar berarti lebar 50% pada small-and-up. Untuk lebar kolom yang sama di semua tingkatan, cukup atur lebar untuk tingkatan terkecil yang diinginkan. Sebagai contoh:

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

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

Untuk lebar kolom yang berbeda pada tingkat yang lebih besar, gunakan breakpoint lebih besar yang sesuai untuk menggantikan breakpoint yang lebih kecil. Misalnya, lebar 3 kolom pada sm, dan lebar 4 kolom pada md-and-up:

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

Kolom tata letak otomatis Bootstrap 4 juga berfungsi secara responsif. Karena kesederhanaannya, sekarang saya lebih memilihnya daripada kolom 12 unit klasik. Kolom tata letak otomatis sempurna untuk setiap skenario tata letak yang memerlukan kolom dengan lebar yang sama. Tapi, jangan lupa, kolom 12 unitnya bisa dicampur sesuai kebutuhan.

Lihatlah beberapa contoh Grid tata letak otomatis

3 kolom dengan lebar yang sama. `cols` tetap horizontal pada semua lebar, dan tidak menumpuk secara vertikal karena titik henti sementara xs adalah defaultnya:

<div class="container"> 
   <div class="row"> 
      <div class="col">1</div>
      <div class="col">2</div> 
      <div class="col">3</div>
   </div> 
</div>

3 equal-width columns (responsive). In this example, the `cols` remain horizontal until the sm breakpoint of 576px, and then stack vertically. Remember, you can switch out sm for whatever breakpoint (md,lg,xl) is needed:

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

2 kolom, sidebar kiri. Berikut adalah contoh menggabungkan kolom klasik dengan lebar yang ditentukan, dengan kolom tata letak otomatis. Kolom kanan akan otomatis bertambah untuk mengisi lebarnya karena kita menggunakan .col tata letak otomatis. Bilah samping akan menjadi 16,6% dari lebar layar pada layar yang lebih besar, lalu menumpuk di atas pada titik putus sm 576px:

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-2">sidebar</div>
      <div class="col">main content</div> 
   </div> 
</div>

3 kolom, sidebar kanan (shrink-to-fit): Dalam contoh ini, ada sidebar kiri, area konten tengah, dan sidebar kanan yang lebarnya menyusut untuk menyesuaikan dengan kontennya.

<div class="container"> 
   <div class="row"> 
      <div class="col-sm-2">left</div>
      <div class="col">main content</div>
      <div class="col-auto">right</div>
   </div> 
</div>

Poin-poin penting tentang Desain Responsif menggunakan Bootstrap 4 Grid:

Kolom akan menumpuk secara vertikal (dan menjadi lebar penuh) pada lebar layar yang lebih kecil kecuali jika Anda menggunakan kelas col-* tertentu di markup HTML Anda. Gunakan col-* tertentu untuk mencegah penumpukan vertikal itu.
Kelas grid yang lebih kecil juga berlaku untuk layar yang lebih besar kecuali diganti secara khusus untuk lebar layar yang lebih besar. Jadi, <div class=”col-md-6"></div> secara efektif sama dengan <div class=”col-md-6 col-lg-6"></div>. Oleh karena itu, Anda hanya perlu menggunakan kelas untuk lebar terkecil yang ingin Anda dukung.
Baris adalah display:flex, dan karena itu Kolom memiliki tinggi yang sama di baris yang sama. Gunakan auto-margins atau Flexbox align-items dan justify-content untuk perataan horizontal atau vertikal (tengah, bawah, kanan, dll.).

Terimakasih telah membaca, semoga bermanfaat!