Belajar Bootstrap Part 9 Mengenai Class Tambahan - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Friday, August 12, 2016

Belajar Bootstrap Part 9 Mengenai Class Tambahan



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>
Maka Hasilnya bisa kamu lihat dibawah sini

Gambar I Membuat Text-Color
Kita bisa lihat dari nama - nama class nya dan memang tidak berbeda dari class button bootstrap, kalian bisa ber-eksperimen sendiri ya, oh iya itu curhatan om bewok loh. jangan di baca lebih dalam nanti baper ya.

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>

Maka Hasilnya bisa lihat dibawah.

Gambar II Background - Text
Kita bisa lihat konsepnya sama, hanya mengubah tulisan text menjadi bg. Kamu bisa bereksperimen sendiri dengan menambahkan width pada css, contoh kodinganya seperti dibawah ini.


<!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>

Maka hasilnya seperti dibawah ini

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>

Maka Hasilnya kamu bisa lihat dibawah sini

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