X

Bootstrap 3 Dersleri Ders 2 – Grid (Izgara) Sistemi

Bootstrap Dersleri Ders 2 - Grid (Izgara) Sistemi

Merhaba, bootstrap derslerinin 2. bölümüne hoşgeldiniz arkadaşlar bu dersimizde bootstrap’ın grid (ızgara) sistemine değineceğiz.

Grid (Izgara) Sistemi Nedir?

Grid (ızgara) sistemi, ekranı 12 sütuna bölmenize yarayan bootstrap özelliğidir.

Ekranı 12’ye bölebileceğiniz gibi 3’e 4’e ya da 6’ya da bölebilirisiniz bu tamamen size kalmış birşey.

Grid (Izgara) Sistemi Nasıl Kullanılır?

Grid (Izgara) sistemini kullanmak için div’lere class özelliği vermemiz gerekiyor. Mesela bir sayfayı  satır 1’e bölmek için div’in class’ına col-md-12 vermemiz gerekiyor.

Aşağıdaki görselle daha iyi anlayacağınızı varsayıyorum.

Bootstrap Dersleri Ders 2 – Grid (Izgara) Sistemi Resim 1

Grid (Izgara) Sistemi Sınıfları

col-xs (mobil için)

col-sm (tablet için)

col-md (masaüstü pc için)

col-lg (daha büyük ekranlı pcler için)

Gridlerin Temel Yapısı


<div class="row">
<div class="col-*-*"><!-- Buraya içerik --></div>
<div class="col-*-*"><!-- Buraya içerik --></div>
<div class="col-*-*"><!-- Buraya içerik --></div>
<div class="col-*-*"><!-- Buraya içerik --></div>
</div>

Yukarıdaki kodumuzda öncelikle div etiketi açıp class olarak row ekledik. Class’ı row olan div etiketinin içine ise sayfayı böleceğimiz class’lı divleri ekledik. col ‘dan gelen sonraki *’a hangi platform için olduğunu ondan sonraki *’a ise kaç sütun alan kapladığını yazacaksınız.

 

Örnekler

Örnek-1

İlk örneğimde bir satırı 3 eşit parçaya böleceğim.

Kodumuz;


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

Çıktı;

Bootstrap Dersleri Ders 2 – Grid (Izgara) Sistemi Resim 2
Örnek-2

İkinci örneğimde bir satırı birbirine eşit olmadan böleceğim.

Kodumuz;


<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-9">.col-md-9</div>
</div>

Çıktı;

Bootstrap Dersleri Ders 2 – Grid (Izgara) Sistemi Resim 3

İkinci dersimizin de sonuna geldik arkadaşlar bu dersimizde size bootstrap’ın grid (ızgara) sistemi hakkında biraz bilgi verdim ileri ki derslerde grid sistemine biraz daha derinlemesine dalacağız. Tüm bootstrap derslerini bu linkten görebilirsiniz.

Kategoriler Bootstrap Dersleri
Tuğra Yaldız: Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.
Benzer Yazılar