info@kodmek.com
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
Kodmek
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
  • Anasayfa
  • Blog
  • Araçlar
Blog
Home Diğer Bootstrap nedir Bootstrap nasıl kullanılır?
Diğer

Bootstrap nedir Bootstrap nasıl kullanılır?

MeK 12 Ekim 2018 0 Comments

Bootstrap açık kaynak kodlu ve ücretsiz bir CSS framework’tür. Bootstrap sayesinde masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu web siteleri geliştirebiliriz. Bunun yanında bir web sitesi için gerekli olan tüm bileşenleri yapısında barındırır. 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ş oluruz.

Bootstrap Nasıl Kullanılır?

Öncelikle sayfamız Html5 olmalı ve Bootstrap’ı kullanabilmemiz için bootstrap css dosyasını sayfamıza dahil etmemiz gerekiyor. Eğer javascript gerektiren durumlar olursa bootstrap javascript‘ini ve jquery script‘ini sayfamıza dahil etmemiz gerekiyor. (Örn: Açılır menü yapımında sadece bootstrap css dosyasını dahil edersek açılır menü tasarımsal olarak oluşturulur. Fakat işlevini yerine getiremez. Açılır menüye tıkladığımızda açılmasını istiyorsak bootstrap javascript’i ve jquery script’ini dahil etmemiz gerekir. 

Tarayıcıların sayfamızın Html5 olarak algılamasını sağlamak için DOCTYPE kullanılır. Html5 olarak tanımı aşağıdaki gibidir :

<!DOCTYPE html>

Burada dikkat edeceğimiz kısım <!DOCTYPE html> kullandıktan sonra <html> etiketini tekrar açmamız gerekiyor. Çünkü <!DOCTYPE html> etiket kendi başına sadece Html5 olduğunu belirtir. ardından <html> etiketini açmazsak hata olur.

Bootstrap Css’ini online olarak dahil etmek istiyorsak :

<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 dahil etmek istiyorsak :

<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’lerin sayfaya dahil edilmesi :

<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>

Öncelikle burada belirtmek istediğim önemli bir şey var. 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.

Ayrıca jquery script‘ini eklemeden bootstrap.min.js ‘i eklerseniz hata ile karşılaşırsınız. Çünkü tarayıcı yukarıdan aşağıya doğru okur.  bootstrap.min.js içerisinde jquery kullandığı için jquery daha eklenmeden kullanmaya çalışır ve hata oluşur. Bu yüzden yukarıdaki örnekte olduğu gibi önce jquery script’ini daha sonra bootstap javascript’ini sayfamıza dahil etmemiz gerekir.

Sayfamızın mobil cihazlar ve tabletler için uyumlu olması ve ölçeklendirilmesi için : 

<meta 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>…</head> etiketleri arasına eklenir.)

Bootstrap Bootstrap kullanımı Bootstrap nasıl kullanılır?
74
521 Views
AboutEnes KALE
Arduino Programlama Yapısı ve Arduino ya girişPrevArduino Programlama Yapısı ve Arduino ya giriş9 Ekim 2018
En iyi Wordpress Cache Eklentileri15 Ekim 2018En iyi Wordpress Cache EklentileriNext

Bir yanıt yazın Yanıtı iptal et

Yorum yapabilmek için oturum açmalısınız.

New Comments
  • SP Flash Tool için veysel25
  • DZ09 Smartwatch Saat modelleri ekleme için MeK
  • DZ09 Smartwatch Saat modelleri ekleme için furkan öztoprak
  • STM32F103 1602A LCD Bağlantısı için MeK

Kodmek güncel teknoloji ve programlama platformu
Bültene kayıt ol

[mc4wp_form id="357"]

Kullanım koşulları | Gizlilik Çevreve politikası

Copyright © 2023 kodmek.com. All Rights Reserved.