Bootstrap CDN là gì?

Chí Vỹ

Bootstrap CDN là hình thức phân phối framework CSS phổ biến nhất trên thế giới bằng cách dùng mạng truyền tải nội dung. Nó là một nhóm các máy chủ được phân phối theo địa lý. Chúng hoạt động cùng nhau để truyền tải nội dung Internet thật nhanh.

CDN cung cấp một cách nhanh chóng để tải các tệp qua Internet, chẳng hạn như HTML, JavaScript, CSS, ảnh và video. Với Bootstrap, file stylesheet và javascript Bootstrap chính được truyền qua mạng CDN.

Mặc định, Bootstrap khuyến khích dùng mạng CDN của Stackpath - một mạng đã cấp “năng lượng” cho hơn 8 triệu web trên toàn cầu.

Lợi ích khi dùng Bootstrap qua CDN

Cải thiện thời gian tải web - Vì file javascript và stylesheet từ Bootstrap sẽ được tải từ một server gần đó, dựa trên vị trí địa lý của khách ghé thăm trang web, thời gian tải sẽ được giảm đi. Giả sử một lượt truy cập tới từ Nhật. Nếu file Bootstrap được lưu trữ ở Mỹ, thời gian tải sẽ chậm hơn so với việc bạn có CDN với các server ở Châu Á.
Giảm chi phí băng thông - Vì CDN Bootstrap đã được hơn 8 triệu web trên thế giới sử dụng, rất có thể một tỷ lệ phần trăm đáng kể truy cập web sẽ được “cache” trong file Bootstrap ở trình duyệt nội bộ. Điều đó khiến web chạy ngày càng nhanh hơn.
Cải thiện bảo mật web - Nội dung được truyền tải qua CDN có thể bảo vệ web của bạn tốt hơn trước việc giảm thiểu DDoS.

Cách dùng Bootstrap CDN

Để bắt đầu dùng Bootstrap qua CDN chính thức được StackPath cung cấp, toàn bộ việc bạn cần làm là bao gồm file stylesheet và javascript dưới đây. Bao gồm file CSS sau trong thẻ <head> của HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Sau đó, bao gồm tệp Javascript của jQuery, Popper.js và Bootstrap trước khi kết thúc thẻ <body> của bạn:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Cách dùng Bootstrap 5 qua CDN

Bạn nên bắt đầu dùng Bootstrap 5 đã loại bỏ phần phụ thuộc jQuery. Thêm file stylesheet sau vào tag <head> của mẫu HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Cuối cùng, thêm hai fie JavaScript sau trước khi kết thúc tag <body>:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Trên đây là những điều bạn cần biết về Bootstrap CDN. Hi vọng bài viết hữu ích với các bạn.

Thứ Tư, 04/01/2023 16:39

5 ★ 1 👨 454

#Bootstrap