Apa itu Bootstrap?

  • Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web
  • Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,  tentu juga JavaScript
  • Bootstrap juga memiliki kemampuan mempermudah membuat design responsive

Apa itu Desain Web Responsif?

Desain web responsif adalah 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 open source pada Agustus 2011 di GitHub. Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Mengapa Menggunakan Bootstrap?

Keuntungan Bootstrap:

  • Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap
  • Fitur responsif: CSS responsif Bootstrap menyesuaikan dengan ponsel, tablet, dan desktop
  • Pendekatan Mobile-first: Dalam Bootstrap 3, gaya seluler pertama adalah bagian dari kerangka 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 petunjuk di sana.

Bootstrap CDN

Jika Anda tidak ingin mengunduh dan menginangi Bootstrap sendiri, Anda dapat menyertakannya dari CDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Membuat Web Page Pertama dengan Bootstrap

1. Tambah HTML5 doctype

Bootstrap menggunakan element HTML dan CSS yang di perlukan HTML5 doctype.

Selalu gunakan HTML5 doctype di atas halaman, bersama dengan atribut lang dan character set yang benar:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap 3 adalah mobile-first

Bootstrap 3 dirancang untuk responsif terhadap perangkat seluler. Gaya pertama seluler adalah bagian dari kerangka inti.

Untuk memastikan rendering yang tepat dan menyentuh zoom, tambahkan yang berikut ini <meta> tag di dalam elemen <head> :

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

width=device-width  bagian set lebar halaman untuk mengikuti lebar layar sebuah perangkat (yang akan bervariasi tergantung pada perangkat).

initial-scale=1 bagian menetapkan tingkat zoom awal ketika halaman pertama kali dimuat oleh browser.

3. Containers

Bootstrap juga membutuhkan elemen yang mengandung untuk membungkus isi situs.

Ada dua class container untuk dipilih:

  1. .container class memberikan responsive fixed width container
  2. .container-fluid class memberikan full width container, mencakup seluruh lebar area pandang
.container
.container-fluid

Halaman Basik Bootstrap

Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar tetap responsif):

Contoh

<!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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>

Contoh berikut menunjukkan kode untuk halaman Bootstrap dasar (dengan penampung lebar penuh):

Contoh

<!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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>

 

Artikel Lainnya:


Di tulis oleh: