Cách đơn giản để cài đặt Bootstrap: 10 bước (có hình ảnh)

Mục lục:

Cách đơn giản để cài đặt Bootstrap: 10 bước (có hình ảnh)
Cách đơn giản để cài đặt Bootstrap: 10 bước (có hình ảnh)

Video: Cách đơn giản để cài đặt Bootstrap: 10 bước (có hình ảnh)

Video: Cách đơn giản để cài đặt Bootstrap: 10 bước (có hình ảnh)
Video: Cách tải video TikTok không có logo cực đơn giản 2024, Có thể
Anonim

WikiHow này hướng dẫn bạn cách tải tệp Bootstrap xuống máy tính và liên kết chúng với văn bản HTML để sử dụng các phần tử Bootstrap trong mã của bạn. Sau khi tải xuống và liên kết các tệp Bootstrap, bạn có thể bắt đầu sử dụng tất cả các biểu định kiểu và các phần tử JavaScript của Bootstrap trong thiết kế web của mình.

Các bước

Cài đặt Bootstrap Bước 1
Cài đặt Bootstrap Bước 1

Bước 1. Mở trang web Bootstrap trong trình duyệt internet của bạn

Nhập https://getbootstrap.com vào thanh địa chỉ và nhấn ↵ Enter hoặc ⏎ Quay lại trên bàn phím của bạn.

Cài đặt Bootstrap Bước 2
Cài đặt Bootstrap Bước 2

Bước 2. Nhấp vào nút Tải xuống

Thao tác này sẽ mở trang "Tải xuống".

Cài đặt Bootstrap Bước 3
Cài đặt Bootstrap Bước 3

Bước 3. Nhấp vào nút Tải xuống bên dưới "CSS và JS đã biên dịch

" Thao tác này sẽ tải xuống các tệp Bootstrap hoàn chỉnh vào máy tính của bạn dưới dạng tệp lưu trữ ZIP.

Nếu bạn được nhắc, hãy chọn vị trí lưu cho tệp ZIP Bootstrap

Cài đặt Bootstrap Bước 4
Cài đặt Bootstrap Bước 4

Bước 4. Giải nén các tệp từ kho lưu trữ ZIP

Tìm tệp ZIP bạn vừa tải xuống và nhấp đúp vào tệp để giải nén tất cả các tệp trong đó vào cùng một thư mục.

  • Thao tác này sẽ giải nén hai thư mục có tên " css" và " js."
  • Nếu ứng dụng giải nén của bạn không tự động giải nén tệp, hãy xem bài viết này để xem tất cả các cách bạn có thể xuất tệp lưu trữ ZIP.
Cài đặt Bootstrap Bước 5
Cài đặt Bootstrap Bước 5

Bước 5. Di chuyển các thư mục đã giải nén vào cùng thư mục với các tệp HTML trang web của bạn

Mở thư mục chứa tất cả các tệp HTML của trang web của bạn và kéo " css" và " js"ở đây để chuyển chúng vào cùng một thư mục với tài liệu trang web của bạn.

Bây giờ bạn có thể liên kết các tệp với tệp HTML của mình và bắt đầu sử dụng Bootstrap trong mã của bạn

Cài đặt Bootstrap Bước 6
Cài đặt Bootstrap Bước 6

Bước 6. Nhấp chuột phải vào tệp HTML bạn muốn sử dụng với Bootstrap

Bạn có thể sử dụng Bootstrap chỉ trong một trong các tệp HTML của mình hoặc tất cả chúng.

Cài đặt Bootstrap Bước 7
Cài đặt Bootstrap Bước 7

Bước 7. Di chuột qua Mở bằng trên menu chuột phải

Một menu phụ sẽ bật lên với các ứng dụng tương thích.

Cài đặt Bootstrap Bước 8
Cài đặt Bootstrap Bước 8

Bước 8. Chọn chương trình soạn thảo văn bản của bạn

Thao tác này sẽ mở tệp HTML đã chọn trong trình soạn thảo văn bản của bạn.

Bạn có thể sử dụng một trình soạn thảo văn bản đơn giản như Sổ tay hoặc Chỉnh sửa văn bản cũng như một trình soạn thảo mã chuyên dụng như Atom (https://atom.io) hoặc Coda (https://panic.com/coda).

Cài đặt Bootstrap Bước 9
Cài đặt Bootstrap Bước 9

Bước 9. Thêm các liên kết Bootstrap vào tiêu đề tệp HTML của bạn

Trước khi sử dụng mã Bootstrap trong HTML, bạn sẽ phải nhập hoặc dán các dòng bên dưới vào tiêu đề mã của mình:

Nếu bạn muốn liên kết và sử dụng một số tệp khác từ thư mục css và js, chỉ cần thêm các dòng mới vào tiêu đề và thay thế các phần css / bootstrap.css và js / bootstrap.js bằng tên của tệp bạn muốn liên kết

Cài đặt Bootstrap Bước 10
Cài đặt Bootstrap Bước 10

Bước 10. Kiểm tra vị trí của các liên kết Bootstrap của bạn trong mã

Trong tiêu đề của HTML, cả hai dòng phải nằm giữa dòng và dòng.

  • Khi bạn thêm các dòng này vào tiêu đề, bạn có thể bắt đầu sử dụng các phần tử Bootstrap trong tệp HTML này.
  • Bạn có thể tìm thấy danh sách đầy đủ tất cả các phần tử Bootstrap tại https://getbootstrap.com/docs/4.3/getting-started/introduction. Chỉ cần nhấp vào bất kỳ danh mục nào như Bố trí hoặc Các thành phần trên menu bên trái.
  • Sau khi cài đặt Bootstrap, bạn có thể chèn hoặc sao chép / dán bất kỳ đoạn mã nào từ đây vào mã của riêng bạn.

Đề xuất: