BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

Html, Css veya Web sitesi tasarımı ile ilgileniyorsanız yolunuz mutlaka Bootstrap ile kesişmiştir. Birçok yerde önünüze çıkan bu framework’ü hala kullanmaya başlamadıysanız daha fazla geç kalmayın derim. Bu yazımızda öncelikle Bootsrap Nedir? Ne İşe Yarar? Bootstrap Kullanmanın Avantajları Nelerdir? Bootstrap Nasıl Kullanılır? konularından bahsedeceğim.

Daha sonraki yazılarımda ise Bootstrap bileşenlerinin tamamını tek tek anlatmayı düşünüyorum. Detaylar için A’DAN Z’YE BOOTSTRAP DERSLERİ yazımı okuyabilirsiniz.

Şimdi Bootstrap Nedir? ile başlayalım.

BOOTSTRAP NEDİR?

Bildiğiniz gibi web sitelerinin tasarımını yaparken öncelikle Html olarak kodlarız. Daha sonra bu Html kodlarına, Css kullanarak istediğimiz şekilde stiller veririz. Son olarak da sayfalarımıza etkileşim kazandırabilmek için Javascript ( veya Jquery, Vue, Angular vb.. ) kullanırız. Tabiki işimiz burada bitmez. Bu tasarımların responsive özellikte olması için yani her cihaz ile uyumlu hale getirebilmek için birde media query sorgularını kullanırız. 

Eğer responsive web tasarımı hakkında daha fazla bilgi almak isterseniz RESPONSİVE WEB TASARIM NEDİR? yazımı okuyabilirsiniz.  

Buraya kadar hala Bootstrap Nedir bahsetmedik. Şimdi gelelim bu konuya. İşte Bootstrap, içerisindeki hazır html, css ve javascript kodları ile işlerimizi çok kolaylaştıran, hızlandıran, ücretsiz ve açık kaynak kodlu bir framework’tür.

Bootstrap’ın en güzel tarafı ise yazılan kodların zaten responsive halde olması. Yani tasarımlarımızın tablet, telefon, masaüstü bilgisayar ve her türlü ekran çözünürlüğüne duyarlı olmasını sağlayabiliyoruz. Ufak tefek düzeltmeler dışında bizim çok fazla media query sorgusu yazmamız gerekmiyor. Zannediyorum Bootstrap Nedir sorusu yavaş yavaş kafamızda şekillenmeye başlamıştır.

Peki Bootstrap kullanarak neler mi yapabiliyoruz?

Gelin birlikte bakalım. İşte Bootstrap kullanarak yapabileceklerimizden bazıları:

Bootstrap Carousel

Bootstrap Form

Bootstrap Navbar

Bootstrap Table

Bootstrap Button

Bootstrap Card

Bootstrap Badge

Bootstrap Pagination

Bootstrap Alert 

Bootstrap Progress

Bootstrap Breadcrumb

Bootstrap Media

Bootstrap ile bunların dışında,

• Tooltip
• Popover

• Collapse
• Dropdown
• Modal
• Navs ve daha birçok bileşeni yapabiliyoruz.

Şimdi daha iyi anlaşılması adına Bootstrap kullanarak ne kadar kolay bir şekilde butonlarımızı oluşturabileceğimize bakalım. Burada hangi class’ın ne işe yaradığına felan takılmayın. İlerleyen yazılarda tüm Bootstrap bileşenlerini detaylı bir şekilde inceleyeceğiz. Şimdilik sadece az bir kod ile nasıl tasarımlar yapabiliyoruz kafanızda şekillenmesi adına örnek veriyorum.

Html Kodları

Oluşan butonlarımız görünümü

 

Nasıl sizce de harika değil mi? Hiç Css kodu yazmadan sadece butonlarımıza bazı class isimleri vererek butonlarımızı oluşturduk. Yukarıda bahsettiğimiz bileşenlerin birçoğu bu şekilde gerekli class isimlerini vererek yapabileceğimiz bileşenlerdir.

BOOTSTRAP KULLANMANIN AVANTAJLARI NELERDİR?

Bootstrap kullanarak tasarımlarımızı yapmamızın bize bir çok avantajı olacaktır. Şimdi bu avantajların neler olduğuna bakalım.

• En önemli avantajı, işlerimizi kolaylaştırması yani bize zaman kazandırması. Bootstrap kullarak tasarımlarımızı çok daha hızlı bir şekilde kodlayabiliriz.
• Kullanmış olduğu grid sistemi sayesinde tasarımlarımız responsive olmuş olacaktır. Belki birkaç media query sorgusu dışında bize bir iş düşmeyecektir.
• Şuan bu platformdaki en popüler framework’tür. Bu yüzden istediğiniz örnekleri internette bulma ihtimaliniz çok yüksektir.
• İçerisinde ihtiyacımız olabilecek herşeyi barındırıyor desek abartmış olmayız sanırım. Örneğin menu, pagination, breadcrumb, button, table, form, slider, modal, tooltip, popover ve dahası…
• Arkasında Twitter gibi büyük bir destekçisinin olması.
• Kısa zamanda ve kolay bir şekilde öğrenilebilir.
• Herhangi bir ücret ödemeden kullanabilirsiniz.
• Kendi içerisinde sıkıştırılmış css ve js dosyaları bulunuyor. Bunları kullanarak sitenizin daha hızlı açılmasını sağlayabilirsiniz.
• Tüm site genelinde tutarlılığı sağlamış olursunuz.
• Front-end Developer olarak yapacağınız iş başvurularınızda birçok şirketin soracağı sorulardan birisi de Bootstrap’ı etkin bir şekilde kullanabiliyor musun? olacaktır. Yani Bootstrap’ı etkin bir şekilde kullanmayı öğrenirseniz iş başvurularında size fayda sağlayacaktır.  

BOOTSTRAP NASIL KULLANILIR?

Bootstrap’ın son versiyonu olan Bootstrap 4, Ocak 2018’de yayınlandı. Şuan ki anlatımımı Bootstrap 4 üzerinden yapacağım.

Bootstrap’ı kullanmanın 2 farklı yolu var. 

1 – CDN Yöntemi ile Projeye Dahil Etme

Bootstrap’ı CDN ile projemize dahil ederiz. Bu yöntem ile herhangi bir indirme işlemine gerek kalmaz. Direk kullanımına başlayabiliriz. Hatta Bootstrap’ın tasarımlarımıza hızlı başlamamız adına hazır Html5 başlangıç şablonu bulunuyor. Tüm gerekli dosyalarda CDN olarak dahil edilmiş bir şekilde bizlere sunulmuş. 

İşte Hazır Başlangıç Şablonu

Bu başlangıç şablonunu Html sayfanıza ekledikten sonra Bootstrap ile sitenizi yapmaya başlayabilirsiniz. 

 Not  CDN olarak kullanmanın avantajı, siteniz normalden çok daha hızlı bir şekilde açılır. Bu yüzden CDN olarak kullanmanızı tavsiye ederim.

 Not  Dikkat ederseniz başlangıç şablonunda jquery.min.js ve popper.min.js dosyalarıda bulunuyor. Bunlar javascript gerektiren Bootstrap bileşenleri için gerekli dosyalar. Yani Bootstrap’ın sadece Css içeren bileşenlerini kullanacaksanız bunlara ihtiyacınız olmayacaktır. Ama javascript gerektiren bileşenler ( modals, tooltip, slider vb.. ) kullanacaksanız bunlarında olması gerekiyor. 

2 – Bootstrap’ın Kendi Sitesinden Kaynak Dosyalarını İndirip Projeye Dahil Etme

İkinci yöntem olarak Bootstrap’ın sitesine giderek kaynak dosyalarını bilgisayarımıza indirmemiz gerekiyor. Bootstrap’ın download sayfasına gitmek için tıklayın.

Bu sayfaya gittiğinizde, aşağıdaki resimde olduğu gibi 2 farklı Download butonu olacaktır.

Compiled CSS ve JS, kısmındaki Download butonuna tıklayarak indirirseniz, olmazsa olmaz css, js dosyalarının derlenmiş ve küçültülmüş halini indirmiş olursunuz.  

Source Files, kısmındaki Download butonuna tıklayarak indirirseniz, içerisinde Bootstrap’ın tüm dosyalarını ( Sass dosyaları vb.. de bulunuyor) indirmiş olursunuz. Eğer Sass hakkında bilginiz yoksa Compiled CSS ve JS kısmından indirme işlemini gerçekleştirin.

Artık Bootstrap’ın versiyon 4.2.1 olanını indirdik. Şimdi de indirdiğiniz dosyaların içerisinden gerekli css ve js dosyalarını projenizde istediğiniz bir dizine kaydederek sayfanıza referans verin. Bu işlemlerin ardından artık Bootstrap ile sitenizi tasarlamaya başlayabilirsiniz. 

 Önemli  Tasarım geliştirme aşamasında sıkıştırılmamış css ve js dosyalarını kullanabilirsiniz. Ama en son tasarımlarınız bittikten sonra bu sıkıştırılmamış css ve js dosyalarını min yani sıkıştırılmış haliyle değiştirmeniz sizin yararınıza olacaktır. Böylece sitenizin açılış hızına olumlu anlamda katkı sağlamış olursunuz. 

 ⇒  Son olarak şunu belirtmekte fayda var diye düşünüyorum.

Eğer Html, Css ve Jquery konularında eksikleriniz varsa öncelikle bu konulardaki eksiklerinizi gidermenizi öneririm. Bootstrap kullanarak tabiki tasarımlarınızı yapabilirsiniz. Ama neyin nerden geldiğini bilmezseniz veya herhangi küçük değişiklikler yapmanız gerektiği durumlarda Html, Css ve Jquery konularında eksikleriniz varsa tam verim alamayabilirsiniz.

Öncelikle Html, Css ve Jquery konularında eksiklerinizi tamamlayıp daha sonra zamandan kazanmak adına tasarımlarınızda Bootstrap kullanmanız daha isabetli olacaktır.

Html, Css ve Jquery ile ilgili geniş kapsamlı ders anlatımlarım bulunuyor. Hemen hemen her konuyu anlatmaya çalıştım. Bunlarla ile ilgili,

A’DAN Z’YE HTML DERSLERİ

A’DAN Z’YE CSS DERSLERİ

A’DAN Z’YE JQUERY DERSLERİ

yazılarımı inceleyebilirsiniz.

BOOTSTRAP TARAYICI DESTEĞİ

Bootstrap 4 hemen hemen bütün tarayıcılarda (Chrome, Firefox, Internet Explorer 10+, Edge, Safari ve Opera) sorunsuz bir şekilde çalışıyor. Sadece Internet Explorer 9 ve aşağısı tarafından desteklenmiyor.

Eğer Internet Explorer 9 ve aşağısı için de sorunsuz bir şekilde çalışmasını istiyorsanız Bootstrap 3’ü kullanabilirsiniz.

Bir yazımızın daha sonuna geldik.

Bootstrap Nedir? Ne İşe Yarar? Nasıl Kullanılır? artık öğrendiğimize göre şimdi Bootstrap Bileşenlerini öğrenmeye başlayabiliriz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.