Bootstrap nedir ?

Merhaba, bu makalemiz de Bootstrap nedir sorusuna genel bilgiler verecek küçük örnekler yapacağız. Bootstrap, Twitter tarafından geliştirilen bir CSS paketidir. Responsive tasarımlar geliştirmek için harika bir araçtır. Kısacası bir CSS framework diyebiliriz.

Bootstrap nedir?

Bootstrap son yılların en çok kullanılan css frameworklerindendir. Kolay kullanımı ve kaynağının fazla olmasından dolayı ve tabiki Twitter’ın desteğinden oldukça popülerdir.

Bootstrap nasıl kurulur?

Öncelikle http://getbootstrap.com adresinden son sürümünü indiriyoruz. Ben bu yazıyı yazdığım sıralarda sürüm “3.3.6” versiyonundaydı. Siz yazıyı okurken hangi versiyonda olacağı bilinmez.

Dikkat! Bootstrap jQuery kütüphanesine ihtiyaç duyar!

Bootstrap Download

Bootstrap Download

İndirme işlemi tamamlandığında css, fonts ve js klasörlerinin olduğunu göreceksiniz. Tam olarak klasör yapısı şu şekilde;

Bu dosyaları proje dizinimize atıyoruz. Sonrasında index.html isminde bir dosya oluşturalım ve Bootstrap ile ilk örneğimizi yapalım.

index.html dosyamızın içeriği aşağıda ki şekilde olmalıdır.

Ben örneklerimi codepen üzerinden yaptığım için cdn ile çağırıyorum dosyaları. Siz local dosyalarınızdan çağırabilirsiniz.

Gördüğünüz gibi bootstrap.min.css, jquery-2.2.1.min.js ve bootstrap.min.js dosyalarını çağırıyoruz. Evet artık Bootstrap kütüphanesini kullanabiliriz. Küçük bir örnek yapalım.

http://getbootstrap.com/css/ adresinden kullanabileceğiniz bütün css seçicilerini görebilirsiniz.

http://getbootstrap.com/javascript/ adresinden jQuery ile kullanabileceğiniz eklentileri görebilirsiniz.

İlk örneğimizde basit bir h1 başlığı ve yanına ondan daha küçük bir yazı yazdıralım. Bunu h1 ve small etiketleri ile yapabilirsiniz.

Bütün kod aşağıda ki gibi;

Bootstrap birçok farklı tasarım yapabilirsiniz. İlerleyen zamanlarda daha gelişmiş örnekler ile makaleler yazacağım.

Codepen örneğine http://codepen.io/cihanaksoy/pen/aNBgdR bu adresten ulaşabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir