admin • Feb 29 2024 • 86 Dilihat
Belajar bootstrap untuk pemula sebaiknya tahu pengertian bootstrap sendiri. Yang belom tahu apa itu bootstrap jangan kwatir, mari kita bahas pengertian dan kelebihan dari bootstrap sendiri. Bootstrap adalah front-end framework yang mengedapankan tampilan untuk mobile device seperti smartphone dll. Kelebihan bootstrap adalah mempercepat dan mempermudah pengembangan website versi mobile. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan dengan mudah.
Bootstrap merupakan salah satu framework yang digunakan untuk membangun sebuah web secara responsif di mobile phone. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang digunakan pada smartphone, laptop, tablet, ataupun perangkat keras lainnya yang dapat mengakses halaman web. Selain responsive, bootstrap juga mempunyai fitur yang bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis sesuai kebutuhan perusahaan, profil, informasi, dan lain sebagainya.
Untuk memulai menggunakan Bootstrap, Kita harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan pembuatan web yang baik super cepat. 🙂 . Baiklah langsung saja.
Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
bootstrap:
<!DOCTYPE html>
<html lang=”en”>
<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>Bootstrap 3.3.0 Starter Template – by dul.web.id</title><!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”><!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body>
<!– AWAL CONTENT — hapus dari sini kebawah (sampai AKHIR CONTENT) –>
<div class=”container”>
<h1>Apa Kabar Dunia?</h1>
<!– Small modal –>
<button class=”btn btn-danger” data-toggle=”modal” data-target=”.bs-example-modal-sm”>Klik Aku</button><div class=”modal fade bs-example-modal-sm” tabindex=”-1″ role=”dialog” aria-labelledby=”mySmallModalLabel” aria-hidden=”true”>
<div class=”modal-dialog modal-sm”>
<div class=”modal-content”><div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”><span aria-hidden=”true”>×</span><span class=”sr-only”>Close</span></button>
<h4 class=”modal-title” id=”mySmallModalLabel”>Small modal</h4>
</div>
<div class=”modal-body”>
Hai… salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
</div>
</div>
</div>
</div>
</div><!– AKHIR CONTENT – dari sini kebawah jgn dihapus –>
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”js/jquery-1.11.1.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox, jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:
Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol
tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten
Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.
Cara Merawat Tanaman Hias: Tanaman hias adalah harta berharga yang bisa memberikan keindahan dan keb...
Cara Bon Pulsa Telkomsel: Selamat datang di panduan lengkap tentang cara bon pulsa Telkomsel yang be...
Cara Perpanjang Masa Aktif Simpati: Simpati adalah salah satu provider seluler yang banyak digunakan...
Cara Edit Chat WhatsApp: WhatsApp telah menjadi salah satu aplikasi pesan instan terpopuler di selur...
Cara Beli Tiket Di TIX ID: Pernahkah Anda merasa bingung atau kebingungan saat mencoba memesan tiket...
Cara Cek Jaringan 4G Telkomsel: Telkomsel adalah salah satu penyedia layanan telekomunikasi terbesar...
Merk Kabel Listrik Terbaik di Indonesia: Pada era modern ini, listrik menjadi kebutuhan utama dalam kehidupan sehari-hari. Baik di rumah, kantor...
Cara Merawat Aglonema: Merawat tanaman Aglonema membutuhkan perhatian khusus dan pengetahuan tentang kebutuhan tanaman ini. Aglonema adalah tana...
Cara Upgrade Dana Premium: Jika Anda telah menggunakan aplikasi Dana untuk berbagai keperluan keuangan Anda, Anda mungkin sudah tahu betapa berg...
Merk Mentega di Indonesia: Mentega adalah salah satu bahan makanan yang sering digunakan dalam berbagai hidangan. Kelezatannya dan kemampuannya ...
Cara Cek Saldo di ATM BRI: Dalam dunia perbankan modern, cek saldo rekening adalah hal penting untuk mengawasi keuangan Anda. ATM BRI (Bank Raky...
No comments yet.