tRikSonic

Bootstrap 3 Label - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.58

Tutorial Bootstrap 3 Label

Dengan Bootstrap kita dapat membuat sebuh label atau tanda seperti informasi tambahan, catatan penting, pesan peringatan dll.

Cara Penerapan :

Untuk penerapannya tambahkan nama class .label pada element HTML (normal elemen : <span>) dan diiringi class tambahan sebagai penentu type label, antara Lain : .label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger:

Contoh 1 :

<span class="label label-default">Label Default</span>
<span class="label label-primary">Label Primary</span>
<span class="label label-success">Label Success</span>
<span class="label label-info">Label Info</span>
<span class="label label-warning">Label Warning</span>
<span class="label label-danger">Label Danger</span>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Label</code></h2>


<span class="label label-default">Label Default</span>
<span class="label label-primary">Label Primary</span>
<span class="label label-success">Label Success</span>
<span class="label label-info">Label Info</span>
<span class="label label-warning">Label Warning</span>
<span class="label label-danger">Label Danger</span>


</div>
</body>
</html>

Contoh 2 :

<h1>Heading 1 <span class="label label-danger">New</span></h1>
<h2>Heading 2 <span class="label label-danger">New</span></h2>
<h3>Heading 3 <span class="label label-danger">New</span></h3>
<h4>Heading 4 <span class="label label-danger">New</span></h4>
<h5>Heading 5 <span class="label label-danger">New</span></h5>
<h6>Heading 6 <span class="label label-danger">New</span></h6>

Hasil :

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.