ASSALAMU'ALAIKUM Wr. Wb.
Belajar Bootstrap
Setelah sebelumnya kita mempelajari pengertian Bootstrap kini kita akan mempraktekanya secara langsung bagaimana cara menggunakan Bootstrap dan pada tutorial kali ini kita akan membuat sebuah Tabel Responsive dengan Bootstrap. Untuk membuat tabel sangatlah mudah sobat hanya memasukkan class - class bootstrap yang berfungsi untuk mendesign tabel. Adapun beberapa class Bootstrap yang berguna untuk mendesign tabel.
- .table
Class ini berfungsi untuk mendefinisikan atau membuat tabel sederhana / standar - .table-strip
Merupakan class tambahan untuk membuat tabel dengan Bootstrap. Berfungsi untuk membuat baris tabel yang bergaya belang - belang ( strip ) - .table-bordered
Berfungsi untuk membuat tabel yang memiliki garis dan ketebalan garisnya dapat kita atur dan merupakan class tambahan untuk membuat tabel - .table-hover
Berfungsi untuk memberikan evek hover, yaitu ketika kursor kita arahkan pada tabel maka garis tabel akan mengeluarkan gaya tersendiri seperti bercahaya dan merupakan class tambahan untuk membuat tabel bootstrap
- .success
class ini digunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data - .danger
class ini digunakan untuk memberi warna merah pada table row atau table data - .info
class ini digunakan untuk memberi warna biru pada table row atau table data - .warning
class ini digunakan untuk memberi warna kuning pada table row atau table data
Untuk membuat atau mendesign table dengan Bootstrap buat sebuah file php atau html. Disini saya membuat file belajar2.html. Untuk cara Penggunaanya telah dibahas pada tutorial sebelumnya
contoh script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Membuat Table Dengan Bootstrap di MBILLY BLOG'S</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>8.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Ayam</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>8.000</td>
</tr>
<tr>
<td>4</td>
<td>Ayam Bakar</td>
<td>12.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>7.000</td>
</tr>
</tbody>
</table>
</body>
</html>
hasil:
Membuat Table Border dengan Bootstrap
Untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table_bordered" bersamaan dengan class "table". Contohnya
contoh script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Membuat Table Dengan Bootstrap di MBILLY BLOG'S</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>8.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Ayam</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>8.000</td>
</tr>
<tr>
<td>4</td>
<td>Ayam Bakar</td>
<td>12.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>7.000</td>
</tr>
</tbody>
</table>
</body>
</html>
hasil:
Membuat Tabel Strip dengan Bootstrap
Membuat table dengan warna belang - belang kita dapat meggunakan class " table-striped"
contoh script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Membuat Table Dengan Bootstrap di MBILLY BLOG'S</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>8.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Ayam</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>8.000</td>
</tr>
<tr>
<td>4</td>
<td>Ayam Bakar</td>
<td>12.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>7.000</td>
</tr>
</tbody>
</table>
</body>
</html>
hasil:
Membuat Table Hover dengan BootstrapSeperti pada contoh-contoh membuat table dengan bootstrap diatas, untuk membuat hover pada table anda hanya perlu menambahkan "table-hover" pada tag seperti ini <table>table table-hover </table>
contoh script:
<!DOCTYPE html>hasil:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Membuat Table Dengan Bootstrap di MBILLY BLOG'S</h1>
<table class="table table-bordered tabel-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>8.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Ayam</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>8.000</td>
</tr>
<tr>
<td>4</td>
<td>Ayam Bakar</td>
<td>12.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>7.000</td>
</tr>
</tbody>
</table>
</body>
</html>
Memberi Warna pada tabel dengan Bootstrap
Untuk mengganti warna table dengan Bootstrap adalah dengan memberikan class pada tag <td> atau <tr> untuk classnya sudah saya jelaskan diatas dan berikut adalah cara penggunaanya
contoh script:
hasil :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<h1>Membuat Table Dengan Bootstrap di MBILLY BLOG'S</h1>
<div class="table-responsive">
</div>
<table class="table table-bordered tabel-striped table-hover">
<thead>
<tr class="danger">
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>1</td>
<td>Bakso</td>
<td>8.000</td>
</tr>
<tr class="info">
<td>2</td>
<td>Mie Ayam</td>
<td>7.000</td>
</tr>
<tr class="success">
<td>3</td>
<td>Nasi Goreng</td>
<td>8.000</td>
</tr>
<tr class="info">
<td>4</td>
<td>Ayam Bakar</td>
<td>12.000</td>
</tr>
<tr class="warning">
<td>5</td>
<td>Nasi Soto</td>
<td>7.000</td>
</tr>
</tbody>
</table>
</body>
</html>
WASSALAM
Tidak ada komentar:
Posting Komentar