Bootstrap'a Giriş

Bootstrap'a Giriş

BOOTSTRAP NEDİR?

Web sayfalarının ve web uygulamalarının front-end yani ön yüz tarafını geliştirmek amacı ile kullanacağımız framework – kütüphanedir. Twitter tafarından HTML5, CSS3 ve JAVASCRİPT ile geliştirilmektedir. Tüm cihazlara ve tüm tarayıcılara uyumlu bir tasarım yapabilmek amacıyla oluşturulmuştur.

Bootstrap bir web sitesi için gerekli olan tüm ögeleri içerdiği için bir siteyi komple bir bütün olarak tasarlayabilirsiniz.

Bootstrap açık kaynak kodlu bir sistem olduğu için projemizde kullanırken kendimize göre renklendirmemiz ve şekillendirmemiz mümkündür. Bootstrap’ın bize sağladığı imkanlardan faydalanarak bir web sayfası tasarımı gerçekleştirmek bize büyük kolaylık sağlamaktadır.

NASIL KULLANILIR?

Bootstrap sitesine giriş yaptıktan sonra ister GET STARTED butonuna tıklayarak cdn şeklinde isterseniz DOWNLOD butonundan dosyaları indirerek projemize dahil edebiliriz.

Bootstrapın javascript kütüphanesini kullanabilmek için jquery e ihtiyacımız var bunun içinse jquery nin sitesinden dosyayı indirerek ya da cdn şeklinde projemize dahil etmemiz gerekmektedir.

Tabi aynı zamanda Bootstrapın yine bazı özelliklerini kullanabilmek için popper a ihtiyacımız var bunun içinse tekrardan tarayıcımıza popper.js.org adresini yazarak popper ın sitesine giriyoruz anasayfa da bizi karşılayan install v1 butonuna tıklıyoruz ve bizi github sayfasına yönlendiriyor. Burada ise installation başlığı altındaki linke tıklayarak tekrardan cdn şeklinde yada dosyayı kaydederek projemize dahil ediyoruz.

Sıra bootstrap ı dosyalarımıza dahil etmeye geldi. Bunun için ilk önce ben bootstrap4 adında bir klasör oluşturdum. İndirmiş olduğumuz dosyaları da sırasıyla kendi klasörümüze taşıyalım. İlk önce yapmamız gereken bootstrap4 klasörümüzün içerisine bir tane CSS bir tane JS klasörleri oluşturmak. Ardından Bootstrap ın sitesinden indirmiş olduğumuz klasörü rar dan çıkartıyoruz. Ve çıkarmış olduğumuz klasörün içerisinde bulunan css klasörü içerisindeki bootstrap.min.css dosyasını kendi oluşturmuş olduğumuz CSS klasörü içerisine taşıyoruz. Aynı şekilde bootstrap ın orjinal klasörü içerisinde bulunun js klasörü içerisinde ki bootstrap.min.js dosyasını da kendi oluşturmuş olduğumuz js klasörü içerisine taşıyoruz. Ardından indirmiş olduğumu jquery.js ve popper.js dosyalarını yine kendi oluşturmuş olduğumuz js klasörü içerisine taşıyoruz. Dosyalarımızı kendi klasörlerimizin içerisine yerleştirdiğimize göre şimdi sıradaki işlem olarak oluşturmuş olduğumuz index.html sayfasında dosyalarımızın yollarını belirtelim.

İlk önce index.html dosyamızda bulunan title bölümü altına 

<link rel=”stylesheet” href=”css/bootstrap.min.css”>


kodunu yazarak css dosyamızı dahil etmiş bulunuyoruz.

Ardından js dosyalarımızı dahil etmek için sayfanın alt kısmında bulunan </body> etiketinin kapanış tağının hemen üst tarafına

<script type=”text/javascript” src=”js/jquery-3.3.1.min.js”></script>
<script type=”text/javascript” src=”js/popper.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>


dosylarımıza eklemiş olduk. Burada dikkat edilmesi gereken konu kodların ve dosya yollarının düzgün bir şekilde yazılmış olması. Bir diğer önemli konu ise jquery dosyamızın etiket sıralamasında en üstte olmasıdır.

Ardından js dosyalarımızı dahil etmek için sayfanın alt kısmında bulunan etiketinin kapanış tağının hemen üst tarafına dosylarımıza eklemiş olduk. Burada dikkat edilmesi gereken konu kodların ve dosya yollarının düzgün bir şekilde yazılmış olması. Bir diğer önemli konu ise jquery dosyamızın etiket sıralamasında en üstte olmasıdır.

Şimdi de cdn ile dosyaları nasıl dahil ederiz onu öğrenelim arkadaşlar. İlk önce www.bootstrap.com sitesine giriş yaptıktan sonra karşımıza gelen sayfada DOWNLOAD yerine GET STARTED butonuna tıklıyoruz.

Karşımıza gelen sayfada iki şekilde dosyaları dahil edebiliriz.

1. Yöntem cdn linklerini tek tek kopyala yapıştır mantığı ile yapabiliriz. Bunun için açılan sayfada CSS başlığı altındaki kodu tamamını kopyalayıp kendi html dosyamızda title bölümü altına direkt kopyalayabiliriz. Gene aynı mantıkla JS başlığı altında ki kodları kopyalayarak </body> etiketimizin hemen üstüne yapıştırabiliriz.

2. Yöntem ise Starter template başlığı altındaki kodların tamamını html dosyamıza yapıştırabiliriz. Burada dikkat etmemiz gereken konu ise html dosyamızın tamamen boş olması.

Bu şekilde cdn mantığı ile de bootstrap dosyalarını kendi html dosyamıza eklemiş olduk.