Apakah teman-teman sudah familiar dengan kata transform, pasti sudah ya, jika kita lihat dari kata transform kita akan berfikir trnasform yang berarti perubahan ya, tapi berubah jadi apa pasti begitu kan, jika kita lihat judulnya membuat efek transform pada paragraf dengan bootstrap 4, jadi yang ingin kita rubah berarti sebuah paragrafnya ya teman-teman, tapi seperti apa ? timbul pertanyaan lagi, oke dari pada tambah penasaran simak terus ya teman-teman.
Membuat efek transform pada paragraf dengan bootstrap 4, perubahan yang akan di alami adalah dimana ketika kita menulis sebuah paragraf di teks editor dengan normal atau dengan huruf kecil semua, tapi dengan efek transform yang ada di bootstrap akan menimbulkan suatu efek apa saja efek itu:
- ada text-lowercase : dimana efek ini membuat huruf menjadi kecil semua, walupun ketika kita membuat sebuah paragaraf di text editor dengan huruf besar semua, akan berubah menjadi kecil semua.
- text-uppercase : efek ini kebalikannya dari text-lowercase, efek ini akan menimbulkan huruf menjadi besar semua.
- yang terakhir text-capitalize : dimana setiap kata akan di mulai dari huruf besar seperti di judul artikel ini ya teman-teman.
Oke langsung saja kita coba pada template website saya sebelumnya.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Membuat Efek Transform Pada Paragraf dengan Bootstrap 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Membuat Efek Transform Pada Paragraf dengan Bootstrap 4</h1>
<div class="row bg-success">
<div class="col-md-6">
<p class="text-lowercase d-block bg-danger">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="d-block bg-warning text-uppercase"> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span> . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6">
<p class="text-capitalize">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
<-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
<-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
</body>
</html>
Warna merah itu text-lowercase, Warna text-uppercase, warna text-capitalize, warna hijau.
Oke saya rasa cukup sampai disini belajar kita tentang membuat efek transform pada paragraf dengan bootstrap 4, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Membuat Efek Transform Pada Paragraf dengan Bootstrap 4 appeared first on Kursus Website Terbaik.