secelif 🤣 🤣 . Tabi buyrun probleminiz nerde? Bootstrap aslinda ogrenmesi hic zor olmayan web dev. lerin en sevimli kutuphanesi. Grid sistemi sayesinde responsive siteler gelistirirsin. Nasil mi? Kisa bir uygulama ile bir resim ve yanina paragraf ekilyelim(responsive olacak):
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="./resimyolu"></div>
<div class="col-md-6"><p>Merhaba</p></div>
</div>
</div>
</body>
Simdi anlatayim. Cogu web developerin bootstrapi secme sebebi responsive tasarim olmasidir. Iki saatdir soyluyorumda nedir bu responsive? Responsive site bir sitenin tek kodda sitenin hem mobilde hem de pc de guzel gozukmesini saglayan bir design. Mesala bir resim ekledin bilgisayarda bu resim 1440x1440 ancak telefon icin bu boyut cok fazla. Iste bootstrap sayesinde yazdigin kodlarin derlemesi o cihaza gore boyut alir yani bu resim telefonda 400x400 olur. Responsive tasarimi umarim anlamissindir simdi yukarida ne yaptigimi anlatayim. Responsive design yapmak icin bootstrapin bir classi olan container classini div elementine vermen gerek ve artik bu container class-li div-in icerisine yazdigin nesneler artik responsive ozelliyini kazanir. Nedir row? Bir container icerisinde siralar olmasi gerekir bunu bir matematik defteri gibi dusun. Ordaki bir sirada olan cizgiler. Ayni sey bunun icin gecerli. Bootstrap icin bir sirada maksimum 12 sutun(column) ola bilir. Ben her iki elemnte col-md-6 diyerek sirayi yariya boldum. Diyelim uc elementin var ve ayni boyutdaki sutunlara bolmek istiyorsun bu zaman her div-e col-md-4 classini vere bilirsin. Bir row(sira) icerisine istedigin kadar sutun ekleye bilirsin ancak bunlarin hepsini topladiginda 12 almalisin. Mesala bir sirada 4 element ve her element ayni boyutu alsin istiyorum bu zaman row icerisndeki her div-e col-md-3 classini veriyorum. Eger sutun sayi 12 ye vardiysa artik yeni bir sira acmalisin. Deneyelim:
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="./resimyolu"></div>
<div class="col-md-6"><p>Merhaba</p></div>
</div>
<div class="row">
<div class="col-md-8"><p>Merhaba</p></div>
<div class="col-md-4"><p><img src="./resimyolu"></div>
</div>
</div>
</body>
Ikinci siramda bu sefer paragrafimin resimden iki kat fazla yer tutmasini istedim ve 8,4 verdim(8+4=12). Grid sistemi bu kadar. Umarim anlamissindir ve bootstrapin bu gridden baska cok seyi kisaltan ozelligi var mesala bir login formu yazacaksin bootstrap sayesinde kodu kopyala yapistir formun hazir.Sorun varsa sora bilirsin. Iyi sanslar
