Bootstrap Breadcrumbs Öğesi, Sayfalama Bildirim Kutusu

Neler Öğreneceğim?

• BREADCRUMBS ÖĞESİ
• SAYFALAMA KUTUSU
• PAGER ÖĞESİ
• PAGER ÖĞESİNE İKON EKLEME
• METIN ÖĞELERİ
• BİLDİRİM KUTUCUĞU
• JUMBOTRON ÖĞESİ
• PAGE HEADER ÖĞESİ
• RESİM KUTULARINA JAVASCRIPT İLE EFEKT VERME
• UFAK BOYUTLU RESİM VE İÇERİK KUTUSU

Gereksinimler

• Notepad++

Zorluk Düzeyi

• Intermediate (Orta Seviye)

BREADCRUMBS ÖĞESİ

Bu öğeye herhangi bir Türkçe isim bulamadığım için mecburen İngilizce ismini kullanmak zorunda kaldım, fakat bu öğe ile gündelik hayatta çok fazla karşılaştığımızı söyleyebilirim.

Bu öğe genel olarak blog sitelerinde yer alan ve yazıların üstünde bulunan bir öğedir. Özetle bir yazının hangi konumda ve kategoride olduğunu belirten bir ayraç görevini üstlenmektedir.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ol class="breadcrumb">
    <li>Ana Sayfa<a href="#"></a>
    <li>Edebiyat<a href="#"></a>
    <li>Osmanlı Edebiyatı<a href="#"></a></li>
    <li class="active">Divan Şiirleri</li>
</ol>

Kodlarımızda göründüğü gibi "ol" etiketine sınıf atadık. Öğeleri eklemek için ise "li" etiketlerinden yararlandık.
Kodumuzun çıktısı ise aşağıdaki gibi olacaktır :

Göründüğü gibi sık sık blog sayfalarında bulunan bu menüyü elde etmiş olduk. Bununla beraber istediğiniz kısımlarda "active" kullanarak belirgin olarak görünmesini sağlayabilirsiniz.

SAYFALAMA KUTUSU

Blog sayflarında gezinirken sık sık karşılaştığımız sayfalama kutuları oluyor. Bu kutu ile daha ileri sayfalara geçiş yapabiliyorsunuz, ayrıca ileri sayfada iseniz geri sayfalara tekrar dönebiliyorsunuz.

Bu başlık altında blogların çoğunda yer alan sayfalama kutusunu nasıl Bootstrap ile yapabiliriz, buna değineceğiz. Bu kullanımı "ul" etiketleri sayesinde gerçekleştireceğiz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

Göründüğü gibi bu sefer ise "ul" etiketlerini kullandık. Ayrıca "pagination" adında sınıfımızı ekledik. "li" etiketlerinde vurgulamış olduğum iki kısımda yer alıyor. Bu kısımlar sayesinde ileri ve geri tuşlarını oluşturabilirsiniz. Bu kodlar zaten hali hazırda HTML ile tanımlanmış halde gelmektedir.
Kutumuzun çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi, kolayca sayfalama kutusu yapmış olduk. Bununla beraber tam uyumluluk açısından "&laguo;" ve "&raguo;" kullandık.

Ayrıca bu kutuyu yaparken daha önceden öğrenmiş olduğumuz boyutlandırma sınıflarını ve "disabled" gibi kullanıcı deneyimi açısından önemli öğeleri kolaylıkla kullanabilirsiniz.

PAGER ÖĞESİ

Bu öğe gayet işlevsel bir öğedir. Pager öğesi aslında ileri-geri şeklinde sayfalama için yapılmıştır. Yani özellikle bloglarda bulunan bir öğedir. Bu genelde blogların yazı içi kısmında bulunur ve yazılar arasında ileriye veya geriye gidilmesini sağlar.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<ul class="pager">
    <li><a href="#">İleri</a></li>
    <li><a href="#">Geri</a></li>
</ul>

PAGER ÖĞESİNE İKON EKLEME

Bu başlık altında "Pager" öğesine nasıl ileri ve geri ikonu ekleriz bundan bahsedeceğiz. Bu ikonlar kullanıcı deneyimi açısından önemli bir etkendir.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir:

<ul class="pager">
    <li class="previous"><a href="#">&larr; Geri</a></li>
    <li class="next"><a href="#">İleri &rarr;</a></li>
</ul>

Kodlarımızda göründüğü gibi "&larr ve Lrarr" kullanarak ikonların oluşturulmasını sağlamış olduk.
Kodumuzun çıktısı ise şekildeki gibi olacaktır:

Resimde göründüğü gibi artık butonlarımız ok işaretlerine sahip oldu.

METIN ÖĞELERİ

Sitelerimizde birçok metin öğeleri yer alır. Bu başlık altında nasıl renkli metin öğeleri yapabiliriz, bundan bahsedeceğiz.
Renkli metin öğelerinde -span" etiketlerinden faydalanacağız.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<span class="label label-default">Varsayılan</span>
<span class="label label-success">Yeşil</span>
<span class="label label-primary">Mavi</span>
<span class="label label-info">Açık Mavi</span>
<span class="label label-warning">Sarı</span>
<span class="label label-danger">Kırmızı</span>

Göründüğü gibi, label yazdıktan sonra, "label-primary" gibi renk kodları ile bitişik biçimde yazdık.
Etiketlerimizin çıktısı ise aşağıdaki gibi olacaktır :

Göründüğü gibi renklerimiz kodlarda bulunan renk sırasına göre, soldan sağa doğru sıralanmış oldu.
Bu öğeleri aslında birçok yerde kullanabilirsiniz. Benim bir diğer göstermek istediğim kısım ise bu etiketleri başlıklar ile nasıl kullanabiliriz bunu göstermek.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<h3>Merhaba <span class="label label-danger">Dünya</span></h3>

Vurgulamış olduğum yerde göründüğü gibi kodları iç içe kullanım yaparak yazdık.
Kodumuzun çıktısı ise şekildeki gibi olacaktır :

Göründüğü gibi, her iki etikette aynı boyutta oldu. Bunun nedeni "span" etiketi "h" etiketinin içerisinde yer aldığı için onun yapılandırmasına göre boyut almasıdır.

BİLDİRİM KUTUCUĞU

Bu başlık altında özellikle birçok sosyal medya platformunda yer alan bildirim kutucuğu nasıl yapılır bunu öğreneceğiz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<span class="badge">1+</span>
<span class="badge">10</span>

Kodlarda göründüğü gibi, sadece span etiketine sınıf vererek kodumuzu oluşturduk.

Kodumuzun çıktısı ise şekildeki gibi olacaktır :

Göründüğü gibi, bildirim kutumuz oluştu. Bu kutuya istediğiniz herşeyi yazabilirsiniz.

JUMBOTRON ÖĞESİ

Jumbotron öğesi Bootstrap tarafından oluşturulmuş, "div" etiket' ile kullanılan bir kutucuktur.
Jumbotron adından azda olsa anlaşıldığı gibi "Jumbo" yani büyük bir kutudur. Bu kutuya istediğiniz şekilde öğeler ekleyebilirsiniz.
Ayrıca bu kutuyu ilgi çekmek istediğiniz alanlara ekleyerek kullanıcının daha kolay algılamasını sağlayabilirsiniz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="jumbotron">
    <h1>Hoşgeldiniz!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus, vitae neque culpa exercitationem at, ea sapiente amet inventore 
officia sint quod veritatis ipsum dicta veniam blanditiis, commodi ipsam quidem.</p>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus quam tempora minima id harum ullam blanditiis eveniet facilis nemo, 
dignissimos. Facere quidem eius distinctio! Itaque, dolorum nobis quisquam soluta!</p>
</div>
<div class="jumbotron">
    <h1>Hoşgeldiniz!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus, vitae neque culpa exercitationem at, ea sapiente amet inventore 
officia sint quod veritatis ipsum dicta veniam blanditiis, commodi ipsam quidem.</p>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus quam tempora minima id harum ullam blanditiis eveniet facilis nemo, 
dignissimos. Facere quidem eius distinctio! Itaque, dolorum nobis quisquam soluta!</p>
</div>

Kodlarımızda göründüğü üzere sadece "div" etiketine sınıf atayarak kodumuzu yazdık. Onun dışında bu kutuya istediğiniz elementleri ekleyebilirsiniz. Ben bir adet başlık ve iki adet metin öğesi ekledim.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi öğelerimiz başarılı olarak "Jumbotron" kutusuna yerleşti. Ayrıca kutuda göründüğü gibi Jumbotron geniş bir kutudur. Bununla beraber yapısal olarak "Margin" ve "Padding" uygulanmış halde gelmektedir. Bu sayede daha ferah bir görünüm elde etmiş oluyoruz.

PAGE HEADER ÖĞESİ

Bu öğemizde gayet kullanımı basit bir öğedir. Adından anlaşılacağı üzere menü yapmak için geliştirilmiş bir koddur.

Page Header öğesinin kullanımı oldukça basittir. Bu etiketi "Jumbotron" kısmında olduğu gibi "div" etiketi ile beraber kullanmaktayız.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="page-header">
    <h1>Merhaba</h1> <p class="lead">Dünya !</p>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias doloribus molestias, facilis odit amet esse quis neque ad 
repudiandae natus, veniam soluta beatae dolore harum molestiae autem temporibus eaque.</p>
</div>

Kodlarımızda göründüğü gibi ilk başta "div" etiketini kullandık. Ardından ise istediğimiz gibi öğelerimizi ekledik.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi eklemiş olduğumuz öğeler sıralanmış oldu. Bununla beraber alt kısımda ufak ve transparan görünümlü şerit eklendi.

RESİM KUTULARINA JAVASCRIPT İLE EFEKT VERME

Bu başlık altında daha önceden öğrenmiş olduğumuz, fotoğraf kutularına JavaScript ile nasıl geçiş efekti verebiliriz bunu öğreneceğiz.

Bu efekt fotoğrafın üstüne gelince mavi renkte ince bir çerçeve oluşturuyor. Bu sayede özellikle web sayfanızda çok fazla fotoğraf varsa en azından fotoğraflar arasında karışıklık olmasını önlüyor. Bu kullanımda, önceden vermiş olduğum JavaScript kütüphane kodları projenize dahil olması gerekiyor. Aksi taktirde oluşturacağımız efekt çalışmayacaktır.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir:

<div class="col-xs-10 col-md-5">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
    </a>
</div>

Vurgulamış olduğum alanda göründüğü gibi "holder.js" dosyasını kullanarak efekti verdik. Diğer satırlarda yer alan kodlar ise zaten sıradan bildiğimiz kodlardır.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Ben bu kısımda resim olarak standart olan Bootstrap taslak resmini kullandım. Ayrıca resimde göründüğü gibi resmin üzerine gelindiği anda, mavi renkli çerçeve belirdi. Bununla beraber aslında resimde gösteremediğim bir efekt daha var.

UFAK BOYUTLU RESİM VE İÇERİK KUTUSU

Bu başlık altında ufak boyutlu makale kutuları oluşturacağız. Bu kutulara istediğimiz gibi resim, yazı ve buton ekleyebileceğiz.
Örnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :

<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img data-src="holder.js/300x300" alt="..." src="http :// www. comulink.com.mx/Content/images/bootstrap.png ">
        <div class="caption">
            <h3>Merhaba Dünya</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ratione eveniet incidunt saepe explicabo amet tenetur id, ullam temporibus qui 
perferendis veritatis ut. Nemo minus accusantium quas sequi, culpa tempora?</p>
            <p><a href="#" class="btn btn-primary" role="button">Beğendim</a> <a href="#" class="btn btn-danger" role="button">Beğenmedim</a></p>
        </div>
    </div>
</div>

Kodlarımızda görüldüğü üzere temelde "div" etiketi kullanarak kutumuzu oluşturduk.
Kod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :

Resimde göründüğü gibi kutumuz oluşturuldu. Bununla beraber eklediğimiz tüm öğeler görüntülendi. Bu kutuyu özellikle blog tipi sitelerde rahatlıkla kullanabilirsiniz. Genel olarak blog tipini çağrıştırdığı için kendinize göre özelleştirip sitenize ekleyebilirsiniz.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---