Membuat Halaman Web Pertama Dengan Bootstrap

Publish Date : 10-04-2016 , dibaca 9701 kali, Hari ini dibaca : 1 kali ,0 comments

Setelah sebelumnya admin share artikel Dasar Memulai untuk Belajar Bootstrap , next admin akan share Membuat Halaman Web Pertama dengan Bootstrap , Ok mari kita mulai tutorialnya,

Membuat Halaman Web Pertama Dengan Bootstrap

Untuk memulai membuat halaman web dengan bootstrap , yuk lakukan langkah-langkah dibawah ini :

1. Menyisipkan / menambahkan HTML5 doctype

Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5.
Selalu menyertakan DOCTYPE HTML5 pada awal halaman, bersama dengan atribut lang dan set karakter yang benar:

Contoh penjelasan diatas :

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

2. Bootstrap 3 mengutaman perangkat mobile

Bootstrap 3 ini dirancang untuk menjadi responsif terhadap perangkat mobile. gaya Mobile-pertama adalah bagian dari kerangka inti.
Untuk memastikan render yang tepat , tambahkan tag berikut <meta> di dalam <head> elemen:

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

width=device-width merupakan set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada setiap jenis perangkat).
initial-scale=1 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.

3. Containers

Bootstrap juga membutuhkan elemen yang digunakan untuk membungkus isi situs :
Ada 2 class container yang dapat kita gunakan yaitu :

Class .container -- merupakan class yang digunakan untuk responsive fixed width container
Class .container-fluid --merupakan class yang digunakan untuk full width container, yang mencakup seluruh lebar viewport

Note: Anda tidak bisa menempatkan container di dalam container lain

OK.. untuk Lebih Jelasnya mari langsung kita prakter saja, agar lebih mengerti apa itu class .container dan .container-fluid

Contoh Dasar Halaman Dengan Bootstrap

Contoh berikut ini menjelaskan bagaimana kita menggunakan class .container

 <!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>Halaman Pertama Saya dengan Bootstrap</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Dan Code dibawah ini menjelaskan bagaimana penggunaan .container-fluid

 <!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>Halaman Pertama Saya Dengan Bootstrap dengan Class "container-fluid"</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

OK.. Silahkan dicoba dan bandingkan sendiri , agar bisa mengetahui perbedaan class="container-fluid" dan class="container" , So.. sampai disini Tutorial yang kedua dalam Tutorial Bootstrap Bahasa Indonesia dalam judul Membuat Halaman dasar dengan Bootstrap dan perbedaan antara perbedaan class="container-fluid" dan class="container"

Dasar Memulai untuk Belajar Bootstrap
Previous Post

Membuat Autocomplate dengan Bootstrap
Next Post