Generic placeholder image

Table Contextual

Ditanyakan pada tanggal 12 April 2019 oleh Saptaji

kenapa Table Contextual saya tidak berwarna? padahal udah sama persis

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
  <h2>Contextual</h2>
  <table class="table">
        <thead>
            <tr>
            <th>No</th>
            <th>Class</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success">
            <td>1</td>
            <td>table-success</td>
            </tr>
            <tr class="table-warning">
            <td>2</td>
            <td>table-warning</td>
            </tr>
            <tr class="table-danger">
            <td>3</td>
            <td>table-danger</td>
            </tr>
            <tr class="table-info">
            <td>4</td>
            <td>table-info</td>
            </tr>
            <tr class="table-active">
            <td>5</td>
            <td>table-active</td>
            </tr>
        </tbody>
    </table>
  </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>    
</html>
Comment ..

mungkin kodingan masnya bisa di tampilkan dlu

Dikomentari pada tanggal 12 April 2019 oleh Muhammad Alif
Comment ..
Dikomentari pada tanggal 12 April 2019 oleh Saptaji
Comment ..

ss tampilannya? soalnya library js nya offline jadi gabisa di running cuma satu file

Dikomentari pada tanggal 15 April 2019 oleh Muhammad Alif
Comment ..
Dikomentari pada tanggal 16 April 2019 oleh Saptaji
Comment ..

bootstrapnya sudah di download?

Dikomentari pada tanggal 16 April 2019 oleh Muhammad Alif
Comment ..

sudah pak, pake kelas table-hover jalan, table-responsive jalan cuma contextual doang yang enggak jalan. apa harus upgrade ke bootstrap 4? saya pake yg v3.7(sesuai arahan di tutorial codepolitan)

Dikomentari pada tanggal 16 April 2019 oleh Saptaji

1 JAWABAN

Generic placeholder image
Ahmad Oriza menjawab 6 hari yang lalu

Halo mas,

Fitur table berwarna ada di bootstrap 4, pastikan sudah memasang bootstrap 4 dengan baik. Bisa jadi dalam folder css pada saat memanggil bootstrap gagal. Sebaiknya gunakan CDN agar lebih yakin.

Saya sudah coba edit kode punya mas dan alhasil berhasil. Ternyata masalahnya ada di versi bootstrap yang salah. Kodenya jadi seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <!-- <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
     -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
  <h2>Contextual</h2>
  <table class="table">
        <thead>
            <tr>
            <th>No</th>
            <th>Class</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-success">
            <td>1</td>
            <td>table-success</td>
            </tr>
            <tr class="table-warning">
            <td>2</td>
            <td>table-warning</td>
            </tr>
            <tr class="table-danger">
            <td>3</td>
            <td>table-danger</td>
            </tr>
            <tr class="table-info">
            <td>4</td>
            <td>table-info</td>
            </tr>
            <tr class="table-active">
            <td>5</td>
            <td>table-active</td>
            </tr>
        </tbody>
    </table>
  </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>    
</html>

Dan hasilnya sudah bener :

Comment ..

Terima kasih banyak pak

Dikomentari 5 hari yang lalu oleh Saptaji