Bootstrap İle Tablo Oluşturma Ve Özelleştirme

Bootstrap
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Source

Github
Bootstrap Web Sitesi

Source

What Will I Learn?	Neler Öğreneceğim?
- Guidelines for creating tables	-Tablo Oluşturmak için gerekli yönergeler
- Creating a table with bootstrap	- Bootstrap ile tablo oluşturma
- Customize tables with bootstrap	- Bootstrap ile tabloları özelleştirme

Requirements	Gereksinimler
- Basic HTML knowledge	- Basit HTML bilgisi
- Basic CSS knowledge	- Basit CSS bilgisi
- Basic JavaScript knowledge	- Basit JavaScript bilgisi
- Notepad++ (Website)	- Notepad++ (Website)

Difficulty	Zorluk
- Intermediate	- Orta

Curriculum (Bu konuyla ilgili tüm içeriklerim)

Bootstrap İle Buton Grupları Oluşturma Ve Kullanımı
Bootstrap İle Tooltip Oluşturma,Parametreleri Ve Kullanımı

Tutorial Contents (Yazının İçeriği)

Bugün bootstrap ile tablolar nasıl oluşturulur,nasıl düzenlenir bunları öğretmeye çalışıcağım.Tablolar zaten herkesin günlük hayatta kullandığı herkesin bilgisi olduğu birşeydir.Yazıcağınız veya listeliyiceğiniz objeleri vs. düzenli ve güzel bir görünüm içerisinde gösterir.Tablolar bize birçok yerde kolaylık sağlıyor ve yardımcı oluyor bu internet siteleri içinde geçerli bugün bootstrap ile tabloları göstericeğim.

Bootstrap'ı HTML Dosyamıza Ekleme

İlk olarak bir html dosyası açıyoruz.HTML dosyamızı notepad++ ile açıyoruz.Bootsrap'ı internet sitesinden indirebilirsiniz fakat ben hem daha hızlı olması hemde uraşmamak için direk cdn ile yükleme yapıcağım.Eklememiz gereken cdn kodları alttaki gibidir sizde bir html dosyası açtıkdan sonra bu kodları ekliyerek hiçbir indirme vs. yapmadan bootstrap ve jquery'i anında html dosyanıza ekliyebilirsiniz.

Html dosyamızın en üst kısmına bu kodlarımızı ekledik artık bootstrap ile kod yazmaya başlıyabiliriz.

Bootstrap Tablo Oluşturma

Kodlarımızı yazmaya başlıyoruz ilk olarak bir container oluşturmamız lazım.
<div class="container">
</div>
Ben açıklama eklemek için container'imi şu şekilde düzenliyorum siz bir açıklama vs. başlık girmek istiyorsanız benim gibi düzenliyebilirsiniz.
<div class="container">
<center>
<h2>Bootstrap Tablolar-mkompela16</h2>
Bu şekilde container'imi düzenledim html sayfamı açtığımda sayfanın ortasında Bootstrap Tablolar-mkompela16 yazıcaktır.
Daha sonra bir alt satırımıza geçip
<table class="table">

</table>
bir table oluşturuyoruz ve tablenin bitişini yazıyoruz görmüş olduğunuz gibi bu table'nin arasına geçelim yani alt satıra değilde iki table satırının arasına geçelim ve
<thead>

</thead>

yazalım yine table de olduğu gibi thead satırlarının arasına geçelim yine ve
<tr>

</tr>
yazalım thead satırlarının arasına bir kod daha yazmış olduk bundan sonra tablolarımızın başlıklarını yazabiliriz.Yazdığımız tr satırlarının arasına gelip son olarak
<th> </th>
şu kodu ekliyoruz bu başlık kodu anlamına geliyor.İki th kodunun arasına ne yazarsak o tablomuzun başlıkları olarak karşımıza çıkıcaktır.Tablomuzun başlık ekleme kodları bu şekildedir kafanızın karışmaması için kodlarımda bir resim çektim ordan inceliyebilirsiniz.
tablolar 1.png
Ben üç adet başlık ekliyiceğim başlık için kullandığımız kodunu yukarda gösterdiğim şekilde üç kere yazıcağım siz kaç başlık isterseniz tablonuzda ona göre ekleme yapabilirsiniz.

Daha sonra tablomuzun içeriğini yazmak için kodlarımızı yukarda gösterdiğim gibi yazdıktan sonra en alttaki yani tablomuzun bittiği kodun bir üst satırına şu kodu yazıyoruz.
<tbody>
</tbody>
Tablomuzun içeriğini giriceğimiz kodlarımızı ekledik daha sonra ise yine tablomuzun başlıklarını yazarken yaptığımız gibi satırları yazmamız lazım bunun için şu kodu kullanıcağız.
<tr>
</tr>
Satırlarımızı bu kodla yaptık daha sonra satır kodumuzun içerisine sütunlarımızı yazmamız lazım bunun için şu kodu kullanıcağız.
<td> </td>
bu kod sütun kodumuzdur mesela ben üç adet başlık ekledim bunun için üç adet sütun ekliyiceğim.
tablolar 2.png
Resimde gördüğünüz gibi benim işaretlediğim alan tablomuzun içeriğini gösteriyor.Fakat bu kodları sadece tablomuzun 1 satırı ve sütunu için yazdık.İstediğimiz kadar satır sütun ekliyebiliriz yani istediğimiz kadar yeni kişi ekliyebiliriz.Bunun için yine yukarda yazdığımız tbody kodumuzun arasına yeni bir tr satırını ve td sütununu eklememiz lazım.

Ben eklemelerimi yaptım.Şimdi isterseniz tablomuz nasıl gözüküyor bi html dosyamızı açalım.
tablolar 3.png

Resimde gördüğünüz gibi tablomuz oluşmuş ve çok şık duruyor.

Bootstrap İle Tabloları Özelleştirme

Tablomuzu oluşturduk fakat kendimize özel ve daha renkli bir tablomuz olsun istiyoruz bunun için tablomuzu nasıl özelleştiriceğimize geçelim.

Tablolarımızda satırlarımıza ve sütunlarımıza renk vermek istersek eğer daha önce tablolarımızın içeriğini girdiğimiz satır anlamına gelen kodumuza düzenleme yapmamız lazım.Örnek olarak
<tr> kodumuzu renk vericeğimiz satır için <tr class="success"> şu şekilde düzenliyoruz.Bu sayede düzenlediğimiz satırın rengi success renginde olucaktır yani yeşil bir renk ortaya çıkıcaktır.
tablolar 4.png
Gördüğünüz gibi satır kodumuzu renk ekliyerek düzenlediğimde bu şekilde o satırın renginin değiştiğini görüceksiniz.Bunu her satırın için farklı veya her sütun için farklı yapabilirsiniz tablolarda renk değiştirme mantığı bu şekildedir.Farklı renk seçenekleri içinde danger kırmızı olmaktadır.İnfo mavi olmaktadır.Warning turuncu ile sarı karışımı bir renk olmaktadır.Active gri olmaktadır.

Tablolarınızı özelleştirirken tablonuz gözünüze büyük gelirse eğer tablolarında farklı çeşitleri vardır yani özellikleri gibi birşey bunlardan birisi "condensed"dirTablonuzun satırları ve sütunları arasında olan boşlukları silerek size daha sıkı görünümde bir tablo göstermektedir.Bunun kullanımı ilk tablomuzu oluştururken kullandığımız kodları şu şekilde düzenlemektir.
<table class="table table-condensed">

Tablo oluşturma kodlarımıza ek olarak "table-condensed" kodunu eklemiş olduk.Tablomuzdaki değişikliği görmek için şimdi html dosyamızı açalım.
Tablomuzun normal hali:
tablolar 5.png
Tablomuzun condensed hali:
tablolar 4condenset.png
Resimlerde gördüğünüz gibi sıkılaştırılmış yani condensed tablo normal tablodan daha küçük görünüyor.
Kodlarımızın Tamamı:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Tablolar</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center>
<h2>Bootstrap Tablolar-mkompela16</h2>
<table class="table">
<thead>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Kullanıcı Adı</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Ahmet</td>
<td>Topgeldi</td>
<td>Ahmet.topcu3</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Katakcı</td>
<td>Mehmet.katakcı65</td>
</tr>
<tr>
<td>Mustafa</td>
<td>Kalender</td>
<td>Kalender_m34</td>
</tr>
</tbody>
</table>

</div>
</center>

Bootstrap ile tablolar için eğtimimiz bu kadardı okuduğunuz için teşekkürler.

Posted on Utopian.io - Rewarding Open Source Contributors