Cara instal Bootsrap

-

 bloghewanteknologi

Cara Instal Bootstrap 4

Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
  1. Offline : kamu tidak membutuhkan internet untuk meload website tersebut, karena source code-Nya sudah kamu install semua di komputer kamu
  2. Online : Kamu perlu internet jika kamu ingin meload website kamu, karena kita hanya perlu memanggil link tersebut, tidak perlu download source code bootstrap 4 tersebut.
Oke sekarang kita yang pertama dulu ya, yaitu Offline

  1. Buat folder terlebih dahulu bernama latihan bootstrap lalu didalamnya buat folder lagi latihan1, jadi setiap pertemuan folder-Nya berbeda - beda ya. ada latihan1, latihan2, latihan3 sampai seterusnya.
  2. Selanjutnya didalam folder latihan1, buat folder css dan js. 
3.Isi folder css adalah file yang bernama bootstrap.min.css yang terdapat di folder bootstrap yang kita extract tadi. Kamu masuk ke folder boostrap yang kita extract tadi lalu masuk ke folder dist dan selanjutnya kamu klik folder css. kamu copy kan file yang bernama bootstrap.min.css, kamu paste kan ke Folder css yang berada di folder latihan1

4.Isi folder js mirip cara nya dengan css. kamu bisa mengambil file tersebut di folder boostrap yang kita extract tadi, lalu piliha dist masuk ke Folder js, kamu copy kan file yang bernama boostrap.min.js dan kamu paste kan ke folder js yang mana folder tersebut ada di folder latihan1 

5.Jangan lupa untuk membuat file latihan1.html 


6.kamu buka text editor kesayangan kamu, kalau om bewok menggunakan visual code. 
7.latihan1.html nya jangan di biarkan kosong, kamu beri sedikit codingan html seperti dibawah ini. 
8.code
  1. <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Latihan Pertama Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="jumbotron">
        <div class="container">
            <h1 class="display-3">Latihan Pertama Bootstrap</h1>
            <p>Belajar Boostrap version 4 bersama om bewok di website bewoksatukosong.com</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Belajar Yuk &raquo;</a></p>
        </div>
    </div>
  </body>
</html>

10.



11.Maka hasilnya akan seperti dibawah ini.








Komentar

Posting Komentar

Postingan populer dari blog ini

CARA MENGGUNAKAN ZETERO

-
Gambar
     bloghewanteknologi CARA MENGGUNAKAN ZETERO UNTUK PERPUSTAKAAN Daftar Pustaka Zotero  – Menyusun sebuah karya ilmiah seringkali terasa sangat memberatkan. Terlebih ketika kita harus memasukkan referensi dari berbagai sumber yang berbeda. Biasanya kita menggunakan cara manual untuk membuat referensi maupun daftar pustaka. Akan tetapi saat ini ada cara yang lebih mudah, yakni dengan memanfaatkan bantuan aplikasi yang dapat memasukkan referensi ataupun daftar pustaka secara otomatis. Salah satu yang bisa Anda coba adalah  Zotero . Untuk diketahui, Zotero adalah salah satu software reference manager yang bisa kita pakai secara gratis. Aplikasi ini berfungsi menyimpan banyak data yang dapat digunakan sebagai perpustakaan digital pribadi bagi penggunanya. Sehingga bisa dikatakan bahwa Zotero merupakan media penyimpanan data yang dikemas dengan tampilan yang mudah untuk dipahami oleh semua pengguna. Tidak hanya itu saja, Zotero juga tersedia untuk berbagai sistem o...
Baca selengkapnya

CARA PASANG MODEM DI LAPTOP ATAU PC

-
Gambar
   bloghewanteknologi Cara Memasang Modem Di Laptop   atau   Cara Memasang Modem Di Komputer     metodenya sama saja. Apalagi jika   modem nya jenis   modem USB   malah lebih gampang lagi. Ada beberapa   tipe modem   seperti   modem USB , modem ISA , modem PCI  ataupun   modem Com/DB9 . Dan   Cara Memasang Modem   tersebut beda beda harus menurut tipe masing masing. Namun untuk   Cara Memasang Modem   yang paling mudah untuk sekarang adalah   memasang modem tipe USB Untuk Memasang Modem tipe USB  yang harus tersedia hanya  colokan USB  di  komputer  maupun di  laptop  dan untuk  komputer  sekarang maupun  laptop  kebanyakan dan mungkin sudah jadi hal yang umum dan tersedia. Yang harus ada selain  port USB  adalah  driver modem  tersebut. Kadang untuk  modem  yang bagus  driver modem  sudah ...
Baca selengkapnya

REVIEW TELEVISI SAMSUNG 55-CLASS Q70A QLED TV (QN55Q70AAFXA)

-
  bloghewanteknologi                Dalam blog kali ini saya akan menjelaskan tentang review televisi canggiih di 2021,pada tahun ini pertelevisian berubah dari era analog menjadi era digital.Televisi telah memberikan banayak manfaat bagi manusia baik dalam pendidikan,bisnis,informasi,hiburan dan masih banyak lagi,karna sekarang masuk era digital televisi pun harus yang mampu memadai agar dapat menikmati acara ditelevisi.Berikut review televisi SAMSUNG 55-CLASS Q70A QLED ; TELEVISI SAMSUNG 55 CLASS PRO - Keterlambatan input yang sangat rendah - Fitur permainan yang berguna - Warna seimbang - Dukungan Amazon Alexa dan Asisten Google   KONTRA - Panel tidak terlalu terang - Kontras sederhana - Antarmuka TV pintar yang sombong - Tidak Ada Penglihatan Dolby                Sampai saat ini, TV QLED Samsung telah menonjol sebagai penawaran kelas atas perusahaan. Sejak memperkenalkan Neo QLED awal...
Baca selengkapnya