Buzz
Bootstrap CDN là gì?
Lợi ích của việc sử dụng Bootstrap qua CDN
Dễ sử dụng và thao tác
Ưu điểm đầu tiên mà nhiều người dùng yêu thích nhất là sự dễ sử dụng của Bootstrap qua CDN. Khi sử dụng nó, bạn có thể dễ dàng kết hợp HTML, JavaScript, CSS với IDE hoặc Editor. Điều này giúp bạn dễ dàng tùy chỉnh Framework theo ý muốn mà không gặp khó khăn.
Tối ưu tốc độ tải trang
Khi sử dụng Bootstrap CDN, tốc độ tải trang sẽ nhanh hơn so với việc tải từ máy chủ gần đó. Điều này giúp người dùng truy cập vào trang web nhanh chóng hơn.
Giảm chi phí băng thông
Dễ dàng thay đổi bố cục lưới
Nhiều tài nguyên được cung cấp miễn phí
Có thể tích hợp các plugin JavaScript khác nhau
Hướng dẫn chi tiết về cách sử dụng Bootstrap qua CDN
Dưới đây Mytour sẽ hướng dẫn bạn cách để liên kết Bootstrap từ máy chủ CDN và cách sử dụng Bootstrap và Bootstrap 5.
Liên kết Bootstrap từ máy chủ CDN
Bước 3: Sau khi điều chỉnh xong, bạn cần lưu file vào máy tính của mình. Lưu ý cần lưu tệp có đuôi mở rộng là “html”. Một số trình soạn thảo mặc định lưu file dưới dạng “.txt”. Bạn có thể lưu ví dụ là “bootstrap-template.html” chẳng hạn.
Sau khi đã liên kết xong, bạn có thể bắt đầu sử dụng Bootstrap qua CDN với các thao tác sau đây.
Sử dụng Bootstrap CDN
Bước 1: Thêm đoạn mã sau vào phần đầu của tệp HTML của bạn
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”>
Bước 2: Sao chép các đoạn mã sau vào phần cuối của tệp HTML của bạn
<script src=”https://code.jquery.com/jquery-.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/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>
Sử dụng Bootstrap 5 thông qua CDN
Nếu bạn không muốn phụ thuộc vào jQuery, bạn có thể sử dụng Bootstrap CDN 5 trong quá trình phát triển mã nguồn của mình.
Bước 1: Thêm đoạn mã sau vào phần đầu của tệp HTML của bạn
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css” integrity=”sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I” crossorigin=”anonymous”>
Bước 2: Tiếp theo, bạn thêm 2 đoạn mã JavaScript sau vào phần cuối của tệp HTML để hoàn tất thẻ <body>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/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>
Đơn giản và hiệu quả
Đa dạng, có nhiều công cụ thiết kế
Bootstrap qua CDN cung cấp nhiều công cụ thiết kế cho phép người dùng sáng tạo với các kích thước và màu sắc khác nhau, linh hoạt trên cả điện thoại và máy tính để bàn. Bên cạnh thiết kế, bạn cũng có thể mua các mẫu giao diện sẵn có và tùy chỉnh lại theo nhu cầu của mình.
Hỗ trợ tốt trên nhiều trình duyệt
Dễ dàng tùy chỉnh
Cộng đồng sử dụng rộng lớn
Các thắc mắc phổ biến khi sử dụng Bootstrap CDN
Lời cam kết
Đây là bài viết giới thiệu về Bootstrap CDN. Nội dung này có hữu ích với bạn không? Hãy để lại bình luận phía dưới nhé. Mytour sẽ tiếp tục cập nhật thông tin trong thời gian sắp tới. Hãy theo dõi trang tin tức Mytour để cập nhật những thông tin công nghệ mới nhất. Và đừng quên truy cập kênh Mytour để cập nhật nhiều hơn những tin tức công nghệ nổi bật.
