Bootstrap Animasyon, Active, Disable Kodları Kullanımı

Neler Öğreneceğim?

• ANİMASYON EKLEME
• İÇ İÇE GEÇMIŞ ÇUBUKLAR
• UL ETİKETİ İLE GRUPLANDIRMA YAPMA
• GRUP KUTULARINA BILDIRIM EKLEME
• ACTIVE KODU ILE KULLANIM
• DISABLED KODU İLE KULLANIM
• RENK KODLARI İLE KULLANIM
• GRUP KUTULARINI İÇERİK KUTUSU HALINE DÖNÜŞTÜRME

Gereksinimler

• Notepad++

Zorluk Düzeyi

• Intermediate (Orta Seviye)

ANİMASYON EKLEME

Bu başlık altında öğrenmiş olduğumuz çizgi desenini, nasıl animasyonlu olarak oynatabiliriz bunu öğreneceğiz.
Durum çubuklarına animasyon ekleyerek, kullanıcının sitemize daha çok ilgi göstermesini sağlayabilirsiniz. Bu sayede ek çaba göstermeden kolayca çubukları vurgulamış olursunuz.

Animasyonu eklemek oldukça kolay. Sadece yapmamız gereken sınıf kısmına ufak bir sözcük daha eklemek olacaktır.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="progress">
(html comment removed:  Animasyonlu Çubuk )
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="
width: 50%">
        <span class="sr-only">50%</span>
    </div>
(html comment removed:  Animasyonlu Çubuk Bitiş )
</div>

Göründüğü gibi, sadece "active" ekleyerek animasyonun oluşturulmasını sağlamış olduk. Bu animasyonu eklerken "striped" mutlaka olmalıdır, aksi taktirde animasyon, animasyonun uygulanacağı bir nesne olmayacaktır. Bu kısımda resim versemde hiçbir şey anlaşılmayacaktır.

İÇ İÇE GEÇMIŞ ÇUBUKLAR

Bu başlık altında nasıl iç içe geçmiş ilerleme çubukları yapabiliriz bunu öğreneceğiz.
Bu tarz kullanım sayesinde web sayfanızda daha fazla alan elde edebilirsiniz. Veya bir şeyi tek bir alanda göstermek istiyorsanız bu kullanımı uygulayabilirsiniz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 45%">
        <span class="sr-only">45%</span>
    </div>
    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 30%">
        <span class="sr-only">30%</span>
    </div>
    <div class="progress-bar progress-bar-success" style="width: 20%">
        <span class="sr-only">20%</span>
    </div>
</div>

Bu kısımda sadece vurgulamış olduğum yerde anlaşılacağı gibi, çubuklarımızı sadece bir adet div içinde kullandık. Diğer örneklerde her bir çubuk için ayrı div etiketi kullanmıştık.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Göründüğü gibi, tek bir div etiketi kullanarak kodlarımızı yazdık. Bununla beraber yazmış olduğumuz büyüklük değerleri tek bir çubuk için geçerli oldu yani toplam olarak üç çubuğumuz %95 oranında yer kaplamış oldu.

UL ETİKETİ İLE GRUPLANDIRMA YAPMA

Bu başlık altında uı etiketini kullanarak nasıl gruplar yapabiliriz bunu öğreneceğiz.
UL, etiketleri sayesinde kolayca gruplandırma yapabiliriz. Gruplandırma yaparken bir diğer kullanacağımız öğe ise "li"" etiketidir. li etiketi sayesinde grup öğelerini ekleyeceğiz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="list-group">
    <li class="list-group-item">Hamburger</li>
    <li class="list-group-item">Tost</li>
    <li class="list-group-item">Döner</li>
    <li class="list-group-item">Köfte</li>
    <li class="list-group-item">Tavuk</li>
    <li class="list-group-item">Patates Kızartması</li>
    <li class="list-group-item">Adana Kebap</li>
    <li class="list-group-item">Beyti Sarma</li>
</ul>

Kodlarımızda göründüğü gibi, İlk olarak "ul." etiketini kullandık. Ardından "li" etiketleri ile ara öğelerimizi oluşturduk. Ben gruplandırma kutucuğumuz için sekiz adet "li" etiketi kullandım.
Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır :

Göründüğü gibi, li etiketi ile eklediğimiz öğeler başarılı bir şekilde grup kutusunda çıktı verdi. Grup kutusu resimde göründüğü gibi yuvarlak hatlara sahip bir kutudur.

GRUP KUTULARINA BILDIRIM EKLEME

Bu başlık altında daha önceden öğrenmiş olduğumuz bildirim öğelerini, nasıl grup kutucuklarında yer alan kelimelerin sağ tarafına ekleyebiliriz, bunu öğreneceğiz.
Bildirim ekleyerek, ayrıca bu bildirimleri başka bir web dili ile bir olaya göre çalışabilir hale getirirseniz, çok daha başarılı sonuçlar elde edebilirsiniz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">11</span>Hamburger
    </li>
    <li class="list-group-item">
        <span class="badge">22</span>Tost
    </li>
    <li class="list-group-item">
        <span class="badge">33</span>Döner
    </li>
    <li class="list-group-item">
        <span class="badge">44</span>Köfte
    </li>
    <li class="list-group-item">
        <span class="badge">55</span>Tavuk
    </li>
</ul>

Vurgulamış olduğum yerlerde göründüğü gibi daha önceden öğrenmiş olduğumuz span etiketlerini kullanarak bildirim ikonu oluşturmuş olduk.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi bildirimlerimiz yazıların sağ tarafına eklenmiş oldu.

ACTIVE KODU ILE KULLANIM

Active kodunu birçok kısımda kullanmıştık. Tekrar bu kısımda da kullanacağız.

Active sayesinde grupta yeralan herhangi birşeyi daha rahat vurgulayabilirsiniz. Bu sayede, kullanıcıya daha dikkat çekici nesneler oluşturabilirsiniz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="list-group">
    <li class="list-group-item active">
        <span class="badge">11</span>Hamburger
    </li>
    <li class="list-group-item">
        <span class="badge">22</span>Tost
    </li>
    <li class="list-group-item">
        <span class="badge">33</span>Döner
    </li>
    <li class="list-group-item active">
        <span class="badge">44</span>Köfte
    </li>
    <li class="list-group-item">
        <span class="badge">55</span>Tavuk
    </li>
</ul>

Vurgulamış olduğum alanlarda göründüğü gibi, sadece ilk başta yazmış olduğumuz sınıftan sonra bir boşluk vererek "active" yazdık. Bu sayede artık active yazmış olduğumuz satır mavi renge bürünecek.
Active kullanımına dair çıktımız aşağıdaki gibi olacaktır:

Resimde göründüğü gibi, iki öğemiz vurgulanmış oldu. Ayrıca göründüğü gibi mavi üzerine siyah rengin okunması zor olduğu için otomatik olarak yazılar mavi bölgede beyaz renge dönüştü.

DISABLED KODU İLE KULLANIM

Daha önceden active kodu gibi bu kodu da birçok kısımda kullanmıştık. Şimdi bu kısımda da tekrar kullanacağız.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="list-group">
    <li class="list-group-item disabled">
        <span class="badge">11</span>Hamburger
    </li>
    <li class="list-group-item disabled">
        <span class="badge">22</span>Tost
    </li>
    <li class="list-group-item">
        <span class="badge">33</span>Döner
    </li>
    <li class="list-group-item">
        <span class="badge">44</span>Köfte
    </li>
    <li class="list-group-item">
        <span class="badge">55</span>Tavuk
    </li>
</ul>

Vurgulamış olduğum alanlarda göründüğü gibi, "disabled" kullanarak pasif olmasını sağladık.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi, ilk iki öğemiz disabled durumuna geldi. Bu durum sayesinde renkleri soldu. Ayrıca göründüğü gibi, dördüncü öğemiz aktif durumda. Kodları yazarken aktif ve pasif olma durumunu aynı anda rahatlıkla kullanabilirsiniz.

RENK KODLARI İLE KULLANIM

Bu başlık altında grup kutucuklarında yer alan öğeleri, nasıl farklı renklerde gösterebiliriz, bunu öğreneceğiz.

Daha önceden birçok bölümde renk kodlarından faydalanmıştık. Bu bölümde tekrar önceden öğrenmiş olduğumuz renk kodlarını kullanacağız. Renk kodlarını kullanmak web sayfalarında daha başarılı görünümler elde etmenizi sağlar. Özellikle nı için renk uyumu önemli bir yer kaplamaktadır.

örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="list-group">
    <li class="list-group-item list-group-item-warning">Lorem</li>
    <li class="list-group-item list-group-item-danger">Ipsum</li>
    <li class="list-group-item list-group-item-success">Dolor</li>
    <li class="list-group-item list-group-item-info">Amet.</li>
</ul>

Göründüğü gibi, aynı sınıf kuralını yazarak "danger, info" gibi renk kodlarını ekledik.
Renk kodlarımızın çıktısı ise aşağıdaki gibi olacaktır:

Resimde göründüğü gibi, artık öğelerimiz farklı renklerde çıktılar verdi.

GRUP KUTULARINI İÇERİK KUTUSU HALINE DÖNÜŞTÜRME

Bu başlık altında, grup kutucuklarını nasıl basitçe içerik kutusu haline getirebiliriz buna değineceğiz. Grup kutularını, içerik kutuları yaparak blog sistemi tarzında çalışabilirsiniz.

Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-danger">
        <h4 class="list-group-item-heading">Merhaba Dünya</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque ex eum dolore ea sint. Unde asperiores at consequatur 
quisquam illo, voluptate molestiae, reprehenderit, vero ipsa quis assumenda, vel iste ab.</p>
    </a>
</div>

Bu kısımda yapmış olduğumuz farklılıklar, sadece ekleyeceğimiz metin öğelerinde oldu.
Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır :

Göründüğü gibi, çıktımızda bir adet başlık ve bir adet metin öğesi yer alıyor. Bununla beraber kodlarımızda göründüğü gibi, ben "danger" kullanarak kırmızı renkte çıktı vermesini sağladım.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---