Jenis jenis Buttons di Bootstrap 4

Halo teman teman … sebelum nya kita pernah belajar membangun Card dengan Bootstrap 4, kali ini kita akan mengenal Jenis jenis Button di Bootstrap 4.





Ada 8 warna di pada kelas Bootstrap 4, dapat di lihat di gambar di bawah.





ini kode kelas nya teman teman



<button type=button class=btn btn-primary>Primary</button>
<button type=button class=btn btn-secondary>Secondary</button>
<button type=button class=btn btn-success>Success</button>
<button type=button class=btn btn-danger>Danger</button>
<button type=button class=btn btn-warning>Warning</button>
<button type=button class=btn btn-info>Informasi</button>
<button type=button class=btn btn-light>Light</button>
<button type=button class=btn btn-dark>Dark</button>


tapi sebelumnya kalian mesti ketikan link penghubungnya yah, etikan kode nya di bawah ini.



<!doctype html>
<html lang=en>
  <head>
    <!-- Required meta tags -->
    <meta charset=utf-8>
    <meta name=viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>

    <!-- Bootstrap CSS -->
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css integrity=sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy crossorigin=anonymous>

    <title>Jenis jenis Button Bootstrap 4</title>
  </head>
  <body>
    <!-- ketikan kode di atas di sini -->
    
  </body>
</html>


sebelum tag penutup body, masukan kode javascript di bawah ini.



<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>


<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>


<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js” integrity=”sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4″ crossorigin=”anonymous”></script>



kode di atas kode penghubung html kita ke Bootstrap 4,



Outline Button



<button type=button class=btn btn-outline-primary>Primary</button>
<button type=button class=btn btn-outline-secondary>Secondary</button>
<button type=button class=btn btn-outline-success>Success</button>
<button type=button class=btn btn-outline-danger>Danger</button>
<button type=button class=btn btn-outline-warning>Warning</button>
<button type=button class=btn btn-outline-info>Informasi</button>
<button type=button class=btn btn-outline-light>Light</button>
<button type=button class=btn btn-outline-dark>Dark</button>


hasilnya seperti di bawah ini





Bagi ukuran kalian dapat tambah kelas setelah kelas btn btn-primary/ yang lain, kelas btn-lg bagi ukuran Large, bagi btn-sm bagi ukuran small.



Ukuran Large



<button type=button class=btn btn-primary btn-lg>Large button</button>
<button type=button class=btn btn-secondary btn-lg>Large button</button>


hasilnya seperti di bawah





ukuran small



<button type=button class=btn btn-primary btn-sm>Small button</button>
<button type=button class=btn btn-secondary btn-sm>Small button</button>


hasilnya seperti di bawah ini.





ukuran button block



<button type=button class=btn btn-primary btn-lg btn-block>Block level button</button>
<button type=button class=btn btn-secondary btn-lg btn-block>Block level button</button>




Disable Button



<button type=button class=btn btn-lg btn-primary disabled>Primary button</button>
<button type=button class=btn btn-secondary btn-lg disabled>Button</button>


hasilnya seperti di bawah





Checkbox dan Radio Button



<div class=btn-group btn-group-toggle data-toggle=buttons>
  <label class=btn btn-secondary active>
    <input type=checkbox checked autocomplete=off> Active
  </label>
  <label class=btn btn-secondary>
    <input type=checkbox autocomplete=off> Check
  </label>
  <label class=btn btn-secondary>
    <input type=checkbox autocomplete=off> Check
  </label>
</div>




Radio



<div class=btn-group btn-group-toggle data-toggle=buttons>
  <label class=btn btn-secondary active>
    <input type=radio name=options id=option1 autocomplete=off checked> Active
  </label>
  <label class=btn btn-secondary>
    <input type=radio name=options id=option2 autocomplete=off> Radio
  </label>
  <label class=btn btn-secondary>
    <input type=radio name=options id=option3 autocomplete=off> Radio
  </label>
</div>




demikianlah panduan Jenis jenis Buttons di Bootstrap 4, semoga bermanffat.. 😀



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more