bewoksatukosong.com | Setelah kita mempelajari mengenai Belajar Bootstrap Part 8 Mengenai Image, kali ini kita akan belajar mengenai class, maksudnya ada beberapa class yang mungkin bisa membantu kamu dalam pembuatan website, lebih tepatnya lebih hemat waktu dengan class yang akan kita pelajari ini. Yuk kita mulai
1. Text Color
Text-Color text ini membantu sekali jika ada kata - kata penting, agar dapat menghemat waktu, kita bisa menggunakan boostrap ini hanya dengan menambahkan di class pada paragraph. Contoh kodinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Boostrap Membahas Mengenai Class</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<p class="text-muted">Halo nama saya om bewok, pekerjaan saya adalah web designer dan bisa sedikit sebagai web developer, dikit aja ntr di kira orang sombong </p>
<p class="text-primary">Hobby saya nonton film, tiap saya bikin artikel atau kerja, saya akan meng-hadiahi saya sendiri yaitu nonton 1 film</p>
<p class="text-success">kan ada ibarat bersusah - susah dulu baru kita bersenang - senang.</p>
<p class="text-info">tapi menurut saya menulis artikel itu seru loh, kita jadi belajar cara menulis yang baik, kecepatan ngetik kita juga jadi bertambah dan yang udah pasti pengetahuan kita mengenai website jauh lebih dalam</p>
<p class="text-warning">karena untuk saya sendiri, untuk membuat tutorial kita harus benar - benar paham apa yang saya buat, jadi benar - benar kita bedah isinya, kita otak - atik, yang bikin males mungkin screenshootnya paling.
</p>
<p class="text-danger">Tapi menurut saya menulis jadi belajar banyak hal, jadi belajar nulis yang rapih seperti apa, belajar seo, belajar cara promosi di semua social media. wah saya jadi curhat. ayo teman - teman yang masih muda kamu bisa loh membuat aplikasi buat kamu belajar, siapa tau itu yang membuat kamu kerja di perusahaan yang terbaik atau aplikasi yang kamu buat yang akan menghasilkan kamu uang, umur saya 22 tahun dan masih haus yang namanya ilmu, jadi mumpung masih muda. yuk kita belajar pemograman, fokus 1 pemograman saja dahulu. Terlebih lagi pilih dahulu mau front end atau back end developer, it's your choice. good luck </p>
</body>
</html>
 |
| Gambar I Membuat Text-Color |
2. Background Text
Berbeda dari sebelumnya, kalau yang kita pelajari yaitu mengubah warna text, untuk yang kali ini kita mengubah background text tersebut, dan caranya hampir sama, jika tadi kita menambahkan class text-primary tapi untuk background text seperti ini bg-primary . ya betul kita hanya mengubah tulisan text menjadi bg, dan konsep nama warna sama semua, seperti button yang pernah kita bahas sebelumnya, belum afdol kalau kita belum mencobanya. Kodinganya seperti dibawah ini ya
<!DOCTYPE html>
<html>
<head>
<title>Belajar Boostrap Membahas Mengenai Class</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<p class="bg-muted">Halo nama saya om bewok, pekerjaan saya adalah web designer dan bisa sedikit sebagai web developer, dikit aja ntr di kira orang sombong </p>
<p class="bg-primary">Hobby saya nonton film, tiap saya bikin artikel atau kerja, saya akan meng-hadiahi saya sendiri yaitu nonton 1 film</p>
<p class="bg-success">kan ada ibarat bersusah - susah dulu baru kita bersenang - senang.</p>
<p class="bg-info">tapi menurut saya menulis artikel itu seru loh, kita jadi belajar cara menulis yang baik, kecepatan ngetik kita juga jadi bertambah dan yang udah pasti pengetahuan kita mengenai website jauh lebih dalam</p>
<p class="bg-warning">karena untuk saya sendiri, untuk membuat tutorial kita harus benar - benar paham apa yang saya buat, jadi benar - benar kita bedah isinya, kita otak - atik, yang bikin males mungkin screenshootnya paling.
</p>
<p class="bg-danger">Tapi menurut saya menulis jadi belajar banyak hal, jadi belajar nulis yang rapih seperti apa, belajar seo, belajar cara promosi di semua social media. wah saya jadi curhat. ayo teman - teman yang masih muda kamu bisa loh membuat aplikasi buat kamu belajar, siapa tau itu yang membuat kamu kerja di perusahaan yang terbaik atau aplikasi yang kamu buat yang akan menghasilkan kamu uang, umur saya 22 tahun dan masih haus yang namanya ilmu, jadi mumpung masih muda. yuk kita belajar pemograman, fokus 1 pemograman saja dahulu. Terlebih lagi pilih dahulu mau front end atau back end developer, it's your choice. good luck </p>
</body>
</html>
 |
| Gambar II Background - Text |
<!DOCTYPE html>
<html>
<head>
<title>Belajar Boostrap Membahas Mengenai Class</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.bg-primary {
width: 20%;
}
.bg-success {
width: 30%;
}
.bg-warning {
width: 40%;
}
.bg-info {
width: 20%;
}
.bg-danger {
width: 50%;
}
</style>
</head>
<body>
<p class="bg-primary">Hobby saya nonton film, tiap saya bikin artikel atau kerja, saya akan meng-hadiahi saya sendiri yaitu nonton 1 film</p>
<p class="bg-success">kan ada ibarat bersusah - susah dulu baru kita bersenang - senang.</p>
<p class="bg-info">tapi menurut saya menulis artikel itu seru loh, kita jadi belajar cara menulis yang baik, kecepatan ngetik kita juga jadi bertambah dan yang udah pasti pengetahuan kita mengenai website jauh lebih dalam</p>
<p class="bg-warning">karena untuk saya sendiri, untuk membuat tutorial kita harus benar - benar paham apa yang saya buat, jadi benar - benar kita bedah isinya, kita otak - atik, yang bikin males mungkin screenshootnya paling.
</p>
<p class="bg-danger">Tapi menurut saya menulis jadi belajar banyak hal, jadi belajar nulis yang rapih seperti apa, belajar seo, belajar cara promosi di semua social media. wah saya jadi curhat. ayo teman - teman yang masih muda kamu bisa loh membuat aplikasi buat kamu belajar, siapa tau itu yang membuat kamu kerja di perusahaan yang terbaik atau aplikasi yang kamu buat yang akan menghasilkan kamu uang, umur saya 22 tahun dan masih haus yang namanya ilmu, jadi mumpung masih muda. yuk kita belajar pemograman, fokus 1 pemograman saja dahulu. Terlebih lagi pilih dahulu mau front end atau back end developer, it's your choice. good luck </p>
</body>
</html>
 |
| Gambar III Background - text edit |
Om bewok mencoba untuk membatasi width nya, sehingga mereka otomatis langsung kebawah. hmm menarik bukan, kalian harus mencoba otak - atik ini, kalau menjadi lebih keren, kasih tau om bewok lewat comment ya.
3. Icon Dropdown Menu
Ini tutorial pendek - pendek ya karena memang ini sangat mudah dibuat, kodingan nya seperti di bawah ini ya
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<span class="caret"></span>
</body>
</html>
 |
| Gambar IV Lihat Icon yang di pojok kiri atas |
Itu saja tambahan class dari bootstrap, semoga teman - teman lebih paham, selanjutnya om bewok akan membuat memberikan tutorial membuat website menggunakan bootstrap dari mulai sketch, photoshop dan coding menggunakan bootstrap, terakhir akan di upload menggunakan github. jadi om bewok perlu waktu untuk memberikan tutorial kali ini, Salam Olahraga
No comments:
Post a Comment