Liên kết bootstrap 4

Bạn có thể bắt đầu sử dụng Bootstrap 4 trong trang web của mình bằng cách đưa nó vào từ CDN (Mạng phân phối nội dung) hoặc tải xuống từ getbootstrap. com

Sử dụng CDN

Bootstrap 4 có thể được sử dụng trong trang web bằng cách đưa nó vào từ Mạng phân phối nội dung

Sử dụng CDN CSS và JS của Bootstrap được biên dịch bên dưới trong dự án của bạn

Bao gồm các phiên bản CDN của jQuery và Popper. js (Bootstrap 4 sử dụng jQuery và Popper. js để sử dụng các thành phần JavaScript như phương thức, chú giải công cụ, cửa sổ bật lên, v.v.) trước JavaScript Bootstrap được rút gọn, nếu bạn đang sử dụng phiên bản JavaScript đã biên dịch

Sau đây là một số thành phần yêu cầu jQuery −

• Được sử dụng cho các cảnh báo có thể đóng

• Chuyển đổi trạng thái bằng cách sử dụng các nút và hộp kiểm/nút radio và thu gọn để chuyển đổi nội dung

• Băng chuyền cho các trang trình bày, điều khiển và chỉ báo

• Danh sách thả xuống (sử dụng Popper. js để có vị trí hoàn hảo)

• Mở và đóng Modals

• Để thu gọn Navbar

• Chú giải công cụ và cửa sổ bật lên (sử dụng Popper. js để có vị trí hoàn hảo)

Đang tải xuống Bootstrap 4

Bạn có thể tải xuống Bootstrap 4 từ https. //getbootstrap. com/docs/4. 1/bắt đầu/tải xuống/. Khi bạn nhấp vào liên kết này, bạn sẽ thấy một màn hình như hình bên dưới -

Ở đây bạn có thể thấy hai nút -

• Tải xuống - Nhấp vào đây, bạn có thể tải xuống các phiên bản CSS và JavaScript được biên dịch sẵn và rút gọn của Bootstrap. Không có tài liệu hoặc tệp mã nguồn gốc nào được bao gồm

• Nguồn tải xuống - Nhấp vào đây, bạn có thể tải các tệp tài liệu và mã nguồn JavaScript và Bootstrap SCSS mới nhất

Để hiểu rõ hơn và dễ sử dụng, chúng tôi sẽ sử dụng phiên bản Bootstrap được biên dịch sẵn trong suốt hướng dẫn. Khi các tệp được tuân thủ và thu nhỏ, bạn không cần phải bận tâm mỗi lần bao gồm các tệp riêng biệt cho chức năng riêng lẻ

Cấu trúc tệp

Bootstrap 4 được biên dịch sẵn

Khi phiên bản đã biên dịch Bootstrap 4 được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp/thư mục sau –

Như bạn có thể thấy, có CSS ​​và JS được biên dịch (bootstrap. *), cũng như CSS và JS được biên dịch và rút gọn (bootstrap. tối thiểu. *)

Mã nguồn Bootstrap 4

Nếu bạn đã tải xuống mã nguồn Bootstrap 4, thì cấu trúc tệp sẽ như sau -

• Các tệp bên dưới js/ và scss/ là mã nguồn cho Bootstrap CSS và JavaScript

• Thư mục dist/ bao gồm mọi thứ được liệt kê trong phần tải xuống được biên dịch trước ở trên

• Tài liệu/ví dụ/, bao gồm mã nguồn cho tài liệu Bootstrap và ví dụ về cách sử dụng Bootstrap

  Bootstrap là một trong những khung CSS, HTML và JavaScript phổ biến nhất hiện có. Không cần phải nói, câu hỏi làm thế nào để thêm bootstrap vào HTML chắc hẳn đã xuất hiện trong đầu bạn. Hướng dẫn từng bước này giải thích các phương pháp khác nhau mà bạn có thể sử dụng để dễ dàng liên kết Bootstrap trong HTML hoặc nhập Bootstrap vào HTML, tùy thuộc vào cách bạn muốn tích hợp Bootstrap vào trang web của mình

  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à đưa 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 đây, 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 phần tử 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.

  Phần 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 quy 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)

  Làm cách nào để liên kết Bootstrap 4 trong HTML ngoại tuyến?

  Một cách khác để nhập Bootstrap vào HTML là tải trực tiếp các tệp cục bộ xuống 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/

  Liên kết Bootstrap là gì?

  Bootstrap là gì? . Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác, cũng như các plugin JavaScript tùy chọn. a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

  Làm cách nào để liên kết Bootstrap CDN trong HTML?

  Cách sử dụng liên kết Bootstrap trên máy chủ CDN? .

  Xây dựng tệp HTML cơ bản. Bạn có thể sử dụng trình chỉnh sửa mã ưa thích của mình để tạo tệp. .

  Chuyển đổi tệp thành mẫu Bootstrap. Bao gồm các tệp Bootstrap CSS CDN và Bootstrap JS CDN cũng như Popper và Bootstrap jQuery thông qua các liên kết CDN của chúng. .

  Lưu và xem tệp

  Làm cách nào để liên kết tệp CSS trong Bootstrap?

  Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của mình. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và một tệp HTML mới nơi bạn sẽ tải Bootstrap . Sau đó, bạn có thể sử dụng các mẫu Bootstrap để thêm các phần tử giao diện vào trang.