-->
Home
bootstrap
code

Tutorial Bootstrap #2



Jika kalian ingin mengikuti tutorial ini, untuk lebih mudah memahaminya kalian bisa melihat tutorial bootstrap sebelumnya.

- Tutorial Bootstrap #1

Pada tutorial sebelumnya kita telah menyiapkan folder bootsrap, setelah folder bootstrap telah disiapkan sekarang kita sudah bisa mulai menggunakannya.
Pada tutorial ini yang berlatar belakang kan penerapan(starter template), kita mencoba untuk menerapkan tampilan bootstrap ke dalam web browser.

langkah pertama, buka code editor kalian (saya menggunakan visual studio code) dan buat file html baru (terserah kalian, saya membuat dengan file name 'coba.html') .
Didalam file coba.html, ketik code html default. Pada tampilan code html default akan seperti code di bawah 

Jika kalaian menggunakan visual studio code kalian tinggal ketik '!' Lalu enter, maka secara otomatis akan muncul code default html.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Sekarang kita panggil css dan js bootstrapnya
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <h1>coba bootstrap</h1>
    
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Note:
bootstrap/css/, bootstrap/js/, dimana itu adalah folder yang awal dibuat, didalam masing-masing folder tersebut terdapat file css dan js bootstrap yang akan dipanggil dan kita gunakan untuk membantu pembuatan project yang akan dibuat.
Dan tampilan default pada web browser akan seperti gambar di bawah. Belum terjadi apa-apa karena kita belum menggunakan fitur-fitur atau komponen yang terdapat pada bootstrap.


Post a Comment