Tasarım ve buna benzer işlerle uğraşanların bana göre mutlaka öğrenmesi gerekenlerden biri de Bootstrap'tır. o da ne diyenler için kısa bilgilendirme yapalım ve basit örneklerle açıklamaya çalışalım.
Bootstrap, Arayüz geliştiricileri için yapılmış, son derece kullanışlı, açık kaynak kodlu bir CSS framework'tür. Bootstrap kullanarak tüm browser (tarayıcı)larda çalışacak web siteleri yapabilirsiniz. Yani tablet, mobil cihaz, masaüstü uyumlu web siteleri yapabilirsiniz. Bununla beraber standart bir web sitesi için kullanılabilecek, ihtiyaç duyulacak tüm bileşenleri içerisinde bulundurmaktadır. Yani içerisinde tablolar, formlar, hata, onay, bilgi uyarıları, çeşitli butonlar, sayfalama, mobil uyumlu açılır menüler ve birçok kullanılabilir öğeleri bulundurmaktadır.
Sayfamızı HTML5 ile uyumlu hale çevirip Bootstrap dosyalarını sayfamıza eklememiz gerekiyor. Yapacağımız projede açılır menü, popup gibi şeyler kullanacaksak Bootstrap'a ait javascript'i ve jquery script'i sayfaya ekliyoruz.
Web tarayıcılarının yaptığımız sayfayı HTML5 olarak görmesini sağlamak için aşağıdaki şekilde DOCTYPE kullanacağız.
<!DOCTYPE html>Bootstrap CSS dosyasını online dahil edeceksek:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap CSS dosyasını projenin klasörüne indirip dahil edeceksek :<link rel="stylesheet" href="dosyayolu/bootstrap.min.css">
Yazdığımız min ifadesi mevcut css dosyasında bulunan fazlalık boşlukların temizlendiğini gösterir ve bu şekilde daha az yer kaplayarak sayfanın açılış hızına katkı yapar.Bootstrap Javascript ve Jquery Script dosyalarını projeye dahil edelim :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Jquery dosyasını önce eklememizin sebebi ise sayfa açıldığında tarayıcının sayfayı baştan sona doğru satır satır okumasıdır. Bootstrap.min.js, Jquery kullandığından dolayı ilk önce Bootstrap.min.js dosyasını eklersek Jquery bulamayacağı için hata verecektir.
Proje sayfalarının mobil cihazlara ve tabletlere uyumlu olması için :
<meta name="viewport" content="width=device-width, initial-scale=1">
Ekleyeceğimiz bu kod sayfayı açan cihazın çözünürlüğü algılanıp sayfayı o cihaza göre boyutlandıracaktır. Bu kodu <head> </head> etiketlerinin arasına yerleştirin.Yukarıda yaptığımız tüm işlemlerin son hali aşağıdaki örnekte bulunmaktadır :
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Oguzhanavci.com Bootstrap Örneği</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Css Dosyası -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>Sayfa içeriği.</h1>
<!-- JavaScript Dosyası -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Bu şekilde artık sayfamızda Bootstrap kullanabiliriz. Bootstrap kodları için bu linkten kullanabileceğiniz kodlara ulaşabilirsiniz.Kategorikodlama