Membuat Breadcrumb Menggunakan Bootstrap

MasPram – Assalamualaikum, semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan membahas mengenai Bootstrap, namun lebih spesifiknya kali ini saya akan membahas bagaimana membuat breadcrumb navigator menggunakan bootstrap. Berikut ini cara membuatnya :

Breadcrumb-bootstrap

  • Tambahkan seperti dibawah ini untuk memanggil file javascript dan css bootstrap
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • Tambahkan Script dibawah ini dalam tag <body> </body>
<div class="bs-example">
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li class="active">Accessories</li>
</ul>
</div>
  • Tambahkan css dibawah ini di datam tag <head></head>
.bs-example{
margin: 20px;
}
  • Simpan dan jalankan File

 

Download | Demo

Semoga bermanfaat 🙂

Advertisements

Cara merubah ukuran text input Bootstrap menggunakan Css3

Assalamualaikum, sesuai judul diatas maka kali ini saya akan membahas bagaimana caranya merubah ukuran text input bootstrap menggunakan css3. Sering kali kita lihat pada tampilan text input, select dan button bootstrap terkadang extra large ataupun besar, membuat tampilan kurang enak dipandang. Nah, terkadang kita menggunakan class input-lg, input-xm juga tidak dapat merubah ukurannya. Tidak perlu khawatir kita akan merubahnya menggunakan bantuan css3.

Berikut ini penjelasannya :

HTML :

<input type="text" class="input-small" />

CSS3:

.input-small {
  width: 210px;
  height: 20px !important;
  margin-bottom: 10px !important;
  line-height: 11px !important;
  font-size: 10px !important;
}

Demo

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

Membuat Tooltips Menggunakan CSS3

Assalamualaikum, Sesuai dengan judul artikel diatas saya akan memberi tahu cara membuat tooltips. Sebelumnya jika yang belum mengetahui apa itu tooltips, saya akan memberi tahunya. Tooltips Adalah Komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen. Tooltip dapat berisi bantuan maupun informasi lain yang terkait dengan komponen tersebut. Cara ini dapat memudahkan pengguna dalam mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi. Sebelum anda mengunduh file ajarnya terlebih dahulu saya akan menampilkan hasil akhirnya.

TOOLTIPSJika anda berminat mempelajarinya, silahkan download gratis | Disini