loading

Variasi Tags HTML Buttons Bootstrap

HTML Buttons Bootstrap

Belajar Bootstrap mengasyikkan juga. Kali ini mencatat kode buttons Bootstrap yang sangat mudah hanya dengan menambahkan class langsung bisa jadi bagus. Untuk urusan perintah dan jenis type buttonnya bisa disesuaikan kebutuhan pada aplikasi.

Berikut ini adalah daftar tampilan button, dan dibawah ada kode tag HTML penulisannya. karena seringkali lupa kalau tidak dicatat.

Intinya ada 6 jenis warna dan satu model link seperti tag anchor, yaitu Default, Primary, Success, Info, Warning, Danger, Link. Ukurannya ada 4 jenis.

Ada variasi lain yaitu block level buttons. Tampilannya seperti berikut ini:

Nah tag HTML-nya seperti dibawah ini:

<p>
 <button type="button" class="btn btn-lg btn-default">Def</button>
 <button type="button" class="btn btn-lg btn-primary">Pri</button>
 <button type="button" class="btn btn-lg btn-success">Suc</button>
 <button type="button" class="btn btn-lg btn-info">Inf</button>
 <button type="button" class="btn btn-lg btn-warning">War</button>
 <button type="button" class="btn btn-lg btn-danger">Dan</button>
 <button type="button" class="btn btn-lg btn-link">Lin</button>
</p>
<p>
 <button type="button" class="btn btn-default">Def</button>
 <button type="button" class="btn btn-primary">Pri</button>
 <button type="button" class="btn btn-success">Succ</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>
</p>
<p>
 <button type="button" class="btn btn-sm btn-default">Default</button>
 <button type="button" class="btn btn-sm btn-primary">Primary</button>
 <button type="button" class="btn btn-sm btn-success">Success</button>
 <button type="button" class="btn btn-sm btn-info">Info</button>
 <button type="button" class="btn btn-sm btn-warning">Warning</button>
 <button type="button" class="btn btn-sm btn-danger">Danger</button>
 <button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p>
 <button type="button" class="btn btn-xs btn-default">Default</button>
 <button type="button" class="btn btn-xs btn-primary">Primary</button>
 <button type="button" class="btn btn-xs btn-success">Success</button>
 <button type="button" class="btn btn-xs btn-info">Info</button>
 <button type="button" class="btn btn-xs btn-warning">Warning</button>
 <button type="button" class="btn btn-xs btn-danger">Danger</button>
 <button type="button" class="btn btn-xs btn-link">Link</button>
</p>

Berikut tag HTML-nya untuk block level buttons:

<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
 <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>

Sekian dulu, sudah cukup sebagai pengingat.

Komentar 7

  1. Lupa kalau dibuka di mobile jadi turun

    BalasHapus
  2. Cuma mau coba fitur komentarnya:

    {code}<p>
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    </p>{/code}

    BalasHapus
  3. Sekalian saja sekalian dicoba semua fitur komentarnya:
    Ini adalah tag <a> (anchor), coba saja klik
    Ini <b> text tebal
    Ini <i> text miring
    {u}Ini text bergaris{/u}
    {small}Ini text kecil{/small}
    {center}Ini rata tengah{/center}
    {center}{u}Ini rata tengah dan bergaris{/u}{/center}
    {blockquote}Ini adalah text dalam quote, tag blockquote bisa dkombinasi dengan {u}text bergaris{/u} atau text miring, intinya semua tag rekayasa bisa dikombinasi. Dibawah nanti akan dicoba juga memasukkan gambar dan video juga kode HTML
    {small}misal kutipan{/small}{/blockquote}
    Berikut gambar sepatu
    {img}http://3.bp.blogspot.com/-0j7KjN0MSKs/UlQ0Ea89SGI/AAAAAAAAE7k/EKo3XQpJzwI/s300/IMG-20131008-01902.jpg{/img}

    {center}Berikut video lucu youtube{/center}
    {youtube}https://www.youtube.com/watch?v=xagjlkIg2dw{/youtube}
    {u}Berikut kode:{/u}
    {code}<ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3
    <ul>
    <li>List 3.1</li>
    <li>List 3.2</li>
    </ul>
    </li>
    <li>list 4</li>
    </ul>{/code}

    BalasHapus
  4. Khairul Anwar17 September, 2017

    Mantabs bener blognya bos, canggih bener, sukses selalu.

    BalasHapus
    Balasan
    1. Suwun bos, hanya blog biasa yang sepi.

      Hapus
    2. Irfan Kurnia30 Oktober, 2017

      Bheee. mapan onggu mad, mak penter be'en mad?

      Hapus
    3. @Irfan Kurnia: bheee..., jek benni engko' se aghebei fan, gun norok seneng blog deddi beghus. :)

      Hapus