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

Ai đó có thể vui lòng giải thích điều này cho tôi. Làm cách nào để ai đó sử dụng Bootstrap một cách độc lập bên ngoài không gian làm việc của codecademy? . Câu hỏi chính của tôi là tôi có thể sử dụng Bootstrap mà không cần tải tệp xuống không?

Trong bài học này, chúng ta sẽ hướng dẫn cách tải xuống và cài đặt Bootstrap vào một dự án. Chúng tôi cũng sẽ thảo luận về các phiên bản Bootstrap và cách chúng tác động đến cách chúng tôi tải xuống và tìm thông tin về Bootstrap. Có nhiều cách để tải xuống Bootstrap. Chúng tôi sẽ giải quyết hai cách tiếp cận đơn giản nhất ở đây

• Tải xuống mã nguồn Bootstrap và sau đó thêm tệp trực tiếp vào dự án
• Sử dụng mạng phân phối nội dung (CDN) để liên kết với Bootstrap trực tuyến

Trong các khóa học trong tương lai, chúng ta sẽ khám phá các cách bổ sung để tích hợp Bootstrap và các khuôn khổ khác vào một dự án. Trong bài học tiếp theo, chúng ta sẽ tạo một dự án ví dụ và tìm hiểu cách sử dụng Bootstrap

lập phiên bản

---

Bạn có thể đã quen thuộc với khái niệm lập phiên bản khi sử dụng máy tính và điện thoại. các hệ điều hành (phần mềm) mới được phát hành thường xuyên và các phiên bản điện thoại (phần cứng) mới cũng vậy. Chà, nhiều thư viện, khung và bộ công cụ tuân theo cùng một quy trình phát hành phần mềm theo các phiên bản để tách một trạng thái riêng biệt của phần mềm khỏi các trạng thái sau đó. Số phiên bản càng cao thì càng mới. Một mục tiêu của lập phiên bản là cho phép các khách hàng hiện tại đang sử dụng phiên bản phần mềm cũ hơn tiếp tục sử dụng phiên bản đó, ngay cả khi các phiên bản mới hơn được phát hành

Sự khác biệt giữa phiên bản 1 (phiên bản cũ hơn) và phiên bản 2 (phiên bản mới hơn) của một phần mềm có thể là bất cứ thứ gì. tên của các công cụ, những công cụ nào được cung cấp, cách sử dụng hoặc định cấu hình các công cụ đó, v.v. Do đó, điều rất quan trọng đối với chúng tôi là phải chú ý đến số phiên bản của phần mềm mà chúng tôi đang sử dụng để chúng tôi có thể sử dụng nó đúng cách và tìm đúng tài liệu trực tuyến

Các trang web chọn nâng cấp lên các phiên bản mới hơn của khung (hoặc các công cụ khác) vì một số lý do. khi có các bản sửa lỗi cho các sự cố bảo mật, khi có các cải tiến về hiệu suất, để sử dụng các tính năng mới hoặc khi công cụ đã hết "tuổi thọ". Khi một phiên bản phần mềm hết hạn sử dụng, điều đó có nghĩa là không có tính năng mới nào được thêm vào phiên bản đó và không có nhà phát triển nào bảo trì phiên bản đó, bao gồm cả việc thực hiện các bản sửa lỗi bảo mật. Thường có thể sử dụng phần mềm đã hết hạn sử dụng, nhưng điều đó không được khuyến khích

Mặc dù có rất nhiều lý do chính đáng để cập nhật lên số phiên bản mới nhất, nhưng việc nâng cấp phiên bản có thể tốn kém về thời gian và tiền bạc. Thông thường khi số phiên bản của một công cụ được nâng cấp, các công cụ khác cũng cần được nâng cấp lên số phiên bản tương thích. Khi có những thay đổi đột ngột giữa một phiên bản và phiên bản mới nhất, điều đó có nghĩa là mã của bạn sẽ bị hỏng khi bạn nâng cấp lên phiên bản mới nhất trừ khi bạn cập nhật mã của mình để phù hợp với tiêu chuẩn mới. Vì tất cả những lý do này, nhiều trang web không nâng cấp lên phiên bản mới nhất và đợi cho đến khi có lý do thuyết phục để nâng cấp

Điều này cũng đúng trong chương trình giảng dạy của chúng tôi. Chúng tôi thường không sử dụng số phiên bản mới nhất của công nghệ mà chúng tôi dạy, giống như hầu hết các công ty công nghệ. Kể từ cuối năm 2022, chúng tôi đang sử dụng phiên bản 5. 2 của Bootstrap, nhưng vào thời điểm bạn đang đọc phần này, Bootstrap có thể ở phiên bản mới hơn. Tùy thuộc vào bạn nếu bạn muốn thử sử dụng phiên bản mới hơn trong các dự án của riêng mình. Tuy nhiên, bạn phải luôn lưu ý rằng có thể có những thay đổi đột phá (chẳng hạn như các công cụ hoàn toàn khác) giữa phiên bản chúng tôi sử dụng trong LearnHowToProgram. com chương trình giảng dạy và phiên bản mới hơn Bootstrap

Đang tải xuống Bootstrap

---

Cách đầu tiên chúng ta có thể thêm Bootstrap vào một dự án là tải xuống tất cả các tệp cần thiết và thêm chúng vào dự án của chúng ta. Sau đó, chúng tôi sẽ liên kết với chúng trong HTML giống như chúng tôi liên kết với tệp CSS của mình

Tải xuống tệp từ trang web của Bootstrap

Chúng tôi hiện đang sử dụng Bootstrap phiên bản 5. 2, có thể tải xuống từ Bootstrap 5. 2 trang tải xuống. Cuộn xuống phần có tiêu đề "CSS và JS đã biên dịch" và nhấn nút tải xuống

Thao tác này sẽ tải xuống tệp .zip. Giải nén tệp bằng công cụ giải nén máy tính của bạn và sau đó xem bên trong thư mục. Bạn sẽ thấy một cái gì đó tương tự như thế này

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

Có hai thư mục. css và js

• Thư mục css chứa các tệp liên quan đến Bootstrap CSS. Chúng tôi có thể sử dụng

  
  
    
    
    My Project
  
  ...
  

  1 hoặc

  
  
    
    
    My Project
  
  ...
  

  2 trong các dự án của mình để truy cập tất cả CSS của Bootstrap. Đây là sự khác biệt giữa hai tập tin

  • 
    
      
      
      My Project
    
    ...
    

    1 là phiên bản lớn hơn của mã nguồn. Nếu chúng tôi mở tệp này, chúng tôi sẽ có thể đọc tất cả các quy tắc CSS cho Bootstrap, điều này có thể rất hữu ích khi chúng tôi mới tìm hiểu về Bootstrap — và khi chúng tôi muốn tìm hiểu cách ghi đè quy tắc Bootstrap

  • 
    
      
      
      My Project
    
    ...
    

    2 là một tệp được rút gọn, có nghĩa là mã nguồn đã được nén để máy đọc hiệu quả hơn. Tuy nhiên, nó không còn ở dạng con người có thể đọc được nữa. Điều này rất tốt cho sản xuất (mã được triển khai trực tuyến) vì nó nhanh hơn, nhưng lại không tốt cho quá trình phát triển (mã đang trong quá trình xây dựng — đó chính xác là những gì chúng tôi đang làm). Chúng tôi khuyên bạn nên sử dụng

    
    
      
      
      My Project
    
    ...
    

    1 cho mục đích học tập

• Các tệp khác trong thư mục css, như

  
  
    
    
    My Project
  
  ...
  

  2, chỉ chứa CSS cho một tính năng Bootstrap cụ thể. Điều này cho phép các nhà phát triển chỉ muốn sử dụng chức năng Lưới của Bootstrap để đưa tài nguyên Bootstrap nhỏ hơn vào dự án của họ. Chúng tôi sẽ cố gắng đưa tất cả Bootstrap vào các dự án của mình

• Thư mục js chứa mã JavaScript cần thiết cho hoạt ảnh, cửa sổ bật lên, cảnh báo và các hiệu ứng hình ảnh khác, như được mô tả tại đây. Chúng ta sẽ không học cách sử dụng JavaScript cho đến phần tiếp theo của khóa học, tuy nhiên, chúng ta sẽ học cách tải Bootstrap's JavaScript (JS) vào HTML của mình để chúng ta có thể sử dụng các thành phần Bootstrap sử dụng JS. Tiếp tục đọc để tìm hiểu làm thế nào để làm điều này

Thêm một bản sao CSS của Bootstrap đã tải xuống vào một dự án

Để tích hợp Bootstrap vào dự án của chúng tôi, chúng tôi chỉ cần di chuyển

  
  
  My Project

...

1 vào thư mục css của dự án mà chúng tôi đang thực hiện. Đây sẽ là thời điểm tốt để thực hành lệnh

  
  
  My Project

...

6 trong thiết bị đầu cuối, mặc dù bạn cũng có thể kéo và thả tệp

Sau khi biểu định kiểu Bootstrap được đặt trong thư mục css của chúng ta, chúng ta cần liên kết với biểu định kiểu đó trong các thẻ của trang web, giống như chúng ta làm với biểu định kiểu của riêng mình

  
  
  My Project

...

Ghi chú. Khi bạn nhìn thấy dấu chấm lửng (

  
  
  My Project

...

8) trong đoạn mã, điều đó có nghĩa là một phần của tệp đã bị bỏ qua trong ví dụ. Điều này giữ cho các ví dụ ngắn gọn, giúp dễ dàng xác định mã mới đã được thêm vào

Như chúng ta thấy ở đây, chúng ta có thể liên kết đến nhiều biểu định kiểu. Tuy nhiên, điều rất quan trọng là biểu định kiểu của chúng ta được liệt kê sau biểu định kiểu Bootstrap. Bằng cách này, các quy tắc trong biểu định kiểu của chúng ta sẽ ghi đè các quy tắc có cùng tên trong biểu định kiểu Bootstrap. Chúng tôi sẽ đề cập đến điều này hơn nữa trong một bài học trong tương lai

KHÔNG BẮT BUỘC. Thêm một bản sao JavaScript của Bootstrap đã tải xuống vào một dự án

Chúng tôi không cần biết JavaScript để định cấu hình các dự án của mình để sử dụng chức năng JavaScript dựng sẵn của Bootstrap. Điều này sẽ mở ra cơ hội cho chúng tôi sử dụng các công cụ Bootstrap có chứa hoạt ảnh, cửa sổ bật lên, cảnh báo và các hiệu ứng hình ảnh khác. Một ví dụ về thành phần Bootstrap sử dụng JavaScript là danh sách thả xuống. Để xem tất cả các thành phần Bootstrap sử dụng JavaScript,

Để bắt đầu, hãy tạo một thư mục con

  
  
  My Project

...

9 trong dự án của bạn. Sau đó di chuyển tệp .zip0 đã tải xuống vào thư mục con

  
  
  My Project

...

9. Chúng tôi sẽ sử dụng .zip0 thay vì .zip3, vì tệp đi kèm chứa tất cả các công cụ JavaScript (bao gồm cả thư viện JavaScript có tên là "Popper") để sử dụng bất kỳ thành phần Bootstrap nào sử dụng JavaScript

Làm cách nào để tải xuống Bootstrap ngoại tuyến?

Chúng tôi có thể sử dụng Bootstrap ngoại tuyến không?

Bootstrap có miễn phí không?

Cách dễ nhất để cài đặt Bootstrap trong dự án của bạn là gì?