Tutorial Bootstrap Part 2: Hello Bootstrap

Posted in Bootstrap 11 years ago 2 min read

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. [caption id="attachment_5585" align="aligncenter" width="308"]