Cara Membuat Navigasi Bar Responsive Menggunakan Bootstrap - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Saturday, February 4, 2017

Cara Membuat Navigasi Bar Responsive Menggunakan Bootstrap


bewoksatukosong.com | Hai semuanya balik lagi dengan si om bewok, sebenarnya tutorial sudah banyak yang mempertanyakan, eh enggak sih, cuman om bewok aja lagi kepengen, hehe.

Tutorial kali ini adalah membuat navigasi bar, 
Navigasi yang gimana sih om ? 
Hmm kasian belum tau, nih om bewok kasih tau biar ga nanya - nanya lagi ya

Gambar dari : Hongkiat.com
Sebenarnya om bewok hanya ngajarin kamu dasarnya aja, untuk pengembanganya kamu bisa belajar sendiri. Oh iya karena kita menggunakan bootstrap jadi kita harus download dulu untuk css dan js nya. Kamu bisa download di bootstrap.com

 Ini om bewok kasih struktur-Nya ya


Codingan dibawah ini kamu isi di index.html ya

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Tutorial Membuat Navigasi</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      body {
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Bewok Satu Kosong</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        <div class="jumbotron">
          <div class="container">
            <h1>Hello, My Blog</h1>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Details</a></p>
          </div>
        </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Lalu hasilnya seperti dibawah ini ya

Tampilan Di Browser

Tampilan Melalui Mobile

No comments:

Post a Comment