Bagaimana untuk mengimport bootstrap

Terdapat empat cara untuk mengimport rangka kerja Bootstrap: Tambahkan kod HTML melalui CDN. Gunakan npm untuk memasang dan mengimport fail JavaScript. Muat turun Bootstrap dan rujuk fail CSS dan JavaScript tempatan. Pasang dan import fail prapemproses melalui Sass atau Less.

Cara Mengimport Bootstrap

Bootstrap ialah rangka kerja bahagian hadapan yang popular yang memudahkan pembangunan web dan mencipta tapak web responsif. Untuk mengimport Bootstrap, terdapat pelbagai kaedah:

1. CDN (Content Delivery Network)

Ini adalah kaedah yang paling mudah. Tambahkan kod berikut pada bahagian kepala HTML anda:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

2 Pengurus Pakej Node.js (npm)

Jika anda menggunakan pengurus pakej JavaScript npm, anda boleh menjalankan arahan berikut:

npm install bootstrap --save

Kemudian dalam Bootstrap anda dirujuk dalam kod:

import 'bootstrap'

3 Muat turun setempat

Muat turun versi terkini dari tapak web Bootstrap dan salin failnya ke direktori projek anda. Kemudian rujuknya dalam kod anda:

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/bootstrap.bundle.min.js"></script>

4 Pasang melalui Sass atau Less

Jika anda menggunakan prapemproses Sass atau Less, anda boleh memasang versi Sass atau Less bagi Bootstrap.

# Sass
npm install bootstrap-sass --save

# Less
npm install bootstrap-less --save

Kemudian import Bootstrap ke dalam fail Sass atau Less anda:

@import 'bootstrap'

Nota:

• Untuk versi Bootstrap 4, gantikan 5.2.0-beta1 dengan 4.6.6. kod>. <code>5.2.0-beta1 替换为 4.6.2。
• 对于 Bootstrap 5 Alpha 版本，将 5.2.0-beta1 替换为 5.0.0-alpha6
Untuk versi Bootstrap 5 Alpha, gantikan 5.2.0-beta1 dengan 5.0.0-alpha6.
• Pastikan anda meletakkan Bootstrap.css sebelum fail CSS anda yang lain.

🎜

Atas ialah kandungan terperinci Bagaimana untuk mengimport bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!