08-04-2018 Saat: 19:36
Bootstrap Nedir?
Bootstrap Front-End Developerlar için geliştirilmiş 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. (Form öğeleri, tablolar, butonlar, uyarılar, navigasyon bar, sayfalandırma, etiketler, açılan menüler vb. tasarım öğeleri.) 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 :
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.
En sonda örnek bir sayfanın kodlarını paylaşacağım.
Bootstrap Css'ini online olarak dahil etmek istiyorsak :
Bootstrap Css'ini sayfanın bulunduğu klasöre indirip dahil etmek istiyorsak :
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 :
Ö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 :
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.)
Örnek Sayfa:
Kaynak:
Bootstrap Front-End Developerlar için geliştirilmiş 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. (Form öğeleri, tablolar, butonlar, uyarılar, navigasyon bar, sayfalandırma, etiketler, açılan menüler vb. tasarım öğeleri.) 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 :
Kod:
<!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.
En sonda örnek bir sayfanın kodlarını paylaşacağım.
Bootstrap Css'ini online olarak dahil etmek istiyorsak :
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 dahil etmek istiyorsak :
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'lerin sayfaya dahil edilmesi :
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>Ö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 :
Kod:
<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.)
Örnek Sayfa:
Kod:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Css begin -->
<link rel="stylesheet" href="/bootstrap.min.css">
<!-- Bootstrap Css end -->
</head>
<body>
<!-- JavaScript Files begin -->
<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>
<!-- JavaScript Files end -->
</body>
</html>Kaynak:
Kod:
KodYazan.Com