Bootstrap 4 Grid Sistemi
Bootstrap 4 Grid Sistemi, elastik düzenler için kullanılır. Elastik bir düzen, öğelerin sayfada farklı çözünürlüklerde hizalanma şeklini temsil eder. Diğer Bootstrap 4 bileşenlerini öğrenmeden önce ızgarayı nasıl kullanacağınızı anlamanız önemlidir, çünkü hangi öğeyi kullanırsanız kullanın, onu ekranda bir yere yerleştirmeniz gerekecektir.
İçindekiler
Bootstrap 4 ızgarası kaplar, satırlar ve sütunlardan oluşur. Bunları tek tek ele alıp açıklayacağız.
Bootstrap 4 Konteyner
Bootstrap 4 kapsayıcısı, sınıfına sahip bir öğedir .container
. Kap, Bootstrap 4 ızgara sisteminin köküdür ve yerleşimin genişliğini kontrol etmek için kullanılır.
Bootstrap 4 kapsayıcısı, bir sayfadaki tüm öğeleri içerir. Bu, sayfanızın şu yapıya sahip olması gerektiği anlamına gelir: önce HTML sayfasının gövdesi, içine kapsayıcıyı ve kap içindeki diğer tüm öğeleri eklemelisiniz.
<body>
<div class="container">
...
</div>
</body>
Basit .container
sınıf, ekranın genişliğine bağlı olarak mizanpajın genişliğini ayarlar. İçeriği yatay olarak hizalayarak sayfanın ortasına yerleştirir. Bootstrap 4 kabı ile sayfanın sol ve sağ kenarı arasında eşit boşluk vardır.
.container
Ölçekler daraldıkça genişliği ekran olarak genişlik olarak aşağı ve mobil üzerinde tam genişlik olur. Kapsayıcının genişliği, her ekran boyutu için Bootstrap 4 kitaplığı içinde tanımlanır. Tam boyutları burada görebilirsiniz .
Tam genişlikte bir kap, ekran genişliğinden bağımsız olarak ekran boyutunun %100'ünü alır. Kullanmak için sınıfı eklemeniz gerekir. container-fluid
.
<div class="container">
Hello! I am in a simple container.
</div>
<div class="container-fluid">
Hello! I am in a full-width container.
</div>
CodePen'i buradan görüntüleyebilirsiniz .
İki kap türü arasındaki farkları görmek için kalemi konsolunuzda açıp ekran boyutları arasında geçiş yapabilirsiniz.
Önyükleme 4 Satır
Bootstrap 4 satırı ekranın yatay dilimleridir. Yalnızca sütunlar için sarmalayıcı olarak kullanılırlar. Bunları kullanmak için .row
sınıfa ihtiyacınız var .
<div class="row">
...
</div>
Bootstrap 4 satırları hakkında hatırlamanız gereken en önemli şeyler şunlardır:
- Yalnızca sütunları içermek için kullanılırlar. Satırın içine sütunlarla birlikte başka öğeler de yerleştirirseniz, beklenen sonucu alamazsınız.
- Konteynerlere yerleştirilmelidirler. Bunu yapmazsanız, sayfanızda yatay bir kaydırma göreceksiniz. Bunun nedeni, satırların 15'lik negatif sol ve sağ kenar boşluklarına sahip olmasıdır. Kap, 15 piksel dolguya sahiptir, bu nedenle kenar boşluklarını dengeler.
- Sütunlar satırın çocukları olmalıdır. Aksi takdirde hizalanmazlar. Satırlar ve sütunlar, bu katı hiyerarşide birlikte çalışacak şekilde oluşturulur.
Önyükleme 4 Sütun
Artık bu öğreticinin güzel kısmına, Bootstrap 4 sütunlarına geçebiliriz. Sütunlar harika! Ekranı yatay olarak bölmenize yardımcı olurlar.
Satırınıza tek bir sütun yerleştirirseniz, tüm genişliği alacaktır. İki sütun eklerseniz, her biri genişlikten 1/2 alır. Ve böylece herhangi bir sayıda sütun için geçerli.
<div class="container">
<div class="row">
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>
Kodu CodePen'de canlı olarak görebilirsiniz .
Yan not: Sütunlar renkli değildir. Görsel olarak daha çekici bir açıklama için renkler ekledim/güzel görünmeleri için.
Sütunlar için Boyutları Ayarlama
.col
Sınıfı kullanmak, sütunun genişliğini dinamik olarak ayarlar. Bu, bir satırdaki sütun sayısına bağlı olarak, bir sütunun genişliğinin, kabın genişliğinin sütun sayısına bölünmesiyle elde edileceği anlamına gelir.
Ancak sütunları tanımlamanın başka bir yolu daha var. Sütunlar için sınıfları kullanabilir ve boyutlarını tanımlayabilirsiniz.
Varsayılan olarak, Bootstrap 4 ızgarası 12 sütundan oluşur. Sütununuz için 1'den 12'ye kadar herhangi bir boyut seçebilirsiniz. 3 eşit sütun istiyorsanız, .col-4
her biri için kullanabilirsiniz (çünkü her biri 3*4 sütun = 12). Veya onlar için farklı boyutlar ayarlayabilirsiniz. İşte bazı örnekler:
<div class="row">
<div class="col-6">
...
</div>
<div class="col-6">
...
</div>
</div>
<div class="row">
<div class="col-5">
...
</div>
<div class="col-7">
...
</div>
</div>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
</div>
<div class="row">
<div class="col-6">
...
</div>
<div class="col-7">
...
</div>
</div>
Kodu CodePen'de canlı olarak görebilirsiniz .
Satırınızdaki sütunların toplamı 12'ye ulaşmazsa, tüm satırı doldurmazlar. Sütunların toplamı 12'yi geçerse bir sonraki satıra geçecektir. İlk satır, yalnızca toplamı 12 veya daha düşük olan ilk öğeleri görüntüler.
Sütunlar için Kesme Noktaları Ayarlama
Yukarıdaki örneği alıp mobilde görüntülemek isterseniz bazı sorunlarla karşılaşabilirsiniz. Mobilde beş sütun görüntülemek, içeriği okunamaz hale getirecektir.
İşte bu noktada en güçlü Bootstrap 4 bileşenlerinden biri devreye giriyor. Farklı ekranlarda farklı düzenlere sahip olmak için medya sorguları yazmanız gerekmez, bunun yerine sütun kesme noktalarını kullanabilirsiniz.
Kesme noktası, ekran çözünürlüğü anlamına gelen bir Bootstrap 4 değişkenidir. Bir sınıf için bir kesme noktası belirtirken, sınıfa yalnızca en az kesme noktasının sahip olduğu sayı kadar büyük çözünürlükler için aktif olmasını söylüyorsunuz.
Öğreneceğimiz en basit sınıf .col-[breakpoint]
sınıftır. Bu sınıfı kullandığınızda, yalnızca en azından tanımlanmış kesme noktası çözünürlüğüne sahip cihazlarda görüntülendiğinde sütunların davranışını tanımlarsınız. Belirtilen kesme noktasına kadar sütunlarınız varsayılan olarak dikey olarak hizalanır. Ve kesme noktanızdan sonra, sınıf nedeniyle yatay olarak hizalanacaklar.
Bootstrap, kullanabileceğiniz 4 kesme noktasına sahiptir:
.col-sm
daha büyük cep telefonları için (çözünürlüğü ≥ 576 piksel olan cihazlar);.col-md
tabletler için (≥768 piksel);.col-lg
dizüstü bilgisayarlar için (≥992px);.col-xl
masaüstü bilgisayarlar için (≥1200 piksel)
Diyelim ki iki sütunu arka arkaya küçük ekranlarda dikey, büyük ekranlarda ise aynı satırda görüntülemek istiyorsunuz. Sütunların aynı satırda gittiği kesme noktasını belirtmeniz gerekecektir.
Örneğimizde .col-lg
kesme noktasını kullanacağız ve sütunların farklı ekranlarda nasıl göründüğünü göreceğiz. Verilen kesme noktasından (<992px) daha düşük çözünürlükler için sütunlar dikey olarak görüntülenecektir. Bu, mobil cihazlarda ve tabletlerde sütunların şöyle görüneceği anlamına gelir:
Kesme noktasına (≥992px) eşit veya daha yüksek çözünürlüğe sahip cihazlar için sütunlar aynı satırda ilerleyecektir. Bu, dizüstü ve masaüstü bilgisayarlarda şu sonucu alacağınız anlamına gelir:
<div class="row">
<div class="col-lg">
...
</div>
<div class="col-lg">
...
</div>
</div>
Kodu CodePen'de canlı olarak görebilirsiniz . Codepen'i başka bir pencerede açarsanız ve sayfayı farklı çözünürlüklerde görürseniz, sütunların konumlarının değiştiğini göreceksiniz.
2 sütunun aynı satırda gitmesini istiyorsanız .col-sm
, tabletler .col-md
ve ekstra büyük ekranlar için kullanacağınız daha büyük cep telefonlarından başlayarak .col-xl
.
Sütunlar için Boyutları ve Kesme Noktalarını Ayarlama
Boyutları ve kesme noktalarını birleştirebilir ve format ile tek bir sınıf kullanabilirsiniz .col-[breakpoint]-[size]
.
Örneğin, dizüstü bilgisayar çözünürlüğünden başlayarak bir satırda farklı boyutlarda üç sütunun hizalanmasını istiyorsanız, şunu yapmanız gerekir:
<div class="row">
<div class="col-lg-4">
...
</div>
<div class="col-lg-3">
...
</div>
<div class="col-lg-5">
...
</div>
</div>
Bu sonucu <992px çözünürlüklerde alacaksınız:
Ve ≥992px olan ekranlar için:
Yine, kodu CodePen'de canlı olarak görebilirsiniz .
Ancak, küçük mobil çözünürlüklerde satır başına bir sütun, tabletlerde satır başına iki sütun ve dizüstü bilgisayarlarda veya daha yüksek çözünürlüklü cihazlarda dört sütun görüntülemek isterseniz ne olur?
Ardından, her çözünürlükteki davranışı açıklamak üzere tek bir sütun için birden çok sınıf eklersiniz. Birden çok sınıf kullanarak, içeriğin tabletlerde altı, dizüstü bilgisayarlarda üç yuva alacağını belirtirsiniz.
<div class="row">
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
</div>
Sonuç tabletlerde şöyle görünecektir:
Ve dizüstü bilgisayarlarda ve daha yüksek çözünürlüklerde bunun gibi:
Bu örnek ayrıca CodePen'de yayındadır .
Bir alıştırma olarak, ekran boyutuna bağlı olarak farklı sayıda sütuna sahip satırlar oluşturmayı deneyebilir ve tarayıcı konsolunuzda davranışı doğrulayabilirsiniz.
Ofset Sütunları
Eğer kolonlar yanyana olmak istemiyorsanız, sınıfı kullanabilirsiniz .offset-[breakpoint]-[size]
birlikte .col-[breakpoint]-[size]
.
Bu sınıfı kullanmak, sütununuzdan önce boş bir sütun eklemekle aynıdır. İşte basit bir örnek:
<div class="row">
<div class="col-md-4 offset-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
Kodu CodePen'de canlı olarak görebilirsiniz .
Sınıfı satırdaki herhangi bir sütunda kullanabilirsiniz. İşte birkaç örnek daha:
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4 offset-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-2">
...
</div>
<div class="col-md-4 offset-md-2">
...
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
...
</div>
</div>
İç içe sütunlar
Bu şaşırtıcı gelebilir, ancak bir sütunun içine bir satır ekleyebilirsiniz!
Söz konusu satır (üst sütununun genişliğine sahip olacak) daha sonra .col-*
sınıflar arasında referans verebileceğiniz 12 (daha küçük) sütuna bölünecektir .
Bir sütunun içine yeni bir satır eklediğimizde ne olduğuna bir göz atalım:
<div class="row">
<div class="col-md-8">
...
<div class="row">
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
</div>
</div>
</div>
<div class="col-md-4">
...
</div>
</div>
Kodu CodePen'de canlı olarak görebilirsiniz .
Bunu bilerek, bilgilerinizi düzenlemek için birçok seviyeye inebilirsiniz. Sütunlar, alanınızı yönetmeniz için basit bir yol sağlayacaktır.
Bu, Bootstrap 4 Elastik ızgara sistemi ile ilgili temel bilgileri tamamlar. Sorularınız varsa, lütfen yorumlarda bana bildirin, cevaplamaktan memnuniyet duyarım.
Daha fazla zamanınız varsa, işte bazı yararlı kaynaklar:
- GetBootstrap'tan Resmi Izgara Belgeleri
- Scrimba'dan Video Eğitimi
Bu makale ilk olarak BootstrapBay Blog'da yayınlanmıştır . 14 Days of Bootstrap 4 adlı daha geniş bir Bootstrap 4 öğretici serisinin parçasıdır . Bootstrap 4 bileşenleri hakkında öğrenmeye devam etmek istiyorsanız, bu makaleler başlamak için iyi bir yerdir.
Ve geliştirmenize bir Bootstrap şablonuyla hızlı bir şekilde başlamak istiyorsanız, pazar yerimize göz atabilirsiniz .
Kaynak