Belajar Membuat Panel Bootstrap
Hari ini kita akan belajar bersama-sama membuat panel menggunakan bootstrap, bootstrap itu apa, silakan baca link di bawah ini untuk tutorial bootstrap sebelumnya
Tutorial Bootstrap Sebelumnya
Codingnya Completenya Bagaimana ?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>membuat panel bootstrap</title> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> | |
| <script type="text/javascript" src="js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h3>Membuat Panel Bootstrap</h3> | |
| </div> | |
| <h4>Contoh Panel Default</h4> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| Heading | |
| </div> | |
| <div class="panel-body"> | |
| Body | |
| </div> | |
| </div> | |
| <h4>Contoh Panel Primary</h4> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"> | |
| Ini Header Panel | |
| </div> | |
| <div class="panel-body"> | |
| Ini Body Panel | |
| </div> | |
| </div> | |
| <h4>Contoh Panel Info</h4> | |
| <div class="panel panel-info"> | |
| <div class="panel-heading"> | |
| Ini Contoh Panel Info @Header | |
| </div> | |
| <div class="panel-body"> | |
| Ini Body Panel | |
| </div> | |
| </div> | |
| <h4>Contoh Panel Success</h4> | |
| <div class="panel panel-success"> | |
| <div class="panel-heading"> | |
| Ini Panel Success | |
| </div> | |
| <div class="panel-body"> | |
| Ini Body | |
| </div> | |
| </div> | |
| <h4>Contoh Panel Warning</h4> | |
| <div class="panel panel-warning"> | |
| <div class="panel-heading"> | |
| Panel Warning | |
| </div> | |
| <div class="panel-body"> | |
| @Body | |
| </div> | |
| </div> | |
| <h4>Contoh Panel Danger</h4> | |
| <div class="panel panel-danger"> | |
| <div class="panel-heading"> | |
| @Heading @Danger | |
| </div> | |
| <div class="panel-body"> | |
| @Body @Danger | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Tampilan di browser seperti apa ?
Video :
Video On Youtube :
Penutup
Alhamdulillah, semoga tutorial "belajar membuat panel bootstrap" ini bisa diambil manfaatnya ya :)
No comments:
Post a Comment