Home All posts

Kamis, 09 Maret 2017

|

Bootstrap: Pagination


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Pagination dengan Bootstrap.

Pagination Dasar

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan beberapa jenis pagination untuk setiap halaman. Untuk membuat pagination dasar, tambahkan class .pagination ke elemen <ul>.

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>Pagination</h2>
  <p>Class .pagination memberikan link pagination:</p>                
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

</body>
</html>


Mengaktifkan State

Keadaan aktif menunjukkan halaman saat ini. Tambahkan class .active untuk membiarkan pengguna mengetahui pada halaman berapa ia berada.

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>Pagination - State Aktif</h2>
  <p>Tambahkan class .active untuk membiarkan pengguna mengetahui pada halaman berapa ia berada:</p>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

</body>
</html>




Menonaktifkan State

Sebuah link cacat tidak bisa diklik. Tambahkan class .disabled jika link untuk beberapa alasan dinonaktifkan.

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>Pagination - Menonaktifkan State</h2>
  <p>Tambahkan class .disabled jika link untuk beberapa alasan dinonaktifkan:</p>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="disabled"><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

</body>
</html>


Merubah Ukuran Pagination

Blok pagination juga dapat dirubah menjadi ukuran yang lebih besar atau ukuran yang lebih kecil. Tambahkan class .pagination-lg untuk blok yang lebih besar atau .pagination-sm untuk blok yang lebih kecil.

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>Merubah Ukuran Pagination</h2>
  <p>Tambahkan class .pagination-lg untuk blok yang lebih besar atau .pagination-sm untuk blok yang lebih kecil.</p>

  <p>Besar:</p>
  <ul class="pagination pagination-lg">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>

  <p>Default:</p>
  <ul class="pagination pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>

  <p>Kecil:</p>
  <ul class="pagination pagination-sm">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

</body>
</html>




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

 Referensi:www.w3schools.com

 Wassalamu'alaikum wr.wb
Read More

Rabu, 08 Maret 2017

|

Bootstrap: Progress Bar


Assalamu'alaikum wr.wb

Kali saya akan berbagi Cara Membuat Progress Bar dengan Bootstrap.

Progress Bar Dasar

Sebuah progress bar dapat digunakan untuk menunjukkan pengguna seberapa jauh ia / dia dalam proses. Untuk membuat progress bar default, tambahkan class .progress ke elemen <div>.

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>Progress Bar Dasar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

</body>
</html>


Progress Bar Dengan Label

Hilangkan class .sr-only dari progress bar agar presentase terlihat

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>Progress Bar Dengan Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70%
    </div>
  </div>
</div>

</body>
</html>


Progress Bar Berwarna

Class kontekstual digunakan untuk mmberikan makna melui warna. Class kontekstual yang dapat digunakan dengan Progress Bar:
  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-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>Progress Bar Berwarna</h2>
  <p>Class kontekstual warna progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      50% Complete (info)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

</body>
</html>


Progress Bar Bergaris

Tambahkan class .progress-bar-striped untuk menambahkan garis-garis pada progress bar.

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>Progress Bars Bergaris</h2>
  <p>Tambahkan class .progress-bar-striped untuk menambahkan garis-garis pada progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      50% Complete (info)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

</body>
</html>


Animasi Progress Bar

Tambahkan class .active untuk menghidupkan progress bar.

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>Animasi Progress Bar</h2>
  <p>Tambahkan class .active untuk menghidupkan progress bar.</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

NB: Untuk hasil silahkan coba sendiri.

Progress Bar di Tumpuk

Buat progress bar ditumpuk dengan menempatkan beberapa bar ke dalam <div> yang sama dengan class .progress.
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>Progress Bar di Tumpuk</h2>
  <p>Buat progress bar ditumpuk dengan menempatkan beberapa bar ke dalam <div> yang sama dengan class .progress.</p>
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>

</body>
</html>


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

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Selasa, 07 Maret 2017

|

Bootstrap: Glyphicons


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Glyphicons dengan Bootstrap.

Glyphicons

  • Bootstrap memberikan 260 glyphicons dari Glyphicons Halfling set.
  • Glyphicons dapat digunakan dalam teks, tombol, toolbar, navigasi, form, dll.

Syntaks Glyphicons

Sebuah glyphicon dimasukkan dengan sintaks berikut:

<span class="glyphicon glyphicon-nama"></span>
"nama" dalam bagian sintaks diatas ganti dengan nama yang tepat dari glypicon

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>Contoh Glyphicon</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>   
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
  <p>Search icon on a button:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Search icon on a styled button:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>     
  <p>Print icon on a styled link button:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print
    </a>
  </p>
</div>

</body>
</html>



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


Wassalamu'alaikum wr.wb
Read More

Senin, 06 Maret 2017

|

Bootstrap: Grup Tombol


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Grup Tombol dengan Bootstrap.

Grup Tombol

Bootstrap memungkinkan untuk membuat kelompok serangkaian tombol bersama-sama (pada satu baris) dalam kelompok tombol. Gunakan elemen <div> dengan class .btn-group untuk membuat grup 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>Grup Tombol</h2>
  <p>Class .btn-group untuk membuat grup tombol</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>


Daripada menggunakan ukuran tombol untuk setiap tombol pada grup, lebih baik menggunakan class .btn-group-lg|sm|xs untuk merubah ukuran tombol pada grup.

 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>Grup Tombot - Set Ukuran</h2>
  <p>Tambahkan class .btn-group-* untuk merubah semua ukuran tombol pada tombol grup.</p>
  <h3>Tombol Besar:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Tombol Default:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Tombol Kecil:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
  <h3>Tombol Sangat Kecil:</h3>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>


Grup Tombol vertikal

Gunakan class .btn-group-vertical untuk membuat grup tombol vertikal.

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>Grup Tombol Vertikal</h2>
  <p>Gunakan class .btn-group-vertical untuk membuat grup tombol vertikal.</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

</body>
</html>


Grup Tombol Justified (Dibenarkan)

Span seluruh lebar layar gunakan class .btn-group-justified.

Misalnya dengan elemen <a>:
<!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>Grup Tombol Justified (Dibenarkan)</h2>
  <p>Span seluruh lebar layar gunakan class .btn-group-justified:</p>
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <a href="#" class="btn btn-primary">Sony</a>
  </div>
</div>

</body>
</html>

Untuk elemen <button> anda harus membungkus setiap tombol di class .btn-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="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>Grup Tombol Justified (Dibenarkan)</h2>
  <p>Span seluruh lebar layar gunakan class .btn-group-justified:</p>
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Samsung</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">Sony</button>
    </div>
  </div>
</div>

</body>
</html>


Nesting Tombol Grup & Dropdown Menu

Nesting tombol grup untuk untuk membuat 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">
  <h2>Nesting Tombol Grup</h2>
  <p>Nesting tombol grup untuk untuk membuat menu dropdown:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>


Dropdown Tombol Split (Terpisah)

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 Split (Terpisah)</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

</body>
</html>



Sekian Cara Membuat Grup Tombol dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Sabtu, 04 Maret 2017

|

Bootstrap: Alerts (Peringatan)






Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Alerts (Peringatan) dengan Bootstrap.

Bootstrap menyediakan cara mudah untuk membuat pesan peringatan yang telah ditetapkan:
  1. Success! Kotak peringatan ini menunjukkan tindakan berhasil atau positif.
  2. Info! Kotak peringatan ini menunjukkan perubahan informatif netral atau tindakan.
  3. Warning! Kotak peringatan ini menunjukkan peringatan yang mungkin memerlukan perhatian.
  4. Danger! Kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.
Alert (Perhatian) dibuat dengan class .alert, diikiuti salah satu dari empat class class kontekstual: .alert-success, .alert-info, .alert-warning, .alert-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>Alerts (Peringatan)</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> Kotak peringatan ini menunjukkan tindakan berhasil atau positif.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> Kotak peringatan ini menunjukkan perubahan informatif netral atau tindakan.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> Kotak peringatan ini menunjukkan peringatan yang mungkin memerlukan perhatian.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> Danger! Kotak peringatan ini menunjukkan tindakan yang berbahaya atau berpotensi negatif.
  </div>
</div>

</body>
</html>


Link Alert (Peringatan)

Tambahkan class .alert-link untuk link apapun dalam bentuk  dalam kotak peringatan untuk membuat "percocokan link bewarna".

Cobntoh:
<!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>Link Alert (Peringatan)</h2>
  <p>Tambahkan class .alert-link untuk link apapun dalam bentuk  dalam kotak peringatan untuk membuat "percocokan link bewarna".</p>
  <div class="alert alert-success">
    <strong>Berhasil!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> Anda harus <a href="#" class="alert-link">membaca pesan ini</a>.
  </div>
</div>

</body>
</html>

Penutup Alert

Untuk menutup pesan peringatan, tambahkan class .alert-dismissible untuk wadah peringatan. Kemudian tambahkan class='close' dan data-dissmis='alert' untuk link atau elemen tombol (ketika Anda klik ini kotak peringatan akan hilang).

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>Alerts</h2>
  <p>Elemen dengan class='close' dan data-dissmis='alert'</p>
  <p>Class .alert-dissmisible menambahkan beberapa padding extra untuk tombol tutup</p>
  <div class="alert alert-success alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Success!</strong> Kotak peringatan ini bisa menunjukkan tindakan berhasil atau positif.
  </div>
  <div class="alert alert-info alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Info!</strong> Kotak peringatan ini bisa menunjukkan perubahan informatif netral atau tindakan.
  </div>
  <div class="alert alert-warning alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Warning!</strong> Kotak peringatan ini dapat menunjukkan peringatan yang mungkin memerlukan perhatian.
  </div>
  <div class="alert alert-danger alert-dismissable">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <strong>Danger!</strong> Kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
  </div>
</div>

</body>
</html>


Untuk membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar, Anda harus mencakup atribut aria-label = "close", saat membuat tombol tutu. (×) adalah sebuah entitas HTML yang merupakan ikon yang lebih disukai untuk tombol close, bukan huruf "x".

Animasi Alert

Class .fade dan .in menambhakan efek memudar saat menutup pesan peringatan.

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>Animasi Alert</h2>
  <p>Class .fade dan .in menambhakan efek memudar saat menutup pesan peringatan.</p>
  <div class="alert alert-success alert-dismissable fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> Kotak peringatan ini bisa menunjukkan tindakan berhasil atau positif.
  </div>
  <div class="alert alert-info alert-dismissable fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Info!</strong> Kotak peringatan ini bisa menunjukkan perubahan informatif netral atau tindakan.
  </div>
  <div class="alert alert-warning alert-dismissable fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Warning!</strong> Kotak peringatan ini dapat menunjukkan peringatan yang mungkin memerlukan perhatian.
  </div>
  <div class="alert alert-danger alert-dismissable fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Danger!</strong> Kotak peringatan ini dapat menunjukkan tindakan yang berbahaya atau berpotensi negatif.
  </div>
</div>

</body>
</html>

Sekian Cara Membuat Alerts (Peringatan) dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi: www.w3schools.com

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