Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Ukuran: px

Mulai penontonan dengan halaman:

Download "Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya"

Bambang Atmadjaja
7 tahun lalu
Tontonan:

2 Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari icon bawaan Bootsrap 2 yang masih menggunakan ikon dengan basis image(png). Baiklah, Kita mulai Tutorial Cara Simple dan Mudah Menggunakan Glyphicon, Icon Ringan dari Bootstrap 3.. Asalamualaikum.. Sekarang jamanya ikon itu ringan, mudah di ganta ganti warna dan ukuran.. Bersyukurlah, Sekarang kulit mangis udah ada extraknya eh bukan yang ini.. :) Beryukurlah, Sekarang Bootstrap versi terbaru (Bootstrap 3) dengan segala kemudahanya memberikan fasilitas icon bawaan yang di sebut Glyphicon. Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari icon bawaan Bootsrap 2 yang masih menggunakan ikon dengan basis image(png). Baiklah, Kita mulai Tutorial Cara Simple dan Mudah Menggunakan Glyphicon, Icon Ringan

3 dari Bootstrap 3.. Sekarang kita siapkan Alat dan Bahannya Laptop atau benda sejenisnya. :) Text Editor Tercinta. Browser. Jquery. Versi 1.7 keatas, bias di download di situs resminya Bootstrap 3. Kalo baru belajar jangan nanggung di v.2 langsung aja ke v.3 karena lebih mudah dan lengkap tentunya.. Langkah 1 Niat.. *Ini Penting.. Langkah 2 Nyalakan Laptop atau benda sejenisnya.. Buka Text editor.. Langkah 3 Buat folder, terserah dimana saja. Misal D: coba.. Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap. Sekarang kita extrak bootstrap 3 yang sudah ada.. Seperti ini..

4 Hasil struktur Foldernya jadi seperti ini.. coba >bootstrap >>css >>fonts >>js Langkah 4 Sekarang kita letakan jquery.min.js di coba>bootstrap>js. Seperti ini.. Langkah 5 Saya akan memberikan contoh ikon yang akan di tampilkan..

5 Anda dapat lebih banyak melihat ikon dan kode namanya di situs Bootstrap ( Sekarang misalnya kita ingin menampilkan Ikon Home seperti di gambar.. Pastekan kode ini di dalamnya sudah ada penjelasan kodenya..

6 <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>menampilkan Ikon Bootstrap 3</title>  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">      </head> <body>  <br> <p> <span class="glyphicon glyphicon-home" style="font-size:18px; color:green"></span> Ini Ikon Dari Bootstrap 3. </p> <br>  <script src="bootstrap/js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> kita melakukan codeing diantara Content Start dan END. Sintax dasar untuk memanggil Glyphicon adalah <span class="glyphicon glyphicon-code">

7 Lalu Simpan di folder coba, dengan extensi.html dan nama terserah.. Seperti ini.. Langkah 6 Sekarang kita jalankan file html tadi. Open With browser anda.. Hasilnya seperti ini.. Selesai Sekian Tutorial Bootstrap 3 dari saya..

8 Follow Saya untuk mendapat tutorial menarik lainnya.. :) Original Posted By : Arinadi Nur Rohmad Tentang Penulis Arinadi Nur Rohmad Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..

dokumen-dokumen yang mirip

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..