Belajar Membuat Website dengan Bootstrap 4 #1 | Starter Template


Hello Guys....^_^

Kali ini UnixHows akan berbagi pengetahuan tentang bootstrap 4.

Pada sesi ini kita akan membuat website yang responsiv dengan menggunakan bootstrap dan sedikit CSS.

Bahan - bahan
1. PC atau komputer
2. Koneksi Internet
3. Kode Editor ( Disini UnixHows menggunakan Visual Studio Code )

Langkah langkah
1. Buka kode editor kalian

2. Buat file dengan nama index.html

3. Buka Browser kalian

4. Buka website dari bootstrap

5. Pilih Get started

6. Copy script Starter Template dari bootstrap dan paste di file index.html kita



<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

7. Save kembali index.html nya

8. Kita coba buka di browser, bagaimana hasilnya

9. Selamat, Kita telah selesai membuat layout standart dari bootstrap 4, pada pertemuan selanjutnya kita akan membuat navigation bar dan dropdown dengan bootstrap 4

Okey guys,
Itulah tadi tutorial bagaimana cara membuat website dengan bootstrap 4 bagian 1

Jangan lupa ikuti terus tutorial tutorial lainnya hanya di unixhows.blogspot.com

Terima Kasih telah berkunjung,
Bye Bye ^_^

0 Response to "Belajar Membuat Website dengan Bootstrap 4 #1 | Starter Template"

Posting Komentar