Tutorial Bootstrap Part 2: Hello Bootstrap

Posted in Bootstrap, Tuesday, June 24th, 2014, by Muhammad Fahmi Al Azhar

Oke, di tutorial part 2 ini kita akan mencoba membuat Hello World nya Bootstrap. Di tutorial part 1 pastinya semua tool sudah tersedia kan ya? Kalau belum pastikan Anda memiliki semua requirementnya cek di sini aja.

Nah kalau sudah, sekarang kita buat folder di suatu tempat terserah Anda, misalnya beri nama folder tersebut dengan nama bootstrap.

Tutorial Bootstrap Part 2: Hello Bootstrap

Nah masukkan file bootstrap-3.1.1-dist.zip ke dalam folder tersebut.dan extract ya, nanti pasti keluar folder dengan nama bootstrap-3.1.1-dist. Rename aja folder tersebut dengan nama style.

Jadi di dalam folder bootstrap yang baru kita buat, terdapat folder style di dalamnya, di dalam folder style tersebut ada folder dengan nama css, font, dan js.

Bingung kan? ehehe, gini nih strukturnya:

bootstrap -> style -> css/

        -> font/

        -> js/

Nah, sekarang kita buat file baru di dalam folder bootstrap dengan nama index.html, lalu ketikkan kode seperti ini:

<!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>Hello Bootstrap</title>
    <link href="style/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Nah, sekarang hello Bootstrap sudah selesai. Karena masih berupa hello world saja, maka belum ada tampilannya nih, cuma baru tulisan Hello Bootstrap aja.

tutorial bootstrap part 2: hello bootstrap

Hello Bootstrap

Selanjutnya kita coba belajar tampilan-tampilan sederhana Bootstrap yak!

Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *