Membuat Navs dan Navbar Dengan Bootstrap

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:
  

  Home Profile Messages

  

• Pills

  Contoh penggunaan:

Mengenal Input Groups Pada Bootstrap

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:

Mempelajari Button Groups di Bootstrap

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:

Membuat Menu Dropdown di Bootstrap

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: