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
1 hoặcMy 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 tinMy 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 BootstrapMy 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ụngMy Project ...
1 cho mục đích học tậpMy Project ...
Các tệp khác trong thư mục
css
, như
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ìnhMy Project ...
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ệpSau 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àoNhư 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 .zip
0 đã tải xuống vào thư mục con
My Project
...
9. Chúng tôi sẽ sử dụng .zip
0 thay vì .zip
3, 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