Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan
Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan

Jumat, 17 Maret 2017

Bootstrap Pagination

Assalamualaikum Wr.Wb


Bootstrap Pagination berguna jika teman - teman misalnya memiliki halaman web lebih dari satu halaman,maka bisa menggunakan bootstrap pagination ini.Jadi dengan kata lain ini bisa di gunakan untuk navigasi halaman sebelumnya dan selanjutnya.Tapi kali ini saya hanya mendemokan macam - macam pagination saja dan tidak saya terapkan ke web, jadi jika teman semua ingin menerapkannya pada web  tinggal sisipkan link halaman kita yang lain dengan cara menyisipkannya pada bagian link (href).

  •  Basic Pagination
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Pagination</h2>
<p>Ini contoh basic pagination</p>
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>
</div><!--container-->

</body>
</html>

Dan inilah hasilnya

 

  •  Pagination Active State
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination Active State</h2>
<p>pagination active</p>
<ul class="pagination">
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>
</div><!--container-->

</body>
</html>

Dan inilah hasilnya


  • Breadcrumbs
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Pagination</title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Breadcrumbs</h2>
<p>Pagination Breadcrumbs</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li ><a href="#">Galery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div><!--container-->

</body>
</html>

Dan inilah hasilnya

  
 Mungkin sekian dulu postingan kali ini  semoga bermanfaat,oh ya sebelum mencoba script di atas teman - teman harus mendownload dulu bootstrap lalu di ektrak dan letakkan file yang kita buat pada satu folder dengan bootstrap.Oke sampai jumpa di postingan di berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Kamis, 16 Maret 2017

Membuat Layout Sederhana Dengan Bootstrap

Assalamualaikum Wr.Wb


Mari kita lanjutkan tentang Bootstrap setelah banyaknya postingan saya sebelumnya mengenai bootstrap pada postingan saya sebelumnya saya sisipkan postingan Tutorial Instal Wordpress di linux  sekarang mari kita lanjutkan mengenai bootsrap dan kali ini saya akan membuat layout sederhana.

  • Kita buat tambahan style untuk memperindah tampilan letakkan style di antara script <head> dan </head>
 <style>
      .navbar{
          margin-bottom: 0;
          border-radius: 0;
      }
      .row.content{height: 450px}
      .sidenav{
          padding-top: 20px;
          background-color: #f1f1f1;
          height: 100%;
      }
      footer{
          background-color: #555;
          color: white;
          padding: 15px;
      }
      @media screen and (max-width: 767px){
          .sidenav{
              height: auto;
              padding: 15px;
          }
          .row.content{height: auto;}
      }
  </style>

  •  Jangan lupa tuliskan scrip untuk memanggil Bootstrap sama dengan di atas di antara <head> dan </head> namun jangan di dalam style
meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  •  Lalu kita buat layoutnya masukkan script di bawah di antara <body> dan </body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div><!--navbar header-->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-in">Log in</a>
            </ul>
        </div><!--collapse navbar-->  
    </div><!--container-fluid-->
</nav>
<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-2 sidenav">
            <p><li>Link1</li></p>
            <p><li>Link2</li></p>
            <p><li>Link2</li></p>
        </div><!--col sm 2 sidenav-->
        <div class="col-sm-8 text-left">
            <h1>Blog Amatir</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
            <div class="well">
                <p>Gambar</p>
            </div>
        </div>
    </div><!--row content-->
</div><!--container fluid text center-->
<footer class="container-fluid text-center">
    Ini Footet
</footer>

Dan inilah hasil layout yang telah kita buat tadi

 
Dan ini tampilan layout saat dalam mode responsive
  
yap itu tadi bagaimana cara membuat layout sederhana dengan bootstrap semoga bermanfaat terima kasih sudah berkunjung,sampai jumpa di postingan berikutnya
Wassalamualaikum Wr.Wb

Selasa, 14 Maret 2017

Bootstrap Affix

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.

  • Tuliskan script di bawah,script ini sudah saya ubah sedikit stylenya dengan css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      .affix{
          top: 0;
          width: 100%;
      }
      .affix + .container-fluid{
          padding-top: 70px;
      }
  </style>
</head>
<body>
<div class="container-fluid" style="background-color: #009900; color: #fff; height:200px;">
<h1>Contoh Bootstrap Affix</h1>
<h3>Scroll untuk melihat contoh affix</h3>   
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Blog Amatir</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>   
</nav>
<div class="container-fluid" style="height: 1000px">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

Berikut hasilnya sebelum di scroll ke bawah




Ya itu tadi sedikit mengenai Affix semoga bermanfaat, walaupun masih banyak kekurangan  sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Senin, 13 Maret 2017

Bootstrap Scrollspy

Assalamualaikum Wr.Wb



Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.

  • masukkan scrip untuk memanggil bootstrap
tuliskan scrip di antara  <head> dan </head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • Buat stylenya agar lebih menarik
tuliskan scrip style di antara <head> dan </head>

<style>
      body{
          position: relative;

      }

      #menu1{padding-top: 55px;height: 500px;color: #fff;background-color: #1e88e5;}
      #menu2{padding-top: 55px;height: 500px;color: #fff;background-color: #ff00ff;}
      #menu3{padding-top: 55px;height: 500px;color: #fff;background-color: #00cc66;}
      #menu41{padding-top: 55px;height: 500px;color: #fff;background-color: #0099ff;}
      #menu42{padding-top: 55px;height: 500px;color: #fff;background-color: #009999}
  </style>

  • Lalu kita buat scrollspy ini saya terapkan pada navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                      
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#menu1">Menu1</a></li>
          <li><a href="#menu2">Menu2</a></li>
          <li><a href="#menu3">Menu3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#menu41">Menu4-1</a></li>
              <li><a href="#menu42">Menu4-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="menu1" class="container-fluid">
    <h1>Menu 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu1-->
<div id="menu2" class="container-fluid">
    <h1>Menu 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu2-->
<div id="menu3" class="container-fluid">
<h1>Menu 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu3-->
<div id="menu41" class="container-fluid">
    <h1>Submenu 4.1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--submenu 4.1-->
<div id="menu42" class="container-fluid">
    <h1>Submenu 4.2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>

Dan hasilnya seperti berikut



Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman



Menu Dropdown


  
Setelah Dropdown di klik



Jika di lihat dari dari mode responsive



 Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Sabtu, 11 Maret 2017

Bootstrap Carousel

Assalamualaikum Wr.Wb



Apa itu Carousel? Carousel ini merupakan semacam tampilan slide show pada tampilan web yang telah di sediakan Bootstrap selain tampilannya lumayan menarik kita juga tidak perlu repot - repot membuat stylenya.Siapkan beberapa gambar yang akan kita masukkan dalam carousel dan jangan lupa downoad dulu bootstrapnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blog Amatir</title>
  <meta charset="utf-8">
  <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>
<div class="container">
  <h1>Contoh Carousel</h1>
</div>
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indikator  -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- gambar slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="4.jpeg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="1.jpeg" alt="Chania" width="460" height="345">
      </div>
   
      <div class="item">
        <img src="2.jpeg" alt="gambar2" width="460" height="345">
      </div>

      <div class="item">
        <img src="3.jpeg" alt="gambar3" width="460" height="345">
      </div>
    </div>

    <!-- kontrol kanan kiri -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>












Dan inilah hasilnya, gambar akan berubah seperti slide pada umumnya dan jangan lupa gambar harus jadi satu folder dengan file yang scripnya sudah saya cantumkan di atas simpan dengan fomat .html



Oke itu tadi mengenai carousel dengan bootstrap  semoga bermanfaat terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

Jumat, 10 Maret 2017

Bootstrap Modals

Assalamualaikum Wr.Wb


Berjumpa lagi dengan bootstrap kali ini saya akan membahas bootstrap modals,apa itu bootstrap modals? yaitu ketika kita meng Klik sebuah button maka akan muncul tampilan lain.Maksudnya tampilan bagaimana? Dari pada bingung mari kita mualai saja,tetapi sebelum mencobanya teman - teman semua harus mendownload bootstrap setelah itu ekstrak bootstrap yang telah di download tadi dan letakkan file yang akan kita buat dalam satu folder bootstrap yang kita ekstrak tadi.

Tuliskan tag / script di bawah ini untuk membuat modal

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Modal</h2>
    <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#Modal">Open Modal</button>
    <!--Modal-->
    <div class="modal fade" id="Modal" role="
    dialog">
        <div class="modal-dialog">
        <!--Content modal-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Blog Amatir</h4>
            </div>
            <div class="modal-body">
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
            </div>
        </div>   
        </div>
       
    </div>
</div>
</body>
</html>

Hasil sebelum modal di klik


Dan setelah tombol modal di klik maka modal akan muncul



Itu tadi mengenai bootstrap modal semoga bermanfaat walaupun mungkin penjelasan yang saya paparkan kurang begitu jelas,terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb 

Kamis, 09 Maret 2017

Bootsrap Navbar Part 2

Assalamualaikum Wr.Wb


Mari kita lanjutkan postingan sebelumnya tentang Bootstrap Navbar,baiklah ayo kita mulai yang belum baca part 1 silahkan baca di sini.
  •   Navbar Button
Ini merupakan navbar yang di lengkapi dengan button

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <button class="btn btn-danger navbar-btn">Button</button>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya


  •  Navbar Forms
Navbar ini di lengkapi dengan form misalnya kita ingin membuat fitur pencarian maka tampilannya bisa menggunakan navbar forms ini
 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="cari">
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>   
        </form>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

  • Navbar Fixed Top(Atas)
 Yang di maksud fixed yaitu saat kita melakukan scrolling maka navbar masih tetap ada dan tidak ikut scrolling,lebih jelasnya mari kita buktikan
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="cari">
        </div>
        <button type="submit" class="btn btn-danger">Submit</button>   
        </form>
    </div>
</nav>
<div class="container-fluid" style="margin-top: 55px;">
    <div class="col-sm-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
    </div>
    <div class="col-sm-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>
Dan hasilnya seperti ini
  • Navbar Fixed Bottom(Bawah)
Navbar ini prinsipnya sama dengan yang di atasa yang berbeda hanya letaknya yang fixed di bawah tinggal ubah  navbar-fixed-top menjadi  navbar-fixed-bottom
Maka hasilnya akan seperti gambar di bawah ini
Akhirnya tuntas juga mengenai navbar dengan bootstrap ini,dan mungkin cukup sekian postingan kali ini semoga bermanfaat sampai jumpa di postingan  berikutnya.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 

Rabu, 08 Maret 2017

Bootstrap Navbar Part 1

Assalamualaikum Wr.Wb


Berjumpa lagi dengan bootstrap kali ini saya akan membahas navbar bootstrap,namanya juga navbar pasti sudah banyak yang tahu bukan?tetapi membuat navbar bootstrap menurut saya lebih mudah karena lagi - lagi sudah tersedia style untuk membuat navbar sehingga membuat navbar menjadi lebih mudah,cepat dan hasilnya menurut saya cukup bagus,baiklah mari kita mulai

  • Navigation bar
Pada bootstrap, style navbar ini memiliki style yang sederhana

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

  •  Inverted Navigation Bar
Navbar ini hampir sama dengan navbar yang di atas yang membedakan hanya warnanya saja


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan inilah hasilnya

 

  •  Navigation Bar Dropdown
Yaitu navbar yang di lengkapi dengan dropdown


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
</body>
</html>

Dan ini hasilnya




  •  Right Aligned Navigation Bar
Ini di gunakan untuk membuat menu pada navbar tetapi dengan letak di sebelah kanan

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog Amatir</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact
            <span class="caret"></span></a>   
            <ul class="dropdown-menu">
                <li><a href="#">Google Plus</a></li>
                <li><a href="#">Email</a></li>   
            </ul>
            </li>
           
            <li><a href="#">About</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
        </ul>
    </div>
</nav>
</body>
</html>
 Dan inilah hasilnya



Oke sebenarnya masih ada beberapa macam navbar, tetapi karena postingannya sudah cukup panjang maka akan saya sambung di postingan berikutnya,sekian sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb