BOOTSRAP 5 | PART 1- Memasang Template Bootsrap

Baringin
By -
0

 


Pendahuluan

    Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk mempercepat proses pengembangan web secara responsive dan mobile-first ketika halaman web dijalankan di perangkat mobile.

    Bootstrap sudah banyak digunakan oleh para pengembah website karena banyak memiliki kelebihan. Seperti Navigasion Bar, System Grid, Gambar, Tombol Dropdown Menu dan lain sebagainya. Bootsrap juga merupakan frameword yang bersifat open source. Aplikasi bootstrap bisa di download di situs resminya: https://getbootstrap.com/

 

Memasang Bootsrap 

    Ada 2 jenis teknik pemasangan template bootsrap, yaiut secara ofline dan secara online. Berikut langkah-langkah memasang bootstrap.


Memasang Tempat secara Ofline

    Berikut langkah-langkah memasang bootsrap secara ofline.

1. Buka situs bootsrap https://getbootstrap.com/.  Klik menu Docs pada navbar dan pilih download di sidebarnya. Kemudian pada halaman conten pilih tombol Download. Lihat garmbar dibawah




2.  Extrak file yang telah di download tadi. Terdapat 2 buah folder di dalam file yang diektrak yaitu file css dan file js. Beri nama folder tersebut dengan nama template

3. Buka Text editor kesayangan anda semisal VS Code. Buat file baru dan beri nama file tersebut dengan nama index.html. Simpan file tersebut didalam satu folder dengan.

📁Template

    📁CSS

    📁JS

    📄 index.html

4. Ketikkan code berikut di dalam file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Latihan Bootstrap</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
  </body>
</html>

5. Nah didalam folde css dan js terdapat file css dan file js. Kita akan memanggil file css tersebut, namun tidak semuanya, kita hanya membutuhkan bootsrap.min.js dan bootstrap.min.js. Lengkapi file diatas seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Latihan Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <h1>Selamat Datang</h1>
  </body>
</html>

    Perintah <link rel="stylesheet" href="css/bootstrap.min.css" /> merupakan perintah untuk mengakses file css yang ada didalam folerder css. File yang akan diakses adalah file bootsrap.min.css. Nah sekarang, coba buka file index.html dan coba anda perhatikan perubahan pada text yang tampil di body browser anda. Jika terjadi perubahan menandakan boostrap sukses di install.


2. Memasang Boostrap secara Online.

Nah selain cara diatas ada satu cara lagi untuk memasang bootstrap. Yaitunya dengan mengakses CDN bootsrap. Berikut langkahnya:

1. Buatlah file index.html dan simpan di dalam folder anda.

2. Buka kembali situs resmi bootstrap https://getbootstrap.com/

3. Klik menu Instruction pada bagian kiri halaman  kemudian pilih Include Bootstrap's CsS and JS dan klik tanda file yang ada di sebelah kanan. Perhatikan gambar dibawah berikut:



    Nah sedemikianlah cara memasang bootsrap secara online. Namun, disini anda harus selalu terkoneksi ke internet setiap kali membuka halaman web anda.


Penutup

    Sekian tutorial kita tantang cara instalasi boostap baik secara online ataupun secara ofline. Sekarang tinggal anda untuk mengembangkannya.


Tags:

Post a Comment

0Comments

Post a Comment (0)