Bootstrap 3 Label - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Label
Dengan Bootstrap kita sanggup menciptakan sebuh label atau tanda ibarat isu tambahan, catatan penting, pesan peringatan dll.
Cara Penerapan :
Untuk penerapannya tambahkan nama class
.label pada element HTML (normal elemen : <span>) dan diiringi class perhiasan 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>