bootstrap 4 colors

-

Warna Teks

Bootstrap 4 memiliki beberapa kelas kontekstual yang dapat digunakan untuk memberikan "makna melalui warna".


Kelas untuk warna teks adalah: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(warna badan default/sering hitam) dan .text-light:


<p class="text-muted">teks mute</p>


<p class="text-primary">teks penting</p>


<p class="text-success">teks menandakan berhasil</p>


<p class="text-info">teks menyampaikan informasi</p>


<p class="text-warning">teks peringatan</p>


<p class="text-danger">teks bahaya</p>


<p class="text-secondary">teks kedua</p>


<p class="text-dark">teks gelap</p>


<p class="text-body">teks default body</p>



<p class="text-light">teks abu terang(di background putih)</p>




<!DOCTYPE html>


<html>


<head>


 <title>Bootstrap4 Colors</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>Warna Konstektual</h2>


 <p class="text-muted">teks mute</p>


 <p class="text-primary">teks penting</p>


 <p class="text-success">teks menandakan berhasil</p>


 <p class="text-info">teks menyampaikan informasi</p>


 <p class="text-warning">teks peringatan</p>


 <p class="text-danger">teks bahaya</p>


 <p class="text-secondary">teks kedua</p>


 <p class="text-dark">teks gelap</p>


 <p class="text-body">teks default body</p>


 <p class="text-light">teks abu terang(di background putih)</p>


</div>


</body>


</html>


Hasilnya akan menjadi:

Warna Konstektual

teks mute


teks penting


teks menandakan berhasil


teks menyampaikan informasi


teks peringatan


teks bahaya


teks kedua


teks gelap


teks default body






Opacity dan Background

Anda juga dapat menambahkan opacity 50% untuk teks hitam atau putih dengan kelas .text-black-50or .text-white-50 bg-dark:

<p class="text-black-50">

     text hitam dengan opacity 50% di background putih

</p>

<p class="text-white-50 bg-dark">

   text putih dengan opacity 50% di background gelap

</p>


<!DOCTYPE html>

<html>

<head>

 <title>Bootstrap4 Colors</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-fluid">

 <h2>Opacity Text Colors</h2>

 <p class="text-black-50">

  text hitam dengan opacity 50% di background putih

 </p>

 <p class="text-white-50 bg-dark">

  text putih dengan opacity 50% di background gelap

 </p>

</div>

</body>

</html>


Hasilnya akan menjadi:

Opacity Text Colors

text hitam dengan opacity 50% di background putih


text putih dengan opacity 50% di background gelap

Komentar

Posting Komentar

Postingan populer dari blog ini

Fungsi java script

-
Gambar
     Definisi Fungsi java script  java script didefinisikan dengan function kata kunci. anda dapat menggunakan deklarasi fungsi atau ekspresi fungsi. Fungsi yang dideklarasikan tidak langsung dieksekusi. Mereka "disimpan untuk digunakan nanti", dan akan dieksekusi nanti, ketika mereka dipanggil Contoh :  var x = myFunction(4, 5); document.getElementById("demo").innerHTML = x function myFunction(a, b) {   return a * b; } <!DOCTYPE html> <html> <body> <h2>JavaScript Funtions</h2> <p>contoh ini memanggil fungsi yang melakukan perhitungan dan mengembalikan hasilnya</p> <p id="demo"></p> <script>  var x = myFunction(4, 5);  document.getElementById("demo").innerHTML = x  function myFunction(a, b) {   return a * b;  } </script> </body> </html> Hasilnya akan menjadi: 20 Titik koma digunakan untuk memisahkan pernyataan JavaScript yang dapat dieksekusi. ...
Baca selengkapnya

Apa itu CSS?pengertian,fungsi dan cara kerjanya

-
Gambar
CSS adalah bahasa Cascading Style Sheet,biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup,seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini. HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun CSS dibuat d...
Baca selengkapnya

HARI KE 51 PKL DI CYBERLABS

-
Gambar
HALLO GUYS BALIK LAGI DENGAN SAYA ARSYAD,HARI INI SAYA SEDANG BERADA DI CYBERLABS SEPERTI BIASA SAYA SEDANG MELANJUTKAN MEMBUAT WEBSITE NYA DI LARAVEL. Hari ini saya sedang mengerjakan website lebih tepatnya saya sedang melanjutkan nya,sebenarnya saya sudah menyelesaikan semua nya cuma saya belum memahami tata  letak di laravel tersebut sehingga saya harus lebih mengenal banyak tentang laravel agar saya dapat meng copas langsung codingan saya yang sudah saya selasaikan sebelumnya, mungkin itu saja yang bisa saya beritahu terimakasiih banyak buat kalian yang sudah membaca dan semoga sehat selalu
Baca selengkapnya