Altın Konu BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

[Fauda]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

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.

Ş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 PAGİNATİON​

BOOTSTRAP ALERT​

BOOTSTRAP PROGRESS​

BOOTSTRAP BREADCRUMB​

BOOTSTRAP MEDİA​

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ı

1 2 3 4 5

<button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button>

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ÖNTEMİ İLE PROJEYE DAHİL 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https:/ /stackpaffth. bootstrapcdn.com/bootstrap/ 4.2.1/css/bootstrap.min. css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title></title> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https:// code.jquery.co m/jquery-3.3.1 .slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="ht tp s://c dnjs.c loudflare.co m/ajax/libs/popper.js /1.14.6/um d/popper.min.js" integrity="sha384-wHAiFfRlMFy6i 5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src=" ckpath.boot stra pcdn.com/boo tstrap/4.2.1/js/bo otstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>

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’IN KENDİ SİTESİNDEN KAYNAK DOSYALARINI İNDİRİP PROJEYE DAHİL 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.

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

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

 

[Replicant]

Paylaşım için teşekkürler

 

[EsatOfficial]

Eline Sağlık

 

[Fauda]

Paylaşım için teşekkürler

Rıca ederim

 

[Fauda]

Eline Sağlık

Rıca ederim