Cara Sederhana Menginstal Bootstrap: 10 Langkah (dengan Gambar)

Daftar Isi:

Cara Sederhana Menginstal Bootstrap: 10 Langkah (dengan Gambar)
Cara Sederhana Menginstal Bootstrap: 10 Langkah (dengan Gambar)

Video: Cara Sederhana Menginstal Bootstrap: 10 Langkah (dengan Gambar)

Video: Cara Sederhana Menginstal Bootstrap: 10 Langkah (dengan Gambar)
Video: GAMPANG!!! Cara Menyimpan Video TIK TOK ke Gallery - Tutorial Tik Tok 2024, Mungkin
Anonim

Artikel wikiHow ini akan mengajarkan kepada Anda cara mengunduh berkas Bootstrap ke komputer, dan menautkannya ke teks HTML untuk menggunakan elemen Bootstrap dalam kode Anda. Setelah Anda mengunduh dan menautkan file Bootstrap, Anda dapat mulai menggunakan semua stylesheet dan elemen JavaScript Bootstrap dalam desain web Anda.

Langkah

Instal Bootstrap Langkah 1
Instal Bootstrap Langkah 1

Langkah 1. Buka situs Bootstrap di browser internet Anda

Ketik https://getbootstrap.com di bilah alamat, dan tekan Enter atau Return di keyboard Anda.

Instal Bootstrap Langkah 2
Instal Bootstrap Langkah 2

Langkah 2. Klik tombol Unduh

Ini akan membuka halaman "Unduh".

Instal Bootstrap Langkah 3
Instal Bootstrap Langkah 3

Langkah 3. Klik tombol Unduh di bawah "CSS dan JS Terkompilasi

" Ini akan mengunduh file Bootstrap lengkap ke komputer Anda sebagai arsip ZIP.

Jika Anda diminta, pilih lokasi penyimpanan untuk ZIP Bootstrap

Instal Bootstrap Langkah 4
Instal Bootstrap Langkah 4

Langkah 4. Ekstrak file dari arsip ZIP

Temukan file ZIP yang baru saja Anda unduh, dan klik dua kali untuk mengekstrak semua file di dalamnya ke folder yang sama.

  • Ini akan mengekstrak dua folder bernama " css" dan " js."
  • Jika aplikasi unzipper Anda tidak secara otomatis mengekstrak file, lihat artikel ini untuk melihat semua cara Anda dapat mengekspor arsip ZIP.
Instal Bootstrap Langkah 5
Instal Bootstrap Langkah 5

Langkah 5. Pindahkan folder yang diekstrak ke folder yang sama dengan file HTML situs web Anda

Buka folder yang berisi semua file HTML situs web Anda, dan seret " css" dan " js" folder di sini untuk memindahkannya ke folder yang sama dengan dokumen situs web Anda.

Anda sekarang dapat menautkan file ke file HTML Anda, dan mulai menggunakan Bootstrap dalam kode Anda

Instal Bootstrap Langkah 6
Instal Bootstrap Langkah 6

Langkah 6. Klik kanan file HTML yang ingin Anda gunakan dengan Bootstrap

Anda dapat menggunakan Bootstrap hanya di salah satu file HTML Anda, atau semuanya.

Instal Bootstrap Langkah 7
Instal Bootstrap Langkah 7

Langkah 7. Arahkan kursor ke Buka dengan pada menu klik kanan

Sub-menu akan muncul dengan aplikasi yang kompatibel.

Instal Bootstrap Langkah 8
Instal Bootstrap Langkah 8

Langkah 8. Pilih program editor teks Anda

Ini akan membuka file HTML yang dipilih di editor teks Anda.

Anda dapat menggunakan editor teks sederhana seperti buku catatan atau TeksSunting serta editor kode khusus seperti Atom (https://atom.io) atau Coda (https://panic.com/coda).

Instal Bootstrap Langkah 9
Instal Bootstrap Langkah 9

Langkah 9. Tambahkan link Bootstrap ke header file HTML Anda

Sebelum menggunakan kode Bootstrap di HTML Anda, Anda harus mengetik atau menempelkan baris di bawah ini ke header kode Anda:

Jika Anda ingin menautkan dan menggunakan beberapa file lain dari folder css dan js, cukup tambahkan baris baru ke dalam header, dan ganti bagian css/bootstrap.css dan js/bootstrap.js dengan nama file yang Anda inginkan untuk menghubungkan

Instal Bootstrap Langkah 10
Instal Bootstrap Langkah 10

Langkah 10. Periksa penempatan tautan Bootstrap Anda dalam kode

Di header HTML, kedua baris harus ditempatkan di antara baris dan baris.

  • Setelah Anda menambahkan baris ini ke header, Anda dapat mulai menggunakan elemen Bootstrap dalam file HTML ini.
  • Anda dapat menemukan daftar lengkap semua elemen Bootstrap di https://getbootstrap.com/docs/4.3/getting-started/introduction. Cukup klik kategori apa saja seperti Tata Letak atau Komponen di menu kiri.
  • Setelah Anda menginstal Bootstrap, Anda dapat menyisipkan atau menyalin/menempelkan kode apa pun dari sini ke kode Anda sendiri.

Direkomendasikan: