Diartikel sebelumnya kita sudah belajar cara menggunakan bootstrap , diartikel ini kita akan belajar cara menampilkan atau membuat tabel yang berisi data statis menggunakan Bootstrap :) .
Pertama, buka kembali file coba.html diartikel sebelumnya atau buat file baru dengan nama bebas,tapi pastikan letak file dan folder berada di htdocs seperti berikut (pada folder template, berisi sub-folder js dan css bootstrap):
Kemudian ketik kode berikut :
<html>
<head>
<title>Belajar Bootstrap</title>
<link href="template/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Filter</h1>
Nama
<input type="text" name="nama" class="form-control" value=""/><hr>
<input type="submit" name="filter" class="btn btn-primary" value="Filter"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
disini nanti ada tabel :)
</div>
</div>
</div>
</body>
<script src="template/js/bootstrap.min.js"></script>
</html>
Tampilannya sebagai berikut :
Jika anda mengikuti artikel sebelumnya, perbedaan dikode html yaitu terdapat penambahan <div class="row"> <div class="col-md-4"> dan juga perubahan nama label,textbox dan button.
Tujuannya agar bagian "filter" yang memiliki class col-md-4 terpisah dari bagian "table" yang memiliki class col-md-12. Untuk lebih jelasnya, ketikkan lagi kode berikut:
<html>
<head>
<title>Belajar Bootstrap</title>
<link href="template/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Filter</h1>
Nama
<input type="text" name="nama" class="form-control" value=""/><hr>
<input type="submit" name="filter" class="btn btn-primary" value="Filter"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table width="100%">
<tr>
<th>No</th>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>100120</td>
<td>Orga</td>
<td>Jakarta Barat No 58</td>
</tr>
<tr>
<td>2</td>
<td>100121</td>
<td>Mikazuki</td>
<td>Depok</td>
</tr>
<tr>
<td>3</td>
<td>100122</td>
<td>Akihiro</td>
<td>Jakarta Pusat No 100</td>
</tr>
<tr>
<td>4</td>
<td>100123</td>
<td>Lia</td>
<td>Jakarta Selatan,Lebak Bulus</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="template/js/bootstrap.min.js"></script>
</html>
Maka hasilnya :
Tabel sudah terbentuk, namun kita belum menambahkan class pada tabel tersebut. Contoh kita menambahkan class table table-bordered
Kode (lakukan perubahan pada tag html table)
<table width="100%" class="table table-bordered">
Hasilnya:
terlihat border pada table :) . kita bisa menambahkan lagi class tambahan pada table tersebut agar lebih menarik, misalnya tambah class table-striped
Kode (lakukan perubahan pada tag html table)
<table width="100%" class="table table-bordered table-striped">
Hasilnya:
Yap, tampilan table lebih baik dari sebelumnya :) . Sekali lagi kita tambahkan class tambahan pada table agar warna row atau baris pada table berubah ketika di hover (didekati) oleh cursor mouse.
Kode (lakukan perubahan pada tag html table)
<table width="100%" class="table table-bordered table-striped table-hover">
Hasilnya:
data atau row yang berisi nama orga yang sedang di hover oleh cursor mouse akan berubah warna.Sampai disini kita berhasil membuat table menggunakan class bootstrap.
Semoga Bermanfaat
.jpg)
0 komentar:
Posting Komentar