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
| 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.
<!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>
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.
Ben üç adet başlık ekliyiceğim başlık için kullandığımız
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.
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.
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
<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.
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:
Tablomuzun condensed hali:
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