Genelde backend çalışan yazılımcılar tasarımla uğraşmayı istemezler. Bunun için Bootstrap ideal bir seçim oluyor. Bu konuda sizlere Bootstrap'ın ızgara sistemini anlatacağım.
Izgara sistemi web sitelerin responsive (çözünürlülüğe duyarlı) olması açısından önemlidir. Responsive tasarımı mutlaka öneriyorum. Zaten bu devirde Responsive çalışmayanı döverler herhalde. Uzatmadan anlatıma geçeyim.
Bootstrap'ın ızgara sistemi 3 yapıdan oluşuyor. Bunlar kapsayıcılar (containers), satırlar (rows) ve sütunlardır (columns). Bildiğiniz HTML'deki tablo yapısı ama Responsive.
Containers
Sayfadaki tüm içerikleri kapsar. Sabit genişliğe sabit sınıf container, değişken olan sınıf ise container-fluid.
.container: Sayfanızın sabit bir genişlikte olmasını istiyorsanız, "container" sınıfını kullanırsınız. Sabit tabiri size sayfanın Responsive olmayacağını düşündürmesin. Bootstrap belli aralıktaki çözünürlükleri Breakpoint yani kesme noktası olarak alır. Sadece o çözünürlük aralığında sayfa genişliği sabittir.
Yapı:
1200px veya üstü: 1170px
992px - 1199px aralığı: 970px
768px - 991px aralığı: 750px
768px? ve altı: otomatik
1920px genişlikteki ekranda container sınıfı:
.container-fluid: Cihazın çözünürlüğüne göre genişliği değişkenlik gösterir.
1920px genişlikteki ekranda container-fluid sınıfı:
Rows
Satırlar içerisindeki her 12 sütunu kapsar.
Columns
Satır içerisinde toplam 12 tane vardır. Her biri 100% oranından 8.33333333% genişliğe sahiptir. Temel mantığı bu şekildedir.
Ana yapıdan az çok fikir sahibi oldunuz. Sırada sütunların kesme noktaları var. Kesme noktaları xl-lg-md-sm-xs olmak üzere 5 tanedir. Seçili çözünürlükleri ise:
col-xl-*: ≥1200 piksel
col-lg-*: ≥992 piksel
col-md-*: ≥768px
col-sm-*: ≥576px
col-xs-*: