Hai cách chính bạn có thể thêm bootstrap vào trang web của mình chỉ chọn hai tùy chọn là gì?

Khóa học thiết kế UI/UX cơ bản - Đưa các phương pháp hay nhất về UI/UX lên cấp độ tiếp theo với các ví dụ được mã hóa đầy đủ của chúng tôi. ⏰ Ưu Đãi Đặc Biệt GIẢM GIÁ 80%

Phiên bản mới nhất của Bootstrap là Bootstrap 5. Các bước bạn cần thực hiện để thêm Bootstrap vào HTML hơi khác nhau dựa trên phiên bản bạn muốn sử dụng. Bạn sẽ cần có kiến ​​thức cơ bản về HTML/CSS và JS để bắt đầu với Bootstrap. Sử dụng một trong ba phương pháp sau để thêm Bootstrap vào HTML

Phương pháp 1. Sử dụng Mạng phân phối nội dung Bootstrap (CDN)

Sử dụng Bootstrap CDN là một cách tuyệt vời để phân phối nội dung từ trang web của bạn đến người dùng một cách nhanh chóng và hiệu quả dựa trên vị trí địa lý của họ và cải thiện hiệu suất của máy chủ trang web của bạn. Để liên kết Bootstrap trong HTML bằng phương pháp này

Thêm Bootstrap 4 CDN vào HTML

• Đối với CSS

Sao chép liên kết biểu định kiểu này vào thẻ của tệp HTML bạn muốn.

• Đối với JS

Sao chép biểu định kiểu này trước khi kết thúc thẻ của tệp HTML bạn muốn.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”>

Lưu ý rằng các chức năng của một số thành phần JavaScript như tab và trình đơn thả xuống phụ thuộc vào popper. js và jQuery. Do đó, trước khi tải tệp JavaScript Bootstrap, hãy bao gồm CDN của jQuery và Popper trước khi tải bootstrap. tối thiểu. tệp js.

Thêm Bootstrap 5 CDN vào HTML

Bootstrap 5 không còn cần jQuery làm phụ thuộc vì JavaScript có thể cung cấp chức năng tương tự. Để thêm Bootstrap 5 CDN vào HTML

• cho CS

Sao chép liên kết biểu định kiểu này vào thẻ của tệp HTML bạn muốn.

• Đối với JS

Lưu ý rằng bạn cần tải Popper JS trước khi tải Bootstrap JS

Phương pháp 2. Tải xuống tệp cục bộ

Một cách khác để nhập Bootstrap sang HTML là tải trực tiếp các tệp cục bộ vào thư mục dự án HTML của bạn. Các tập tin có thể được tải về từ các liên kết sau

• Bootstrap 4. https. //getbootstrap. com/docs/4. 3/bắt đầu/tải xuống/
• Bootstrap 5. https. //v5. getbootstrap. com/docs/5. 0/bắt đầu/tải xuống/

Sau khi các tệp phiên bản Bootstrap mong muốn đã được tải xuống

• Dành cho CSS .

Bao gồm liên kết đến bootstrap. tối thiểu. css trong phần

• Đối với JS

Thêm liên kết đến bootstrap. tối thiểu. js trước phần cuối của của tệp HTML của bạn. Làm điều này cho phép bạn sử dụng các thành phần Bootstrap JS.

Lưu ý rằng jquery. tối thiểu. js và popper. tối thiểu. js phải được bao gồm trước khi tải bootstrap. tối thiểu. js, ngay cả khi bạn đã tải xuống tệp cục bộ.

Phương pháp 3. Sử dụng trình quản lý gói để nhập Bootstrap sang HTML

Các trình quản lý gói như npm và sợi có thể chứng minh . Vì npm là trình quản lý gói phổ biến nhất nên ví dụ sau đây cho thấy cách Bootstrap có thể được cài đặt và kéo vào bất kỳ dự án nào bằng cách sử dụng nó.

Nhập một trong các lệnh sau vào thư mục dự án. Điều này chỉ hợp lệ nếu bạn đã khởi tạo npm trong dự án.

• Bootstrap 4. npm cài đặt bootstrap
• Bootstrap 5. npm cài đặt [email được bảo vệ]

Một bản sao cục bộ của phiên bản tệp Bootstrap mong muốn hiện đã được tải xuống thư mục ‘node_modules’ trong dự án của bạn. Sau khi phiên bản Bootstrap mong muốn được nhập

• cho CS

Bao gồm bootstrap. tối thiểu. css trong của tệp HTML của bạn để sử dụng các thành phần Bootstrap CSS.

• Đối với JS

Sử dụng bootstrap. tối thiểu. js trước khi kết thúc phần của tệp HTML để sử dụng các thành phần Bootstrap JS.

Như đã đề cập trước đó, jquery. tối thiểu. js và popper. tối thiểu. js cả hai đều phải được tải trước khi bạn tải bootstrap. tối thiểu. js.

Khi bạn tích hợp Bootstrap 4 hoặc 5 CSS với HTML, bạn có thể chỉ cần sử dụng các thành phần của lớp Bootstrap và tạo kiểu cho các tệp HTML của mình theo cách mong muốn. Bạn có thể tham khảo tài liệu Bootstrap của phiên bản bạn muốn để hiểu các lớp có thể được sử dụng và các hành động mà các lớp tương ứng thực hiện. Tương tự, sau khi tích hợp Bootstrap JS với HTML, bạn có thể sử dụng các thành phần Bootstrap JS bằng cách sử dụng các thuộc tính dữ liệu JS trực tiếp trong phần đánh dấu HTML hoặc bằng cách sử dụng jQuery. Tham khảo tài liệu Bootstrap để hiểu cách các thành phần này hoạt động và những tính năng mà chúng cung cấp

Ví dụ từ Creative Tim

Material Dashboard là mẫu Quản trị viên Material Bootstrap 4 miễn phí có thiết kế bắt mắt, các thành phần dễ sử dụng và plugin của bên thứ ba được thiết kế để hoạt động hoàn hảo với các thành phần khác. Xem tại đây Trang tải xuống và Xem trước trực tiếp.

Bạn có thể tìm thấy các mẫu và chủ đề Bootstrap tương tự, dễ tích hợp từ Creative Tim tại đây.

Sự kết luận

Bạn có thể thường lo lắng về câu hỏi làm thế nào để bắt đầu với Bootstrap. Tuy nhiên, hãy yên tâm rằng việc nhập và thêm Bootstrap vào HTML là một quá trình khá đơn giản và bạn có thể dễ dàng sử dụng Bootstrap để tận hưởng các thuộc tính và tính năng bổ sung trên các tệp HTML của mình một cách nhanh chóng.

Ngoài ra, nếu bạn từng thắc mắc - Bootstrap có chết vào năm 2022 không? . Vâng, nó không phải là. hàng triệu nhà phát triển sử dụng nó; . (Nguồn)

Phiên bản Bootstrap nào là tốt nhất?

Lớp nào sau đây trong Bootstrap được sử dụng để tạo menu thả xuống?

Chúng tôi đã sử dụng thành phần Bootstrap nào sau đây để hiển thị vị trí của người dùng trên trang web?

Lớp nào sau đây trong Bootstrap được sử dụng để tạo nhãn?