Bootstrap Dersleri 2: Temel Şablon Oluşturma (Başlangıç şablonu)

Bootstrap başlangıç şablonu oluşturma

Bootstrap yapısını kullanabilmek için sayfamızın olmazsa olmaz gereksinimleri vardır.

1. Doküman tipini HTML5 olarak ayarlayın

Dokümanı tipini HTML5 olarak ayarlamak için sayfamızın başına şu kodu ekliyoruz:  <!DOCTYPE html> Sayfa ilk açılırken bu kodu okuyan tarayıcıya dokümanın tipini söylemiş oluyoruz. Doctype etiketinin kapama etiketi ve işareti yoktur. Ayrıca küçük büyük harf duyarlılığı da yoktur.

2. Dokümanın html dokümanı olduğunu belirtin

Bunu yapmak için doküman tipinin altına  <html lang="tr">  ekleyin. Kapatma etiketini </html> şeklinde eklemeyi unutmayın. Tüm kodlarınızı bu iki etiket arasına yazacaksınız. Ayrıca head arasında istediğiniz tanımlamaları da yapmalısınız. Sonuç olarak sayfamız aşağıdaki şekilde olacak.

3. Kullanıcının ölçekleme veya zoom yapıp yapamayacağını ayarlayın.

Mobil kullanıcılar için sayfanızın büyütme veya zoom yapıp yapamayacağını belirleyebilirsiniz. Bunun için viewport elementini kullanın. Viewport elementinin user-scalable özelliği yes veya no değeri alır.No değeri verirseniz mobil cihazlarda sayfanız büyütülemez.Kullanımı şu şekildedir ve head arasına ekleyerek kullanabilirsiniz.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Viewport elementinin alabileceği özellikleri de vermiş olalım:

width: Piksel olarak verilen viewport genişliği. Değer olarak device-width ile cihazın ekran genişliği de verilebilir.

height: Piksel olarak verilen viewport yüksekliği. Değer olarak device-height ile cihazın ekran yüksekliği de verilebilir.

initial-scale: Sayfayı ilk gösterilirken ne kadar ölçekli olarak verileceği. Örneğin 1.0 değeri verilirse başlangıç görünütüsü ölçeklenmeden gösterilir. 0 ile 10.0 arası bir değer olabilir.

minimum-scale: Kullanıcının en çok yapabileceği küçültme oranı.

maximum-scale: Kullanıcının en çok yapabileceği büyültme oranı.

user-scalable: Kullanıcının ölçekleme veya zoom yapıp yapamayacağını vermek için kullanılır. yes veya no değerini alır. Varsayılan olarak yes değerini alır.

4. Bootstrap CSS dokümanını ekleyin

Derlenmiş ve minimize edilmiş dosyaların olduğu Bootstrap dokümanlarını buraya tıklayarak indirin. Bu linkteki dokümanlar CSS, JS ve font dosyalarını içerir. Herhangi bir web projesine hızlı kullanım için önceden derlenmiştir.  Bu Bootstrap için en temel gereksinimlerin olduğu dosylardır. Derlenmiş CSS ve JS (bootstrap.*) dosyaları, bunların yanı sıra derlenmiş ve minimize edilmiş CSS ve JS (bootstrap.min.*) dosyaları bulunur. CSS kaynak haritaları (bootstrap.*.map) bazı tarayıcıların geliştirici araçları ile kullanımı mevcuttur. Ayrıca icon fontu olarak kullanılan  Glyphicons dosyları da bu indirdiğiniz zip dosyası içinde mevcuttur.

Bootstrap kaynak kodlarını indirmek isterseniz bu linke tıklayabilirsiniz. Bu dosyanın içinde ilk linkteki CSS, JS ve font dosyları da olmakla birlikte CSS, Javascript bileşenleri, çeşitli örnekleri ve önceden oluşturulmuş yazı, kaynak kodu, Javascript ve belgeleri içerir.  /examples klasörü içindeki örnekleri de ilerleyen derslerimizde zaten inceleyeceğiz.

Şimdi temel (başlangıç) şablonumuzu oluşturmak üzere CSS dosyasını sayfamıza ekliyoruz:

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

CSS dosyasını kendi sunucunuzda değil de Bootstrap CDN bağlantısı şeklinde kullanmak isterseniz aşağıdaki bağlantıyı kullanabilirsiniz:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

 

 5. Bootstrap’ın ana JS dosyalarını ekleyin

Bootstrap’ın ana JS dosyalarını ekleyin. JS dosylarını sayfanın sonuna eklemenizi tavsiye ederim. Böylelikle sayfanızın açılış hızını yavaşlatmamış olurlar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="../../dist/js/bootstrap.min.js"></script>

Sonuç olarak;

Hazırlamış olduğumuz sayfamızın nihai hali aşağıdaki şekilde olmuş olacak. Bu başlangıç şablonumuz üzerinden sayfalarımızı oluşturmamız gerekiyor.

 

Ben de ilerleyen derslerde bu başlangıç şablonumuz üzerinden örnekler yapıp Bootstrap hakkında bilgi vermeye devam edeceğim.

 

Bootstrap Dersleri 2: Temel Şablon Oluşturma (Başlangıç şablonu) ” yazısı için 3 yorum

    • Evet devamı gelecek, geliyor. En geç her 2 haftada bir ders yayınlamaya çalışıyorum. Şu anda 3ncü ders sırada, çok yakında.

Bir Cevap Yazın