Membuat Halaman Web Pertama Menggunakan Bootstrap 3

Setelah membaca artikel mengenai Pengenalan Bootstrap 3 Untuk Front-End Web, kita mengetahui kelebihan dan kemudahan dalam mendesain sebuah website menggunakan framework bootstrap. Ada berbagai versi bootstrap dan yang terbaru sekarang adalah bootstrap versi 4. Tapi disini kita membahas menggunakan bootstrap versi 3 dulu.

Untuk membuat sebuah tampilan website kita pasti menggunakan HTML dan CSS. HTML berfungsi untuk membuat bentuknya sedangkan CSS berfungsi untuk mempercantik tampilannya. Dan Bootstrap adalah CSS yang berfungsi untuk mempercanti tampilan website kita.

Padan pembahasan kali ini kita akan membuah halaman website pertama kita menggunakan bootstrap 3. Bagaimana caranya? Simak dibawah ini.

1. Menambahkan doctype HTML5

Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5.

Maka dari itu selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar seperti berikut ini.



<!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 sentuhan zoom, tambahkan <meta> tag berikut di dalam <head> elemen:



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

Bagian ini width=device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Bagian ini initial-scale=1 mengatur tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.

3. Containers(Wadah)

Bootstrap juga membutuhkan elemen yang mengandung untuk membungkus konten situs.

Ada dua kelas wadah untuk dipilih:

.container Class menyediakan responsif wadah lebar tetap
.container-fluid Class menyediakan wadah lebar penuh , mencakup seluruh lebar viewport

Catatan: Containe atau Wadah tidak bisa disarang (kita tidak bisa meletakkan wadah di dalam wadah lain).

Dua Tipe Halaman Bootstrap Dasar

Berikut ini adalah dua contoh halaman dasar Bootstrap berdasarkan class diatas.

Contoh 1



<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 diatas menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar tetap responsif).

Contoh 2



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

Contoh diatas menunjukkan kode untuk halaman Bootstrap dasar (dengan wadah lebar penuh).

Sekian untuk hari ini, simak tutorial berikutnya ya.

Membuat Halaman Web Pertama Menggunakan Bootstrap 3