Assalamu'alaikum Warohmatullohi Wabarokatuh.
Selamat membaca dan mengikuti,
Dan semoga kita semua mendapatkan Rahmat dan Hidayahnya.
Amin Ya Robbal Alamin.
Yuk, mari kita bahas ke judul langsung.
Pertama kita siapkan beberapa filenya (Download filenya).
Beberapa folder tidak diperlukan untuk tutorial ini namun saya tetap memasangnya dikarenakan pada tutorial selanjutnya akan ada pembahasan-pembahasan mengenai bootstrap yang lainnya dimana folder tersebut akan terpak. So, ikutin terus ya tutorialnya!
Karena tak lengkap rasanya bila belajar itu hanya sedikit-sedikit tanpa dilanjutkan.
Dan di bawah ini saya sertakan script juga tampilan ketika kita load di browser.
Tombol yang telah dibuat adalah tombol yang biasa sangat sering dijumpai dan dipakai pada blogger dan media website lain.
Tanpa menambah basa-basi mari Kita lanjutkan pada langkah-langkahnya.
Buat sebuah file dengan nama button.html dan sertakan script berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="bootstrap tutorial">
<meta name="author" content="Fittra Ferdiansyah">
<title>Membuat Tombol Share Dengan Bootstrap</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-social/bootstrap-social.css">
</head>
<body>
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</button>
<button type="button" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Twitter
</button>
<button type="button" class="btn btn-block btn-social btn-google-plus">
<i class="fa fa-google-plus"></i> Google <i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-block btn-social btn-github">
<i class="fa fa-github"></i> Github
</button>
<button type="button" class="btn btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin"></i> Linkedin
</button>
<button type="button" class="btn btn-block btn-social btn-tumblr">
<i class="fa fa-tumblr"></i> Tumblr
</button>
<button type="button" class="btn btn-block btn-social btn-dropbox">
<i class="fa fa-dropbox"></i> Dropbox
</button>
<button type="button" class="btn btn-block btn-social btn-vk">
<i class="fa fa-vk"></i> VK
</button><button type="button" class="btn btn-block btn-social btn-pinterest">
<i class="fa fa-pinterest"></i> Pinterest
</button>
<button type="button" class="btn btn-block btn-social btn-instagram">
<i class="fa fa-instagram"></i> Instagram
</button>
</body>
</html>
Nah, keterangan dari script diatas kita perjelas disini.
#warna hijau adalah file yang kita gunakan untuk memanggil fungsi-fungsi pada bootstrap.
#warna biru adalah button biasa menggunakan bootstrap.
#warna ungu adalah beberapa tombol share yang kita buat.
Perbedaan untuk membuat tombol biasa dengan tombol share berada pada class-class yang kita gunakan.
Oke, sekian dahulu berhubung waktu sudah larut malam Saya akhiri terlebih dahulu sampai disini.
Danbagi Anda yang ingin melihat DEMO nya ada disini.
See you!
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Komentar Anda Saya tunggu untuk memperbaiki kesalahan-kesalahan yang ada.
Terima Kasih.
Selamat membaca dan mengikuti,
Dan semoga kita semua mendapatkan Rahmat dan Hidayahnya.
Amin Ya Robbal Alamin.
Yuk, mari kita bahas ke judul langsung.
Pertama kita siapkan beberapa filenya (Download filenya).
Beberapa folder tidak diperlukan untuk tutorial ini namun saya tetap memasangnya dikarenakan pada tutorial selanjutnya akan ada pembahasan-pembahasan mengenai bootstrap yang lainnya dimana folder tersebut akan terpak. So, ikutin terus ya tutorialnya!Karena tak lengkap rasanya bila belajar itu hanya sedikit-sedikit tanpa dilanjutkan.
Dan di bawah ini saya sertakan script juga tampilan ketika kita load di browser.
Tanpa menambah basa-basi mari Kita lanjutkan pada langkah-langkahnya.
Buat sebuah file dengan nama button.html dan sertakan script berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="bootstrap tutorial">
<meta name="author" content="Fittra Ferdiansyah">
<title>Membuat Tombol Share Dengan Bootstrap</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-social/bootstrap-social.css">
</head>
<body>
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</button>
<button type="button" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Twitter
</button>
<button type="button" class="btn btn-block btn-social btn-google-plus">
<i class="fa fa-google-plus"></i> Google <i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-block btn-social btn-github">
<i class="fa fa-github"></i> Github
</button>
<button type="button" class="btn btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin"></i> Linkedin
</button>
<button type="button" class="btn btn-block btn-social btn-tumblr">
<i class="fa fa-tumblr"></i> Tumblr
</button>
<button type="button" class="btn btn-block btn-social btn-dropbox">
<i class="fa fa-dropbox"></i> Dropbox
</button>
<button type="button" class="btn btn-block btn-social btn-vk">
<i class="fa fa-vk"></i> VK
</button><button type="button" class="btn btn-block btn-social btn-pinterest">
<i class="fa fa-pinterest"></i> Pinterest
</button>
<button type="button" class="btn btn-block btn-social btn-instagram">
<i class="fa fa-instagram"></i> Instagram
</button>
</body>
</html>
Nah, keterangan dari script diatas kita perjelas disini.
#warna hijau adalah file yang kita gunakan untuk memanggil fungsi-fungsi pada bootstrap.
#warna biru adalah button biasa menggunakan bootstrap.
#warna ungu adalah beberapa tombol share yang kita buat.
Perbedaan untuk membuat tombol biasa dengan tombol share berada pada class-class yang kita gunakan.
Oke, sekian dahulu berhubung waktu sudah larut malam Saya akhiri terlebih dahulu sampai disini.
Danbagi Anda yang ingin melihat DEMO nya ada disini.
See you!
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Komentar Anda Saya tunggu untuk memperbaiki kesalahan-kesalahan yang ada.
Terima Kasih.
No comments:
Post a Comment