Lewati ke konten utama Lewati ke navigasi dokumen
in English

Menyumbang

Bantu kembangkan Bootstrap dengan skrip dan pengujian pembuatan dokumentasi kami.

Pengaturan perkakas

Bootstrap menggunakan skrip npm untuk membangun dokumentasi dan mengkompilasi file sumber. Package.json kami menampung skrip ini untuk mengkompilasi kode, menjalankan tes, dan banyak lagi. Ini tidak dimaksudkan untuk digunakan di luar repositori dan dokumentasi kami.

Untuk menggunakan sistem build kami dan menjalankan dokumentasi kami secara lokal, Anda memerlukan salinan file sumber Bootstrap dan Node.js. Ikuti langkah-langkah ini dan Anda harus siap untuk bergoyang:

  1. Unduh dan instal Node.js , yang kami gunakan untuk mengelola dependensi kami.
  2. Unduh sumber Bootstrap atau garpu repositori Bootstrap .
  3. Arahkan ke /bootstrapdirektori root dan jalankan npm installuntuk menginstal dependensi lokal kami yang terdaftar di package.json .

Setelah selesai, Anda akan dapat menjalankan berbagai perintah yang disediakan dari baris perintah.

Menggunakan skrip npm

Package.json kami mencakup banyak tugas untuk mengembangkan proyek. Jalankan npm rununtuk melihat semua skrip npm di terminal Anda. Tugas utama meliputi:

Tugas Keterangan
npm start Mengkompilasi CSS dan JavaScript, membuat dokumentasi, dan memulai server lokal.
npm run dist Membuat dist/direktori dengan file yang dikompilasi. Membutuhkan Sass , Autoprefixer , dan terser .
npm test Menjalankan tes secara lokal setelah dijalankannpm run dist
npm run docs-serve Membangun dan menjalankan dokumentasi secara lokal.
Mulailah dengan Bootstrap melalui npm dengan proyek awal kami! Buka repositori template twbs /bootstrap-npm-starter untuk melihat cara membuat dan menyesuaikan Bootstrap di proyek npm Anda sendiri. Termasuk kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, dan Ikon Bootstrap.

Kelancangan

Bootstrap menggunakan Dart Sass untuk mengkompilasi file sumber Sass kami ke dalam file CSS (termasuk dalam proses pembuatan kami), dan kami menyarankan Anda melakukan hal yang sama jika Anda mengompilasi Sass menggunakan saluran aset Anda sendiri. Kami sebelumnya menggunakan Node Sass untuk Bootstrap v4, tetapi LibSass dan paket yang dibangun di atasnya, termasuk Node Sass, sekarang tidak digunakan lagi .

Dart Sass menggunakan presisi pembulatan 10 dan untuk alasan efisiensi tidak memungkinkan penyesuaian nilai ini. Kami tidak menurunkan presisi ini selama pemrosesan lebih lanjut dari CSS yang kami buat, seperti selama minifikasi, tetapi jika Anda memilih untuk melakukannya, sebaiknya pertahankan presisi minimal 6 untuk mencegah masalah dengan pembulatan browser.

Autoprefixer

Bootstrap menggunakan Autoprefixer (termasuk dalam proses pembuatan kami) untuk secara otomatis menambahkan awalan vendor ke beberapa properti CSS pada waktu pembuatan. Melakukannya menghemat waktu dan kode kami dengan memungkinkan kami untuk menulis bagian-bagian penting dari CSS kami satu kali sambil menghilangkan kebutuhan untuk mixin vendor seperti yang ditemukan di v3.

Kami menyimpan daftar browser yang didukung melalui Autoprefixer dalam file terpisah di dalam repositori GitHub kami. Lihat .browserslistrc untuk detailnya.

RTLCSS

Bootstrap menggunakan RTLCSS untuk memproses CSS yang dikompilasi dan mengubahnya menjadi RTL – pada dasarnya mengganti properti yang sadar arah horizontal (mis. padding-left) dengan kebalikannya. Ini memungkinkan kita hanya menulis CSS kita satu kali dan membuat tweak kecil menggunakan kontrol RTLCSS dan arahan nilai .

Dokumentasi lokal

Menjalankan dokumentasi kami secara lokal memerlukan penggunaan Hugo, yang diinstal melalui paket hugo-bin npm. Hugo adalah generator situs statis yang sangat cepat dan dapat diperluas yang menyediakan: penyertaan dasar, file berbasis penurunan harga, templat, dan banyak lagi. Berikut cara memulainya:

  1. Jalankan melalui pengaturan perkakas di atas untuk menginstal semua dependensi.
  2. Dari direktori root /bootstrap, jalankan npm run docs-servedi baris perintah.
  3. Buka http://localhost:9001/di browser Anda, dan voila.

Pelajari lebih lanjut tentang menggunakan Hugo dengan membaca dokumentasinya .

Penyelesaian masalah

Jika Anda mengalami masalah dengan menginstal dependensi, hapus instalan semua versi dependensi sebelumnya (global dan lokal). Kemudian, jalankan kembali npm install.