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>
Posting Komentar