Apa itu Bootstrap?
Bootstrap merupakan front-end framework gratis untuk pengembangan web yang lebih cepat dan mudah
Bootstrap termasuk design template berbasis HTML dan CSS untuk tipografi, formulir, tombol, tabel, navigasi, gambar dan banyak lainnya, serta plugin JavaScript opsional
Bootstrap juga memberi Anda kemampuan untuk dengan mudah membuat desain responsif
Apa itu Desain Web Responsif?
Desain web responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.
Riwayat Bootstrap
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk sumber terbuka pada Agustus 2011 di GitHub.
Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!
Mengapa Menggunakan Bootstrap?
Keuntungan dari Bootstrap:
Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap
Fitur responsif: CSS responsif Bootstrap menyesuaikan ke ponsel, tablet, dan desktop
Pendekatan mobile-first: Dalam Bootstrap 3, gaya mobile-first adalah bagian dari kerangka kerja inti
Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera)
Di mana Mendapatkan Bootstrap?
Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.
Kamu bisa:
- Unduh Bootstrap dari getbootstrap.com
- Sertakan Bootstrap dari CDN
Mengunduh Bootstrap
Jika Anda ingin mengunduh dan menginangi Bootstrap sendiri, buka getbootstrap.com, dan ikuti instruksi di sana.
Bootstrap CDN
Jika Anda tidak ingin mengunduh dan menginangi Bootstrap sendiri, Anda dapat memasukkannya dari CDN (Jaringan Pengiriman Konten).
MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Anda juga harus memasukkan jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Satu keuntungan menggunakan Bootstrap CDN:
Banyak pengguna telah mengunduh Bootstrap dari MaxCDN ketika mengunjungi situs lain. Akibatnya, itu akan diambil dari cache ketika mereka mengunjungi situs Anda, yang mengarah ke waktu pemuatan yang lebih cepat. Juga, sebagian besar CDN akan memastikan bahwa setelah pengguna meminta file dari itu, itu akan dilayani dari server terdekat dengan mereka, yang juga mengarah pada waktu pemuatan yang lebih cepat.
jQuery
Bootstrap menggunakan plugin jQuery untuk JavaScript (seperti modals, tooltips, dll). Namun, jika Anda hanya menggunakan bagian CSS dari Bootstrap, Anda tidak perlu jQuery.
Buat Halaman Web Pertama Dengan Bootstrap
1. Tambahkan doctype HTML5
Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5.
Selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 bersifat mobile-first
Bootstrap 3 dirancang agar responsif terhadap perangkat seluler. Gaya mobile-first adalah bagian dari kerangka inti.
Untuk memastikan rendering yang tepat dan sentuh zoom, tambahkan tag <meta> berikut di dalam elemen <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Lebar = bagian lebar perangkat mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Skala awal = 1 bagian menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.
3. Containers
Bootstrap juga membutuhkan elemen yang mengandung untuk membungkus konten situs.
Ada dua kelas wadah untuk dipilih:
- Kelas .container menyediakan wadah dengan lebar tetap yang responsif
- Kelas .container-fluid menyediakan wadah lebar penuh, yang menjangkau seluruh lebar viewport
Ada 2 jenis Pages di Bootstrap
dibawah ini akan di tampilkan contoh Bootstrap page dasar :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
dibawah ini contoh script untuk bootstrap dengan full widht
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Selamat mencoba...
