Home Posts filed under Bootstrap
Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan
Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan

Kamis, 30 Maret 2017

|

Bootstrap: Buttons/Tombol


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Buttons (Tombol) dengan Bootstrap.

Gaya Tombol

Bootstrap memberikan tujuh gaya tombol dengan class-class sebagai berikut:
  1. .btn-default
  2. .btn-primary
  3. .btn-success
  4. .btn-info
  5. -btn-warning
  6. .btn-danger
  7. .btn-link
Contoh berikut menunjukkan kode untuk tombol yang berbeda gaya:
<!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>Gaya Tombol</h2>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>     
</div>

</body>
</html>


Class tombol dapat digunakan pada elemen <a>, <button> atau <input>

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>Tag Button (Tombol)</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>

</body>
</html>


Ukuran Tombol

Bootstrap memberikan empat ukuran tombol:
  1. Large (Besar)
  2. Medium
  3. Small (Kecil)
  4. Xsmall (Sanngat Kecil)
Contoh berikut untuk menunjukan ukuran tombol yang berbeda:
<!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>Ukuran Button (Tombol)</h2>
  <button type="button" class="btn btn-primary btn-lg">Large (Besar)</button>
  <button type="button" class="btn btn-primary btn-md">Medium</button>   
  <button type="button" class="btn btn-primary btn-sm">Small (Kecil)</button>
  <button type="button" class="btn btn-primary btn-xs">XSmall (Sangat Kecil)</button>
</div>

</body>
</html>


Tombol Tingkat Blok

Sebuah tombol tingkat blok meliputi seluruh lebar dari elemen induk. Tambahkan class .btn-block untuk membuat tombol tingkat blok.

 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>Tombol Tingkat Blok</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Tombol Tingkat Blok Besar</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Tombol Tingkat Blok Kecil</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

</body>
</html>


Active/Disabled Buttons (Tombol)

Sebuah tombol dapat diatur untuk aktif (muncul ditekan) atau cacat (unclickable). Class .active membuat tombol bisa ditekan. Class .disabled membuat tombol tidak bisa di tekan.

 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>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>

</body>
</html>



Sekian Cara Membuat Buttons (Tombol) dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Rabu, 29 Maret 2017

|

Bootstrap Badges (Lencana) dan Label


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Badges (Lencana) dan Label).

Badges (Lencana)

Badges (Lencana) adalah indikator numerik dari berapa banyak item yang terkait dengan link. Gunakan Class .badge dalam elemen <span> untuk membuat lencana.

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">Badges (Lencana)
  <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>Badges (Lencana)</h2>
  <a href="#">Berita <span class="badge">5</span></a><br>
  <a href="#">Komentar <span class="badge">10</span></a><br>
  <a href="#">Terbaru <span class="badge">2</span></a>
</div>

</body>
</html>


Badges (Lencana) juga dapat digunakan di dalam unsur-unsur lain, seperti tombol.

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>Badges (Lencana) pada Tombol</h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>   
  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>       
</div>

</body>
</html>


Label

Label digunakan untuk memberikan informasi tambahan tentang sesuatu. Gunakan class .label, diikuti salah satu dari enam class kontekstual .label-default, .label-primary, .label-success, .label-info atau .label-danger dalam elemen <span> untuk membuat label.

 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>Label</h2>
  <h1>Contoh <span class="label label-default">Baru</span></h1>
  <h2>Contoh <span class="label label-default">Baru</span></h2>
  <h3>Contoh <span class="label label-default">Baru</span></h3>
  <h4>Contoh <span class="label label-default">Baru</span></h4>
  <h5>Contoh <span class="label label-default">Baru</span></h5>
  <h6>Contoh <span class="label label-default">Baru</span></h6>
</div>

</body>
</html>


Contoh berikut menunjukkan class label kontekstual:
<!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>Class Label Kontekstual</h2>
  <p>Class kontekstual dapat digunakan untuk mewarnai label.</p> 
  <span class="label label-default">Default Label</span>
  <span class="label label-primary">Primary Label</span>
  <span class="label label-success">Success Label</span>
  <span class="label label-info">Info Label</span>
  <span class="label label-warning">Warning Label</span>
  <span class="label label-danger">Danger Label</span>
</div>

</body>
</html>


Sekian Cara Membuat Badges (Lencana) dan Label).
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Senin, 27 Maret 2017

|

Bootstrap: Popover


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Popover dengan Bootstrap.

Popover Plugin

Popover Plugin ini mirip dengan tooltips, yaitu kotak pop-up yang muncul saat pengguna mengklik pada sebuah elemen. Perbedaannya adalah bahwa popover dapat berisi konten.

Cara Membuat Popover

Untuk membuat popover, tambahkan atribut data-toggle="popover". Gunakan atribut title untuk menentukan teks header popover, dan gunakan atribut data-content untuk menentukan teks yang harus ditampilkan dalam tubuh popover.

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.2.0/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>Contoh Popover</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html>

Posisi Popover

Secara default, popover akan muncul di sisi kanan dari elemen. Gunakan atribut data-placement untuk mengatur posisi popover di atas, bawah, kiri atau sisi kanan elemen.

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.2.0/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>Contoh Popover</h3>
  <ul class="list-inline">
    <li><a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Atas</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bawah</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Kiri</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Kanan</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html>
Tips:
  • Secara default, popover ditutup ketika Anda mengklik pada elemen lagi. Namun, Anda dapat menggunakan atribut data-triger="focus"
    yang akan menutup popover ketika mengklik luar elemen. 
  • Jika Anda ingin popover yang akan ditampilkan ketika Anda memindahkan pointer mouse di atas elemen, gunakan atribut data-triger="hover".

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

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Sabtu, 25 Maret 2017

|

Bootstrap: Tooltip


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Tooltip dengan Bootstrap.

Tooltip Plugin

Tooltip plugin kotak pop-up kecil yang muncul saat pengguna menggerakkan pointer mouse di atas unsur.

Untuk membuat tooltip, tambahkan atribut data-toggle"tooltip". Gunakan atribut title untuk menentukan teks yang harus ditampilkan dalam tooltip.

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>Contoh Tooltip</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Arahkan kursor ke sini</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>

</body>
</html>

Posisi Tooltip

Secara default, tooltip akan muncul di atas elemen. Gunakan atribut data-placement untuk mengatur posisi tooltip diatas, bawah, kiri atau kanan elemen.

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>Belajar Tooltip</h3>
  <p>Gunakan atribut data-placement untuk mengatur posisi tooltip.</p>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Atas</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bawah</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Kiri</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Kanan</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>

</body>
</html>

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

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Jumat, 24 Maret 2017

|

Bootstrap: Modal


Assalamu'alakum wr.wb

Kali saya akan berbagi Cara Membuat Modal dengan Bootstrap.

Modal Plugin

Modal plugin kotak dialog / popup window yang ditampilkan di atas dari halaman 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>Modal Example</h2>
  <!-- Trigger -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
   
      <!-- Isi Modal -->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     
    </div>
  </div>
 
</div>

</body>
</html>

Ukuran Modal

Mengubah ukuran modal dengan menambahkan class .modal-sm untuk modal kecil atau class .modal-lg untuk modal besar. Tambahkan class ukuran ke elemen <div> dengan class .modal dialog.

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

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Kamis, 23 Maret 2017

|

Bootstrap: Carousel (Korsel)


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Carousel (Korsel) dengan Bootstrap.

Carousel Plugin

Carousel Plugin adalah komponen untuk bersepeda melalui unsur-unsur, seperti carousel (slide).

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>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="linux.png" alt="Linux" width="460" height="345">
      </div>
   
      <div class="item">
        <img src="Bootstrap-3.jpg" alt="Bootstrap" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <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>

Keterangan:

1. <div> terluar
  • Komedi putar memerlukan penggunaan id (dalam ha ini id="myCarousel") untuk kontrol carousel berfungsi dengan baik.
  • class="carousel" menetapkan bahwah <div> ini berisi carousel.
  • Class .slide menambahkan CSS transisi dan animasi efek.
  • Atribut data-ride="carousel" memberi tahu bootstrap untuk mulai menghidupkan carousel.
2. bagian "Indicators"
  • Indikator adalah titik-titik kecil di bagian bawah setiap slide (yang menunjukkan berapa banyak slide yang ada di carousel, dan yang geser pengguna sedang melihat).
  • dikator-indikator tersebut ditentukan dalam daftar dipesan dengan class .carousel-indicator.
  • Atribut data-target menunjuk ke id dari carousel.
  • Atribut data-slide-to menentukan yang meluncur saat di klik pada titik tertentu. 
3. bagian "Wrapper for slides"
  • Slide ditentukan dalam <div> dengan class .carousel-inner
  • Isi dari setiap slide didefinisikan dalam <dive> debgan class .item
  • Class .active perlu di tambahkan ke salah satu slide. Jika tidak, carousel tidak akan terlihat.
4. bagian "Left and right controls"
  • Kode ini menambahkan "kiri" dan "kanan" tombol yang memungkinkan pengguna untuk pergi bolak-balik antara slide secara manual.
  • Atribut data-slide menerima kata kunci "prev" atau "next", yang merubah posisi geser pada saat ini.
NB: Jika ingin menambahkan keterangan pada setiap slide, tambahkan <div class="carousel-caption"> dalam setiap <div class="item">.

Sekian Cara Membuat Carousel (Korsel) dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Rabu, 22 Maret 2017

|

Bootstrap: Ukuran Input


Assalamu'alaikum wr.wb

Kali ini saya berbagi Cara Mengatur Ukuran Input dengan Bootstrap.

Ukuran Input Pada Form

  • Mengatur ketinggian elemen input menggunakan class .input-lg dan input-sm.
  • Mengatur lebar dari elemen menggunakan class .col-lg-* dan .col-sm-*.

Anda dapat membuat ukuran label cepat dan bentuk kontrol dalam bentuk horizontal dengan menambahkan .form-group-* ke elemen <div class="form-group">:


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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Input</h2>
  <p> Anda dapat membuat ukuran label cepat dan bentuk kontrol dalam bentuk horizontal dengan menambahkan .form-group-* ke elemen div class="form-group": </p>
  <form class="form-horizontal" role="form">
    <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="lg">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="sm">
      </div>
    </div>
  </form>
</div>

</body>
</html>

Ukuron Kolom

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Kolom</h2>
  <p>Formulir dibawah ini menunjukkan elemen input dengan lebar yang berbeda menggunakan berbagai class .col-xs-*: </p>
  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>
</div>

</body>
</html>

Teks Bantuan

Gunakan class .help-block untuk menambahkan tingkat blok text bantuan pad form.

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Teks Bantuan</h2>
  <p>Gunakan class .help-block untuk menambahkan tingkat blok text bantuan pad form:</p>
  <form role="form">
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      <span class="help-block">Ini adalah beberapa teks bantuan yang memecah ke baris baru dan dapat memperpanjang lebih dari satu baris.</span>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

Sekian Cara Mengatur Ukuran Input dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Selasa, 21 Maret 2017

|

Bootstrap: Form Input 2






Assalamu'alaikum wr.wb

Kemari saya sudah berbagi Cara Membuat Form Input dengan Bootstrap. Ini adalah lanjutan dari postingan kemarin.

Kontrol Statis

Jika anda perlu mamasukkan teks biasa disamping label dalam bentuk horisontal, gunakan class .form-control-static pada elemen <p>.

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form Inline: control states</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="focusedInput">Focused</label>
      <input class="form-control" id="focusedInput" type="text">
    </div>
    <div class="form-group">
      <label for="inputPassword">Disabled</label>
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
    <div class="form-group has-success has-feedback">
      <label for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
      <label for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </form>
</div>

</body>
</html>

Sekian artikel kali ini.
Semoga Beermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Senin, 20 Maret 2017

|

Bootstrap: Form Input






Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Form Input dengan Bootstrap.

Pendukung Form Control

Bootstrap mendukung kontrol form berikut:

  • Input (Masukan)
  • Textaerea
  • Checkbox (Kotak Centang)
  • Radio
  • Select (Memilih)


Input (Masukan)

Bootstrap mendukung semua jenis input HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Input tidak akan sepenuhnya ditata jika jenis mereka tidak dinyatakan dengan benar.

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>Form control: input</h2>
  <p>Formulir di bawah ini mengandung dua unsur masukan; salah satu jenis text dan satu Jenis password:</p>
  <form>
    <div class="form-group">
      <label for="usr">Username:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>

</body>
</html>

Textarea

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>Form control: textarea</h2>
  <p>Formulir di bawah ini berisi textarea untuk komentar:</p>
  <form>
    <div class="form-group">
      <label for="comment">Komentar:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>

</body>
</html>

Checkbox (Kotak Centang)

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>Form control: checkbox</h2>
  <p>Formulir di bawah ini berisi tiga checkbox. Opsi terakhir dinonaktifkan:</p>
  <form>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    <div class="checkbox disabled">
      <label><input type="checkbox" value="" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>

Contoh2:
<!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>Form control: inline checkbox</h2>
  <p>formulir di bawah ini berisi tiga checkbox inline:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>

</body>
</html>

Radio

Tombol radio digunakan jika Anda ingin membatasi pengguna untuk hanya memilih 1 dari daftar pilihan yang telah ditetapkan.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh 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>Form control: radio buttons</h2>
  <p>Formulir di bawah ini berisi tiga tombol radio. Opsi terakhir dinonaktifkan:</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>



  Select (Memilih)

 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>Form control: select</h2>
  <p>formulir di bawah ini berisi dua menu dropdown:</p>
  <form>
    <div class="form-group">
      <label for="sel1">Daftar pilih (pilih salah satu)::</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Daftar pilih ganda (tahan shift untuk memilih lebih dari satu):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>

</body>
</html>



Sekian Cara Membuat Form Input dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Jumat, 17 Maret 2017

|

Bootstrap: Navigation Bar


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Navigation Bar dengan Bootstrap.

Navigation Bar

Sebuah Navigation Bar adalah header navigasi yang ditempatkan di bagian atas halaman. Dengan Bootstrap , navigation bar bisa memperpanjang atau runtuh, tergantung pada ukuran layar. Sebuah navigation bar standar dibuat dengan<nav class="navbar navbar-default">.

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Contoh Navbar Dasar</h3>
  <p>Sebuah bar navigasi adalah header navigasi yang ditempatkan di bagian atas halaman.</p>
</div>

</body>
</html>

Inverted Navigation Bar

Jika Anda tidak menyukai gaya bar navigasi default, Bootstrap memberikan alternatif, navbar hitam. Hanya mengubah class .navbar-default menjadi .navbar-inverse.

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Inverted Navbar</h3>
  <p>Sebuah navbar terbalik hitam bukan abu-abu.</p>
</div>

</body>
</html>

Fixed Navigation Bar

Navigation Bar juga bisa diperbaiki di bagian atas atau di bagian bawah halaman. Sebuah navbar tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir. Class .navbar-fixed-top membuat navbar tetap diatas.

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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>   
    </div>
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
    </div>
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
    </div>
  </div>
</div>

<h1>Gulir halaman ini untuk melihat efek</h1>

</body>
</html>
NB: Jika ingin membuat navbar tinggal dibagian bawah gunakan class .navbar-fixed-bottom.

Navigation Bar dengan 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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</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="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Navbar dengan Dropdown</h3>
  <p>Contoh ini menambahkan menu dropdown untuk tombol "Page 1" di navbar.</p>
</div>

</body>
</html>

Blok-Kanan Navigation Bar

Class .navbar-right untuk blok-kanan tombol navbar.
Pada contoh berikut kita menyisipkan tombol"Sign Up" dan tombol "Login" di sebelah kanan navbar. Saya juga menambahkan glyphicon pada masing-masing dua tombol baru:
<!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="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</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="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</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>

Collapsing Navigation Bar

Kita harus menyembunyikan navbar dan hanya ditampilkan ketika dibutuhkan.
Pada contoh berikut navbar digantikan oleh tombol di pojok kanan atas. Hanya ketika tombol diklik, bar navigasi akan ditampilkan:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<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="#">Nama WebSite</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</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>
  </div>
</nav>
 
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>Dalam contoh ini, navbar tersembunyi di layar kecil dan digantikan oleh tombol di pojok kanan atas.
  <p>Hanya ketika tombol diklik, bar navigasi akan ditampilkan.</p>
</div>

</body>
</html>

Sekian Cara Membuat Navigation Bar dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

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
Langganan: Postingan (Atom)