Hi sis
siang ini saya ingin berbagi tutorial tentang framework css yaitu bootstrap
sebelumnya kamu sudah tahu apa itu bootstrap?
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.
ok.. sudah tahu tentang bootstrap kan? sekarang lanjut ke topik kita, tutorial membuat navbar dengan bootstrap.
Hal pertama yang mesti sobat lakukan adalah dengan mendownload framework bootstrap, sobat bisa kunjungi link ini
kemudian extract filenya ke file c://xampp/htdocs
oh iya, sebelumnya pastikan anda sudah menginstall xampp, jika belum, silahkan download disini dan install xampp seperti biasa.
kembali ke bootstrap yang sudah diextract tadi, perhatikan struktur filenya seperti ini :
selanjutnya kita butuh jquery.js untuk menambah responsive website, kamu bisa download disini.
setelah sudah di download, masukkan ke folder c://xampp/htdocs/bootstrap/js
setelah itu kita buat file index.htm dan styles.css kemudian simpan di c:xampp/htdocs/bootstrap
semua file sudah siap dan kita mulai buat navbar dengan bootstrap, edit index.htm dengan notepad++
masukkan kode seperti ini :
kita coba buka di browser sehingga tampilannya seperti ini :
kita coba edit lagi index.htm nya, seperti ini :
ekian tutorial kali ini,, semoga bermanfa'at.. Arigatou senpai..!!
credit for coder's guide..
siang ini saya ingin berbagi tutorial tentang framework css yaitu bootstrap
sebelumnya kamu sudah tahu apa itu bootstrap?
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.
ok.. sudah tahu tentang bootstrap kan? sekarang lanjut ke topik kita, tutorial membuat navbar dengan bootstrap.
Hal pertama yang mesti sobat lakukan adalah dengan mendownload framework bootstrap, sobat bisa kunjungi link ini
kemudian extract filenya ke file c://xampp/htdocs
oh iya, sebelumnya pastikan anda sudah menginstall xampp, jika belum, silahkan download disini dan install xampp seperti biasa.
kembali ke bootstrap yang sudah diextract tadi, perhatikan struktur filenya seperti ini :
-css- bootstrap.css- bootstrap-min.css- bootstrap-theme.css- bootstrap-theme-min.css-fonts- glyphicons-halflings-regular.eot- glyphicons-halflings-regular.svg- glyphicons-halflings-regular.ttf- glyphicons-halflings-regular.woff- glyphicons-halflings-regular.woff2-js- bootstrap.js- bootstrap-min.js- npm.js
selanjutnya kita butuh jquery.js untuk menambah responsive website, kamu bisa download disini.
setelah sudah di download, masukkan ke folder c://xampp/htdocs/bootstrap/js
setelah itu kita buat file index.htm dan styles.css kemudian simpan di c:xampp/htdocs/bootstrap
semua file sudah siap dan kita mulai buat navbar dengan bootstrap, edit index.htm dengan notepad++
masukkan kode seperti ini :
!DOCTYPE html><html><head><title>CODER JOGJA</title><meta name = "viewport" content = "width=device-width, initial-scale=1.0"><!-- css--><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><link rel="stylesheet" type="text/css" href="css/styles.css"></head><body><div class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"></div></div><!-- javascript--><script type="text/javascript" src = "js/jquery.js"></script><script type="text/javascript" src = "js/bootstrap.js"></script></body></html>
kita coba buka di browser sehingga tampilannya seperti ini :
 |
| Navbar-default |
kita coba edit lagi index.htm nya, seperti ini :
<!DOCTYPE html>ehingga tampilannya seperti ini :
<html>
<head>
<title>CODER JOGJA</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">CoderJogja</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar collapse-->
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About me</a></li>
</ul>
</div>
</div>
</div>
<!-- javascript-->
<script type="text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/bootstrap.js"></script>
</body>
</html>
 |
| Navbar-Collapse |
 |
| Navbar-Collapse |
ekian tutorial kali ini,, semoga bermanfa'at.. Arigatou senpai..!!
credit for coder's guide..
