Membuat Navs dan Navbar Dengan Bootstrap

16 December 2016
Sekarang kita belajar 2 hal sekaligus, yaitu Navs dan Navbar. Tanpa basi-basi, langsung saja kita ke pokok pembahasan..

Navs

  • Tabs
    Contoh penggunaan:
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>
    Hasilnya:
    navbar
  • Pills
    Contoh penggunaan:
papa wardi
papa wardi Updated at: 23:55

Mengenal Input Groups Pada Bootstrap

12 December 2016
Langsung saja ke pokok pembahasan. Kali ini kita belajar untuk mengenal input groups pada bootstrap. Input groups ini bisa dijadikan dasar untuk membuat sebuah form pada bootstrap (tentu saja digabung dengan komponen yang lain). Kita belajarnya pelan-pelan saja ya, biar lebih mudah memahami.. :)

Dasar

Contoh:
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br/>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br/>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br/>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Hasil:
papa wardi
papa wardi Updated at: 23:47

Mempelajari Button Groups di Bootstrap

10 December 2016
Kemarin kita sudah belajar membuat menu dropdown di bootstrap. Seperti janji saya, sekarang kita akan mempelajari Button Groups di Bootstrap.

Dasar

Bungkus kumpulan button dengan .btn di dalam .btn-group
Contoh penerapannya:
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Kiri</button>
  <button type="button" class="btn btn-default">Tengah</button>
  <button type="button" class="btn btn-default">Kanan</button>
</div>
Hasilnya seperti ini:

Warna

Untuk memberi warna pada button, kita perlu menambahkan elemen pada kelas .btn
Adapun elemen tersebut adalah:
papa wardi
papa wardi Updated at: 20:20

Membuat Menu Dropdown di Bootstrap

08 December 2016
Setelah 9 bulan vakum dari blog, saya ingin melanjutkan lagi pembahasan mengenai bootstrap yang sempat tertunda. Sebelumnya saya minta maaf karena terlalu lama vakumnya. Oke kita lanjut...

Dropdowns

Untuk membuat menu dropdown, kita perlu membungkus pemicunya (trigger) dan menu dropdown dengan .dropdown
Contoh penerapannya:
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>
Hasilnya:
papa wardi
papa wardi Updated at: 23:42
Copyright 2016 © papawardi