Bootstrap Eğitimi #1 -> Kurulum


1-Kurulum.png

Talk is cheap , show me the code !

Merhaba arkadaşlar , öncelikle Bootstrap’i geliştiren Twitter’a sevgilerimi gönderiyorum. Bootstrap; tasarım yapmayı hem sevdiriyor , hem de kolay yapısı sayesinde fişek gibi kodlayabiliyoruz.

 

Kısaca bahsetmek gerekirse Bootstrap , bir CSS frameworkudur. Açık kaynak kodludur ve tamamen ücretsizdir. Tüm kullanım kılavuzuna anında erişilebilir. Kullanışlı yapısı sayesinde kısa sürede muazzam tasarımlar yapabiliriz. Biz , Bootstrap’in en güncel sürümü olan Bootstrap 4.1.1 üzerinden gideceğiz.

 

Bootstrap 4 yazılarımı bir eğitim seti olarak düşünebiliriz.  Basitten karmaşığa doğru bir müfredatta ilerleyeceğiz ve hepimiz güzel tasarımlar yapabileceğiz. Bootstrap’e dair tüm bilgileri öğrendikten sonra da , bir e-ticaret sitesinin tasarımını yapacağız.

 Eğitim boyunca yapılan çalışmaların github linkini, her yazının en alt kısmına ekleyeceğim. Haydi başlayalım…

Bootstrap ile kodlama yapabilmek için çeşitli editörler bulunmaktadır. Web programlarken hangi editörü kullanıyorsanız onu kullanabilirsiniz. Ben PhpStorm kullanıyorum ve PhpStorm üzerinden ilerleyeceğim. 

https://www.jetbrains.com/phpstorm/  adresinden PhpStorm’un deneme sürümünü indirebilirsiniz. Kod tamamlama özelliği ve göze hitap eden bir arayüzü olduğu için bu editörü kullanıyorum. Beğenirseniz full sürümünü satın alabilir veya öğrenci paketinden yararlanabilirsiniz.

phpstormdownload-1.png

PhpStorm haricinde ; Sublime Text, Notepad++ , Adobe DreamWeaver gibi editörler de mevcuttur. Dilediğinizi kullanabilirsiniz.

İlk olarak masaüstüne “BootstrapDeneme” adlı bir klasör oluşturuyoruz ve PhpStorm’da bu klasörün içine giriyoruz. index.html adlı bir dosya oluşturuyoruz.

1-3-1.png1-4.png

Html , head , body taglarımızı açıyoruz.

1-5.png

Şimdi sıra Bootstrap 4’ü entegre etmeye geldi. Bunun için :

https://getbootstrap.com/docs/4.1/getting-started/download/  adresine giriyoruz ve Bootstrap CDN linklerini aşağıdaki gibi index.html dosyamıza ekliyoruz.

1-7.png

1-8.png

 

Şimdi index.html dosyamızı açıyoruz ve “Hello World” yazısını görüyoruz.

1-9.png

 

İlk aşama tamamlandı. Tebrikler…

 

Head tagının içindeki ;                                                                                                                              

"utf-8">

Kodu , Türkçe karakter sorununu ortadan kaldırır.

"viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Kodu, sitenin responsive olmasını; yani mobil uyumlu olmasını sağlar.

Eğitim Github Linki :

https://github.com/macaris64/bootstrapegitim

Artık kodlamaya hazırız.

Bir sonraki yazıda görüşmek üzere…

Bootstrap Eğitimi #1 -> Kurulum

Giriş Yap

Hoşgeldin
Don't have an account?
Kayıt Ol

Şifreni Yenile

Back to
Giriş Yap

Kayıt Ol

Ekimize Katılmaya Hazırmısın

Back to
Giriş Yap
Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals