Cara Membuat Indikator Pesan Menggunakan Bootstrap

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Indikator Pesan Menggunakan Bootstrap.

Teman-teman pasti pernah melihat indikator berbentuk numerik yang terletak di sebelah icon email atau update yang menjelaskan bahwa ada berapa email yang masuk atau artikel yang sudah di update pada suatu website. Dalam tutorial kali ini saya hanya akan membahas cara membuat desainnya saja tanpa terintegrasi dengan database.

Sekarang saya akan mencoba membuatnya dengan menggunakan framework bootstrap,karena di bootstrap sudah menyediakan suatu class untuk membuat indicator tersebut. Berikut tutorial singkat tentang Cara Membuat Indikator Pesan Menggunakan Bootstrap:

– Pertama teman-teman download framework bootstrapnya dulu.

– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

– Ketiga kita buat navigasi dulu karena pada tutorial kali ini kita akan membuat indikator email yang belum di baca. Berikut kode html-nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Home</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/ug.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
	<nav class="navbar navbar-inverse">
	  <div class="container-fluid">
	    <div class="navbar-header">
	      <a class="navbar-brand" href="#">Dumetschool</a>
	    </div>
           
	    <ul class="nav navbar-nav">
	      <li role="presentation" class="active"><a href="#">Timeline</a></li>
  	      <li role="presentation"><a href="#">Profile</a></li>
  	      <li role="presentation"><a href="#">Email</a></li>
	    </ul>

	  </div>
	</nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

– Keempat kita buat tag <span> di dalam tag <li> yang akan kita isi dengan class badge. Class badge pada bootstrap berfungsi untuk membuat indikator. Berikut kode html-nya:

<ul class="nav navbar-nav">
    <li role="presentation" class="active"><a href="#">Timeline 
        <span class="badge">280</span></a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Email 
        <span class="badge">130</span></a></li>
</ul>

– Hasilnya akan menjadi seperti ini.

Bagaimana teman-teman cukup mudahkan Membuat Indikator Pesan Menggunakan Bootstrap. Karena di bootstrap kita tinggal memasukan class saja maka akan terbentuk lah indikator yang kita inginkan.

Sekian artikel saya hari ini tentang Cara Membuat Indikator Pesan Menggunakan Bootstrap. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Indikator Pesan Menggunakan Bootstrap

Kategori