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.
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">×</span>Kapat</span></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.
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">×</span>Kapat</span></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.
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.
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.
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.
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.
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.