Bootstrap Glyphicons


I.Latar Belakang.Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  •   Laptop / PC
  •   W3SCHOOLS
  •   Sublime Text
III.Tujuan.Agar tampilan suatu program itu responsiv.

IV.Penjelasan. 
Bootstrap Glyphicons 
GlyphiconsBootstrap menyediakan 260 mesin terbang dari set Glyphicons Halflings.

Glyphicons dapat digunakan dalam teks, tombol, toolbar, navigasi, form, dll.

Glyphicon Syntax
Sebuah glyphicon disisipkan dengan sintaks berikut:

<span class="glyphicon glyphicon-name"></span>
Bagian nama dalam sintaks di atas harus diganti dengan nama yang tepat dari glyphicon.
Contoh Glyphicon

Contoh berikut menunjukkan cara yang berbeda untuk menggunakan mesin terbang:
Contoh

<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>

Contoh :

Maka outputnya :


V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
VI.Refrensi.
  • https://www.w3schools.com/bootstrap/bootstrap_typography.asp

Komentar

Postingan Populer