Tutorial Bootstrap - Membuat Dropdown


Hai semuanya….

Pada tutorial kali, kita akan belajar membuat menu dropdown dengan Bootstrap, menu dropdown merupakan sebuah menu yang dapat ditoggle serta dapat memilih opsi yang telah ditentukan.

Membuat Menu Dropdown.

Untuk membuat sebuah menu dropdown, buatlah sebuah tag <div> lalu tambahkan class “dropdown”, contohnya seperti berikut.
  <div class="dropdown">
...
</div>
Selanjutnya, didalam tag <div> tersebut, buatlah tag <button> dan tambahkan atribut class = “btn btn-primary” dan “dropdown-toggle”, type=”button”, data-toggle= ”dropdown”, serta buatlah didalam tag <button> sebuah text “Menu Dropdown”, tag <span>  tambahkan class “caret” di, contohnya sebagai berikut.
  <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
</div>
Berikutnya, masih didalam tag <div>, buatlah tag <ul> dan tambahkan class “dropdown-menu” dan didalam tag <ul>, buatlah tag <li> yang masing masingnya memiliki tag <a href=”#”> didalamnya, contohnya seperti berikut.
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>  </div>  
</div>
Hasilnya.


Ketika, mengklik Menu Dropdown, maka opsinya akan muncul, dapat dilihat seperti berikut.


Menambahkan Opsi Header Menu Dropdown

Selanjutnya, kita dapat membuat sebuah header dari opsi dropdownnya, untuk membuat header pada opsinya, buatlah tag <li> dan tambahkan class “dropdown-header”, taruh didalam dropdown menu, contohnya seperti berikut.
  <div class=”dropdown”>
    <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Menu Dropdown <span class=”caret”></span></button>
    <ul class=”dropdown-menu”>
      <li class=”dropdown-header”>Informasi</li>
      <li><a href=”#”>Home</a></li>
      <li><a href=”#”>About</a></li>
      <li><a href=”#”>Contact</a></li>
      <li><a href=”#”>Desclimer</a></li>
      <li class=”dropdown-header”>Material</li>
      <li><a href=”#”>Tutorial</a></li>
      <li><a href=”#”>Download</a></li>
      <li><a href=”#”>Template</a></li>
      <li><a href=”#”>Video</a></li>
    </ul>
  </div>
Hasilnya.


Memisahkan Opsi Menu Dropdown

Selain dapat menambahkan header pada opsi menu dropdown, kita juga dapat memisahkan opsinya dengan menggunakan class “divider”, menambahkan class “divider” pada tag <li>, contohnya seperti berikut.
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>
Hasilnya.


Dropup

Selain Dropdown, kita juga dapat membuat sebuah dropup, caranya, ganti class “dropdown” menjadi “dropup”, pada tag <div> yang menjadi pembungkusnya, contohnya seperti berikut.
  <div class="dropup">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>
Hasilnya.


Sekian, tutorial membuat dropdown dengan Bootstrap, semoga teman teman paham dan mengerti dengan tutorial ini dan bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah ya, terima kasih.

Tutorial Bootstrap - Membuat Jumbotron


Hai semuanya...

Pada tutorial kali ini kita akan belajar membuat jumbotron dengan Bootstrap, jumbotron merupakan sebuah box besar untuk menampilkan sebuah informasi atau konten yang spesial.

Membuat Jumbotron

Untuk membuat jumbotron pada Bootstrap, tambahkan class “jumbotron” pada tag <div> setelah itu tambahkan sebuah informasi, contohnya sebagai berikut.
  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
  </div>
Hasilnya.


Menambahkan Button

Selain text, didalam jumbotron, kita dapat menambahkan sebuah button, contohnya sebagai berikut.
Baca juga - Cara membuat button dengan Bootstrap

  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
    <a href="#" class="btn btn-primary btn-lg">Selengkapnya</a>
  </div>
Hasilnya.


Demikian, tutorial membuat jumbotron dengan Bootstrap, semoga tutorial ini bermanfaat, mohon maaf jika ada kesalahan, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap - Membuat Pagination


Hai semuanya...
Apa kabar semuanya, semoga tetap dalam keadaan sehat.

Pada tutorial kali ini kita akan belajar membuat pagination dengan Bootstrap, jika kita mempunyai sebuah halaman website yang banyak maka kita harus membagi setiap halamannya dengan pagination ini, langsung kita mulai belajar cara buat paginationnya.

# Membuat Pagination

Untuk membuat sebuah pagination dengan Bootstrap, tambahkan class “pagination” pada tag <ul> kemudian didalam tag <ul> buatlah  tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.
<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>
    <li><a href="">5</a></li>
</ul>
Hasilnya.


# Mengubah Size / Ukuran Pagination 

Jika ingin mengubah ukuran pagination menjadi besar atau kecil, ada 2 class yang digunakan mengubahnya yaitu 
  • pagination-lg 
  • pagination-sm

Class pagination-lg berfungsi untuk mengubah ukuran/size pagination menjadi large/besar, contoh penggunaannya sebagai berikut.

  <ul class="pagination pagination-lg">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
 </ul>
Hasilnya.

Sedangkan class pagination-sm berfungsi untuk mengubah size/ukuran pagination menjadi kecil, contohnya sebagai berikut.
  <ul class="pagination pagination-sm">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


# Class Active Dan Disabled

Pada dasarnya penggunaan class “active” pada untuk link yang sedang aktif digunakan sedangkan class disabled menonaktifkan link agar tidak dapat diklik, pada pagination kita dapat menggunakan kedua class tersebut, contoh misalkan link aktif pada nomor 1, maka tambahkan class “active” pada tag <li> nomor satu, contohnya sebagai berikut.
  <ul class="pagination pagination-lg">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


Namun, jika mengganti class “active” menjadi “disabled”, maka linknya akan menjadi tidak dapat diklik atau nonaktif link.

# Tombol Previous dan Next

Untuk menambahkan tombol previous dan next, syntax sebagai berikut.
  <ul class="pagination pagination-lg">
    <li><a href="">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="active"><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">Next</a></li>
  </ul>
Hasilnya.


Demikian tutorial membuat pagination dengan Bootstrap, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap - Membuat Breadcrumb


Hai semuannya...

Pada tutorial kali ini, kita akan belajar membuat breadcrumb dengan Bootstrap, breadcrumb biasanya digunakan untuk menunjukkan lokasi atau herarki halaman yang diakses oleh user.

Membuat Breadcrumb

Untuk membuat sebuah breadcrumb, gunakan class “breadcrumb” pada tag <ul>, contohnya sebagai berikut.
  <ul class="breadcrumb">
...
</ul>
Selanjutnya, didalam tag <ul> tambahkan tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.
  <ul class="breadcrumb">
    <li><a href="#"></a>Home</li>
    <li><a href="#"></a>Tutorial</li>
    <li><a href="#"></a>Front End</li>
    <li class="active"><a href="#"></a>CSS</li>
  </ul>
Hasilnya.


Jadi membuat sebuah breadcrumb sangatlah simple.
Demikian tutorial membuat breadcrumb dengan Bootstrap, semoga tutorial ini bermanfaat bagi kalian, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Membuat Navbar Responsive


Hai semuanya...

Pada artikel kali ini kita akan belajar membuat navbar responsive dengan HTML dan CSS, penasaran bagaimana cara membuatnya, yuk kita langsung mulai belajar membuatnya.

Langkah pertama, kita akan menggunakan library icon yaitu Font Awesome untuk digunakan pada navbar, silahkan copy dan paste code berikut dibawah tag <head>.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Langkah kedua, tulis syntax HTML seperti dibawah ini.
  <nav class="navbar" id="nav">
  <a href="#" class="active"><span class="fa fa-code"></span> Kode Kuliahan</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="bars" onclick="toggleItem()">
    <span class="fa fa-bars"></span></a>
</nav>
Langkah ketiga, tambahkan syntax CSS seperti berikut.
  .navbar{overflow: hidden;background-color: #1d1d1d;}
  .navbar a{
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 25px 20px;
  }
  .navbar a:hover{background-color: #0058ee;}
  .active{background-color: #0058ee;}
  .navbar .bars{display: none;}

  @media screen and (max-width:600px){
    .navbar a:not(:first-child){display: none;}
    .navbar a.bars{
      display: block;
      float: right;
    }
  }
  @media screen and (max-width:600px){
    .navbar.item{position: relative;}
    .navbar.item .bars{
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.item a{
      float: none;
      display: block;
      text-align: left;
      
    }
  }

Langkah keempat, tambahkan syntax Java Script seperti berikut.
  function toggleItem(){
    let n = document.getElementById('nav');
      if(n.className === 'navbar'){
        n.className += ' item';
      }else{
        n.className = 'navbar';
      }
    }
Hasilnya dapat dilihat pada gambar dibawah ini.


Ketika browsernya diresize menjadi 600px, maka tombol bars akan mucul, seperti gambar berikut ini.


Sehingga kita dapat mengklik tombol barsnya dan akan memunculkan itemnya, dapat dilihat seperti gambar dibawah ini.


Sekian dulu tutorial membuat navbar responsive, semoga bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.