Kompi IndyIni deskripsi blog yang hanya tampil di blog saja.

Penulisan Bootstrap Button Di Dalam Postingan

Penulisan Bootstrap Button Di Dalam Postingan

 Adhy Suryadi  8/13/2016

Iklan di sini

Di bawah ini cara penulisan tombol (button) di dalam postingan blog. Tombol-tombol di bawah ini bisa digunakan untuk tombol download, link demo, dan lain-lain.

Ini merupakan tombol dari Bootstrap untuk memudahkan membuat tombol di dalam postingan.

Dan di bawah ini cara membuat tombol di dalam postingan beserta dengan hasil penampakannya:

<a class="btn btn-default" href="#" role="button">Link</a>

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</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>

Hasilnya: 

Link Link Link Link Link Link       
 
 
 

Iklan di sini