Cara Mudah Memasang Bootstrap: 10 Langkah (dengan Gambar)

Isi kandungan:

Cara Mudah Memasang Bootstrap: 10 Langkah (dengan Gambar)
Cara Mudah Memasang Bootstrap: 10 Langkah (dengan Gambar)

Video: Cara Mudah Memasang Bootstrap: 10 Langkah (dengan Gambar)

Video: Cara Mudah Memasang Bootstrap: 10 Langkah (dengan Gambar)
Video: Cara Simpan Video Tik Tok ke Galeri 2024, Mungkin
Anonim

WikiHow ini mengajar anda cara memuat turun fail Bootstrap ke komputer anda, dan menghubungkannya ke teks HTML anda untuk menggunakan elemen Bootstrap dalam kod anda. Sebaik sahaja anda memuat turun dan memautkan fail Bootstrap, anda boleh mula menggunakan semua helaian gaya dan elemen JavaScript Bootstrap dalam reka bentuk web anda.

Langkah-langkah

Pasang Bootstrap Langkah 1
Pasang Bootstrap Langkah 1

Langkah 1. Buka laman web Bootstrap di penyemak imbas internet anda

Ketik https://getbootstrap.com ke bar alamat, dan tekan ↵ Enter atau ⏎ Kembali pada papan kekunci anda.

Pasang Bootstrap Langkah 2
Pasang Bootstrap Langkah 2

Langkah 2. Klik butang Muat turun

Ini akan membuka halaman "Muat turun".

Pasang Bootstrap Langkah 3
Pasang Bootstrap Langkah 3

Langkah 3. Klik butang Muat turun di bawah "Kompilasi CSS dan JS

" Ini akan memuat turun fail Bootstrap yang lengkap ke komputer anda sebagai arkib ZIP.

Sekiranya anda diminta, pilih lokasi simpanan untuk Bootstrap ZIP

Pasang Bootstrap Langkah 4
Pasang Bootstrap Langkah 4

Langkah 4. Ekstrak fail dari arkib ZIP

Cari fail ZIP yang baru anda muat turun, dan klik dua kali padanya untuk mengekstrak semua fail di dalamnya ke folder yang sama.

  • Ini akan mengeluarkan dua folder bernama " css"dan" js."
  • Sekiranya aplikasi unzip anda tidak mengekstrak fail secara automatik, lihat artikel ini untuk melihat semua cara anda boleh mengeksport arkib ZIP.
Pasang Bootstrap Langkah 5
Pasang Bootstrap Langkah 5

Langkah 5. Pindahkan folder yang diekstrak ke folder yang sama dengan fail HTML laman web anda

Buka folder yang mengandungi semua fail HTML laman web anda, dan seret " css"dan" jsfolder di sini untuk memindahkannya ke folder yang sama dengan dokumen laman web anda.

Anda kini boleh menghubungkan fail ke fail HTML anda, dan mula menggunakan Bootstrap dalam kod anda

Pasang Bootstrap Langkah 6
Pasang Bootstrap Langkah 6

Langkah 6. Klik kanan fail HTML yang ingin anda gunakan dengan Bootstrap

Anda boleh menggunakan Bootstrap hanya dalam salah satu fail HTML anda, atau semuanya.

Pasang Bootstrap Langkah 7
Pasang Bootstrap Langkah 7

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

Sub-menu akan muncul dengan aplikasi yang serasi.

Pasang Bootstrap Langkah 8
Pasang Bootstrap Langkah 8

Langkah 8. Pilih program penyunting teks anda

Ini akan membuka fail HTML yang dipilih dalam penyunting teks anda.

Anda boleh menggunakan penyunting teks ringkas seperti Notepad atau TeksEdit serta penyunting kod khusus seperti Atom (https://atom.io) atau Coda (https://panic.com/coda).

Pasang Bootstrap Langkah 9
Pasang Bootstrap Langkah 9

Langkah 9. Tambahkan pautan Bootstrap ke tajuk fail HTML anda

Sebelum menggunakan kod Bootstrap dalam HTML anda, anda harus menaip atau menempelkan baris di bawah ke tajuk kod anda:

Sekiranya anda ingin memautkan dan menggunakan beberapa fail lain dari folder css dan js, tambahkan baris baru ke dalam tajuk, dan ganti bahagian css / bootstrap.css dan js / bootstrap.js dengan nama fail yang anda mahukan untuk memaut

Pasang Bootstrap Langkah 10
Pasang Bootstrap Langkah 10

Langkah 10. Periksa penempatan pautan Bootstrap anda dalam kod

Dalam tajuk HTML, kedua-dua baris harus terletak di antara garis dan garis.

  • Sebaik sahaja anda menambahkan baris ini ke tajuk, anda boleh mula menggunakan elemen Bootstrap dalam fail HTML ini.
  • Anda boleh mendapatkan senarai lengkap semua elemen Bootstrap di https://getbootstrap.com/docs/4.3/getting-started/introduction. Cukup klik mana-mana kategori seperti Susun atur atau Komponen di menu kiri.
  • Sebaik sahaja anda memasang Bootstrap, anda boleh memasukkan atau menyalin / menampal sebarang kod dari sini ke kod anda sendiri.

Disyorkan: