HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Izgara Örnekleri

❮ Öncesi Sonraki ❯

Aşağıda Bootstrap 4 ızgara düzenlerinin bazı örneklerini topladık.

Üç Eşit Sütun

.colSınıfı belirli sayıda öğe üzerinde kullanın ve Bootstrap kaç tane öğe olduğunu tanıyacaktır (ve eşit genişlikte sütunlar oluşturun). Aşağıdaki örnekte, her biri %33,33 genişliğe sahip üç col öğesi kullanıyoruz.

sütun
sütun
sütun

Örnek

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

Sayıları Kullanan Üç Eşit Sütun

Sütun genişliğini kontrol etmek için sayıları da kullanabilirsiniz. Toplamın 12 veya daha az olduğundan emin olun (mevcut 12 sütunun tümünü kullanmanız gerekmez):

sütun-4
sütun-4
sütun-4

Örnek

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

Üç Eşitsiz sütun

Eşit olmayan sütunlar oluşturmak için sayıları kullanmanız gerekir. Aşağıdaki örnek, %25/%50/%25 oranında bir bölünme oluşturacaktır:

sütun-3
sütun-6
sütun-3

Örnek

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

Bir Sütun Genişliği Ayarlama

Ancak, yalnızca bir sütunun genişliğini ayarlamak ve kardeş sütunların etrafında otomatik olarak yeniden boyutlandırılmasını sağlamak yeterlidir. Aşağıdaki örnek, %25/%50/%25 oranında bir bölünme oluşturacaktır:

sütun
sütun-6
sütun

Örnek

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

Daha Fazla Eşit Sütun

1 / 2
2/2
1 / 4
2/4
3/4
4/4
1 / 6
2/6
3 / 6
4/6
5 / 6
6/6

Örnek

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

satır sütunları

.row-cols-*Ayrıca, sınıflarla yan yana görünecek sütun sayısını da (kaç sütundan bağımsız olarak) kontrol edebilirsiniz :

1 / 2
2/2
1 / 4
2/4
3/4
4/4
1 / 6
2/6
3 / 6
4/6
5 / 6
6/6

Örnek

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Daha Eşit Olmayan Sütunlar

1 / 2
2/2
1 / 4
2/4
3/4
4/4
1 / 4
2/4
3/4
4/4

Örnek

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Eşit Yükseklik

Sütunlardan biri diğerinden daha uzunsa (metin veya CSS yüksekliğinden dolayı), geri kalanı takip eder:

Çok acı çok önemlidir, yemekte ve duyularda fark yoktur. Ve o hafta sonu alabileceğim acı. Hiçbir kötü iriure onu almaz ve zril daireleri ya da onun gibi bir şey, futbolu gören birimize sübvanse etti. Hayır, acımız benim tarafımdan okunmalı, onu Platon mukus yapmalıdır.
sütun
sütun

Örnek

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

İç İçe Sütunlar

sütun-8
sütun-6
sütun-6
sütun-4

Aşağıdaki örnek, sütunlardan birinin içinde başka iki sütunla iki sütunlu bir yerleşimin nasıl oluşturulacağını gösterir:

Örnek

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

Duyarlı Sınıflar

Bootstrap 4 ızgara sisteminin beş sınıfı vardır:

  • .col-(ekstra küçük cihazlar - ekran genişliği 576 pikselden az)
  • .col-sm-(küçük cihazlar - 576 piksele eşit veya daha büyük ekran genişliği)
  • .col-md-(orta cihazlar - 768 piksele eşit veya daha büyük ekran genişliği)
  • .col-lg-(büyük cihazlar - 992 piksele eşit veya daha büyük ekran genişliği)
  • .col-xl-(xlarge cihazlar - 1200 piksele eşit veya daha büyük ekran genişliği)

Yukarıdaki sınıflar, daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.

İpucu: Her sınıf ölçeklenir, bu nedenle ve için aynı genişlikleri ayarlamak smistiyorsanız md, yalnızca belirtmeniz gerekir sm.

Yatay olarak yığılmış

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

Aşağıdaki örnek, daha büyük cihazlarda (sm, md, lg ve xl) yatay hale gelmeden önce, ekstra küçük cihazlarda yığın halinde başlayan bir sütun düzeninin nasıl oluşturulacağını gösterir:

Örnek

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</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>

Karıştır ve Eşleştir

sütun-6 sütun-sm-9
sütun-6 sütun-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Örnek

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Oluk Yok

Olukları kaldırmak için .no-gutterssınıfı kaba ekleyin (fazladan boşluk):.row

Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim.
Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.
Ama her doğan hatanın, acıyı suçlamanın ve övmenin zevkinin nereden geldiğini anlamanız için, tüm konuyu açacağım ve gerçeğin mucidi ve sanki gerçeklerin mimarıymış gibi söylediği şeyleri açıklayacağım. mübarek hayat.

Örnek

<div class="row no-gutters">

❮ Öncesi Sonraki ❯