Bootstrap Uyarı Kutuları, Durum Çubukları

Neler Öğreneceğim?

• UYARI KUTUCUKLARI
• UYARI KUTUCLIKLARINA KAPATMA BUTONU EKLEME
• UYARI KUTUCUKLARINA LİNK EKLEME
• ÇUBUKLAR
• VARSAYILAN DURUM ÇUBUĞU
• DURUM ÇUBUĞUNUN IÇINE YAZI EKLEME
• DURUM ÇUBUKLARINI RENKLENDİRME
• DURUM ÇUBUKLARINA ÇİZGİLİ GÖRÜNÜM VERME

Gereksinimler

• Notepad++

Zorluk Düzeyi

• Intermediate (Orta Seviye)

UYARI KUTUCUKLARI

Bu başlık altında sitemize nasıl uyarı kutucukları ekleyebiliriz, buna değineceğiz. Uyarı kutucuklarını eklerken daha önceden öğrenmiş olduğumuz renk kodlarından faydalanacağız.
Bootstrap tarafından oluşturulmuş renk kodları aslında işlemsel sıraya göre yapılmış, fakat siz istediğiniz şekilde kullanabilirsiniz. Uyarı kutucuklarını oluştururken "div" etiketlerinden faydalanacağız. Div etiketi ile uyarı kutucuğunu oluşturup içine istediğimiz elementleri ekleyeceğiz.

Uyarı kutucuklarımızın tamamı için gerekli olan kodlar aşağıdaki gibidir :

<div class="alert alert-info" role="alert">info</div>
<div class="alert alert-success" role="alert">success</div>
<div class="alert alert-danger" role="alert">danger</div>
<div class="alert alert-warning" role="alert">warning</div>

Göründüğü gibi dört adet alert kodumuzu kullandık.
Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır:

Resimde göründüğü gibi kodlarımızın yazılış sırasına göre "div" etiketi ile oluşturmuş olduğumuz uyarı kutucukları ekrana başarılı olarak çıktı verdi. Kutucuklarımızda yer alan metinler göründüğü gibi kutuda yer alan renge göre şekillenmiştir. Bu sayede renk uyumu bozulmamaktadır.

Uyarı kutucuklarını, isterseniz işlem sırasına göre isterseniz kendi renk uyumunuza göre kullanabilirsiniz. Ayrıca bu kutulara istediğiniz her türlü öğeyi kolaylıkla ekleyebilirsiniz.

UYARI KUTUCLIKLARINA KAPATMA BUTONU EKLEME

Bu başlık altında daha önceden öğrenmiş olduğumuz uyarı kutucuklarına, kapatma butonunu nasıl ekleriz bunu öğreneceğiz.
Eğer sitenizde uyarı kutularını kullanmak istiyorsanız ve aynı zamanda kullanıcının istediği zaman bu kutuları kapatabilmesini istiyorsanız, bu konuyu dikkatlice inceleyiniz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="alert alert-success">İşleminiz onaylanmıştır!
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>Kapatspan></button>
</div>

Kodlarımızda göründüğü gibi div etiketimizi standart olarak ekledik, fakat kapatma butonu için button etiketini kullandık. Artık kapatılabilen bir bildirim kutucuğu elde etmiş olduk.

Kodlarımızın çıktısı ise aşağıdaki gibi olacaktır:

Göründüğü gibi sağ kısımda kapatma butonumuz yazıya hizalanmış olarak göründü. Ayrıca butonun üzerine gelindiği zaman rengi koyulaşıyor. Buton tamamıyla çalışmaktadır. Tıkladığınız andan itibaren, ekrandan uyarı kutucuğu yok olacaktır.
UYARI KUTUCUKLARINA LİNK EKLEME
Bu başlık altında uyarı kutucuklarına nasıl link ekleyebiliriz bunu öğreneceğiz. Yani; özetle bir paragraftaki yazıyı kolaylıkla link yapabileceğiz.

Örnek kullanım için gerekli Olan kodlarımız aşağıdaki gibidir :
<div class="alert alert-danger">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eos omnis id ad delectus nam eveniet sit quas itaque dolorum iste deserunt vel, ipsum ratione 
alias eligendi, impedit voluptate <a href="#" class="alert-link">sed.</a>
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>Kapatspan></button>
</div>

Vurgulamış olduğum yerde göründüğü gibi standart "a" etiketini kullandık, fakat sınıf olarak Bootstrap tarafından oluşturulmuş sınıfı kullandık.

Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde görüldüğü üzere "sed" kısmını link haline çevirdik. Ayrıca üzerine gelindiğinde altında link çizgisi oluştu. Bununla beraber kapatma butonunuda başarılı olarak ekledik. Dediğim gibi, bu kullanım sayesinde herhangi bir paragrafta yer alan kelimeyi kolaylıkla link türüne çevirebilirsiniz. Çevirilen kelime ayrıca kalın olarak görünecektir.
ÇUBUKLAR
Bazı web sitelerinde çubuklar görürüz. Bu çubuklar genel olarak "Progress Bar" yani ilerleme çubuğu olarak adlandırılırlar. Bu çubuklar sayesinde birşeyin ne kadar yüzdeye sahip olduğunu gösterebilirsiniz.
VARSAYILAN DURUM ÇUBUĞU
Bu başlık altında Bootstrap ile gelen varsayılan durum yani ilerleme çubuğunu ele alacağız. Bu çubuk en temel kullanım için geliştirilmiştir.

Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">90% Tamamlandı</span>
    </div>
</div>

Bu kısımda ekranda ne kadar yüzdelik kısım gösterileceği "style="width: 90%;" kısmı ile sağlanmaktadır. Doksan değerini güncelleyerek istediğiniz genişliğe ulaşabilirsiniz.

Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır:

Resimde göründüğü gibi, ekranda %90'lık alanı kaplayarak çıktıyı mavi renkte verdi. Bootstrap ile birçok öğe düzgün grafiklere sahip. Örneğin; bu ilerleme çubuğunun yer aldığı sayfayı büyütsek bile çubuğun görüntüsü bozulmamaktadır.

Büyütülmüş ilerleme çubuğuna dair örnek çıktı aşağıdaki gibidir :

Bu resimde ben sayfamı %500 oranında büyüttüm. Sizde bunun gibi bir çıktı elde etmek istiyorsanız "CTRL" (OS X kullanıyorsanız CMD) ve "+" tuşuna basarak sayfanızı büyütebilirsiniz.
DURUM ÇUBUĞUNUN IÇINE YAZI EKLEME
Bu başlık altında öğrenmiş olduğumuz durum çubuğunda nasıl yazı ekleyebiliriz, bunu öğreneceğiz.

Durum çubuklarına yazı ekleyerek daha işlevsel olmasını sağlayabilirsiniz. Bu eklenen yazılar kullanıcı deneyimi açısından farklılıklar oluşturabilir.

Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="20" aria-valuemax="100">
        %0
    </div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">90% Tamamlandı</span>
        %90 Oranında Tamamlandı.
    </div>
</div>

Yazmak istediğimiz sözcüğü div etiketlerinin arasına yerleştirdik. Bu sayede ek öğe kullanmadan yazdırmak istediğimiz yazıyı oluşturmuş olduk.

Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi, kodlarımız ekranda sıralı olarak çıktı verdi. Eklediğimiz sözcükler durum çubuğuna ortalı olarak başarılı bir şekilde çıktı verdi.
DURUM ÇUBUKLARINI RENKLENDİRME
Bu başlık altında durum çubuklarını mavi renk dışında nasıl diğer renkler ile kullanabiliriz bunu öğreneceğiz.

Varsayılan kodlarda gelen mavi renk her tasarıma uymayabilir, bu yüzden diğer renk kodları ile kullanarak çok daha başarılı tasarımlar ortaya çıkarabilirsiniz.

Daha önceden birçok bölümde kullandığımız ve hatta bu bölümde de kullanmış olduğumuz renk kodlarını bu kısımda da tekrar kullanacağız.

Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
        <span class="sr-only">50%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
        <span class="sr-only">50%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
        <span class="sr-only">50%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
        <span class="sr-only">50%</span>
    </div>
</div>

Kodlarımızda göründüğü gibi, daha önceden öğrenmiş olduğumuz renk kodlarını div etiketine sınıf atayarak kullandık. Ayrıca tüm çubukları %50 oranında tamamlanmış olarak yaptık.

Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır:

Resimde göründüğü gibi, renk kodlarımızın sırasına göre çubuklarımız sıralandı. Bununla beraber ben daha iyi algılanması açısından sayfayı %200 boyutunda büyütüp çıktıyı sayfamıza dahil ettim. Ayrıca belirttiğim gibi hepsi aynı genişlikte çıktı verdi, bunun nedeni ise hepsini %50 olarak boyutlandırmamızdır.
DURUM ÇUBUKLARINA ÇİZGİLİ GÖRÜNÜM VERME
Bu başlık altında öğrenmiş olduğumuz durum çubuklarına nasıl çizgili görünüm verebiliriz bunu öğreneceğiz.

Bu çizgili görünüm aslında gündelik hayatta sıkça karşılaştığımız bir stildir. Bu kullanım sayesinde daha hoş ve daha baskın bir görünüm elde edebilirsiniz.
Bu kullanımın tek eksi yönü "Internet Explorer 8" ile çalışmamasıdır. Zaten yapılan birçok ankette artık Internet Explorer eskiye oranla çok daha az kullanılmaktadır. Bu yüzden çok dikkat edilecek bir husu değildir.
Bootstrap'ın bir çok uyumluluk sorununu ortadan kaldırdığını söylemiştik fakat bazı tarayıcılar aşırı derecede eskimiş durumda bu yüzden yapılabilecek tüm şeyler ortadan kalkıyor.

Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir:
<div class="progress">

    <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>

</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 
50%">
        <span class="sr-only">50%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 
50%">
        <span class="sr-only">50%</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 
50%">
        <span class="sr-only">50%</span>
    </div>
</div>

Vurgulamış olduğum alanlarda göründüğü gibi, "Striped" yazarak çizgili olarak görünmesini sağlamış olduk.

Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi, artık daha farklı bir görünüm elde etmiş olduk. Bu sebeple kutucuklarımıza dikey çizgiler eklenmiş oldu.

Posted on Utopian.io -  Rewarding Open Source Contributors