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;
Listeleme nasıl yapılır?
Listeleme HTML’ de olduğu gibi iki şekilde yapılır;
- Sıralı liste [ordered list]
- 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’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 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 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 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 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>
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 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>
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;
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;
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.
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ı:
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>
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 🙂
Ş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;
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. 🙂
<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…
