Rumah > hujung hadapan web > Tutorial Bootstrap > Bagaimana untuk mengimport bootstrap

Bagaimana untuk mengimport bootstrap

下次还敢
Lepaskan: 2024-04-05 02:09:22
asal
1025 orang telah melayarinya

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.

Bagaimana untuk mengimport bootstrap

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:

<code class="html"><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></code>
Salin selepas log masuk

2 Pengurus Pakej Node.js (npm)

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

<code class="shell">npm install bootstrap --save</code>
Salin selepas log masuk

Kemudian dalam Bootstrap anda dirujuk dalam kod:

<code class="javascript">import 'bootstrap'</code>
Salin selepas log masuk

3 Muat turun setempat

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

<code class="html"><link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/bootstrap.bundle.min.js"></script></code>
Salin selepas log masuk

4 Pasang melalui Sass atau Less

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

<code class="shell"># Sass
npm install bootstrap-sass --save

# Less
npm install bootstrap-less --save</code>
Salin selepas log masuk

Kemudian import Bootstrap ke dalam fail Sass atau Less anda:

<code class="sass">@import 'bootstrap'</code>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan