Home All posts

Kamis, 16 Maret 2017

|

Bootstrap: Tab/Pil


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Tab/Pil dengan Bootstrap.

Menu

Sebagian besar halaman web memiliki beberapa jenis menu. Dalam HTML, menu sering didefinisikan dalam daftar unordered <ul> (dan ditata setelah itu).

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Inline List</h3>
  <ul class="list-inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Tab

Tab diciptakan dengan <ul class="nav nav-tabs">. Untuk menandai halaman tambahkan <li class="active">.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <br>
  <p><strong>Catatan:</strong> Ini belum dinamis.</p>
</div>

</body>
</html>

Tab Dengan Menu Dropdown

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Tab denagan Menu Dropdown</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>                       
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Pil

Pil diciptakan dengan <ul class="nav nav=pills">. Untuk menandai halaman tambahkan <li class="active">.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Pills (Pil)</h3>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Pil Vertikal

Pil juga dapat ditampilkan secara vertikal. Cukup tambahkan class .nav-stacked.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Pil Vertikal</h3>
  <p>Pil juga dapat ditampilkan secara vertikal. Cukup tambahkan class .nav-stacked:</p>
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Contoh berikut menempatkan menu pil vertikal di dalam kolom terakhir. Jadi, pada layar besar menu akan ditampilkan ke kanan. Tapi pada layar kecil, konten secara otomatis akan menyesuaikan dirinya menjadi layout single-kolom:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Pil Vertikal</h3>
  <div class="row">
    <div class="col-md-3">
      <p>dicky69news.blogspot.com</p>
    </div>
    <div class="col-md-3">
      <p>dicky69news.blogspot.com</p>
    </div>
    <div class="col-md-3">
      <p>dicky69news.blogspot.com</p>
    </div>
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </div>
    <div class="clearfix visible-lg"></div>
  </div>
</div>

</body>
</html>

Pil Dengan Menu Dropdown

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Pil dengan Menu Dropdown</h3>
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Submenu 1-1</a></li>
        <li><a href="#">Submenu 1-2</a></li>
        <li><a href="#">Submenu 1-3</a></li>                       
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Tab dan Pil Terpusat (Centered)

Untuk pusat / membenarkan tab dan pil, gunakan class .nav-justified.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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">
  <h3>Centered Tabs</h3>
  <p>Untuk pusat / membenarkan tab dan pil, menggunakan class .nav-dibenarkan. Perhatikan bahwa pada layar yang lebih kecil dari 768px, daftar item ditumpuk (konten akan tetap berpusat)</p>
  <ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
  <br>
  <h3>Centered Pills</h3>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

Tab Toggleable / Dinamis

Untuk membuat tab toggleable/dinamis tambahkan atribut  data-toggle="tab" untuk setiiap link. Kemudian tambahkan class .tab-pane dengan ID yang unik untuk setiap tab dan membungkus mereka dalam elemen <div> dengan class .tab-content.

Catatan: Jika Anda ingin tab memudar dalam dan keluar ketika mengklik mereka, tambahkan class .fade untuk .tab-pane

Contoh: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Tab Dinamis</h2>
  <p>Untuk membuat tab toggleable/dinamis tambahkan atribut  data-toggle="tab" untuk setiiap link. Kemudian tambahkan class .tab-pane dengan ID yang unik untuk setiap tab dan membungkus mereka dalam elemen div dengan class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
  </div>
</div>

</body>
</html>

Pil Toggleable / Dinamis

Kode yang sama berlaku untuk pil; hanya mengubah atribut data-toggle ke data-toggle="pil".

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Pil Dinamis</h2>
  <p>Kode yang sama berlaku untuk pil; hanya mengubah atribut data-toggle ke data-toggle="pil".</p>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
  </ul>
 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>dicky69news.blogspot.com</p>
    </div>
  </div>
</div>

</body>
</html>

Sekian Cara Membuat Tab/Pil dengan Bootstrap.
Semoga Bermanfaat...!!!

Referennsi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Rabu, 15 Maret 2017

|

Bootstrap: Collapse


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Collapse dengan Bootstrap.

Dasar Collapsible (Dilipat)

Collapse berguna ketika Anda ingin menyembunyikan dan menampilkan sejumlah besar konten.

Contoh:
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Collapsible (Dilipat) Sederhana</h2>
  <p>Klik tombol untuk menampilkan dan menyembunyikan konten.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Collapsible (Dilipat) Sederhana</button>
  <div id="demo" class="collapse">
    dicky69news.blogspot.com
  </div>
</div>

</body>
</html>

Keterangan:
  • Class .collapse menunjukkan elemen collapsible/dilipat (<div>); ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengeklik tombol.
  • Untuk control (show / hide) isi collapsible, tambahkan atribut data-toggle="collape" ke elemen <a> atau <button>. Kemudian tambahkan atribut data-target="#id" untuk mengghubungkan tombol dengan konten collapsible (<div id="deemo">.
Catatan:
  • Untuk elemen <a>, Anda dapat menggunakan atribut href bukan atribut data-target.
  • Anda dapat menambahkan class .in untuk menampilkan konten secara default.

Panel Dilipat

Contoh:
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel Dilipat</h2>
  <p>Klik panel untuk membuka dan menutupnya.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Panel dilipat</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</div>
   
</body>
</html>

Daftar Grup Dilipat

Contoh:
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Daftar Grup Dilipat</h2>
  <p>Klik panel untuk membuka dan menutupnya.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Daftar grup dilipat</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">Satu</li>
          <li class="list-group-item">Dua</li>
          <li class="list-group-item">Tiga</li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
  </div>
</div>
   
</body>
</html>

Akordeon

Gunakan atribut data-parent untuk memastikan bahwa semua elemen dilipat di bawah induk yang ditentukan akan ditutup ketika salah satu item collapsible (dilipat) ditampilkan.

Contoh:
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 Akordeon</h2>
  <p><strong>Catatan:</strong> atribut <strong>data-parent</strong> muntuk memastikan bahwa semua elemen dilipat di bawah induk yang ditentukan akan ditutup ketika salah satu item collapsible (dilipat) ditampilkan.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">dicky69news.blogspot.com</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">dicky69news.blogspot.com</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">dicky69news.blogspot.com</div>
      </div>
    </div>
  </div>
</div>
   
</body>
</html>

Sekian Cara Membuat Collape dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Selasa, 14 Maret 2017

|

Bootstrap: Dropdown


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Dropdown dengan Bootstrap.

Dropdown Dasar

Sebuah menu dropdown adalah menu toggleable yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar yang tersedia.

Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Class .dropdown digunakan untuk menunjukkan menu dropdown.</p>
  <p>Menggunakan class .dropdown-menu untuk benar-benar membangun menu dropdown.</p>
  <p>TUntuk membuka menu dropdown, gunakan tombol atau link dengan class .dropdown-toggle dan data-toggle="dropdown".</p>                                         
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Keterangan
  • Claas .dropdown menunjukkan menu dropdown.
  • Untuk membuka menu dropdown, gunakan tombol atau link dengan class .dropdown-toggle dan atribut data-toggle="dropdown".
  • Class .caret menciptakan ikon tanda sisipan panah, Yang menunjukkan bahwa tombol adalah sebuah dropdown.
  • Tambahkan class .dropdown-menu ke elemen <ul> untuk benar-benar membangun menu dropdown. 

Divider Dropdown

Class .divider digunakan untuk link yang terisah dalam menu dropdown dengan pembatas horisontal tipis.

Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Class .divider digunakan untuk link yang terisah dalam menu dropdown dengan pembatas horisontal tipis:</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html> 

Dropdown Header

Class .dropdown-header digunakan untuk menambahkan header kedalam menu dropdown.

Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Class .dropdown-header digunakan untuk menambahkan header kedalam menu dropdown:</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Dropdown header 1</li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Dropdown header 2</li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Menonaktifkan dan Mengaktifkan Item

Sorot item dropdown tertentu dengan class .active (menambahkan warna latar belakang biru).
Untuk menonaktifkan item dalam menu dropdown, gunakan class .disabled (mendapat warna teks abu-abu terang dan "tidak-parkir-tanda" icon di hover).

Contoh: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Class .active menambahkan warna latar belakang biru untuk link aktif.</p>
  <p>Class .disabled menonaktifkan item dropdown (warna teks abu-abu).</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Normal</a></li>
      <li class="disabled"><a href="#">Disabled</a></li>
      <li class="active"><a href="#">Active</a></li>
      <li><a href="#">Normal</a></li>
    </ul>
  </div>
</div>

</body>
</html>



Posisi Dropdown

Ke kanan-menyelaraskan dropdown, tambahkan class .dropdown-menu right dengan elemen .dropdown-menu.

 Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstra</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Ke kanan-menyelaraskan dropdown, tambahkan class .dropdown-menu right dengan elemen .dropdown-menu:</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>



Dropup

Jika Anda ingin menu dropdown untuk memperluas ke atas bukan ke bawah, mengubah elemen <div>  dengan class ="dropdown" ke "dropup".

Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropup</h2>
  <p>Class .dropup membuat menu dropdown memperluas ke atas bukan ke bawah:</p>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Contoh Dropup
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>



Aksesibilitas dropdown

Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup atribut role dan aria-* saat membuat menu dropdown.

 Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Dropdown</h2>
  <p>Class .dropdown digunakan untuk menunjukkan menu dropdown.</p>
  <p>Menggunakan class .dropdown-menu untuk benar-benar membangun menu dropdown.</p>                                         
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorial
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>



Sekian Cara Membuat Dropdown dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Senin, 13 Maret 2017

|

Bootstrap: Panel


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Panel dengan Bootstrap.

Panel Dasar

Sebuah panel di bootstrap adalah kotak dengan border beberapa padding sekitar isinya. Panel di buat dengan class .panel dan konten dalam panel memiliki class .panel-body.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel Dasar</h2>
  <div class="panel panel-default">
    <div class="panel-body">A. Panel Dasar</div>
  </div>
</div>

</body>
</html>

Panel Heading

Class .panel-heading menambahkan heading ke panel.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Konten</div>
  </div>
</div>

</body>
</html>

Panel Footer

Class .panel-footer menambahkan footer ke panel.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel Footer</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

</body>
</html> 

Panel Grup

Untuk banyak kelompok panel bersama-sama, membungkus <div> dengan class .panel-group disekitar mereka. Class .pael-group membersihkan bagian bawah margin masing-masing panel.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel Group</h2>
  <p>Class panel-group membersihkan bagian bawah margin. Cobalah untuk menghapus kelas dan melihat apa yang terjadi.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
  </div>
</div>

</body>
</html>

Panel dengan Class Kontekstual

Untuk warna panel, menggunakan class kontekstual (.panel-deafult, panel-primary, .panel-succes, .panel-info, .panel-warning, .panel-danger).

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Panel dengan Class Kontekstual</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel with panel-success class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel with panel-info class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel with panel-warning class</div>
      <div class="panel-body">Panel Content</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel with panel-danger class</div>
      <div class="panel-body">Panel Content</div>
    </div>
  </div>
</div>

</body>
</html>

Sekian Cara Membuat Panel dengan Bootstrap.
Semoga Bermanfaat...!!!

 Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Sabtu, 11 Maret 2017

|

Bootstrap: List (Daftar) Grup






Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat List (Daftar) Grup.

List (Daftar) Grup Dasar

Kelompok daftar yang paling mendasar adalah daftar unordered dengan daftar item. Untuk membuat daftar grup dasar, gunakan elemen <ul> dengan class .list-group, dan unur-unsur <li> dengan class .list-group-item.

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>List (Daftar) Grup Dasar</h2>
  <ul class="list-group">
    <li class="list-group-item">Item pertama</li>
    <li class="list-group-item">Item kedua</li>
    <li class="list-group-item">Item ketiga</li>
  </ul>
</div>

</body>
</html>

Daftar Grup dengan Lencana

Anda juga dapat menambahkan lencana ke daftar grup. Lencana akan secara otomatis diposisikan di sebelah kanan. Untuk membuat lencana, buat elemen <span> dengan class .badge dalam daftar item.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Daftar Grup dengan Lencana</h2>
  <ul class="list-group">
    <li class="list-group-item">Baru <span class="badge">12</span></li>
    <li class="list-group-item">Dihapus <span class="badge">5</span></li>
    <li class="list-group-item">Peringatan <span class="badge">3</span></li>
  </ul>
</div>

</body>
</html>

Daftar Grup Dengan Produk Terkait

Item dalam kelompok daftar juga bisa hyperlink. Ini akan menambahkan warna latar belakang abu-abu di hover. Untuk membuat daftar grup deengan item terkait, menggunakan <div> bukannya <ul> dan <a> bukannya <li>.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Daftar Grup Dengan Produk Terkait</h2>
  <div class="list-group">
    <a href="#" class="list-group-item">Item pertama</a>
    <a href="#" class="list-group-item">Item kedua</a>
    <a href="#" class="list-group-item">Item ketiga</a>
  </div>
</div>

</body>
</html>

State Aktive

Gunakan class .active untuk menyorot item saat ini.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Item Aktif dalam Daftar Grup</h2>
  <div class="list-group">
    <a href="#" class="list-group-item active">Item pertama</a>
    <a href="#" class="list-group-item">Item kedua</a>
    <a href="#" class="list-group-item">Item ketiga</a>
  </div>
</div>

</body>
</html> 

Menonaktifkan Item

Untuk menonaktifkan item tambahkan class .disabled.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Belajar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Menonaktifkan Item</h2>
  <div class="list-group">
    <a href="#" class="list-group-item disabled">Item pertama</a>
    <a href="#" class="list-group-item">Item kedua</a>
    <a href="#" class="list-group-item">Item ketiga</a>
  </div>
</div>

</body>
</html>


Class kontekstual

Class kontekstual dapat digunakan untuk daftar warna item. Class-class untuk mewarnai daftar item adalah .list-group-item-success, .list-group-item-info, .list-group-item-warning, .list-group-item-danger.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Daftar Grup dengan Claass Kontekstual</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Item pertama</li>
    <li class="list-group-item list-group-item-info">Item kedua</li>
    <li class="list-group-item list-group-item-warning">Item ketiga</li>
    <li class="list-group-item list-group-item-danger">Item keempat</li>
  </ul>
 
  <h2>Produk terkait Dengan Kelas Kontekstual</h2>
  <p>Gerakkan mouse di atas item terkait untuk melihat efek hover:</p>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-success">Item pertama</a>
    <a href="#" class="list-group-item list-group-item-info">Item kedua</a>
    <a href="#" class="list-group-item list-group-item-warning">Item ketiga</a>
    <a href="#" class="list-group-item list-group-item-danger">Item keempat</a>
  </div>
</div>

</body>
</html> 

Konten kustom

Anda dapat menambahkan HTML dalam item daftar grup. Bootstrap menyediakan class .list-group-item-heading dan .list-grupitem-text yang dapat digunakan.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Daftar Grup dengan Kustom Konten</h2>
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Daftar grup item heading pertama</h4>
      <p class="list-group-item-text">Daftar grup item teks</p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">Daftar grup item heading kedua</h4>
      <p class="list-group-item-text">Daftar grup item teks</p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">Daftar grup item heading ketiga</h4>
      <p class="list-group-item-text">Daftar grup item teks</p>
    </a>
  </div>
</div>

</body>
</html> 

Sekian Cara Membuat List (Daftar) Grup dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More
Langganan: Postingan (Atom)