Bootstrap, Bootstrap dersleri, Bootstrap öğren, CSS, HTML

Bootstrap ile Web Sayfası Oluşturma

Cihat KISA - 18 Ocak 2017

HTML5 Doctype Ekleme

Bootstrap HTML elementlerini ve CSS özelliklerini kullanarak çalışır. Bu yüzden Bootstrap kullanacağınız her HTML sayfasının en başında HTML5 doküman tipini çağırmalısınız. Ayrıca doğru karakter setini ve dili de eklemeyi unutmayın.

Bootstrap için Doctype ekleme örneği:

<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta charset="utf-8"> 
    </head>
</html>

Yukarıdaki örneğimizde UTF-8 karakter setini kullanan ve HTML formatında bir sayfanın en basit kodlarını yazdık. Dikkat ettiyseniz kodlarımızda Body etiketi bulunmuyor. Bu yüzden sayfamızın yalnızca üst kısmını oluşturmuş olduk. Body etiketiyle ilgili daha fazla bilgiye ihtiyacınız varsa HTML Web Sayfası Oluşturma sayfasını incelemenizi öneririm.

Bootstrap Mobil Önceliklidir

Bootstrap 3, mobil öncelikli çalışacak şekilde tasarlanmıştır. Bunun anlamı normalde kullandığımız @media screen and (max-width: 480px) {} sorgusunun aksine @media screen and (min-width: 480px) {} medya sorgusuyla işlemi büyük ekrandan küçüğe doğru değil de küçük ekranlı cihazlardan büyük olanlara doğru dersten yapmasıdır. Yani Bootstrap 3, ilk önce mobil cihazlar için tasarlanmış ve daha sonradan büyük ekranlı cihazlar için medya sorgularıyla düzenlenmiştir.

Medya sorgularıyla ilgili daha fazla bilgiye ihtiyacınız varsa CSS ile Mobil Uyumlu Site Yapımı sayfasını ziyaret edin.

Bootstrap mobil öncelikli tasarım mantığı.

Tasarladığımız web sitesinin ekranın boyutuna göre yeniden boyutlanması için aşağıdaki kodu <head> etiketleri arasına yerleştirmeyi unutmayın:

<meta name="viewport" content="width=device-width, initial-scale=1">

Bu meta etiketi, bize kullanılan ekranın boyutuna göre işlem yapma imkanı verir. width=device-width kısmı boyutlandırma işleminin cihazın ekran genişliğine göre yapılacağını belirtir. initial-scale=1 kısmıysa siteye ilk girildiğinde ekranın boyutlandırılacağı yakınlaştırma ölçütüdür.

Bootstrap Container CSS Sınıfı

Bootstrap ayrıca sayfadaki tüm elementleri bir arada tutabilmek için .container ve .container-fluid adlarında kapsayıcı CSS sınıflarını kullanır.

.container CSS sınıfı sabit bir genişliğe sahiptir ve ekran çok büyük bile olsa siteyi orta kısımda belirli bir boyutta tutar.
.container-fluid CSS sınıfıysa tam genişliktedir ve bu sayede ekran ne kadar büyük olursa o kadar geniş bir sayfa oluşturmaya yarar.

Bootstrap’ta tam genişliğe sahip .container-fluid ve sabit genişliğe sahip .container CSS sınıfları arasındaki fark.

Bu kapsayıcı sınıfları kullanırken iç içe kullanmamaya özen gösterin. Aksi halde görüntü problemleri oluşacaktır. Yani bir Container sınıfı içerisinde başka bir Container kullanmayın.

İki Farklı Basit Bootstrap Sayfası Örneği

İlk örnek ekran çok büyük olsa bile sabit bir maksimum genişliğe sahip bir sayfa örneği. Mobil cihazlarda rahatlıkla görüntülenebilen ve tam mobil uyumlu olan bu örnekte sayfa, ekran çok büyük olduğunda belirli bir boyutta sabit kalıyor.

Sabit Boyutlu Basit Responsive Bootstrap Sayfa Örneği:

<!DOCTYPE html>
<html lang="tr">
    <head>
        <title>Bootstrap Sabit Sayfa Örneği</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>İlk Sayfam</h1>
            <p>Burada paragraf yer alacak.</p> 
        </div>
    </body>
</html>

Aşağıdaki örnekteyse sabit sayfanın aksine ekran boyutu ne olursa olsun sayfa sağdan ve soldan tam genişlikte olacak. Yani herhangi bir maksimum boyuta ulaşmayacak.

Tam Genişliğe Sahip Basit Bootstrap Sayfa Örneği:

<!DOCTYPE html>
<html lang="tr">
    <head>
        <title>Tam Genişlikte Bootstrap Sayfası</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <h1>İlk Sayfam</h1>
            <p>Burada paragraf yer alacak.</p> 
        </div>
    </body>
</html>

Örnekleri bir HTML sayfasına kaydederek deneyebilirsiniz. Bu derste en basit haliyle Bootstrap’ta bir sayfanın nasıl oluşturulacağını öğrenmiş olduk. İlerleyen derslerde Bootstrap ile daha karmaşık yapılarda sayfalar tasarlayacak ve sütun yapısı gibi yapıları inceleyeceğiz.