Bootstrap Paketi Neler İle Geliyor?
Bootstrap ile web üzerinde kullanabileceğiniz
tüm araç ve elementler ince ince düşünülmüş ve
tasarlanmış. Peki nedir bu araçlar?
• Pagination – Hazır sayfalama modülü.
• Alerts – 4 farklı renkte uyarı barları.
Ve yanda bahsettiğim araçlardan daha fazlası...
Basit Responsive Grid Kurgusu
Bir listesini çıkaralım:
• Form Elemanları - input, textarea, checkbox, radio
button vs.
• Button - 6 farklı renkte birbirinden sevimli buttonlar.
• Tables – Birbirinden güzel responsive birçok table.
• Images - etiketleri için kullanabileceğimiz
dahili css kodları.
• Font Icons – 200 farklı font icon.
• Dropdown – Açılır menüler.
• Tabs – Responsive tab yapıları.
Yazıyı tamamlamadan önce grid system ile bir örnek
yapmak istiyorum. Örneğimizde; tek satır üzerinde yan
yana 3 kutu olacak ve sayfamızı daralttığımız zaman
kutular yukarıdan aşağıya doğru tek sıra halinde
sıralanacak.Bu örnek için sayfamızın içine öncelikle
bir container, bunun içine ise bir row açıp response
edecek elemanlarımızı yerleştireceğiz.
Demo : http://www.yunusbassahan.com/files/natro/
bootstrap/responsive-ornek.html
Yukarıdaki örnekte dikkat etmemiz gereken en
önemli nokta col-lg-4 col-md-4 col-sm-12 class’ı
ile başlayan satırlar. İsterseniz bu class’ları kısaca
açıklayalım.Bootstrap 12 sütundan oluşan dikey grid
yapısı ile gelir, buna göre kullandığımız class’ların
anlamları aşağıdaki gibidir:
olduğunda 12 grid’in 4’ünü kullan.
col-sm-12 : Ekran genişliğimiz small (küçük)
olduğunda 12 grid’in tamamını kullan.
• col-lg-4 : Ekran genişliğimiz large (büyük) olduğunda
•
46
12 grid’in 4’ünü kullan.
col-md-4 : Ekran genişliğimiz medium (orta)
Hemen bir responsive-ornek.html dosyası oluşturup
aşağıdaki kodu dosyamıza dahil edelim.
•
Büyük ekranda 12 grid’imiz olduğuna göre; 3 tane 4’lü
grid’i kullandığımızda toplam 12 grid’i de doldurmuş
olduk.Hazırladığımız örneği tarayıcınızda açarak ekran
boyutunu büyütüp küçülttüğünüzde, kutularımızın )