Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap

Ukuran: px

Mulai penontonan dengan halaman:

Download "Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap"

Farida Hartono
9 tahun lalu
Tontonan:

Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Oleh: Arinadi Nur Rohmad Kenapa beralih dari Input Submit ke Button?

2 Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Oleh: Arinadi Nur Rohmad Kenapa beralih dari Input Submit ke Button? Ya, menurut saya button lebih Power Full dari pada Input Submit walaupun secara fungsi sama saja, tapi yang paling saya suka adalah Button dapat disisipi icon atau gambar yang pastinya akan mempercantik design pada website. Asalamualaukum, Jaman sekarang website itu tidak hanya kaku pada fungsi sebagai sarana informasi, karena seiring mudahnya mendapat akses internet di Indonesia persaiangan menciptakan Website yang Canggih tapi tetap indah adalah hal mutlak.. Kenapa beralih dari Input Submit ke Button? Ya, menurut saya button lebih Power Full dari pada Input Submit walaupun secara fungsi sama saja, tapi yang paling saya suka adalah Button dapat disisipi icon atau gambar yang pastinya akan mempercantik design pada website. Ini contohnya berikut dengan sintax dasarnya.. Dari gambar diatas dapat kita lihat bahwa hasil yang di tampikan Button tidak terpaku pada value yang di bawa tapi menampilkan data yang ada diantara Button buka dan tutup termasuk gambar, yang tentu berbeda dengan Input Submit yang tampilannya ter paku pada value yang dibawanya..

3 Nah, sekarang saya ingin memberikan tutorial Cara Mudah Membuat Button/Tombol Cantik dengan Bootstrap. Kenapa harus dengan Bootstrap? Karena untuk memudahkan mempercantik Button yang nanti akan dibuat.. Sekarang kita mulai tutorialnya.. Siapkan Alat dan Bahanya Laptop atau benda sejenisnya. Browser. Text editor. Jquery. Versi 1.7 keatas, bias di download di situs resminya.. Bootstrap 3. Saya disini menggunakan Bootstrap v.3.. Jika semua sudah terkumpul saatnya saya mulai.. 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 Sekarang kita mulai coding.. Buat dulu code struktur dasar untuk bootstrap.. Patekan Code ini ke text editor kamu..

5 <!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>membuat Button Bootstrap</title>  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">      </head> <body>    <script src="bootstrap/js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> Kita akan coding diantara Content Start dan END..

6 Langkah 6 Sekarang kita buat beberapa button dengan beberapa Class di Bootstrap.. Pastekan code ini di antara Content Start dan END, fungsi dari barisan code sudah ada di Komentar Code.. <h1>berbagai Warna</h1>  <p>  <button type="button" class="btn btn-default">default</button>  <button type="button" class="btn btn-primary">primary</button>  <button type="button" class="btn btn-success">success</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> </p> <h1>berbagai Ukuran</h1>  <p> <button type="button" class="btn btn-default btn-lg">large button</button> <button type="button" class="btn btn-default">default button</button> <button type="button" class="btn btn-default btn-sm">small button</button> <button type="button" class="btn btn-default btn-xs">extra small button</button> </p> <h1>dengan Icon</h1>  <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Ini Button</button> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span> Ini Button</button> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-open"></span> Ini Button</button>

7 Sintax dasar untuk membuat button dengan bootstrap adalah <button class= btn btn-class >Bootstrap</button> Lalu save file ini dengan nama index.html di folder coba.. Langkah 7 Buka index.html tadi.. Open with Browser anda.. Hasilnya.. SELESAI Untuk mendapat update tutorial dari saya silahkan click tombol Follow dibawah Foto saya di atas.. Original Posted By : Arinadi Nur Rohmad

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