Bootstrap nedir ne işe yarar?
Bootstrap front-end geliştiricilerinin son zamanlarda en çok tercih ettiği tasarım framework lerinden birisidir. Son sürümü “Bootstrap v5.0.0-beta1” olarak karşımıza çıkmaktadır. Bootstrap HTML, CSS, JavaScript temelli hazır kod blokları bulundurur. Bu hazır kod blokları ile web sitelerinin geliştirilmesi oldukça pratiktir.
Örneğin, Bootstrap ile hazır bir navigation bar, carousel, form, dropdown menü, slider gibi yapılar kullanabiliriz. Bootstrap aynı zamanda hazır tema, grid sistem ile site içi hizalama gibi birçok özelliği ile bize fayda sağlıyor. Bootstrap’in kullanımının bu kadar yaygın olmasının sebeplerinden biri de responsive özelliğinin olmasıdır. Bu özelliği sayesinde sitemiz farklı ekran boyutlarına duyarlı olacaktır.
Yani farklı ekran boyutlarında görünüm bozulmadan web sitelerini görüntüleyebiliriz. Bootstrap web dünyasında oldukça önemli bir yere sahip fakat avantajlarının yanında kullanım yerlerine göre dezavantajları da bulunmaktadır.
HTML Sayfasına Nasıl Bootstrap Ekleyebiliriz?
Web sitemizde Bootstrap yapılarından ve özelliklerinden faydalanmak için HTML sayfamıza Css ve JavaScript dosyalarını import etmemiz gerekiyor. getbootstrap.com sayfasında bulunan get started kısmında HTML sayfamıza eklememiz gereken CSS ve JavaScript dosyaları için linkler yer alıyor bu linkleri kopyalayıp HTML sayfamıza yapıştırarak Bootstrap yapılarını kullanmaya başlayabiliriz.
JS
JQuery, Popper ve JS dosyalarının linkleri </body> etiketinden hemen önce yerleştirilir.
<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>
CSS
Bootstrap için gerekli olan CSS dosya linki <head> </head> etiketleri arasına yerleştirilir.
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">
Hangi Durumlarda Bootstrap Tercih Etmemeliyiz?
Bootstrap hazır yapılar bulundurur. Bu yapılarda değişiklik yapılmadığı takdirde oldukça kullanışlıdır, yapıların kullanmak istemediğimiz kısımlarını değiştirmeye çalıştığımızda birçok sorunla karşılaşabiliriz. Örneğin, kullanmak istediğimiz özellik ya da nesne yaptığımız değişikler sonucunda tamamen bozulabilir.
Bu nedenle Bootstrap yapıları özelleştirme yapmaya müsait değildir. Bu sebeple özelleştirmek isteyebileceğimiz yapılarda Bootstrap tercih etmemeliyiz.
1. Bootstrap ücretli mi?
Bootstrap ücretsiz ve açık kaynak kodlu bir framework olarak bize birçok konuda kolaylık sağlıyor. Bu da Bootstrap in yaygın olarak kullanılma sebeplerinden bir tanesidir.
2. jQuery bootstrap nedir?
JQuery bir JavaScript kütüphanesidir. Bootstrap yapıları HTML, CSS ve JS temelli olduğundan zaman zaman Bootstrap yapılarında JQuery ile karşılaşmak mümkün.
3.Bootstrap CSS kütüphanesi nedir?
Bootstrap kod blokları HTML, CSS, JS kütüphaneleri kullanılarak oluşturuluyor. CSS kütüphanesi Bootstrap içinde oldukça önemli bir yere sahiptir. Bootstrap içerisindeki yapılarının biçimlendirilmesinde büyük rol oynar.
Ben İlkay Düzgün … hakkımda detaylı bilgiye sahip olmak ve bana ulaşmak için web sitemi ziyaret edebilirsiniz.