Tutorial Bootstrap Part 1

Membuat Tabel Responsive Bootstrap

Sebelum mengawali projek latihan kali   ini bro pastikan anda untuk mendowload terlebih dahulu komponen dari bootstrap 3 yaitu : CSS, FONT, IMAGES, JS . Klik disini.

Setelah terdownload, Extract dahulu file tersebut dengan cara klik kanan - pilih Extract Files. Kemudian Copy file extract tersebut  dengan cara klik kanan - pilih Copy dan taruh di folder C:Xampp/htdocs.

nah sekarang kita sudah mempunyai CSS, FONT, IMAGES, JS bawaan bootstrap nih mas bro/mba bro. tinggal kita ngeluarin jurus ketik menyetik kode/script dahhhhhhhh................

Buka notepadd++,  dreameawear atau yang lain nya.

ketikan kode/script dibawah ini

<!DOCTYPE html>
<html>
  <head>
    <title>Latihan 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head>
  <body>
    <div class="container">
      <div class="page-header">
<h1>Table Responsive</h1>
        <p class="lead">Table Bootstrap</p>
 </div>
 <div class="row">
<table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>NIM</th>
            <th>Nama</th>
            <th>IPK</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>123030090</td>
            <td>Kedo Wijaya</td>
            <td>3.72</td>
          </tr>
          <tr>
            <td>2</td>
            <td>123030091</td>
            <td>Muhammad Haekal Nusantara</td>
            <td>3.54</td>
          </tr>
          <tr>
            <td>3</td>
            <td>1230300101</td>
            <td>Enur Iskandar</td>
            <td>3.66</td>
          </tr>
        </tbody>
      </table>

 </div>
 </div>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Klik simpan/save  dengan nama tabel_respomsive.php dan taruh di file folder  C:Xampp/htdocs/latihan_bootstrap

Jika semua sudah selesai tinggal kita jalankan apa yang para mas bro dan mba bro ketik .

buka google chrome, mozila. ketik localhost/latihan_bootstrap/tabel_responsive.php

dan silahkan lihat hasilnya para mas bro dan mba bro ......

GOOD LUCK  ... tunggu tutorial gue selanjutnya.