Merhaba Arkadaşlar
Bu gün sizlerle bootstrap hakkında bir makale göremediğim için konu hakkında bilgi alışverişinde bulunmaya karar verdim.
Çoğu kişi web tabanlı uygulamalarda sadece html,css,php,asp gibi dillerin kullanıldığını düşünür.
Oysa ki bir web sitesini diğerlerinden ayıran, daha fonksiyonel ve göz alıcı efektlerin çoğu ve en önemlileri javascript diliyle ve bootstrap gibi altyapılarla verilir.
Bootstrap'ın önemli olan bir diğer özelliği hazır bir çok css, javascript sınıfı bulundurması ve bunları hızlı bir şekilde tek kod kullanarak projemize dahil edebilmemizdir.
Ve bir diğer özelliği ise mobil uyumlu olmasıdır.
Hazır scriptleri kontrol ettiğimizde container, col gibi class ların olduğunu arkaplanda css'i incelediğimizde sayfalarca kodlama yapıldığını görmekteyiz.
Elbette bu kodlamaları her site yazacağımızda sıfırdan yapmıyoruz. Bootstrap kütüphanesi'ni indirerek projemize dahil ettikten sonra tek yapmamız gereken bootstrap'ın sitesini ziyaret etmektir.
Siteye girdiğimizde sol alanda gezinerek çoğu nesnenin hazır kodlarını bulabilirsiniz.
Öncelikle yapmamız gereken web sayfamıza bootstrap dosyalarını <head></head> etiketleri arasına eklemek.
Kodlarımızı da paylaşayım
Ben indirdiğim bootstrap dosyalarını sunucumdaki css ve js klasörlerinin içine attığım için linkin href ini ona göre verdim.
Ardından </body> in hemen önüne aşağıdaki kod ile bootstrap'ın javascript dosyasını projeme dahil ettim.
Artık elemanlarımızı kullanmayı öğrenelim.
İlk olarak şunu unutmayalım kullanacağımız kodların hepsi mobil uyumludur. Container mantığını öğrenelim.
Container sayfanın sağ ve sol tarafından otomatik %10 gibi bir boşluk bırakarak sayfanın ortasında çalışmamızı sağlar. Bundan dolayı tüm kodlarımızı container class'lı divimizin içinde yazmalıyız.
Artık nasıl satırlara böleceğimizi öğrenelim.
Bu tanım bootstrapta bir satır anlamına gelmektedir. Boyutu değişkendir. İçine yazacağınız kodlar ile satırı sütunlara bölersiniz.
Şimdi satırımızı sütunlara bölelim.
Burada anlamamız gereken nokta bir satır maksimum 12 ye bölünebilir. Yani col-md-4 class lı divimizi maksimum 3 kez yazabiliriz.
Yazdığımızda kodumuzun son hali şöyle olacaktır.
Ben kendi yazdığım my.css ide ekledim sonrasında ise col-md divlerimin arasına deneme yazısı yazdım. Sonuç=
Ve gördüğünüz gibi mobil görünümde ise otomatik olarak alt alta geldi.
Ardından class="col-md-4 mt-2" şeklinde class a mt-2 eklediğimizde bunun açılımı margin-top anlamındadır ve 32 px'lik yukarıdan boşluk bırakır. Buda mobil görünümde işimize yarayacaktır.
Şimdi ise deneme yazılarını silip bootstrap sitesindeki hazır kodlardan kart ekleyelim. İlk olarak img klasörü oluşturup 1.jpg adında bir resim dosyası ekledim. Ardından ilk col-cm-4 içine
ekledim. ilk div'de card yazdığı için bootstraptan card sınıfını çağırdı. ardından diğer sınıflarda top, body, title ile uygun sınıfları çağırdık. Buradaki önemli kısım btn-primary kısmıdır. primary yerine secondary, danger gibi renkleri kullanabilirsiniz. Yani primary avi rengini veren koddur. ikincisinin içine
ekledim. footer kısmıda mevcut görün ve başka şeyler ekleyebilin diye boş bıraktım .Üçüncüsünün içineyse
Ekledim. Buradaysa text-white ile yazılara beyaz rengini verdim. Dark yazarsanız yazılar siyah olur. Footer alanlarını kaldırıp butona danger ile kırmızı rengini verdim .Görünüşüyse
Mobil Görünüşüyse
Gördüğünüz gibi hem responsive hem de bir kaç kod ile basit bir şekilde güzel bir görünüm yakaladık.
Yeni makalelerimizde görüşmek dileğiyle
İyi Forumlar
Bu gün sizlerle bootstrap hakkında bir makale göremediğim için konu hakkında bilgi alışverişinde bulunmaya karar verdim.
Çoğu kişi web tabanlı uygulamalarda sadece html,css,php,asp gibi dillerin kullanıldığını düşünür.
Oysa ki bir web sitesini diğerlerinden ayıran, daha fonksiyonel ve göz alıcı efektlerin çoğu ve en önemlileri javascript diliyle ve bootstrap gibi altyapılarla verilir.
Bootstrap'ın önemli olan bir diğer özelliği hazır bir çok css, javascript sınıfı bulundurması ve bunları hızlı bir şekilde tek kod kullanarak projemize dahil edebilmemizdir.
Ve bir diğer özelliği ise mobil uyumlu olmasıdır.
Hazır scriptleri kontrol ettiğimizde container, col gibi class ların olduğunu arkaplanda css'i incelediğimizde sayfalarca kodlama yapıldığını görmekteyiz.
Elbette bu kodlamaları her site yazacağımızda sıfırdan yapmıyoruz. Bootstrap kütüphanesi'ni indirerek projemize dahil ettikten sonra tek yapmamız gereken bootstrap'ın sitesini ziyaret etmektir.
Siteye girdiğimizde sol alanda gezinerek çoğu nesnenin hazır kodlarını bulabilirsiniz.
Öncelikle yapmamız gereken web sayfamıza bootstrap dosyalarını <head></head> etiketleri arasına eklemek.
Kodlarımızı da paylaşayım
HTML:
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">Ben indirdiğim bootstrap dosyalarını sunucumdaki css ve js klasörlerinin içine attığım için linkin href ini ona göre verdim.
Ardından </body> in hemen önüne aşağıdaki kod ile bootstrap'ın javascript dosyasını projeme dahil ettim.
HTML:
<script src="js/bootstrap.js"></script>Artık elemanlarımızı kullanmayı öğrenelim.
İlk olarak şunu unutmayalım kullanacağımız kodların hepsi mobil uyumludur. Container mantığını öğrenelim.
Container sayfanın sağ ve sol tarafından otomatik %10 gibi bir boşluk bırakarak sayfanın ortasında çalışmamızı sağlar. Bundan dolayı tüm kodlarımızı container class'lı divimizin içinde yazmalıyız.
HTML:
<div class="container">
<!-- Tüm Kodlar Buraya ! -->
</div>Artık nasıl satırlara böleceğimizi öğrenelim.
HTML:
<div class="row"></div>Bu tanım bootstrapta bir satır anlamına gelmektedir. Boyutu değişkendir. İçine yazacağınız kodlar ile satırı sütunlara bölersiniz.
Şimdi satırımızı sütunlara bölelim.
HTML:
<div class="col-md-4"></div>Burada anlamamız gereken nokta bir satır maksimum 12 ye bölünebilir. Yani col-md-4 class lı divimizi maksimum 3 kez yazabiliriz.
Yazdığımızda kodumuzun son hali şöyle olacaktır.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="css/my.css" rel="stylesheet">
<title>Başlık</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
deneme
</div>
<div class="col-md-4">
deneme1
</div>
<div class="col-md-4">
deneme2
</div>
</div>
</div>
<script src="js/bootstrap.js">
</script>
</body>
</html>Ben kendi yazdığım my.css ide ekledim sonrasında ise col-md divlerimin arasına deneme yazısı yazdım. Sonuç=
Ve gördüğünüz gibi mobil görünümde ise otomatik olarak alt alta geldi.
Ardından class="col-md-4 mt-2" şeklinde class a mt-2 eklediğimizde bunun açılımı margin-top anlamındadır ve 32 px'lik yukarıdan boşluk bırakır. Buda mobil görünümde işimize yarayacaktır.
Şimdi ise deneme yazılarını silip bootstrap sitesindeki hazır kodlardan kart ekleyelim. İlk olarak img klasörü oluşturup 1.jpg adında bir resim dosyası ekledim. Ardından ilk col-cm-4 içine
HTML:
<div class="card" >
<img src="../img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<center><a href="#" class="btn btn-primary">Go somewhere</a></center>
</div>
</div>ekledim. ilk div'de card yazdığı için bootstraptan card sınıfını çağırdı. ardından diğer sınıflarda top, body, title ile uygun sınıfları çağırdık. Buradaki önemli kısım btn-primary kısmıdır. primary yerine secondary, danger gibi renkleri kullanabilirsiniz. Yani primary avi rengini veren koddur. ikincisinin içine
HTML:
<div class="card">
<center><div class="card-header">Manzara</div></center>
<img src="../img/1.jpg" class="card-img-top" alt="">
<div class="card-body">
<center><h5 class="card-title">Manzara Resimleri
</h5></center>
<div class="card-text">deneme yazısı</div>
</div>
<div class="card-footer">Manzara Footer</div>
</div>ekledim. footer kısmıda mevcut görün ve başka şeyler ekleyebilin diye boş bıraktım .Üçüncüsünün içineyse
HTML:
<div class="card text-white" >
<img src="../img/1.jpg" class="card-img-top" alt="">
<div class="card-img-overlay mt-5">
<center><h5 class="card-title">Manzara Resimleri
</h5></center>
<center><div class="card-text">deneme yazısı</div>
<a href="#" class="btn btn-danger">devam</a>
</center>
</div>
</div>Ekledim. Buradaysa text-white ile yazılara beyaz rengini verdim. Dark yazarsanız yazılar siyah olur. Footer alanlarını kaldırıp butona danger ile kırmızı rengini verdim .Görünüşüyse
Mobil Görünüşüyse
Gördüğünüz gibi hem responsive hem de bir kaç kod ile basit bir şekilde güzel bir görünüm yakaladık.
Yeni makalelerimizde görüşmek dileğiyle
İyi Forumlar
Daha önce ne olduğunu, nasıl çalıştığını ve mantığını falan araştırmıştım ama bu kadar iyi ve öz şekilde anlatan bir yer ile karşılaşmamıştım diyebilirim. Tekrardan ellerinize sağlıkkk 
