Bootstrap Basic tut 2: Tải xuống và cài đặt Bootrap
Bài viết được dịch từ trang chủ https://getbootstrap.com/docs/5.0/getting-started/download/
Tải xuống
Tải xuống Bootstrap để nhận CSS và JavaScript đã biên dịch, mã nguồn hoặc bao gồm nó với các trình quản lý gói yêu thích của bạn như npm, RubyGems, v.v.Trên trang này
CSS và JS đã biên dịch
Tải xuống mã đã biên dịch sẵn sàng để sử dụng cho Bootstrap v5.0.2 để dễ dàng đưa vào dự án của bạn, bao gồm:
- Các gói CSS được biên dịch và rút gọn (xem so sánh các tệp CSS )
- Các plugin JavaScript được biên dịch và rút gọn (xem so sánh các tệp JS )
Điều này không bao gồm tài liệu, tệp nguồn hoặc bất kỳ phụ thuộc JavaScript tùy chọn nào như Popper.
Tệp 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 Sass, JavaScript và tài liệu 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:
- Trình biên dịch Sass để biên dịch các tệp nguồn Sass thành các tệp CSS
- Trình sửa lỗi tự động cho tiền tố nhà cung cấp CSS
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.
Các ví dụ
Nếu bạn muốn tải xuống và xem xét 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:
CDN qua jsDelivr
Bỏ qua quá trình tải xuống với jsDelivr để cung cấp phiên bản đã lưu trong bộ đệm của CSS và JS đã biên dịch của Bootstrap cho dự án của bạn.Sao chép
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
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 hơn là thông qua CDN.Sao chép
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Người quản lý gói
Kéo các tệp nguồn của Bootstrap vào gần như bất kỳ dự án nào bằng 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, Bootstrap sẽ yêu cầu trình biên dịch Sass và Trình sửa lỗi tự động để thiết lập khớp với các phiên bản đã biên dịch chính thức của chúng tôi.
npm
Cài đặt Bootstrap trong các ứng dụng được cung cấp bởi Node.js của bạn với gói npm :Sao chép
npm install bootstrap
const bootstrap = require('bootstrap')
hoặc import bootstrap from 'bootstrap'
sẽ tải tất cả các plugin của Bootstrap vào một bootstrap
đối tượng. Bản bootstrap
thân mô-đun xuất tất cả các plugin của chúng tôi. Bạn có thể tải từng phần bổ trợ của Bootstrap theo cách thủ công bằng cách tải các /js/dist/*.js
tệp trong thư mục cấp cao nhất của gói.
Bootstrap’s package.json
chứa một số siêu dữ liệu bổ sung theo các khóa sau:
sass
– đường dẫn đến tệp nguồn Sass chính của Bootstrapstyle
– đườ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ách sử dụng cài đặt mặc định (không có 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! Đi đến twbs / bootstrap-NPM-khởi động mẫu kho để xem làm thế nào để 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.
sợi
Cài đặt Bootstrap trong các ứng dụng được cung cấp bởi Node.js của bạn với gói sợi :Sao chép
yarn add bootstrap
RubyGems
Cài đặt Bootstrap trong các ứng dụng Ruby của bạn bằng cách sử dụng Bundler (được khuyến nghị ) và RubyGems bằng cách thêm dòng sau vào Gemfile
:Sao chép
gem 'bootstrap', '~> 5.0.2'
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 sau:Sao chép
gem install bootstrap -v 5.0.2
Xem README của đá quý để biết thêm chi tiết.
Người 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 :Sao chép
composer require twbs/bootstrap:5.0.2
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 :Sao chép
Install-Package bootstrap
Sao chép
Install-Package bootstrap.sass