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
 
Jika kesulitan memilih ID, gunakan opsi Name/URL, isikan nama Anda, URL isi dengan URL profil facebook atau kalau lupa biarkan kosong. Link aktif di dalam komentar jika tidak relevan akan masuk kotak spam.
<b>, <i> standar bisa digunakan. Tag lain dibawah ini:
{u} text bergaris {/u}
{small} text kecil {/small}
{center} text rata tengah {/center}
{blockquote} text dalam blockquote {/blockquote}
{img} url-gambar {/img}
{youtube} url-video-youtube {/youtube}
{code} kode yang sudah di encode {/code}
Encode kode disini (tidak perlu menambahkan {code} dan {/code}
   

Popular Posts this Week 

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Perhitungan Hari Selamatan Orang Meninggal dibawah ini sangat berguna untuk orang jawa, karena di keluarga manapun tidak akan terl...

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Orang Menurut Cara Nyontek mungkin tidak menjadi salah satu ukuran dalam hal yang serius, tapi lumayan untuk menambah referensi dan m...

Kalender 2018 dan Hari Besar Libur Nasional

Kalender 2018 dan Hari Besar Libur Nasional

Download Kalender 2018 dan Hari Besar / Libur / Cuti Nasional dalam file PDF, sebenarnya mau membuat untuk versi kalender 2018 excel, tapi ...