Bootstrap Grid System (Izgara Sistemi)

Izgara sistemini bir web sayfasının yatay olarak eşit parçalara bölünmüş hali olarak tanımlayabiliriz. Bootstrap bize varsayılan olarak 12 kolonlu bir ızgara sistemi sunar. Izgara yapısını tablolara benzetebiliriz. Her tablo içerisinde satırlar (.row) ve sütunlar (.col) bulunur. Izgara sisteminde bir satır oluşturmak için nesnemize (genelde div nesnesi olur) row özelliği ekleriz. Bu satır içerisindeki bulunan kolonlar için ise col özelliği kullanılmalıdır.
Sütunlar başta da söylediğim gibi ekranda 12 parça olarak kullanılabilir. Yani toplam sütun için sayı 12'yi geçtiğinde bir alt satıra kayma yapacaktır<.br> Sütun oluştururken .col-büyüklük-sütun sayısı şeklinde yazılmalıdır.
Örnek: col-md-8
md: sütun büyüklüğünü belirtir. Geniş ekranlar için lg , md orta genişlikteki ekranlar için, sm küçük ekranlar için, çok küçük ekranlar için ise xs kullanılmaktadır.
8:ise sütun büyüklükleri için kullanılır.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com