Bagaimana saya memasang dan menyediakan bootstrap dalam projek web saya (menggunakan CDN, NPM, atau SASS)?

Bagaimana cara memasang dan menyediakan bootstrap dalam projek web saya (menggunakan CDN, NPM, atau SASS)?

Terdapat tiga cara utama untuk mengintegrasikan bootstrap ke dalam projek web anda: menggunakan CDN, NPM (atau benang), dan melalui SASS. Mari merosakkan setiap kaedah:

1. CDN (Rangkaian Penghantaran Kandungan): Ini adalah kaedah paling cepat dan paling mudah untuk projek kecil atau prototaip cepat. Anda hanya memasukkan pautan ke fail CSS dan JavaScript Bootstrap dalam bahagian HTML dan masing -masing.

• CSS: Tambahkan baris berikut dalam tag fail HTML anda:

   <code class="html"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"></code>

• JavaScript (pilihan, untuk komponen JavaScript): Tambahkan baris berikut sebelum tag penutup :

   <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script></code>

  Perhatikan bahawa bootstrap.bundle.min.js termasuk popper.js, yang diperlukan untuk beberapa komponen bootstrap seperti tooltip dan popovers. Jika anda menggunakan kaedah yang berbeza untuk popper, anda perlu memasukkan bootstrap.min.js sebaliknya. Sentiasa periksa dokumentasi bootstrap rasmi untuk URL yang paling terkini dan hash integriti.

2. NPM (atau Benang): Kaedah ini sesuai untuk projek yang lebih besar di mana anda mahu kawalan yang lebih baik ke atas fail dan integrasi Bootstrap dengan proses binaan anda. Anda memerlukan Node.js dan NPM (atau benang) yang dipasang pada sistem anda.

• Pemasangan: Buka terminal anda di direktori projek anda dan lari:

   <code class="bash">npm install bootstrap</code>

  atau

   <code class="bash">yarn add bootstrap</code>

• Import di CSS anda: Import CSS Bootstrap ke dalam lembaran gaya utama anda (misalnya, styles.scss atau styles.css ):

   <code class="scss">@import '~bootstrap/scss/bootstrap';</code>

  (Untuk sass) atau

   <code class="css">@import url('node_modules/bootstrap/dist/css/bootstrap.min.css');</code>

  (Untuk CSS biasa - kurang disyorkan kerana anda kehilangan manfaat penyesuaian SASS)

• Import dalam JavaScript anda (Pilihan): Import fail JavaScript Bootstrap seperti yang diperlukan dalam fail JavaScript anda. Sebagai contoh, menggunakan modul ES:

   <code class="javascript">import 'bootstrap/dist/js/bootstrap.bundle';</code>

3. Sass: Ini sama dengan kaedah NPM tetapi memberi anda lebih banyak kawalan ke atas gaya Bootstrap. Anda memerlukan pengkompil SASS (seperti sass atau nod sass) yang dipasang. Pemasangan adalah sama dengan kaedah NPM di atas. Kemudian, anda boleh menyesuaikan pembolehubah SASS dan Mixins Bootstrap untuk menyesuaikan reka bentuk projek anda.

Apakah kelebihan dan kekurangan menggunakan CDN, NPM, atau SASS untuk integrasi Bootstrap?

Kaedah	Kelebihan	Kekurangan
Cdn	Persediaan paling mudah dan terpantas; tiada alat tambahan yang diperlukan; Bagus untuk projek kecil	Tiada kawalan ke atas kemas kini versi; potensi untuk downtime jika CDN tidak tersedia; penyesuaian terhad
npm/benang	Kawalan yang lebih baik ke atas versi; mengintegrasikan dengan proses membina; membolehkan penyesuaian	Memerlukan node.js dan npm/benang; persediaan yang lebih kompleks; menambah saiz projek
Sass	Kawalan penuh ke atas gaya; membolehkan penyesuaian yang luas; mengintegrasikan dengan baik dengan projek sass lain	Memerlukan pengkompil SASS; persediaan yang paling kompleks; Memerlukan pemahaman sintaks sass

Bagaimana saya boleh menyesuaikan komponen CSS dan JavaScript Bootstrap agar sesuai dengan reka bentuk projek saya?

Penyesuaian bergantung pada kaedah yang digunakan.

1. CDN: Penyesuaian adalah terhad dengan CDN. Anda akan bergantung pada gaya Bootstrap yang mengatasi CSS anda sendiri. Tambah CSS tersuai anda selepas pautan CSS bootstrap di HTML anda . Perubahan yang lebih luas akan memerlukan kod sumber bootstrap, yang biasanya tidak disyorkan.

2. NPM/Benang (dengan CSS biasa): Sama seperti CDN, anda menimpa gaya dengan CSS anda sendiri.

3. NPM/Benang (dengan SASS): Ini menawarkan fleksibiliti yang paling. Anda boleh menyesuaikan pembolehubah, campuran, dan fungsi SASS Bootstrap dalam fail SASS anda sendiri. Ini membolehkan anda menukar warna, fon, jarak, dan banyak lagi tanpa secara langsung mengubah suai fail teras Bootstrap. Sebagai contoh, untuk menukar warna utama, anda akan mengubah suai pembolehubah $primary dalam fail SASS anda.

Penyesuaian JavaScript: Untuk kedua -dua NPM dan CDN, anda boleh melanjutkan atau menimpa fungsi JavaScript Bootstrap dengan menulis kod JavaScript anda sendiri yang berinteraksi dengan komponen Bootstrap dan API mereka. Rujuk dokumentasi Bootstrap untuk butiran mengenai API JavaScript mereka.

Kaedah mana (CDN, NPM, atau SASS) paling sesuai untuk berskala kecil berbanding projek web berskala besar menggunakan bootstrap?

• Projek berskala kecil: Kaedah CDN biasanya mencukupi untuk projek berskala kecil. Kesederhanaan dan kemudahan penggunaannya melebihi batasan dalam penyesuaian.
• Projek berskala besar: Untuk projek yang lebih besar, menggunakan NPM atau benang dengan SASS disyorkan. Ini menawarkan kawalan yang lebih baik ke atas versi, membolehkan integrasi lancar dengan proses binaan anda, dan membolehkan penyesuaian yang luas untuk menyesuaikan sistem reka bentuk anda. Keupayaan untuk menguruskan kebergantungan dan memanfaatkan kuasa Sass menjadikannya lebih dapat dipelihara dan berskala dalam jangka masa panjang. Menggunakan NPM/Benang tanpa SASS adalah pilihan pertengahan, menawarkan kawalan versi dan membina integrasi proses tetapi kurang penyesuaian daripada SASS.

Atas ialah kandungan terperinci Bagaimana saya memasang dan menyediakan bootstrap dalam projek web saya (menggunakan CDN, NPM, atau SASS)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!