Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Đóng góp

Giúp phát triển Bootstrap với các tập lệnh và kiểm tra xây dựng tài liệu của chúng tôi.

Thiết lập dụng cụ

Bootstrap sử dụng các tập lệnh npm để xây dựng tài liệu và biên dịch các tệp nguồn. Package.json của chúng tôi chứa các tập lệnh này để biên dịch mã, chạy thử nghiệm và hơn thế nữa. Chúng không nhằm mục đích sử dụng bên ngoài kho lưu trữ và tài liệu của chúng tôi.

Để sử dụng hệ thống xây dựng của chúng tôi và chạy tài liệu của chúng tôi cục bộ, bạn sẽ cần một bản sao của các tệp nguồn và Node của Bootstrap. Hãy làm theo các bước sau và bạn sẽ sẵn sàng:

  1. Tải xuống và cài đặt Node.js , mà chúng tôi sử dụng để quản lý các phần phụ thuộc của mình.
  2. Tải xuống các nguồn của Bootstrap hoặc kho lưu trữ của fork Bootstrap .
  3. Điều hướng đến thư mục gốc /bootstrapvà chạy npm installđể cài đặt các phụ thuộc cục bộ của chúng tôi được liệt kê trong package.json .

Khi hoàn thành, bạn sẽ có thể chạy các lệnh khác nhau được cung cấp từ dòng lệnh.

Sử dụng tập lệnh npm

Package.json của chúng tôi bao gồm nhiều nhiệm vụ để phát triển dự án. Chạy npm runđể xem tất cả các tập lệnh npm trong thiết bị đầu cuối của bạn. Các nhiệm vụ chính bao gồm:

Nhiệm vụ Sự mô tả
npm start Biên dịch CSS và JavaScript, xây dựng tài liệu và khởi động một máy chủ cục bộ.
npm run dist Tạo thư mục dist/với các tệp đã biên dịch. Sử dụng Sass , Autoprefixerterser .
npm test Chạy thử nghiệm cục bộ sau khi chạynpm run dist
npm run docs-serve Xây dựng và chạy tài liệu cục bộ.
Bắt đầu với Bootstrap qua npm với dự án khởi động của chúng tôi! Truy cập kho lưu trữ mẫu twbs / bootstrap-npm-starter để xem cách xây dựng và tùy chỉnh Bootstrap trong dự án npm của riêng bạn. Bao gồm trình biên dịch Sass, Autoprefixer, Stylelint, PurgeCSS và Bootstrap Icons.

Sass

Bootstrap sử dụng Dart Sass để biên dịch các tệp nguồn Sass của chúng tôi thành các tệp CSS (được bao gồm trong quy trình xây dựng của chúng tôi) và chúng tôi khuyên bạn nên làm như vậy nếu bạn đang biên dịch Sass bằng đường dẫn nội dung của riêng mình. Trước đây chúng tôi đã sử dụng Node Sass cho Bootstrap v4, nhưng LibSass và các gói được xây dựng trên nó, bao gồm cả Node Sass, hiện không được dùng nữa .

Dart Sass sử dụng độ chính xác làm tròn là 10 và vì lý do hiệu quả không cho phép điều chỉnh giá trị này. Chúng tôi không hạ thấp độ chính xác này trong quá trình xử lý thêm CSS đã tạo của chúng tôi, chẳng hạn như trong quá trình thu nhỏ, nhưng nếu bạn chọn làm như vậy, chúng tôi khuyên bạn nên duy trì độ chính xác ít nhất là 6 để tránh các sự cố làm tròn trình duyệt.

Trình sửa lỗi tự động

Bootstrap sử dụng Autoprefixer (có trong quy trình xây dựng của chúng tôi) để tự động thêm tiền tố của nhà cung cấp vào một số thuộc tính CSS tại thời điểm xây dựng. Làm như vậy giúp chúng tôi tiết kiệm thời gian và mã bằng cách cho phép chúng tôi viết các phần chính của CSS của chúng tôi một lần duy nhất trong khi loại bỏ nhu cầu về các mixin của nhà cung cấp như những gì được tìm thấy trong v3.

Chúng tôi duy trì danh sách các trình duyệt được hỗ trợ thông qua Autoprefixer trong một tệp riêng trong kho lưu trữ GitHub của chúng tôi. Xem .b browserlistrc để biết thêm chi tiết.

RTLCSS

Bootstrap sử dụng RTLCSS để xử lý CSS đã biên dịch và chuyển đổi chúng thành RTL - về cơ bản thay thế các thuộc tính nhận biết hướng ngang (ví dụ padding-left) bằng đối diện của chúng. Nó cho phép chúng tôi chỉ viết CSS của mình một lần duy nhất và thực hiện các chỉnh sửa nhỏ bằng cách sử dụng các chỉ thị giá trịđiều khiển RTLCSS .

Tài liệu địa phương

Chạy cục bộ tài liệu của chúng tôi yêu cầu sử dụng Hugo, được cài đặt thông qua gói hugo-bin npm. Hugo là một trình tạo trang web tĩnh khá nhanh và khá dễ mở rộng, cung cấp cho chúng ta: bao gồm cơ bản, tệp dựa trên Markdown, mẫu và hơn thế nữa. Đây là cách bắt đầu:

  1. Chạy qua thiết lập công cụ ở trên để cài đặt tất cả các phụ thuộc.
  2. Từ thư mục gốc /bootstrap, chạy npm run docs-servetrong dòng lệnh.
  3. Mở http://localhost:9001/trong trình duyệt của bạn và voilà.

Tìm hiểu thêm về cách sử dụng Hugo bằng cách đọc tài liệu của nó .

Xử lý sự cố

Nếu bạn gặp sự cố khi cài đặt phần phụ thuộc, hãy gỡ cài đặt tất cả các phiên bản phụ thuộc trước đó (toàn cầu và cục bộ). Sau đó, chạy lại npm install.