Stil Sayfaları (CSS) 16 - Tablo, Kenarlık ve Jumbotron Sınıfları

 4.4.3.5. Tablo Sınıfı

Bootstrap “table” sınıfı ile görsel açıdan zenginleştirilmiş tablolar oluşturulabilir (Tablo 4.19).

Tablo 4.19: Tablo Sınıfı

Sınıf Adı	Açıklama	Kullanımı
table	Table sınıfı özelliklerini kullanmak için tek başına veya diğer table alt sınıfla­rıyla birlikte kullanılabilir.	<table class="table">
table-sm	Satır yüksekliği azaltılmış bir tablo için kullanılır.	<table class="table table-sm">
table-bordered	Tablonun tüm hücrelerine kenarlık ekler.	<table class="table table-borde­red">
table-border­less	Tablodaki tüm kenarlıkları kaldırır.	<table class="table table-border­less">
table-hover	Tablo satırları üzerine fare ile gelindi­ğinde satıra arka plan rengi verir.	<table class="table table-hover">
table- striped	Tablo satırlarının arka plan renklerini bir satır arayla farklı renk tonuyla gösterir.	<table class="table table-striped">
table-dark ve diğer renk sınıfları	Tablonun satırlarının veya sütunları­nın arka plan rengini istenilen renk sınıfına göre ayarlar.	<table class=”table table-dark”> <table class=”table table-primary”> <tr class=”table table-info”> <td class=”table table-danger”>
thead-dark	Tablo başlık bölümünün arka plan rengini değiştirir.	<thead class=”thead-dark”>

Not

Table sınıfı kullanılırken birden fazla sınıfı birlikte kullanmak mümkündür.

28. Uygulama

Bootstrap “table” sınıfı kullanarak tablo biçimlendirme işlemlerini Görsel 4.39’da

görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.39: Tablo yapısı

1. Adım: HTML sayfası oluşturunuz ve Bootstrap Framework bağlantı kodlarını ekleyiniz.

2. Adım: Ad, Soyad, Şehir başlıkları bulunan üç sütun ve beş satırlık bir tablo oluşturunuz.

3. Adım : Tablonun satırları üzerine fare ile gelindiğinde satırın arka plan rengini

değiştiriniz. Tablonun arka plan rengini primary yapınız. Tablonun her tarafına kenarlık

ekleyiniz. Tablodaki satır yüksekliklerini azaltınız. Başlık satırının arka plan

rengini dark yapınız ve tablonun iki farklı hücresinin arka plan rengini değiştiriniz.

<table class="table table-hover table-primary table-striped table-bordered table-sm">

<thead class="thead-dark">

<tr> <th>Ad</th> <th>Soyad</th> <th>Şehir</th> </tr>

</thead>

<tbody>

<tr> <td>Melih</td> <td>BOZKURT</td> <td>Yozgat</td> </tr>

<tr> <td class="table-danger">Hüma</td> <td>AVCI</td> <td>Bursa</td> </tr>

<tr class="table-light"> <td>Ayşegül</td> <td>KAYA</td> <td>Tokat</td> </tr>

<tr> <td class="table-warning">Beyza</td> <td>ASLANHAN</td> <td>Bayburt</td>

</tr>

</tbody>

</table>

4.4.3.6. Kenarlık Sınıfları

Kenarlık sınıfları eklendiğinde elemanların görünümleri Görsel 4.40’da görüldüğü gibi üç farklı

şekilde değişmektedir. Kenarlık sınıfları <img>, <div> ve daha birçok elemana eklenmektedir. Kenarlık

çeşitleri ile ilgili önemli bilgiler Tablo 4.20’de verilmiştir.

Görsel 4.40: Kenarlık çeşitleri

Tablo 4.20: Kenarlık Çeşitleri

Sınıf Adı	Açıklama	Kullanımı
rounded	Eklendiği elemanın köşelerini yuvarlar.	<img src=”resim1.jpg” class=”rounded”> <div class=”col-sm-2 img-rounded”>
rounded-circle	Eklendiği elemanın en boy ora­nına göre tam daire veya elips şeklinde bir görünüme sahip olmasını sağlar.	<img src=”resim1.jpg” class=”roun­ded-circle”> <div class=”col-lg-6 rounded-circle “>
img-thumbnail	Eklendiği elemanın hem çerçe­veli hem de köşeleri yuvarlanmış olmasını sağlar.	<img src=”resim1.jpg” class=”img-humb­nail”> <div class=”col-md-6 img-humbnail”>

4.4.3.7. Jumbotron Sınıfı

Web sitesi içinde vurgu yapılacak özel bir içeriği yansıtmak için kullanılabilecek özel bir kutu

oluşturur. Kutunun rengi varsayılan olarak gridir. Jumbotron kutusu içinde neredeyse tüm HTML

elemanları kullanılabilir (Görsel 4.41).

Görsel 4.41: Jumbotron sınıfı

<div class="jumbotron ">

<img src="KahveBilgisayar.jpg" style="width:100px;" class="img-thumbnail">

<h1>Yazılım</h1>

<p>Hayallerinizdeki uygulamaları geliştirmek için sadece bilgisayar ve kahveye ihtiyacınız

var.</p>

</div>