Bootstrap Front-End'ci arkadaşlar için geliştirilmiş açık kaynak kodlu, ücretsiz bir CSS framework'tür. Bootstrap'la masaüstü, tablet, telefon gibi cihazlara ve tüm tarayıcılara uyumlu web siteleri geliştirebilirsiniz. Bir web site için gerekli olan tüm bileşenlere sahiptir örnek vermem gerekirse, Form öğeleri, tablolar, butonlar, uyarılar, açılan menüler ve daha niceleri... Bu hazır bileşenleri kullanarak hem gelişmiş bir görünüm hem de her cihaza uygun bir tasarım gerçekleştirmiş olursunuz.
Bootstrap Nasıl Kullanılır?
Öncelikle siteniz Html5 olmalı ve Bootstrap'ı kullanabilmeniz için bootstrap css dosyasını sayfanıza dahil etmeniz gerekiyor. Eğer javascript gerektiren durumlar olursa bootstrap javascript'ini ve jquery script'ini sayfanıza dahil edebilirsiniz.
Tarayıcıların sayfanızın Html5 olarak algılamasını sağlamak için DOCTYPE kullanılır.
Bootstrap Css'ini internet üzerinde kullanmak istiyorsanız :
Bootstrap Css'ini sayfanın bulunduğu klasöre indirip kullanmak istiyorsanız :
Burada bootstrap.min.css'i kullandık. Buradaki min ifadesi css dosyasındaki gereksiz tüm boşlukların silindiği anlamındadır. Yani daha az yer kaplar. Bu da sayfanın daha hızlı yüklenmesi demektir. bootstrap.min.css olanını kullanmanızı öneririm.
Jquery Script ve Bootstrap Javascript'lerini sayfanıza dahil etmek istiyorsanız :
Bootstrap'ın tasarımcılarının da önerdiği gibi script dosyalarının sayfanın en sonuna yani </body> etiketinden hemen önce kullanarak sayfanın daha hızlı çalışmasını sağlayabilirsiniz.
Sayfanızın mobil cihazlar ve tabletler için uyumlu olması ve ölçeklendirilmesi için :
Bu kod sayesinde cihazın çözünürlüğü algılanıp o cihaza göre boyutlandırma yapılacaktır. <head> etiketleri arasında kullanın
Örnek Kodlamayı Görmek İçin Tıkla
Bootstrap Nasıl Kullanılır?
Öncelikle siteniz Html5 olmalı ve Bootstrap'ı kullanabilmeniz için bootstrap css dosyasını sayfanıza dahil etmeniz gerekiyor. Eğer javascript gerektiren durumlar olursa bootstrap javascript'ini ve jquery script'ini sayfanıza dahil edebilirsiniz.
Tarayıcıların sayfanızın Html5 olarak algılamasını sağlamak için DOCTYPE kullanılır.
Kod:
<!DOCTYPE html>Bootstrap Css'ini internet üzerinde kullanmak istiyorsanız :
Kod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">Bootstrap Css'ini sayfanın bulunduğu klasöre indirip kullanmak istiyorsanız :
Kod:
<link rel="stylesheet" href="/bootstrap.min.css">Burada bootstrap.min.css'i kullandık. Buradaki min ifadesi css dosyasındaki gereksiz tüm boşlukların silindiği anlamındadır. Yani daha az yer kaplar. Bu da sayfanın daha hızlı yüklenmesi demektir. bootstrap.min.css olanını kullanmanızı öneririm.
Jquery Script ve Bootstrap Javascript'lerini sayfanıza dahil etmek istiyorsanız :
Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>Bootstrap'ın tasarımcılarının da önerdiği gibi script dosyalarının sayfanın en sonuna yani </body> etiketinden hemen önce kullanarak sayfanın daha hızlı çalışmasını sağlayabilirsiniz.
Sayfanızın mobil cihazlar ve tabletler için uyumlu olması ve ölçeklendirilmesi için :
Kod:
<m3ta name="viewport" content="width=device-width, initial-scale=1">Bu kod sayesinde cihazın çözünürlüğü algılanıp o cihaza göre boyutlandırma yapılacaktır. <head> etiketleri arasında kullanın
Örnek Kodlamayı Görmek İçin Tıkla
Son düzenleme:
