Bootstrap 3 Öğretimi Bölüm 2

 

Önceki Bölüm : Bölüm 1

Bootstrap Resimler

Rounded :

Circle :

Thumbnail :

Yuvarlak Köşeler

.img-rounded sınıf adı resmin köşelerini yuvarlatılmış yapar (IE8 yuvarlatılmış köşe stilini desteklemez).

            <div class="col-md-4">

                <img src="paris.jpg" class="img-rounded"/>

            </div>

Daire Şeklinde Resim

.img-circle sınıf adı ile resim yuvarlak bir çerçeve içinde gösterilir.

            <div class="col-md-4">

                <img src="newyork.jpg" class="img-circle"/>

            </div>

Thumbnail Stil Resim

.img-thumbnail sınıf adı ile resim thumbnail (Resim listesi) şeklinde görünür.

            <div class="col-md-4">

                <img src="sanfran.jpg" class="img-thumbnail"/>

            </div>

Uyumlu Resimler

Resimlerin kendine ait boyutları vardır .img-responsive sınıf adına sahip resimler kendileri için ayrılan alanın genişliğine kendilerini otomatik ayarlarlar. 

.img-responsive sınıf adı resime display: block;  ,  max-width: 100%;  ve  height: auto;  stillerini ekler.

        <div class="row">

            <div class="col-md-4">

                <img src="paris.jpg" class="img-rounded img-responsive"/>

            </div>

            <div class="col-md-4">

                <img src="newyork.jpg" class="img-circle img-responsive"/>

            </div>

            <div class="col-md-4">

                <img src="sanfran.jpg" class="img-thumbnail img-responsive"/>

            </div>

        </div>

Resim Galerisi

Thumbnail sınıfı ve Bootstrap grid sistemini kullanarak bir resim galerisi görünümünü oluşturabilirsiniz.

 <div class="row">

  <div class="col-md-3">

    <div class="thumbnail">

      <a href="paris.jpg">

        <img src="paris.jpg" alt="Paris" style="width:100%">

        <div class="caption"><p>Lorem ipsum donec id elit non mi porta gravida

at eget metus....</p></div>

      </a>

    </div>

  </div>

  <div class="col-md-3">

    <div class="thumbnail">

      <a href="newyork.jpg">

        <img src="newyork.jpg" alt="Newyork" style="width:100%">

        <div class="caption"><p>Lorem ipsum donec id elit non mi porta gravida

at eget metus....</p></div>

      </a>

    </div>

  </div>

  <div class="col-md-3">

    <div class="thumbnail">

      <a href="sanfran.jpg">

        <img src="sanfran.jpg" alt="SanFran" style="width:100%">

        <div class="caption"><p>Lorem ipsum donec id elit non mi porta gravida

at eget metus....</p></div>

      </a>

    </div>

  </div>

  <div class="col-md-3">

    <div class="thumbnail">

      <a href="fjords.jpg">

        <img src="fjords.jpg" alt="Fjords" style="width:100%">

        <div class="caption"><p>Lorem ipsum donec id elit non mi porta gravida

at eget metus....</p></div>

      </a>

    </div>

  </div>

 </div>

Lorem ipsum donec id elit non mi porta gravida at eget metus....

Lorem ipsum donec id elit non mi porta gravida at eget metus....

Lorem ipsum donec id elit non mi porta gravida at eget metus....

Lorem ipsum donec id elit non mi porta gravida at eget metus....

Uyumlu Medya İçerikleri

Videolarımızın , slide showlarımızın cihazlarda uygun gördüğümüz boyutlara uygun olarak sayfa görünümüne katılabilmesi için de sınıf isimleri mevcut. 

Bu sınıflar <iframe> , <embed> , <video> ve <object> elemanlarına uygulanabilir. 

Aşağıdaki örnek bir <iframe> elemanına .embed-responsive-item sınıfı uygulayarak bulunulan yerleşime bir video gömüyor. Çevreleyen div elemanında ise video en-boy oranı veriliyor.

 <div class="row">

  <div class="col-md-6">

      <div class="embed-responsive embed-responsive-16by9">

    <iframe class="embed-responsive-item"

    src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

  </div>

    </div>

  </div>

  <div class="col-md-6"></div>

 </div>

16by3 ve 4by3 olarak 2 en-boy oranı seçilebilir.

Jumbotron

Jumbotron sayfada dikkatleri üzerine çekecek kadar büyük yazılar içeren bir kutu oluşturur. Sayfa başlıkları için ideal bir görünüm sunar. Köşeleri yuvarlatılmış açık gri bir fon üzerine büyütülmüş yazılardan oluşur. Jumbotron içinde istediğiniz HTML elemanı yerleştirebilirsiniz. 

Jumbotron görünümü oluşturmak için içeriğinizi .jumbotron sınıf adı kullanan bir <div> elemanı içine yerleştirin.

    <div class="jumbotron">

        <h1>Bootstrap 3</h1>

        <p>

            Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık

            bölümü oluşturulabilir.

        </p>

    </div>

Bootstrap 3

Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık bölümü oluşturulabilir.

Eğer sayfanın tüm genişliğini işgal etmesini istemezseniz bir .container içine de yerleştirebilirsiniz.

    <div class="container">

        <div class="jumbotron">

            <h1>Bootstrap 3</h1>

            <p>

                Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık

                bölümü oluşturulabilir.

            </p>

        </div>

    </div>

Bootstrap 3

Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık bölümü oluşturulabilir.

Güzel bir başlık yerleşiminde .container dışında bir .jumbotron ve sonrasında bir grid yerleşimi daha uygun olacaktır.

    <div class="jumbotron">

        <h1>Bootstrap 3</h1>

        <p>

            Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık

            bölümü oluşturulabilir.

        </p>

    </div>

    <div class="container">

        <p>Bir paragraf</p>

        <p>Bir paragraf daha</p>

    </div>

Bootstrap 3

Jumbotron ile sayfada kocaman yazılarıyla dikkat çeken bir başlık bölümü oluşturulabilir.

Bir paragraf

Bir paragraf daha

Page Header

Header başlık kısmı demek. .page-header sınıf adı kullanan bir <div> elemanı içinde Bootstrap'ın özel başlık görünümüne sahip başlıklar yapılabilir.

    <div class="container">

        <div class="page-header">

            <h1>Örnek Page Header</h1>      

        </div>

        <p>Bir paragraf</p>

        <p>Bir paragraf daha</p>

    </div>

Örnek Page Header

Bir paragraf

Bir paragraf daha

Well Sınıfı

.well sınıfı elemanın arkaplanını açık gri ve köşeleri yuvarlatılmış yaparken biraz da padding ile etrafında boşluk oluşturur.

        <div class="well">

            Temel seviye Well      

        </div>

Temel seviye Well

Değişik boyutlar

Daha az ya da daha fazla padding için .well-sm ya da .well-lg sınıf isimleri eklenir.

    <div class="container">

        <div class="well">

            Temel seviye Well      

        </div>

        <div class="well well-sm">

            Az padding Well      

        </div>

        <div class="well well-lg">

            Çok padding Well      

        </div>

    </div>

Temel seviye Well

Az padding Well

Çok padding Well

Bootstrap Alert Sınıfı Bildirimler

.alert sınıfı ve yardımcılarını kullanarak sayfalarımızda kullanıcıya içeriğe göre renklendirilmiş bildirim mesajları verebiliriz. Yardımcı sınıf isimleri .alert-success, .alert-info, .alert-warning veya .alert-danger olabilir.

    <div class="container">

        <div class="alert alert-success">

            <strong>Success!</strong> Bu alarm mesaj kutusu başarılı

            bir aksiyonu bildirir.

        </div>

        <div class="alert alert-info">

            <strong>Info!</strong> Bu alarm mesaj kutusu bilgi  

            amaçlı mesaj bildirir.

        </div>

        <div class="alert alert-warning">

            <strong>Warning!</strong> Bu alarm mesaj kutusu kullanıcıya

            bir uyarı mesajı verir.

        </div>

        <div class="alert alert-danger">

            <strong>Danger!</strong> Bu alarm mesaj kutusu tehlikeli

            bir durumu bildirir.

        </div>

    </div>

Success! Bu alarm mesaj kutusu başarılı bir aksiyonu bildirir.

Info! Bu alarm mesaj kutusu bilgi amaçlı mesaj bildirir.

Warning! Bu alarm mesaj kutusu kullanıcıya bir uyarı mesajı verir.

Danger! Bu alarm mesaj kutusu tehlikeli bir durumu bildirir.

Alarm Mesajı İçinde Link

Alarm mesajları içine konan linklerin görünümünün uygun renklerde olması için .alert-link sınıfı kullanılır.

        <div class="alert alert-success">

            <strong>Success!</strong> İşlem başarılı

            <a href="#" class="alert-link">buradan görebilirsiniz</a>

        </div>

Success! İşlem başarılı buradan görebilirsiniz

Kapatılabilen Alarmlar

Alarm mesajını görünümden yok etmek için alarm elemanına .alert-dismissible sınıfı ekleyin ve mesaj kapatma işareti olarak da özelliklerinde class="close" ve data-dismiss="alert" olan bir link ekleyin.

    <div class="container">

        <div class="alert alert-success">

            <strong>Success!</strong> İşlem başarılı

            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

        </div>

    </div>

Success! İşlem başarılı ×

Animasyonlu Alarm

.fade ve .in sınıf adları alarm kapatılırken fade effekt oluşturur.

    <div class="container">

        <div class="alert alert-success fade in">

            <strong>Success!</strong> İşlem başarılı

            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

        </div>

    </div>

Success! İşlem başarılı ×

Bootstrap Butonlar

Buton stilleri

Bootstrap'ta farklı görünümlerde <button> elemanları için hazır sınıflar vardır. 

    <div class="col-md-12">

        <button type="button" class="btn">Temel</button>

        <button type="button" class="btn btn-default">Default</button>

        <button type="button" class="btn btn-primary">Primary</button>

        <button type="button" class="btn btn-success">Success</button>

        <button type="button" class="btn btn-info">Info</button>

        <button type="button" class="btn btn-warning">Warning</button>

        <button type="button" class="btn btn-danger">Danger</button>

        <button type="button" class="btn btn-link">Link</button>

    </div>

Buton sınıf isimleri <a> , <button> veya <input> elemanlarına uygulanabilir.

    <div class="col-md-12">

        <a href="#" class="btn btn-info" role="button">Link Button</a>

        <button type="button" class="btn btn-info">Button</button>

        <input type="button" class="btn btn-info" value="Input Button">

        <input type="submit" class="btn btn-info" value="Submit Button">

    </div>

Link Button

Buton Boyutları

4 boyda buton için ilave sınıf eklemesi yapılabilir.

• Normal buton için ekleme yapılmaz
• .btn-lg büyük buton için
• .btn-sm küçük buton için
• .btn-xs çok küçük buton için

    <div class="col-md-12">

        <button type="button" class="btn btn-primary btn-lg">Large</button>

        <button type="button" class="btn btn-primary">Normal</button>

        <button type="button" class="btn btn-primary btn-sm">Small</button>

        <button type="button" class="btn btn-primary btn-xs">XSmall</button>

    </div>

Bulunduğu Bloğa Yayılan Butonlar

İçinde bulunduğu elemanın tüm genişliğini kaplayan buton için .btn-block sınıfı eklenir.

    <div class="col-md-6">

        <button type="button" class="btn btn-primary btn-block">Buton 1</button>

    </div>

    <div class="col-md-6">

        <button type="button" class="btn btn-info btn-block">Buton 2</button>

    </div>

Aktif ve Disabled Butonlar

Bir buton aktif (basılmış gibi) ya da disabled (tıklanması engellenmiş) olarak da gösterilebilir. Bu amaçlarla .active ve .disabled sınıf isimleri kullanılır.

    <div class="col-md-12">

        <button type="button" class="btn btn-primary active">Active Primary</button>

        <button type="button" class="btn btn-primary disabled">Disabled Primary</button>

    </div>

Bootstrap Buton Grupları

Bootstrap butonları tek bir çizgi üzerinde gruplamanıza olanak sağlar. Bir buton grubu oluşturmak için onları .btn-group sınıf adına sahip bir <div> elemanı içine yerleştirin.

<div class="btn-group">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>

</div>

Grup içindeki her butona ayrı ayrı büyüklük tanımlamak yerine gruba .btn-group-lg|sm|xs sınıflarından birini ekleyebilirsiniz. 

<div class="btn-group btn-group-lg">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>

</div>

Dikey Buton Grupları

.btn-group-vertical sınıfı bir <div> elemanı içerisinde topladığınız butonlar dikey olarak gruplanır.

<div class="btn-group-vertical">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>

</div>

Satıra Yayılmış Buton Grubu

.btn-group-justified sınıfını ilave olarak verirsek grubumuzdaki butonlar bulunulan <div> elemanının tüm genişliğini kaplayacak şekilde uzatılır. 

<div class="btn-group btn-group-justified">

    <a href="#" class="btn btn-primary">Apple</a>

    <a href="#" class="btn btn-primary">Samsung</a>

    <a href="#" class="btn btn-primary">Sony</a>

</div>

Apple Samsung Sony

Bu örnekte link elemanları şeklinde butonlar kullanıldı. <button> elemanıyla bunu yapmak biraz daha zahmetli.

<div class="btn-group btn-group-justified">

    <div class="btn-group">

        <button type="button" class="btn btn-primary">Apple</button>

    </div>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">Samsung</button>

    </div>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">Sony</button>

    </div>

</div>

Buton Gruplarının İçiçe Olması ve Aşağı Açılan Menüler

Aşağı açılan menüler oluşturmak için buton gruplarını içiçe yerleştirirsiniz.

<div class="btn-group">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <div class="btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle"

        data-toggle="dropdown">Sony

        <span class="caret"></span></button>

    <ul class="dropdown-menu" role="menu">

      <li><a href="#">Tablet</a></li>

      <li><a href="#">Smartphone</a></li>

    </ul>

  </div>

</div>

• Tablet
• Smartphone

Ayrı Buton Olarak Açılan Menü

<div class="btn-group">

  <button type="button" class="btn btn-primary">Sony</button>

  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

    <span class="caret"></span>

  </button>

  <ul class="dropdown-menu" role="menu">

    <li><a href="#">Tablet</a></li>

    <li><a href="#">Smartphone</a></li>

  </ul>

</div>

• Tablet
• Smartphone

Bootstrap Glyphicon'lar

Bootstrap karakterler şeklinde ifade edilen Glyphicon fontların küçültülmüş seti olan Halflinks setini 260 ikon ile destekler. Bunların tam listesi burada mevcut. 

Bazı örnekler şöyle:

Zarf ikonu : 

Print ikonu : 

Search ikonu : 

Download ikonu : 

Bir glyphicon aşağıdaki şekilde ifade edilir.

<span class="glyphicon glyphicon-adı"></span>

Glyphicon Örnekleri

<p>Zarf ikonu : <span class="glyphicon glyphicon-envelope"></span></p>

<p>Link olarak zarf ikonu :

  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>

</p>

<p>Arama ikonu: <span class="glyphicon glyphicon-search"></span></p>

<p>Bir buton ile arama ikonu :

  <button type="button" class="btn btn-default">

    <span class="glyphicon glyphicon-search"></span> Search

  </button>

</p>

<p>Stilli buton üzerinde glyphicon :

  <button type="button" class="btn btn-info">

    <span class="glyphicon glyphicon-search"></span> Search

  </button>

</p>

<p>Print ikonu : <span class="glyphicon glyphicon-print"></span></p>

<p>Link butonu üzerinde print ikonu :

  <a href="#" class="btn btn-success btn-lg">

    <span class="glyphicon glyphicon-print"></span> Print

  </a>

</p>

Zarf ikonu :

Link olarak zarf ikonu :

Arama ikonu:

Bir buton ile arama ikonu :

Stilli buton üzerinde glyphicon :

Print ikonu :

Link butonu üzerinde print ikonu : Print

Bootstrap İpucu Rozeti ve Etiketler

İpucu Rozeti (Badge)

Bunlar bir linkin yanında o linke bağlı kaç madde olduğunu belirtir küçük ipucu bildirimleridir. Mesela yeni gelen mesajları falan ifade eden sayılar.

Haberler 5
Yorumlar 10
Güncellemeler 2

Buradaki 5, 10 ve 2 sayıları ipucu rozetleridir. İfade etmek için .badge sınıf adına sahip <span> elemanları kullanılır.

<a href="#">News <span class="badge">5</span></a><br>

<a href="#">Comments <span class="badge">10</span></a><br>

<a href="#">Updates <span class="badge">2</span></a>

İpucu rozetleri buton gibi diğer elemanlar içinde de kullanılabilir.

<button type="button" class="btn btn-primary">Primary

    <span class="badge">7</span>

</button>

Etiketler (Label)

Etiketler bir konu hakkında yardımcı bilgi vermek için kullanılır.

.label sınıfının ve ek olarak da içeriğe bağlı renklendirme yapan .label-default, .label-primary, .label-success, .label-info, .label-warning veya .label-danger sınıf adında bir <span> elemanı olarak ifade edilir.

<h1>Example <span class="label label-default">New</span></h1>

<h2>Example <span class="label label-default">New</span></h2>

<h3>Example <span class="label label-default">New</span></h3>

<h4>Example <span class="label label-default">New</span></h4>

<h5>Example <span class="label label-default">New</span></h5>

<h6>Example <span class="label label-default">New</span></h6>

Example New

Example New

Example New

Example New

Example New

Example New

Aşağıdaki örnek de içeriğe bağlı renklendirmeleri gösteriyor

<span class="label label-default">Default Label</span>

<span class="label label-primary">Primary Label</span>

<span class="label label-success">Success Label</span>

<span class="label label-info">Info Label</span>

<span class="label label-warning">Warning Label</span>

<span class="label label-danger">Danger Label</span>

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Bootstrap Progress Bar

Temel Progress Bar

Progress bar bir işlemin o anda ne kadarının gerçekleşmiş olduğunu göstermek için sıkça kullanılır. Bootstrap bize değişik progress bar görünümleri sağlar. Default olan progress bar şuna benzer.

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="70"

  aria-valuemin="0" aria-valuemax="100" style="width:70%">

    <span class="sr-only">70% Complete</span>

  </div>

</div>

70% Complete

Not : Progress bar Internet Explorer 9 ve önceki sürümlerinde desteklenmez (Çünkü animasyon ve efektler için CSS3 transition'ları kullanır).

Not : Screen reader kullanan okuyucular için aria-* özellikleri kullanmalısınız. 

Etiketi Olan Progress Bar

Progress bar içindeki <span> elemanından .sr-only sınıfını çıkarırsanız üzerinde değeri yazan bir etiket yazılı görünecektir.

<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="70"

  aria-valuemin="0" aria-valuemax="100" style="width:70%">

    <span>70% Complete</span>

  </div>

</div>

70% Complete

Renklendirilmiş Progress Barlar

İçeriğe bağlı renklendirme sınıfları ilave olarak kullanarak renklendirilmiş barlar elde edilir. Bu sınıflar

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

Default görüntü zaten primary renk gibi görünüyor.

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"

  aria-valuemin="0" aria-valuemax="100" style="width:40%">

    40% Complete (success)

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"

  aria-valuemin="0" aria-valuemax="100" style="width:50%">

    50% Complete (info)

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"

  aria-valuemin="0" aria-valuemax="100" style="width:60%">

    60% Complete (warning)

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"

  aria-valuemin="0" aria-valuemax="100" style="width:70%">

    70% Complete (danger)

  </div>

</div>

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Zebra Çizgili Progress Bar

.progress-bar-striped sınıfı ekleyerek progress barımızı çapraz zebra çizgi gölgeleri olan görünüme çevirebiliriz.

<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% Complete (success)

  </div>

</div>

40% Complete (success)

Animasyonlu Progress Bar

Progress barın hareketli görünmesi için .active sınıfını ekleyebilirsiniz.

<div class="progress">

  <div class="progress-bar progress-bar-striped active" role="progressbar"

  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">

    40%

  </div>

</div>

40%

Yan Yana Progress Barlar

.progres sınıfı ana <div> elemanı içine birden fazla .progress-bar sınıfı <div> eklerseniz yan yana yapışık barlar olarak görünürler.

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">

    Free Space

  </div>

  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">

    Warning

  </div>

  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">

    Danger

  </div>

</div>

Free Space

Warning

Danger

Sonraki sayfalar :

• Bölüm 3
• Bölüm 4
• Bölüm 5