Bölüm 4 Bootstrap CSS

Bootstrap CSS Kütüphanesi

Bootstrap sayesinde web sayfalarınızın stilleri ve yerleşimini çok hızlı bir şekilde yapabilirsiniz. Şu anda baktığınız sayfa da Bootstrap CSS kütüphanesi kullanarak geliştirildi. Bootstrap dökümanında "Bootstrap mobil öncelikli ve boyuta duyarlı web projeleri yapmak için en uygun HTML, CSS ve JavaScript çatısıdır" diyor.

Web tasarımında framework (çatı - çerçeve) ne demek? Framework, tasasarımcısının gösterdiği yöntemlerle kolay tasarım yapmanızı sağlayan yapıya denir. Yani Bootstrap framework kullanarak, Bootstrap geliştiricilerinin belirlediği yöntemlere uyarak kolayca web projeleri tasarlayabilirsiniz. Bootstrap çatıının ana öğeleri şunlar:

Önceden tanımlanmış CSS sınıf kural setleri sayesinde sayfanızın yerleşimi ve stillerini kolayca düzenleyebilirsiniz.
Carousel'ler, modüller, pop-up'lar, menüler için yazılmış hazır JavaScript kodları kullanarak web sayfalarınıza görsel animasyonlar ekleyebilirsiniz.
Mobil uygulamalarda çalışmaya öncelik verilmiştir. Bootstrap ile yapılan sitelerin mobil cihazlarda görünümü için büyük çabalar harcamınıza gerek yok. Mobil cihazlar için hazırlıklıdır.
Bootstrap Responsive'dir. Yani sayfanızın görüntülendiği ekran boyutuna göre yerleşimi otomatik olarak değiştirerek , değişik ekran boyutlarında çalışacak değişik CSS kural setleri yazmanız gerekmez.
Bootstrap çok yaygın kullanılır. Bu eğitimde Bootstrap incelemesi yapılmasının sebebi çok yaygın kullanılması. Ayrıca yaygın kullanılan bir framework olduğu için yapmak istediğiniz bir şeyi nasıl yapacağınızı bilmiyorsanız ya da hatırlamıyorsanız, internete "bootstrap how to .." deyip arasanız yüzlerce örnek bulursunuz.

Bootstrap'ı Projenize Dahil Etmek

Projenizde Bootstrap kullanabilmek için iki değişik yöntem kullanabilirsiniz.

İndirip Klasöre Koymak : Bootstrap sitesinden indirip dosyaları daha önce kendi stil dosyamızı sayfamıza dışarıdan bağladığımız gibi bağlamak.
CDN Kullanmak : (Content Delivery Network) üyesi server'lar üzerinden de Bootstrap dosyaları herkesin kullanımına açıktır. Dosyaları kendi sitenize yüklemeden internetteki servis sağlayıcılardan çağırabilirsiniz.

Şu anda okumakta olduğunuz web sayfasının tasarımında da Bootstrap kullanıldı. Sayfa kodunu incelerseniz <head> kısmında Bootstrap ile ilgili olan 3 adet dosya başvurusu yapılıyor.

<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>

maxcdn CDN server'ını kullanan 1. ve 3. başvuru bootstrap.min.css ve bootstrap.min.js dosyalarını sayfamıza dahil ediyor. 2. başvuru ise yine çok kullanılan bir JavaScript kütüphanesi olan JQuery dosyası jquery.min.js sayfaya dahil ediliyor.

Bu dosyaları indirdiğinizde yine aynı satırlarda bu sefer kendi klasörünüzdeki yerlerini girebilirsiniz.

<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

Bootstrap Örnek Sayfa

Bootstrap yardımıyla dakikalar içinde bir web sayfası tasarlanabilir. Öncelikle bootstrap.html adında yeni bir sayfa tanımlayalım ve içine başlamak için gereken kodları yazalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Örnek</title>
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
</head>
<body>
    
</body>
</html>

Burada ben Bootstrap dosyalarını yerel klasörden kullandım , sadece kod kalabalık görünmesin diye. Normalde avantajlısı CDN üzerinden dosyaları eklemek olurdu. Hem kendi server'ınıza fazladan dosya yüklemezsiniz, hem CDN server'lar çok daha gelişmiştir ve hızlı cevap verir, hem de kullanıcının bilgisayarındaki tarayıcı başka web sitelerinde gezerken zaten bu dosyaları CDN üzerinden yüklemişse, hafızasındaki hazır indirilmiş dosyayı kullanır.

Koda kısaca bakarsak, daha önce verdiğimiz örneklerle aynı HTML elemanlarından oluşuyor. Burada farklı gördüğümüz satır:

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

Bu satır mobil ekranlarda bu sayfada da gördüğünüz gibi ortada bir kısmı işgal eden içeriği tüm genişliğe yaymak için kullanılıyor. En son özellik olan initial-scale=1.0 ise sayfa içeriği mobil ekranda gösterilirken zoom seviyesini belirtiyor. Herhangi bir içerik ekleyip bu zoom seviyesini mesela 0.5 ve 2.0 yaparak etkisini mobil ekranda test edebilirsiniz.

Mobil ekranda nasıl test ederiz? Bildiğiniz üzere VSCode editörün "Open with live server" eklentisi ile sayfamızı açarsak , tarayıcı adres barında adres olarak http://127.0.0.1:5500/bootstrap.html şeklinde bir adres var , 127.0.0.1 bilgisayarınızın evinizdeki wi-fi ağı içinde kendisini bulması için verilen adres. Cep telefonunuzdaki tarayıcıdan bu sayfaya ulaşmak için 127.0.0.1 yerine bilgisayarınızın wi-fi'de aldığı adresi yazmalısınız. Bu adresi görmek için sağ alt köşedeki wi-fi simgesine sağ tıklayın ve ayarları açın. Açılan pencerede IPv4 adresi yazan yerde bilgisayarınızın wi-fi network'de aldığı adres yazar. Burada örneğin 192.168.1.17 yazıyorsa cep telefonunda tarayıcınıza adres olarak http://192.168.1.17:5500/bootstrap.html değeri girdiğinizde bilgisayarınızdan yayınlanan sayfanızı cep telefon ekranında görürsünüz. Denem için çok uzun bir paragraf ekleyin sayfaya ve scale değeri 1'den küçük girince yazının ekran genişliğinden taştığını ve kaydırarak okunabildiğini göreceksiniz.

Sayfamızın tasarımına bir Jumbotron koyarak başlıyoruz.

<body>
    <div class="container">
        <div class="jumbotron">
            
        </div>
    </div>
</body>

İçeriklerimizi Bootstrap kullanırken genelde .container sınıfı bir <div> eleman içine koyarız. .container sınıfı bize sağda ve solda otomatik boşluk verilmiş sabit genişlikte bir alan sağlar. Bu alanın genişliği ekran genişliğine göre otomatik değişir, daha sonra göreceğiz. .jumbotron sınıfı <div> elemanı ise arka rengi açık gri olarak gördüğünüz kısım. .jumbotron içeriğindeki yazıları vurgu yapmak amacıyla extra büyütülmüş içinde bulunduğu tüm genişliği kaplayan bir alandır. Genelde sayfaların en üstünde gelen kullanıcılara vurgulayıcı mesajlar vermek amacıyla kullanılır. Hadi içine bir mesaj ekleyelim.

<div class="container">
    <div class="jumbotron">
        <h1>POEM Mühendislik</h1>
        <p>Sıvı gıda otomasyonunda çözüm ortağınız</p>
        <a href="#" class="btn btn-info btn-lg">E-mail listemize kaydolun</a>
    </div>
</div>

POEM Mühendislik

Sıvı gıda otomasyonunda çözüm ortağınız

E-mail listemize kaydolun

Mobil görünümü de cep telefonunuz ya da tabletinizden görebilirsiniz. .jumbotron içindeki yazıların nasıl dikkat çekecek şekle geldiğini görüyorsunuz. En altta bir buton var ama koda bakarsak aslında bir link elemanı <a> görüyoruz. Onun buton gibi görünmesini sağlayan .btn sınıfı verilmesi , Bootstrap btn sınıfı verilen linki CSS kuralları ile buton gibi gösteriyor. .btn-info sınıfı butonun arka rengi ve yazı rengini belirliyor. .btn-lg sınıfı ise butonun standarttan büyük olacağını bildiriyor, jumbotron içindeki buton büyük olsa iyi olur. Merak etmeyin butonları daha ayrıntılı göreceğiz. Link'in href özelliğine şimdilik bağlanacağı yerle değil görünümle ilgilendiğimiz için "#" işareti koyduk geçtik, buton tıklanırsa yine aynı sayfada kalır.

Tüm bu CSS sınıf isimlerini kullanarak Bootstrap'in ön tanımlı sınıflarının görsel tasarımımızı nasıl hızlandırdığını göörüyorsunuz. Bu görsel için kendi CSS kural setlerimizi yazmaya kalksak saatlerce uğraşmamız gerekirdi. Burada default renkleri görüyoruz. Sayfamızı daha vurucu yapmak için sayfa arka rengini ve jumbotron arka rengini değiştirelim.

....
    <style>
        body { background-color: darkslategray; }
        .jumbotron { 
            background-color: chartreuse;
            margin-top: 250px;
        }
    </style>
</head>

POEM Mühendislik

Sıvı gıda otomasyonunda çözüm ortağınız

E-mail listemize kaydolun

Bootstrap CSS kurallarına sayfamız <head> kısmı içinde eklediğimiz birkaç stil satırıyla oldukça tatmin edici bir görünüm elde ettik. 5-10 dakika içinde buralara gelebilmek heyecan verici.

Bootstrap ile neler yapılabileceğine ait bilgileri kendi sitesinde bulacağınız gibi , benim bloğumda yazdığım uzun bir yazı dizisi olan Bootstrap Versiyon 3 Öğrenimi yazımdan da bakabilirsiniz. Şimdilik burada birkaç Bootstrap örneği daha vereceğiz, sonrası kullandıkça öğrenmeye devam.

Bootstrap Progressbar

Progressbar kullanıcıya o anda yapılmakta olan işlemin ne kadarının bittiği ve geriye ne kadar kaldığını göstermek amacıyla kullanılan grafik elemandır.

<div class="container">
    <h1>Bootstrap Progress Bar</h1>
    <p>.progress-bar-striped sınıfı progressbar'a çapraz çizgi gölgeler katar</p>
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped"
            role="progressbar" aria-valuenow="40"
            aria-valuemin="0" aria-valuemax="100"
            style="width: 40%;">
            %40 Tamamlandı
        </div>
    </div>
</div>

Bootstrap Progress Bar

.progress-bar-striped sınıfı progressbar'a çapraz çizgi gölgeler katar

%40 Tamamlandı

İçerik yine bir .container içine konmuş. Progressbar genel görünümünü dıştaki .progress sınıfı div elemanı çiziyor. İçteki .progress-bar sınıfı div ise işlemin yüzde kaçının tamamlandışını gösteren renkli kısım. .progress-bar-success ile yeşil arka renk .progress-bar-striped ile çapraz gölgeler veriliyor. Bar'ın yüzde kaçının boyalı olacağı style="width: 40%;" ile belirtiliyor. İçerikteki "%40 Tamamlandı" yazısı da bar üzerine yazılan yazı. Geri kalan tüm özellikler aslında sadece engelli kişilerin ekran okuyucular kullandıklarında yardımcı olması için eklenen bilgiler.

Tabi bu değerlerle progress bar görünümü sabit bir değer veriyor. Bu görünümün hareketli olması ve sürekli yenilenmesi için JavaScript kodlar kullanılır. O konuya da yakın zamanda giriyoruz inşallah.

Bootstrap Carousel

Carousel bazı web sitelerinde rastladığımız otomatik değişen resim bölümleridir. Temel yapısını belirtmek gerekirse,

<div class="carousel slide" data-ride="carousel" id="carousel-1"
    style="width: 600px;">
    <!-- GÖSTERGELER -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
        <li data-target="#carousel-1" data-slide-to="3"></li>
    </ol>

    <!-- SLAYTLARIN BÖLGESİ -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/pupy.jpg" alt="puppy" 
                style="width: 100%; height: 300px;">
        </div>
        <div class="item">
            <img src="images/lale.jpg" alt="lale"
                style="width: 100%; height: 300px;">
        </div>
        <div class="item">
            <img src="images/denizana.jpg" alt="deniz anası"
                style="width: 100%; height: 300px;">
        </div>
        <div class="item">
            <img src="images/penguen.jpg" alt="penguen"
                style="width: 100%; height: 300px;">
        </div>
    </div>

    <!-- SOL-SAĞ OKLAR -->
    <a href="#carousel-1" class="left carousel-control" role="button"
        data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Önceki</span>
    </a>
    <a href="#carousel-1" class="right carousel-control" role="button"
        data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Sonraki</span>
    </a>
</div>

Her carousel .carousel sınıfı bir div içine konur ve bir id değeri vardır. Tüm animasyon bu id değeri üzerine şekillenir. 3 bölüm var , ilki resmin üzerinde çıkan küçük yuvarlakların oluşturduğu GÖSTERGELER bölümü. data-target özeeliğinde carousel'in id değeri var ve data-slide-to özelliğinde ise tıklanınca kaçıncı slide'a geçiş yapılacağı bildiriliyor. .active sınıf değerine sahip olan yuvarlak, içi dolu olan ve gösterilmekte olan resmin göstergesi.

Slaytlar bölgesi .carousel-inner sınıfı bir div elemanı içinde toplanıyor. Her bir resim .item sınıfı bir div içinde yerleşiyor. Sağ ve soldaki gezinme okları ise Gliphicon kullanılarak yapılmış. href özelliğinde carousel'in id değeri verilerek ve data-slide özelliğinde de next veya prev değeri verilerek sonraki ya da önceki slayta geçilmesi sağlanıyor.

Bootstrap hakkında bilgilendirmeler bu kadar. Anlattığımız gibi, eğer görsel tasarımda hızlı ilerlemek istiyorsanız Bootstrap gibi bir framework kullanmanız çok faydalı olacaktır. Bir sonraki bölümde JAvaScript programlama dili üzerinde eğitim başlıyor.

< 3. Bölüm 5. Bölüm >