BootstrapYazılım

Bootstrap Dersleri – 6 | Tablolar

Teknotower desteği ile Bootstrap dersleri serimizin 6. bölümü olan “Tablolar, Butonlar, Fontlar vb.” yazımızla devam ediyoruz.

Bu derse başlamadan önce, henüz okumadıysanız başlangıç dersimizi okumanızı tavsiye ederim.

Birbirine bağlı derslerimizi takip ediyorsanız, bir önceki dersimiz olan “Kenarlık” konusunu okumanızı öneririm.

Bu dersin içeriği;

  • Yazı düzenleme nasıl yapılır?
  • Listeleme işlemleri nasıl yapılır?
  • Tablo ekleme nasıl yapılır?
  • Buton ekleme nasıl yapılır?
  • Dropdown açılır menü nasıl eklenir?
  • İlerleme çubukları ekleme nasıl yapılır?
  • Rozet nasıl eklenir?

Bootstrap ile yazı düzenleme nasıl yapılır?

Bootstrap’ de diğer derslerimizde de bahsettiğimiz gibi hazır tanımlı 6 tane renk sınıfı vardır. Bunlar,

  • default,
  • primary,
  • success,
  • danger,
  • warning
  • info özellikleridir.

Yazı tipi aileleri ise;

  • Verdana,
  • Arial,
  • Tahoma,
  • Helvetica’ dir.

Örnek kullanımları aşağıdaki şekildedir :

      <p class="font-weight-bold">ÖRNEKLER</p>

      <p><font face="arial" size="5" color="maroon">
      <b>Ariallı yazı var.</b></font></p>

      <p><font face="tahoma" size="5" color="maroon">
      <b>Tahomalı yazı var.</b></font></p>

      <p><font face="verdana" size="5" color="maroon">
      <b>Verdanalı yazı var.</b></font></p>

      <p><font face="hevetica" size="5" color="maroon">
      <b>Helvaticalı yazı var.</b></font></p>

Sınıfları bu şekilde kullanarak kendi yazı stilimizi oluşturabiliriz. Yukarıdaki kodumuzun çıktısı ise şu şekilde olacaktır;

yazı tipleri
Yazı tipi aileleleri

Listeleme nasıl yapılır?

Listeleme HTML’ de olduğu gibi iki şekilde yapılır;

  1. Sıralı liste [ordered list]
  2. Sırasız liste [unordered list] şeklindedir.

Sıralı listede 1,2,3 gibi sıra bildiren madde özellikleri varken, sırasız listede daire, çember, kare gibi madde işaretleri vardır.

<p>ul ile listeleme</p>
  <ul>
    <li>Birinci satır</li>
    <li>İkinci satır</li>
    <li>Üçüncü satır</li>
</ul>
<p>ol ile listeme</p>
  <ol >
    <li>Birinci satır</li>
    <li>İkinci satır</li>
    <li>Üçüncü satır</li>
</ol>

Kodun çıktısını görelim;

Bootstrap dersi ile listeleme
Bootstrap ile listeleme

Bootstrap’de tablo nasıl eklenir?

Genel olarak HTML ve CSS ile yaptığımız tablo mantığı burada da geçerlidir. Fakat tek tip tablo yerine birden fazla çeşit bulunmakta. Bunları şu şekilde görebiliriz;

  • Basic Table: Temel tablo.
  • Striped Rows: Çizgili satırlar.
  • Bordered Table: Kenarlıklı tablo.
  • Hover Rows: Üzerine cursor geldiğinde renk değiştiren satırlı tablo.
  • Black/Dark Table: Siyah/ Koyu temalı tablo.
  • Dark Striped Table: Koyu çizgili tablo.
  • Borderless Table: Kenarsız tablo.
  • Contextual Classes: Bağlamsal tablo.
  • Responsive Table: Duyarlı tablo.
Temel tablo
Bootstrap’de varsayılan tablo

Temel tablo kodu:

<div class="container">
  <h2>Temel Tablo</h2>
  <table class="table">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Emre Fatih</td>
        <td>YÜCEL</td>
        <td>fatih@example.com</td>
      </tr>
      <tr>
        <td>Ahmet Halil</td>
        <td>IŞIK</td>
        <td>ahmet@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
çizgili tablo
Çizgili tablo

Çizgili tablo kodu:

<div class="container">
  <h2>Çizgili Tablo</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Cansu</td>
        <td>MUSLU</td>
        <td>cansu@example.com</td>
      </tr>
      <tr>
        <td>Murat</td>
        <td>BERKSOY</td>
        <td>murat@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
kenarlıklı tablo
Kenarlıklı tablo

Kenarlıklı tablo kodu:

<div class="container">
  <h2>Kenarlıklı Tablo</h2>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Salih</td>
        <td>ÖZTÜRK</td>
        <td>salih@example.com</td>
      </tr>
      <tr>
        <td>Mehmet</td>
        <td>TEKNOTOWER</td>
        <td>mehmet@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
Tıklanabilir tablo
Üzerine geldiğinde imlecin bulunduğu satırın renginin değiştiği tablo. Tıklandığında renk değiştiren tablo.

Tıklanabilir tablo kodu:

<div class="container">
  <h2>Tıklanabilir Tablo</h2>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Baran</td>
        <td>YILDIRIM</td>
        <td>baran@example.com</td>
      </tr>
      <tr>
        <td>Musab</td>
        <td>AKDAŞ</td>
        <td>murat@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
KOyu temalı tablo
Koyu temalı tablo

Yukarıdaki tablolnun kodu:

<div class="container">
  <h2>Siyah/ Koyu Temalı Tablo</h2>
  <table class="table table-dark">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Beytullah</td>
        <td>YILMAZ</td>
        <td>beytullah@example.com</td>
      </tr>
      <tr>
        <td>Umut Can</td>
        <td>YILMAZ</td>
        <td>umut@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
koyu çizgili tablo
Koyu çizgili tablo

Koyu temalı tablo kodu:

<div class="container">
  <h2>Koyu Çizgili Tablo</h2>
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
      <thead>
        <tr>
          <th>ADI</th>
          <th>SOYADI</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tekno</td>
          <td>TOWER</td>
          <td>teknotower@example.com</td>
        </tr>
        <tr>
          <td>Nuri</td>
          <td>ARSLAN</td>
          <td>nuri@example.com</td>
        </tr>
        <tr>
          <td>Bahar</td>
          <td>GÜL</td>
          <td>bahar@example.com</td>
        </tr>
      </tbody>
  </table>
</div>
Kenarlıksız tablo
Kenarlığı olmayan sade tablo

Kenrlıksız tablonun kodu:

<div class="container">
  <h2>Kenarlıksız Tablo</h2>
  <table class="table table-borderless">
    <thead>
      <tr>
        <th>ADI</th>
        <th>SOYADI</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tekno</td>
        <td>TOWER</td>
        <td>teknotower@example.com</td>
      </tr>
      <tr>
        <td>Faruk</td>
        <td>AKSUNGUR</td>
        <td>faruk@example.com</td>
      </tr>
      <tr>
        <td>Eda</td>
        <td>AYDIN</td>
        <td>eda@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Buton ekleme nasıl yapılır?

Butonlar bir işi tamamladıktan sonra onaylamak ya da bilgileri göndermek gibi işlemleri kullanıcı için kolaylaştıran görsel düğmelerdir. Örneğin; doldurduğumuz bir formu karşı tarafa iletmek için, bir siteye bilgilerimizi girdikten sonra giriş yapmak için ya da ekran mesajlarını onaylamak için kullanılabilir. Tasarladığımız siteye görsellik kazandırmak için renkli butonlar ekleyebilir, bunlarla renkli bir sayfa oluşturabiliriz.

Kullanabileceğimiz buton sınıfları;

  • class=”btn”
  • class=”btn btn-primary”
  • class=”btn btn-secondary”
  • class=”btn btn-success”
  • class=”btn btn-info”
  • class=”btn btn-warning”
  • class=”btn btn-danger”
  • class=”btn btn-dark”
  • class=”btn btn-light”
  • class=”btn btn-link”

Diğer derslerimizde de gördüğümüz renk terimleri kullanılmış sizinde fark ettiğiniz gibi. Şimdi, bu sınıflar ile elde edeceğimiz sonuçları görelim;

Butonlar
Bootstrap butonlar

Sınıfların kullanım şeklini kodlar üzerinden görelim;

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Bir de renklerin sadece kenarlık olarak belirlendiği butonların kullanım şeklini görelim. Öncelikle kullanacağımız sınıflar;

  • class=”btn btn-outline-primary”
  • class=”btn btn-outline-secondary”
  • class=”btn btn-outline-success”
  • class=”btn btn-outline-info”
  • class=”btn btn-outline-warning”
  • class=”btn btn-outline-danger”
  • class=”btn btn-outline-dark”
  • class=”btn btn-outline-light”

Sınıfların kullanım şekli;

Kenarlıklı butonlar
Bootstrap kenarlıklı butonlar

Buton sınıflarının kullanım şekli kod üzerindenbu şekildedir;

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Genel olarak kullanılan submit ve sayfa içerisinde link içeren butonlar aşağıdaki gibidir.

genel butonlar
Bootstrap genel butonlar

Burada kod önemlidir ve şu şekildedir;

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

Dropdown(açılır menü) nasıl yapılır?

Herkesin bildiği ve çokça kullandığı açılır menüler bootstrap’de şu şekilde kullanılır;

<div class="dropdown">
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   Açılır menü
 </button>
 <div class="dropdown-menu">
   <a class="dropdown-item" href="#">Link 1</a>
   <a class="dropdown-item" href="#">Link 2</a>
   <a class="dropdown-item" href="#">Link 3</a>
 </div>
</div>

Sonuç olarak yazdığımız kodların çıktısı:

açılır menü
Açılır menü

Dropdown ile navbar yapmak istersek kullanabileceğimiz örnek kod;

<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>
navbar örneği
Bootstrap ile navbar

Sonuç olarak böyle bir navbar elde edebiliriz.

Bootstrap ile ilerleme çubukları nasıl yapılır?

Bootstrap’te ilerleme çubukları için özel sınıf bulunmaktadır. Bu ilerleme çubukları nedir? İlerleme çubukları, örneğin bir dosya indirirken karşımıza çıkan indirme yüzdesi ya da bir siteye girdiğimizde sitenin açılması için yüklenme yüzdesi gibi de düşünülebilir. İngiliççesi progress bar :)

ilerleme çubuğu
İlerleme çubuğu

Şekildeki gibidir. Kodu ise;

<div class="progress">
 <div class="progress-bar" style="width:70%">70%</div>
</div>

Bootstrap ile rozetler nasıl kullanılır?

Örneğin; mesajlarımıza bakarken kaç mesaj geldiğini bildiren butonlar kullanılabilir.

Kullanabileceğimiz buton çeşitleri aşağıdaki gibidir;

bootstrap ile rozetler
Bootstrap ile rozetler

Kodumuz ise;

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Mesaj örneğimizi ise somutlaştırmak için şu kodu ve çıktısını sizlerle paylaşmak isterim. :)

mesaj rozeti
Bootstrap ile mesaj rozeti
<button type="button" class="btn btn-primary">
     Mesajlar <span class="badge badge-light">4</span>
</button>

Bootstrap kursları ve çekilişlerden haberdar olmak için kesinlikle Instagram sayfamızı takip edin.

Bootstrap dersleri serimizin son konusu olan 6. dersimizi de tamamlamış bulunuyoruz. Tüm derslerimiz boyunca elde ettiğiniz bilgileri, vardığınız sonuçları ayrıca duygu ve düşüncelerinizi bekliyorum. Sağlıcakla kalın…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu