Bootstrap Dersleri

Merhaba arkadaşlar. Bootstrap dersleri mize hoşgeldiniz. Derslerimizde diğer internetten sitelerinden farklı bir teknik kullanacağım. Ben “Engin Dalga” ilk defa bootstrap kelimesini duymuş birisi olarak derslere başlayacağım. Sizlere bootscrap derslerini anlatırken bende birlikte öğreneceğim ve derslerimizi bitirdiğimizde inşallah benimle birlikte derslerimi takip eden hedef kitlem ileri seviye bootsrap uzmanı olarak bootstrap derslerini sonlandıracağız.

 

Bootstrap Dersleri – 1. gün

Bootscap ifadesini google’da aratarak derslerimize başlayalım.

bootstrap dersleri1

Gördüğünüz gibi bootstrap internet sitesi http://getbootstrap.com . Bootstrap derslerimizde bu siteyi sıklıkla ziyaret edeceğiz. Site başlığından anladığımız kadarıyla Botstrap HTML, CSS ve JS i kendi içinde barındıran dünya çapında bir kütüphaneymiş. Yine burdan gördüğümüz kadarıyla son versiyonu v4 . Güzel hedefimiz bootstrap 4 öğrenmek olacak o zaman. http://getbootstrap.com  adresine girerek araştırmamızı biraz daha derinleştirelim.

bootstrap dersleri2

Bootstrap resmi internet sitesine girdik ve ilk incelememizi yaptık. Öyleyse bootstrap nedir ile başlayalım.

Bootstrap nedir?

Bootstrap responsive yani mobil uyumlu internet siteleri yapmanızı sağlayan bir kütüphanedir. Kendi tanımlarını yazacak olursak;

Bootstrap web üzerinde duyarlı, mobil-öncelikli projeler geliştirmek için en popüler HTML, CSS, JS kütüphanesidir.

Açık kaynak olarak piyasaya çıkmıştır. Yani internet sitesinden bootstrap kodlarını ücretsiz indirip üzerinde hertürlü değişikliği yapma hakkına sahipsiniz. Html , CSS ve JS (javascript) kodlarını içinde barındırır. Dolayısıyla derslerimizde Html, CSS ve Js ile sıklıkla karşılaşacağız. jQuery nin avantajlarından faydalanmamızı sağlar.  Hazır şablonlarla internet sayfalarımızı hızlı bir şekilde oluşturmamıza olanak verir.

Son versiyonu şu anda v4.0.0-alpha.6 . Bu versiyon alpha olmasına rağmen son gelişmelerden geri kalmamak için derslerimizde bu versiyonu kullanacağım. Fakat kararlı sürümü kullanmak isterseniz bootstrap v3.3.7 şu anki kararlı versiyonudur.

Bootrap internet sitesinin kendi içerisinde dökümanlar ve örnek çalışmalar fazlasıyla mevcut. Bootstrap dersleri mizde bunlardan sıklıkla faydalanacağız.

Bootstrap derslerinde takip edeceğimiz diğer sosyal ağlar ve internet siteleri

  1. https://twitter.com/getbootstrap
  2. https://github.com/twbs/bootstrap
  3. http://trbootstrap.com/getting-started/  ***** Türkçe kaynak

şimdilik bu kaynaklar Yenilerini buldukça buraya ekleyeceğim.

Bootstrap kullanımı

Bootstrap 4 ü sayfalarımızda kullanabileceğimiz 2 farklı yöntem var. Bunlar;

  1. Maxcdn ağını kullanarak dosyaları indirmeden maxcdn ağındaki kütüphanelere link vererek. Bunu nasıl yapacağız? Bootstrap 4 maxcdn ağından sağfamıza nasıl dahil edeceğiz? İşte cevabı

bunu sayfamızın <head> bölümüne dahil edeceğiz.

Sayfalarımızda kullanabileceğimiz Javascript pluginleri, jQuery, vePopper.js gibi ek özellikleri kullanmak istiyorsak

bunu </body> etiketinden önce projemize eklememiz gerekecek. Bunların ne işe yaradığını bende bilmiyorum. Sonraki derslerde birlikte öğreneceğiz.

  1.  Bootstrap 4 kütüphanesini kullanailmemiz için bir diğer yöntem dosyaları bilgisayarımıza  indirerek sayfamıza dahil etmek. Bootstrap 4 dosyalarını indirmek için https://v4-alpha.getbootstrap.com/getting-started/download/ adresine girmeniz gerekiyor. Kafanızı karıştırmamak için ben bu yöntemi kullanmayacağım.Yani sayfalarımızda bootscrap kütüphanesini maxcdn ağı üzerinden kullanacağız.

İnternetteki Maxcdn ağını kullanarak bootscrap kütüphanesini kullandığımız ilk sayfamız şöyle olacak:

(ilk bootstrap 4 örneğimiz )

Masaüstünüze “bootstrap çalışmalar” adlı bir klasör açın.

bootstrap dersleri4

Çalışmalarımızda html dosyamızı Notepadd++ programını kullanarak oluşturacağız. Bu programı bilgisayarınıza yüklemediyseniz https://notepad-plus-plus.org/download/v7.5.1.html adresinden indirerek bilgisayarınıza yükleyin ve masaüstünüze kısayolunu atın.

Notepadd++ programını açarak  ilk html sayfamızı “ilksayfamiz.html” olarak kaydedelim ve sayfamızın içine yukarıdaki kodları yapıştıralım. Daha sonra Çalıştır menüsünden “Launch in chrome” seçerek sayfamızın önizlemesini yapabiliriz.

(ilksayfamiz.html çalışmamızın kısa videosu)

 

Sayfamızı canlı olarak görmek için http://bootstrap.kodleon.com/ilksayfamiz.html  ı ziyaret edin.

bootstrap dersleri3

sayfamızdaki bu viewport meta etiketinin amacı sayfanızı mobil uyumlu hale getirmektir. Tüm meta etiketlerinde olduğu gibi viewport meta etiketi de sayfamızın head etiketi içerisinde kullanılmalıdır.

Böylece bootstrap 4 ü kullanarak ilk web sayfamızı oluşturmuş olduk. Burda gördüğünüz gibi yapacağımız örnekleri http://bootstrap.kodleon.com/  adresimize yükleyeceğim.

 

İlk derslerimize bitirirken sizlere bootstrap öğrenebileceğiniz bazı güzel kaynakları paylaşmak istiyorum.

Youtube Bootstrap  dersleri

Bir sonraki dersimizde bootstrap başlangıç temamızı oluşturmaya başlayacağız. Navbar( Menü) lerimizi oluşturacağız. Lütfen takipte kalın.

Bootstrap Dersleri – Navbar(Menü) Oluşturma

Leave a Reply

%d blogcu bunu beğendi: