Hai teman – teman kembali lagi di dosenit.com. Setelah sebelumnya kita membahas mengenai jumbotron sekarang kita akan membahas mengenai warna. Kenapa Warna pada bootstrap ? apakah ada hal yang berbeda dengan html atau CSS ?, silahkan teman=teman perhatikan sampai selesai (jangan hanya memperhatikan tapi juga di coba ya).
Langsung saja kita mulai,
Bootstrap memiliki beberapa hal yang unik dan simple contohnya adalah warna, kenapa saya bilang simple ? karena pada bootstrap kita hanya tinggal memasukkan Class – Class untuk memberi warna pada suatu elemen (khususnya teks dan background) dibandingkan harus menulis script program pada html atau CSS yang banyak.
Section Artikel
Warna Teks
Pada bootstrap memiliki beberapa warna “kontekstual” yaitu warna yang dapat memberikan suatu makna tertentu. Silahkan teman – teman perhatikan tabel dibawah:
| Class | Makna |
|---|---|
| .text-muted | teks yang diberi warna menandakan bahwa teks ini di nonaktifkan |
| .text-primary | menandakan teks penting |
| .text-success | menandakan indikasi teks sukses |
| .text-info | menandakan bahwa teks mengandung beberapa informasi |
| .text-warning | menandakan teks adalah peringatan |
| .text-danger | menandakan teks adalah sebuah pernyataan bahaya |
| .text-secondary | teks secondary (lihat typography bootstrap) |
| .text-white | menandakan teks berwarna putih |
| .text-dark | menandakan teks berwarna abu-abu gelap |
| .text-body | class yang biasa digunakan pada body dengan warna hitam (biasanya) |
| .text-light | teks akan berwarna abu-abu terang |
Lebih jelasnya silahkan teman – teman lihat pada program atau script dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: purple; /*saya rubah background nya jadi ungu agar terlihat efeknya */
}
</style>
</head>
<body>
<div class="container">
<p class="text-muted">Ini teks dengan class text-muted</p>
<p class="text-primary">ini teks dengan class text-primary</p>
<p class="text-success">Ini teks dengan class text-success</p>
<p class="text-info">Ini teks dengan class text-info</p>
<p class="text-warning">Ini teks dengan class text-warning</p>
<p class="text-danger">Ini teks dengan class text-danger</p>
<p class="text-secondary">Ini teks dengan class text-secondary</p>
<p class="text-dark">Ini teks dengan class text-dark</p>
<p class="text-body">Warna body umum (biasanya hitam).</p>
<p class="text-light">Ini teks dengan class text-light. berwarna ungu terang (pada background putih).</p>
<p class="text-white">Ini teks dengan class text-white. teks berwarna putih (tidak terlihat jika menggunakan bakcground putih).</p>
</div>
</body>
</html>
Selain digunakan pada teks hal ini juga bisa diterapkan pada link yang kita buat, contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Letakan kursor pada link dibawah</h2>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
</body>
</html>
Warna Background
Selain digunakan pada teks warna bootstrap juga tersedia sebagai background, class yang digunakan hampir sama dengan teks hanya mengganti text menjadi bg. Contohnya
.text-primary —> .bg-primary
Ada satu yang perlu digaris bawah i dalam warna latarbelakang atau background yaitu warna latar tidak merubah warna dari teks yang ada didalamnya, sehingga kita perlu menggabungkan keduanya untuk mengganti warna latar sekaligus warna teks.
untuk lebih jelasnya silahkan teman – teman perhatikan pada contoh script program dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p class="bg-primary text-white">Teks ini berwarna putih dengan background biru</p>
<p class="bg-success text-white">Teks ini berwarna putih dengan background hijau</p>
<p class="bg-info text-white">Teks ini berwarna putih dengan background biru muda</p>
<p class="bg-warning text-white">Teks ini berwarna putih dengan background kuning</p>
<p class="bg-danger text-white">Teks ini berwarna putih dengan background merah</p>
<p class="bg-secondary text-white">Warna latar belakang untuk secondary teks</p>
<p class="bg-dark text-white">Teks ini berwarna putih dengan background abu abu gelap</p>
<p class="bg-light text-dark">Teks ini berwarna hitam dengan background abu abu terang</p>
</div>
</body>
</html>
Warna Button
Selain teks dan background kita juga dapat memberi warna pada button yang telah kita buat caranya sama yaitu dengan memasukkan class class yang tdai kita coba sebelumnya. contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="#" class="btn btn-primary bg-success text-white">Link Teks ini berwarna putih dengan background hijau</a>
<!-- tinggal kita kombinaskian daja antara button dan warna bootstrap -->
</div>
</body>
</html>
Sekian penjelasan singkat mengenai warna pada bootstrap yang sebenarnya teman teman dapat lakukan dengan menggunaan CSS (tetapi tentunya akan lebih memakan waktu). Selain button teman teman juga dapat lakukan hal yang sama pada tabel, form atau jumbotron.
