Bootstrap'taki col-lg- *, col-md- * ve col-sm- * arasındaki fark nedir?

Ne arasındaki farktır col-lg-*, col-md-*ve col-sm-*Heyecan Bootstrap?

Güncelleme 2019 ...

Bootstrap 3 ızgara geliyor 4 katman (veya "kesme noktaları") ...

• Ekstra küçük (akıllı telefonlar için .col-xs-*)
• Küçük (tabletler için .col-sm-*)
• Orta (dizüstü bilgisayarlar için .col-md-*)
• Büyük (dizüstü bilgisayarlar / masaüstü bilgisayarlar için .col-lg-*).

Bu ızgara boyutları, farklı genişliklerde ızgara davranışını kontrol etmenizi sağlar. Farklı katmanlar, CSS medya sorguları tarafından kontrol edilir .

Öyleyse Bootstrap'ın 12 sütunlu ızgarasında ...

col-sm-3tipik küçük aygıt genişliğinde (> 768 piksel) 12 sütun genişliğinden (% 25) 3'ü

col-md-3normal bir ortam genişliği (> 992 piksel) üzerinde 12 sütun genişliğinden (% 25) 3'ü

Daha küçük katmanlı ( xs, smya da md) aynı zamanda daha büyük ekran genişlikleri için boyutunu tanımlar . Yani, tüm katmanlardaki aynı boyut sütunu için, en küçük görünüm alanı için genişliği ayarlayın ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> aynıdır,

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

Daha büyük katmanlar ima edilir. Çünkü , farklı bir boyut kullanan daha büyük bir katman tarafından özellikle geçersiz kılınmadıkça col-sm-3anlamına gelir 3 units on sm-and-up.

xs(varsayılan)> geçersiz kılma ölçütü sm> geçersiz kılma ölçütü md> geçersiz kılma ölçütülg

Değişiklik sütun genişliklerini kullanmak için sınıfları birleştirinFarklı ızgara boyutlarında. Bu duyarlı bir düzen oluşturur.

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

sm, mdVe lgızgara ekranlar / görünüm dikey tüm "yığın" az 768 pikselden olacaktır. İşte buradaxs ızgara uyuyor. Kullanımı sütunlar col-xs-*sınıfları olacak değil , dikey olarak monte ve en küçük ekranlarda düşürmesidir devam edin.

Tarayıcınızı yeniden boyutlandırın Bu demosu kullanarak ızgara ölçeklendirme efektlerini göreceksiniz.

Bootstrap 4

In Bootstrap 4 orada yeni bir -xl-boyut bakın bu demo . Ayrıca -xs-infix kaldırıldı , bu yüzden en küçük sütunlar basitçecol-1 , col-2.. col-12vb ..

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

Bootstrap 4 Izgara Demosu

Ayrıca, Bootstrap 4 yeni otomatik düzen sütunları içerir . Bunlar aynı zamanda duyarlı kesme noktaları (varsa col, col-sm, col-mdvb ..), ancak tanımlanan% genişlikleri yok. Bu nedenle, otomatik düzen sütunları satır boyunca eşit genişliği doldurur .

Bu makalede Bootstrap ızgarası hakkında daha fazla bilgi açıklanmaktadır

Bootstrap dokümanları bunu açıklıyor, ama yine de almam biraz zaman aldı. Kendime iki yoldan biriyle açıklamak daha mantıklı:

Sütunların yatay olarak başladığını düşünüyorsanız, ne zaman istiflenmesini istediğinizi seçebilirsiniz .

Örneğin, sütunlarla başlarsanız: ABC

Ne zaman istifleneceklerine siz karar vereceksiniz:

bir

B

C

Col-lg seçeneğini belirlerseniz, genişlik <1200 piksel olduğunda sütunlar yığınlanır.

Col-md'yi seçerseniz, genişlik <992 piksel olduğunda sütunlar yığınlanır.

Col-sm'yi seçerseniz, genişlik <768 piksel olduğunda sütunlar yığınlanır.

Col-xs seçeneğini belirlerseniz, sütunlar hiçbir zaman yığınlanmaz.

Öte yandan, sütunların yığılmış olarak başladığını düşünüyorsanız, hangi noktada yatay hale geleceklerini seçebilirsiniz :

Col-sm seçeneğini belirlerseniz, genişlik> = 768 piksel olduğunda sütunlar yatay olur.

Col-md'yi seçerseniz, genişlik> = 992 piksel olduğunda sütunlar yatay olur.

Col-lg seçeneğini belirlerseniz, genişlik> = 1200 piksel olduğunda sütunlar yatay olur.

Gönderen Heyecan Bootstrap belgelerinde :

• küçük ızgara (≥ 768 piksel) = .col-sm-*,
• orta ızgara (≥ 992 piksel) = .col-md-*,
• büyük ızgara (≥ 1200 piksel) = .col-lg-*.

Bunun kafa karıştırıcı yönünün BootStrap 3'ün mobil bir ilk duyarlı sistem olması ve bunun Bootstrap dokümantasyonunun bu bölümünde col-xx-n hiyerarşisini nasıl etkilediğini açıklamaması olduğunu düşünüyorum. Bu, daha büyük cihazlar için bir değer seçerseniz daha küçük cihazlarda ne olacağını merak etmenizi sağlar ve birden fazla değer belirtmeye gerek olup olmadığını merak etmenizi sağlar. (Yapmıyorsun)

Bunu daha da açıklamak isterim ki ... Daha düşük tane türleri (xs, sm) daha küçük ekranlarda yerleşim görünümünü korumaya çalışır ve daha büyük tipler (md, lg) yalnızca daha büyük ekranlarda doğru şekilde görüntülenir, ancak daha küçük cihazlarda sütunları sarar. Önceki örneklerde verilen değerler, önyüklemenin görünümü mevcut ekran alanına sığdırdığı eşiğe karşılık gelir.

Uygulamada bunun anlamı, col-xs-n sütunlarını yaparsanız, pencere sayfanın düzgün görüntülenemeyeceği kadar kısıtlayıcı bir boyuta düşene kadar çok küçük ekranlarda bile doğru görünümü koruyacaklarıdır. Bu, genişliği 768 piksel veya daha az olan cihazların, tablonuzu bozulmuş (tek veya sarılmış sütun formu) yerine tasarladığınız şekilde göstermesi gerektiği anlamına gelmelidir. Açıkçası bu hala sütunların içeriğine bağlıdır ve bütün mesele budur. Sayfa, küçük bir ekranda yan yana büyük verilerin birden çok sütununu görüntülemeye çalışırsa, hesaba katılmazsanız, sütunlar doğal olarak korkunç bir şekilde sarılır. Bu nedenle, sütunlar içindeki verilere bağlı olarak, mizanpajın içeriği yeterince görüntülemek için kurulduğu noktaya karar verebilirsiniz.

Örneğin, sayfanızda üç adet col-sm-n sütun varsa, sayfa genişliği 992 pikselin altına düştüğünde önyükleme sütunları satırlara sarar. Bu, verilerin hala görünür olduğu, ancak görüntülemek için dikey kaydırma yapılması gerektiği anlamına gelir. Düzeninizin bozulmasını istemiyorsanız, xs seçeneğini seçin (verileriniz daha düşük çözünürlüklü bir cihazda üç sütunda yeterince görüntülenebildiği sürece)

Verilerin yatay konumu önemliyse, görsel doğayı korumak için daha düşük ayrıntı düzeyi değerleri seçmeye çalışmalısınız. Konum daha az önemli ancak sayfanın tüm cihazlarda görünür olması gerekiyorsa daha yüksek bir değer kullanılmalıdır.

Col-lg-n seçeneğini belirlerseniz, ekran genişliği 1200 piksel xs eşiğinin altına düşene kadar sütunlar doğru görüntülenir.

Cihaz Boyutları ve sınıf öneki:

• Ekstra küçük cihazlar Telefonlar (<768 piksel) - .col-xs-
• Küçük Cihazlar Tabletler (≥768px) - .col-sm-
• Orta boy cihazlar Masaüstü bilgisayarlar (≥992px) - .col-md-
• Büyük cihazlar Masaüstü bilgisayarlar (≥1200px) - .col-lg-

Izgara seçenekleri:

Referans: Izgara Sistemi

TL; DR

.col-X-Yaracı ekran boyutu X ve yukarı , Y, sütun doldurmak için bu elemanı germek .

Önyükleme başına 12 sütunluk bir ızgara sağlar .row, bu nedenle Y = 3 genişlik =% 25 anlamına gelir.

xs, sm, md, lg akıllı telefon, tablet, dizüstü bilgisayar, masaüstü için boyutlardır.

Farklı ekran boyutlarında farklı genişlikler belirtmenin amacı, küçük ekranlarda işleri büyütmenize izin vermektir.

Misal

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

Anlamı: Masaüstü Bilgisayarlarda% 50, Mobil, Tablet ve Dizüstü Bilgisayarlarda% 100 genişlik.

.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 

Özel bir durum: Önyükleme ızgara sistemini öğrenmeden önce tarayıcı yakınlaştırmasının% 100'e (yüzde yüz) ayarlandığından emin olun. Örneğin: Ekran çözünürlüğü (1600px x 900px) ve tarayıcı yakınlaştırması% 175 ise, "bootstrap-ped" öğeleri yığınlanır.

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>

Krom yakınlaştırma% 100

Tarayıcı yüzde 100 - yatay olarak yerleştirilmiş öğeler

Krom yakınlaştırma 175%

Tarayıcı yüzde 175 - yığılmış öğeler

Hadi Bootstrap'ı karmaşıklaştıralım!

Aşağıdaki col-sm'in % 100 genişliğini nasıl işgal ettiğine dikkat edin (diğer bir deyişle yeni çizgiye ayrılır), 576pxancak col içermez. Mevcut genişliği gif olarak üst ortada görebilirsiniz.

Kod geliyor:

<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 varsayılan olarak tüm sütunları (col) eşit genişlikte tek bir satırda hizalar . Bu durumda col, ekran boyutu ne olursa olsun, her biri% 100/3 genişlik kaplar. Bunu gif'te fark edebilirsiniz.

Şimdi, her satır için yalnızca bir sütun oluşturmak istiyorsak, yani her sütuna% 100 genişlik verir, ancak yalnızca daha küçük ekranlar için ? Şimdi col-xxsınıflar geliyor !

Ben kullanılan col-smben 576px aşağıda ayrı satırlara sütunları kırmak istedim çünkü. Bu 4 col-xxsınıf, cep telefonları, tabletler, dizüstü bilgisayarlar, büyük monitörler vb.Gibi farklı görüntü aygıtları için Bootstrap tarafından sağlanır.

Yani, col-sm576 pikselin altına düşecekti,col-md , 768px aşağıda kıracak col-lg992px aşağıda kıracak ve col-xl1200px altında kıracak

col-xsBootstrap 4'te sınıf olmadığını unutmayın .

Bu hemen hemen özetliyor. İşe geri dönebilirsin.

Ama biraz daha fazlası var. Şimdi geliyorcol-*col-xx-* genişliği özelleştirmek ve .

Yukarıdaki örnekte, bundan bahsettiğim colveyacol-xx üst üste eşit genişliği alır. Dolayısıyla, bir özelliğe daha fazla genişlik vermek istiyorsak, colbunu yapabiliriz.

Bootstrap sırası 12 parçaya ayrılmıştır, bu nedenle yukarıdaki örnekte 3 col bu yüzden her biri 12/3 = 4 parça alır. Bu parçaları genişliği ölçmenin bir yolu olarak düşünebilirsiniz.

Ayrıca biçim o yazabilirsiniz col-*yani col-4böyle:

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

Ve hiçbir fark yaratmazdı çünkü varsayılan olarak bootstrap, col (4 + 4 + 4 = 12) .

Ama biz 1'ine 7 parça falan ne isterseniz col, 2, 3 parça colve 3. 2 parça (= 2 12-7-3) dinlenme col(7 + 3 + 2 toplam 12 yani), biz sadece bunu yapabilirsiniz:

<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>

ve col-xx-*sınıfların genişliğini de özelleştirebilirsiniz .

<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>

Eylemde nasıl görünüyor?

Ya toplamı col12'den fazlaysa? Ardından colaşağıdaki satıra geçecek / ayarlanacaktır. Evet, bir satır için istediğiniz sayıda sütun olabilir!

<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>

Büyük ekranlar için arka arkaya 3 sütun istiyor, ancak bu sütunları küçük ekranlar için 2 satıra ayırırsak ne olur ?

<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>

Burada oynayabilirsiniz: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Bu görüntünün konsepti daha iyi anlamak için oldukça iyi olduğunu düşünüyorum!

daha fazla ayrıntı anlamak için lütfen aşağıdaki linke gidin:

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

ekran boyutuna bağlı olarak bir satırda kaç sütun yerleştirileceğini bootstrap'e söylemek için kullanılır.

col-xs-2

sm, küçük bir ekran, md (orta boy), lg (büyük boy) tanımladığı gibi, aynı şekilde ekstra küçük (xs) ekranda bir satırda yalnızca 2 sütun gösterir, ancak bootstrap'e göre daha küçük ilk kurala göre,

xs-col-2 md-col-4

xs - sm (dahil) arasındaki ekran boyutları için her satırda 2 sütun gösterilir ve sonraki boyuta ulaştığında değişir, yani ekran boyutlarını daha iyi anlamak için lg'ye (dahil) kadar çeşitli ekran modlarında çalıştırmayı deneyin. chrome'ın geliştirici modu (ctr + shift + i) ve çeşitli pikselleri veya cihazları deneyin