Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar, contohnya sseperti di handphone, tab, dekstop, dan lain - lainnya.
Sekarang saya sedang belajar Bagaimana membuat sebuah table responsive menggunakan Bootstrap.
pertama saya buat struktur HTML kemudian menambahkan struktur <table> kemudian menambahkan class.table didalam elemen <table> untuk mendapatkan tampilan table sedehana di dalam bootstrap. seperti di bawah ini saya mendapatkan artikel dari : https://www.kodingweb.com/bootstrap3/tutorial-bootstrap-tabel-pada-bootstrap/
Tabel Standar pada Bootstrap
Kelas tabel standar
(.table) pada Bootstrap memiliki padding yang tipis dan hanya dipisahkan oleh garis horizontal.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>Kelas .table menambahkan styling dasar pada tabel :
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Baris dengan Warna Selang Seling
Kelas
.table-striped menambahkan strip selang seling pada tabel :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>Kelas .table-striped menambahkan style zebra pada tabel :
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Table-Bordered
Menambahkan batas pada sisi-sisi tabel dan sel.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>Kelas .table-bordered menambahkan border pada tabel :
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Table-Hover
.
table-hover akan menyebabkan baris pada tabel berubah warna saat mouse berada di atasnya.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>Kelas .table-hover pada tabel akan memberi highlight pada baris saat mouse berada di atasnya:
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Table-Condensed
.table-condensed membuat tabel menjadi lebih rapat dengan mengurangi ukuran cell padding menjadi setengahnya.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>Kelas .table-condensed pada tabel akan mengurangi ukuran cell jadi lebih compact:
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Class Contextual
Class Contextual dapat digunakan untuk memodifikasi warna pada baris (<tr>) atau sell (<td>).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include bootstrap stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Kelas Kontekstual</h2>
<p>Kelas kontekstual akan memberikan warna pada cell table tertentu sesuai keinginan</p>
<p>Kelas yang dapat digunakan adalah : .active, .success, .info, .warning, dan .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td class="warning">Mary</td>
<td class="active">Moe</td>
<td class="danger">mary@example.com</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>July@example.com</td>
</tr>
</tbody>
</table>
</div>
<!--Javascript placed at the end of the document so the pages load faster-->
<!--Optional : Include the JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Incorporate the Bootstrap Javascript plugin-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
|
Class Contextual yang dapat digunakan :
ada juga saya temukan artikel dari : http://www.dumetschool.com/blog/Membuat-Table-Dengan-Bootstrap
dan ini yang membahas tentang form pada bootstrap : http://www.dumetschool.com/blog/Membuat-Form-Menggunakan-Bootstra
sayangnya tidak dapat di copy. hiks hiks.., tapi tak apalah , ini buat catatan saya. Semoga bermanfaat. ya... :)
0 comments:
Post a Comment