Bootstrap ve Kullanımı

Web sitesi tarasımı yapanların en iyi bilmesi gerekenlerden biride bir dil (php, asp, vb.) ve bu dil yanında CSS ve HTML'dir. Sadece bunlarla değil her gün değişen ve gelişen birçok bilgileri bilmemiz gerekmektedir. Örneğin PHP dilinin versiyon değişikliği ve bunların neler getirdiği veya değiştirdiği gibi birçok bilgiler.
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>

Burada önemli bir nokta <!DOCTYPE html> ekledikten sonra <html> etiketini açmamız lazım. Bu etiketi açmazsak <DOCTYPE html> sayfanın sadece HTML5 olduğunu belirtir ve <html> eklemezsek hatalı kullanım olur.

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>

Bu noktada önemli olan şey ise, sayfa açılış hızını düşürmemiz için Bootstrap'ın da tavsiye ettiği şekilde yukarıdaki script dosyalarının sayfanın sonuna Body kapanış etiketinden </body> hemen önce eklemeliyiz.
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>