Làm cách nào để tải xuống tài liệu bootstrap 5 ngoại tuyến?

Trên thực tế, tôi quan tâm nhiều hơn đến việc học cách biên dịch các tài liệu cần xử lý trước khi có thể đọc được, thay vì chỉ đọc thẳng về bootstrap

Tôi gặp khó khăn trong quá trình biên dịch mã nguồn của tài liệu và lẽ ra nên tiếp tục, nhưng tôi muốn biên dịch nó đơn giản chỉ để tìm hiểu cách biên dịch tài liệu, vì đây không phải là lần đầu tiên tôi gặp phải các tài liệu cần một số loại biên dịch trước khi trở thành

Trong bài viết này, chúng ta sẽ xem xét cách chúng ta có thể tận dụng cục bộ các tài nguyên CSS và Javascript của Bootstrap để có thể tiếp tục học ngay cả khi không có kết nối Internet đang hoạt động

2. Tải xuống tài nguyên CSS và Javascript

Trước tiên, chúng tôi cần tải xuống tệp Bootstrap thực tế từ trang web chính thức tại https. //getbootstrap. com/docs/4. 0/bắt đầu/tải xuống/. Trên trang kết quả, chúng ta sẽ nhấp vào nút Tải xuống sau tiêu đề CSS và JS đã biên dịch

Tệp đã tải xuống, bootstrap-4. 0. 0-dist. zip, là một tệp zip có kích thước chỉ 592 KB - khá nhỏ. Chúng ta nên giải nén nó bằng cách sử dụng Winrar, 7zip hoặc các công cụ tương tự khác. Sau khi giải nén ra ta sẽ có 1 thư mục tên là bootstrap-4. 0. 0-dist trên hệ thống của chúng tôi

Tệp tiếp theo mà chúng tôi sẽ cần là tệp jQuery Javascript và chúng tôi có thể tải xuống tệp đó bằng cách truy cập URL này https. //mã số. jquery. com/jquery-3. 6. 0. js

Sau khi mở URL, chúng ta có thể thấy một loạt mã trong trình duyệt của mình. Tất cả những gì chúng ta cần làm để lưu cục bộ là nhấn Ctrl + S trên HĐH Windows hoặc Cmd + S trên MacOS. Thao tác này sẽ nhắc trình duyệt của chúng ta lưu tệp có tên jquery-3. 6. 0. js trong thư mục Tải xuống của chúng tôi

Bây giờ chúng ta đã có tất cả các tệp mình cần, hãy kết nối chúng lại với nhau trong một dự án mẫu

3. Sử dụng Bootstrap cục bộ (ngoại tuyến)

Hãy tạo một dự án ví dụ để minh họa cách sử dụng tất cả các tệp cục bộ. Trước tiên, chúng ta sẽ tạo một thư mục mới có tên bootstrap-offline. Đây sẽ là thư mục gốc của dự án của chúng tôi. Nó được gọi là root vì nó sẽ chứa các thư mục và tệp khác

Tiếp theo, chúng tôi sẽ tạo hai thư mục mới trong bootstrap-offline, cụ thể là

- bootstrap-offline/css

- bootstrap-offline/js

Bây giờ, chúng ta sẽ sao chép bootstrap-4. 0. 0-dist/css/bootstrap. css sang bootstrap-offline/css/bootstrap. css.  

Hơn nữa, chúng tôi sẽ sao chép bootstrap-4. 0. 0-dist/js/bootstrap. js sang bootstrap-offline/js/bootstrap. js

Cuối cùng, chúng ta sẽ sao chép jquery-3. 6. 0. js chúng tôi đã tải xuống trước đó vào bootstrap-4. 0. 0-dist/js/jquery-3. 6. 0. js

Để kết thúc, chúng ta sẽ tạo một tệp HTML mới có tên bootstrap-offline/hello. html với nội dung sau

	
	
	Offline Bootstrap
	
	
    


	

  		My Offline Bootstrap Page
  		
This page is using local Bootstrap CSS and JS files
	

Trong đoạn mã trên, lưu ý rằng chúng tôi đã thêm jquery-3. 6. 0. js trước khi thêm bootstrap. js. Điều này là do bootstrap. js yêu cầu jquery-3. 6. 0. js để làm việc

Chúng ta có thể mở lời chào. html trong trình duyệt để xem trang tuyệt vời, tắt internet và nó vẫn hoạt động

4. Sự kết luận

Trong bài viết này, chúng tôi đã có thể xem xét cách chúng tôi có thể tải xuống và sử dụng các tài nguyên CSS và Javascript của Bootstrap ngoại tuyến. Kỹ năng này rất đặc biệt và có thể giúp một người tiếp tục làm việc khi không có kết nối Internet

Tải xuống mã đã biên dịch sẵn sàng để sử dụng cho Bootstrap v5. 0. 2 để dễ dàng tham gia vào dự án của bạn, bao gồm

Điều này không bao gồm tài liệu, tệp nguồn hoặc bất kỳ phần phụ thuộc JavaScript tùy chọn nào như Popper

Tải xuống

tập tin nguồn

Biên dịch Bootstrap với đường dẫn nội dung của riêng bạn bằng cách tải xuống các tệp tài liệu Sass, JavaScript và nguồn của chúng tôi. Tùy chọn này yêu cầu một số công cụ bổ sung

Nếu bạn yêu cầu bộ công cụ xây dựng đầy đủ của chúng tôi, chúng được bao gồm để phát triển Bootstrap và các tài liệu của nó, nhưng chúng có thể không phù hợp với mục đích của riêng bạn

nguồn tải xuống

ví dụ

Nếu bạn muốn tải xuống và kiểm tra các ví dụ của chúng tôi, bạn có thể lấy các ví dụ đã được tạo sẵn

Tải xuống ví dụ

CDN qua jsDelivr

Bỏ qua phần tải xuống với jsDelivr để phân phối phiên bản CSS và JS đã được lưu trong bộ nhớ cache của Bootstrap cho dự án của bạn

Nếu bạn đang sử dụng JavaScript đã biên dịch của chúng tôi và muốn bao gồm Popper một cách riêng biệt, hãy thêm Popper trước JS của chúng tôi, tốt nhất là thông qua CDN

quản lý gói

Kéo các tệp nguồn của Bootstrap vào hầu hết mọi dự án với một số trình quản lý gói phổ biến nhất. Bất kể trình quản lý gói nào, Bootstrap sẽ yêu cầu trình biên dịch Sass và Autoprefixer để thiết lập phù hợp với các phiên bản được biên dịch chính thức của chúng tôi

npm

Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói npm

const bootstrap = require('bootstrap') hoặc

0 sẽ tải tất cả các plugin của Bootstrap lên một đối tượng

1. Mô-đun

1 tự xuất tất cả các plugin của chúng tôi. Bạn có thể tải từng plugin của Bootstrap theo cách thủ công bằng cách tải các tệp

3 trong thư mục cấp cao nhất của gói

Bootstrap's

0 chứa một số siêu dữ liệu bổ sung theo các khóa sau

• 1 - đường dẫn đến tệp nguồn Sass chính của Bootstrap

• 2 - đường dẫn đến CSS không được rút gọn của Bootstrap đã được biên dịch trước bằng cài đặt mặc định (không tùy chỉnh)

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à Biểu tượng Bootstrap

sợi

Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói sợi

RubyGems

Cài đặt Bootstrap trong các ứng dụng Ruby của bạn bằng Bundler (được khuyến nghị) và RubyGems bằng cách thêm dòng sau vào

3 của bạn

Ngoài ra, nếu bạn không sử dụng Bundler, bạn có thể cài đặt gem bằng cách chạy lệnh này

gem install bootstrap -v 5.0.2

Xem README của đá quý để biết thêm chi tiết

nhà soạn nhạc

Bạn cũng có thể cài đặt và quản lý Sass và JavaScript của Bootstrap bằng Composer

________số 8

NuGet

Nếu bạn phát triển trong. NET, bạn cũng có thể cài đặt và quản lý CSS hoặc Sass và JavaScript của Bootstrap bằng NuGet

Bootstrap có thể tải xuống được không?

Tôi có thể sử dụng Bootstrap mà không cần cài đặt không?