Bootstrap Kullanımı

Bootstrap Kullanımı

Artık çoğu web sitesi bootstrap kullanıyor bizde derslerimizde çoğu zaman fazla uğraşmamak için bootstrap kullanabiliyoruz, bende nasıl kullanıldığı ile ilgili bir yazı yazmaya karar verdim videolarda genelde kullanımı hakkında bilgi veriyoruz ama burda yazıya dökmek faydalı olucaktır..

Bootstrapı kullanabilmek için sitesine girdiğinizde get started butonuna basın ve karşınıza bazı kodlar çıkıcak en üstteki kod bootstrapın css kodlarıdır, aşağıdaki kodlar ise javascript kodlarıdır 3 tane kod görüceksiniz bunlar jquery kütüphanesi ve bootstrapın kendi javascript kodlarıdır aşğıdaki örnekte kodları gösterdim. çalışabilmesi için hepsini eklemeniz gerekiyor.. 



Bootstrap css kodu
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


Bootstrap jquery ve javascript kodları

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Bu kodları <head> </head> etiketleri arasına eklediğiniz zaman bootstrapı kullanabilirsiniz..

Bootstrapın yapısına gelicek olursak kolon sistemi ile çalışan bir kütüphanedir. toplamda 12 tane kolon vardır col-md-1 dediğiniz zaman  bir kolonluk bir genişleme olur bunlardan tam 12 tanesi sayfayı tamamen kaplar bir dive col-md-12 verdiğimiz zaman sayfanın tamamını kaplamış oluruz aşağıdaki örnektede görebilirsiniz..




tabi genişlik vermek için sadece col-md kullanılmaz col-xs ile daha ince ayarlar verebilirsiniz özellikle telefon ekranları ufak olduğu için kolonları daha ufak parçalamak gerekebilir bu durumda col-xs kullanılır tabletler için ise col-sm kullanılır yani hepsi heryerde tabiki kullanılır ama ince ayarlar çekmek için farklı kodlarda kullanılıyor. daha detaylı bilgiyi bu sayfadan bulabilirsiniz verdiğim adres bootstrapın kendi sitesidir türkçe desteğide vardır hepsi anlatılıyor.. 

Bide benim genelde sık kullandığım kodlardan bahsediyim mb-2  bu kod css'te margin bottom 2px demektir yani kısaltılmış hali, pb-2 bu kod ise padding bottom 2px kısaca css teki kodları bu şekilde kısaltarak kullanabiliriz unutmadan şunuda sölim bootstrap responsive bir yapıya sahiptir eklediğiniz butun kodlar tüm cihazlarda uyumlu çalışır yani sayfa küçüldüğünde kodlar bozulmaz ekrana göre kendini ayarlar kolon sistemi zaten bu yüzden yapılmıştır sadece bootsrapın verdiği kodları kullanmaya çalışın kendiniz direk css ile müdahale ederseniz responsive özelliğini kaybeder tabi her css kodu için geçerli değil mesela renk vericeksiniz,renk vermenin responsive yapıya bir zararı olmaz. sonuçta css te kullanılıyor zaten, neyse benim bu video'da anlatıcaklarım bukadardı herkese iyi çalışmalar dilerim..


Bizi youtube kanalımızdan'da takip edebilirsiniz http://bit.ly/2PjNlaX





Yorumlar

Popular

Youtube İçin Abone Ol Animasyonu yapmak