Tôi có nên sử dụng CDN cho Bootstrap không?

Thiết kế web đáp ứng là tạo ra các trang web tự động điều chỉnh để trông đẹp mắt trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn

Ví dụ Bootstrap

Trang Bootstrap đầu tiên của tôi

Thay đổi kích thước trang phản hồi này để xem hiệu ứng

 

   

     

Cột 1

Lorem ipsum dolor

   

   

     

Cột 2

Lorem ipsum dolor

   

   

     

Cột 3

Lorem ipsum dolor

   

 

Tự mình thử »

---

Lịch sử Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub

Vào tháng 6 năm 2014 Bootstrap là No. 1 dự án trên GitHub

---

Tại sao nên sử dụng Bootstrap?

Ưu điểm của Bootstrap

• dễ sử dụng. Bất kỳ ai chỉ có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
• tính năng đáp ứng. CSS đáp ứng của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn
• Cách tiếp cận đầu tiên trên thiết bị di động. Trong Bootstrap 3, các kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi
• Tính tương thích của trình duyệt web. Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)

---

Phiên bản Bootstrap

Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;

Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ

Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery

Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng

Lấy Bootstrap ở đâu?

Có hai cách để bắt đầu sử dụng Bootstrap trên trang web của riêng bạn

Bạn có thể

• Tải xuống Bootstrap từ getbootstrap. com
• Bao gồm Bootstrap từ CDN

---

Đang tải xuống Bootstrap

Nếu bạn muốn tự download và host Bootstrap thì vào getbootstrap. com, và làm theo hướng dẫn ở đó

---

---

Bootstrap CDN

Nếu bạn không muốn tự tải xuống và lưu trữ Bootstrap, bạn có thể đưa nó vào từ CDN (Mạng phân phối nội dung)

MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Bạn cũng phải bao gồm jQuery

MaxCDN

Một lợi thế của việc sử dụng Bootstrap CDN
Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập trang web khác. Do đó, nó sẽ được tải từ bộ đệm khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng một khi người dùng yêu cầu một tệp từ nó, nó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn

jQuery
Bootstrap sử dụng các plugin jQuery cho JavaScript (như phương thức, chú giải công cụ, v.v.). Tuy nhiên nếu bạn chỉ dùng phần CSS của Bootstrap thì không cần jQuery

---

Tạo trang web đầu tiên với Bootstrap

1. Thêm loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5

Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác

 
   

 

2. Bootstrap 3 ưu tiên thiết bị di động

Bootstrap 3 được thiết kế để tương thích với các thiết bị di động. Kiểu đầu tiên trên thiết bị di động là một phần của khung cốt lõi

Để đảm bảo hiển thị chính xác và thu phóng cảm ứng, hãy thêm thẻ sau vào bên trong phần tử

Phần width=device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị)

Phần initial-scale=1 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên

3. Hộp đựng

Bootstrap cũng yêu cầu phần tử chứa để bọc nội dung trang

Có hai lớp container để lựa chọn

1. Lớp .container cung cấp vùng chứa có chiều rộng cố định đáp ứng
2. Lớp .container-fluid cung cấp một thùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của khung nhìn

---

Hai trang Bootstrap cơ bản

Ví dụ sau đây hiển thị mã cho trang Bootstrap cơ bản (với vùng chứa chiều rộng cố định đáp ứng)

Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và một trang bắt đầu mẫu

Bắt đầu nhanh

Tìm cách nhanh chóng thêm Bootstrap vào dự án của bạn? . Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn?

CSS

Sao chép-dán biểu định kiểu vào trước tất cả các biểu định kiểu khác của bạn để tải CSS của chúng tôi

JS

Nhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, họ yêu cầu jQuery, Popper. js và các plugin JavaScript của riêng chúng tôi. Đặt sau

Tò mò không biết thành phần nào yêu cầu jQuery, JS và Popper của chúng tôi một cách rõ ràng. js? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu

bootstrap.bundle.js và bootstrap.bundle.min.js của chúng tôi bao gồm Popper, nhưng không phải jQuery. Để biết thêm thông tin về những gì có trong Bootstrap, vui lòng xem phần của chúng tôi

Hiển thị các thành phần yêu cầu JavaScript

• Cảnh báo sa thải
• Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
• Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
• Thu gọn để chuyển đổi mức độ hiển thị của nội dung
• Danh sách thả xuống để hiển thị và định vị (cũng yêu cầu Popper. js)
• Các phương thức để hiển thị, định vị và hành vi cuộn
• Thanh điều hướng để mở rộng plugin Thu gọn của chúng tôi nhằm triển khai hành vi phản hồi
• Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper. js)
• Scrollspy cho hành vi cuộn và cập nhật điều hướng

Mẫu dành cho người mới bắt đầu

Đảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem cho các hành vi phản hồi phù hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

Đó là tất cả những gì bạn cần cho các yêu cầu trang tổng thể. Truy cập tài liệu Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn

Toàn cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng mà bạn cần lưu ý khi sử dụng nó, tất cả chúng hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào

loại tài liệu HTML5

Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng không hoàn chỉnh vui nhộn, nhưng việc bao gồm nó sẽ không gây ra bất kỳ trục trặc đáng kể nào

  ...

Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn

Bạn có thể xem một ví dụ về điều này trong thực tế

kích thước hộp

Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu box-sizing từ

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

0 thành

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

1. Điều này đảm bảo rằng

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

2 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của Google

Trong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

3 và

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

4—tất cả sẽ kế thừa box-sizing đã chỉ định cho

  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

6 đó

Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS

khởi động lại

Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các cài đặt lại có chủ ý hơn một chút cho các thành phần HTML phổ biến

Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này

Sử dụng CDN hay local tốt hơn?

Làm cách nào để sử dụng Bootstrap mà không cần CDN?

Sử dụng CDN trong sản xuất có ổn không?

Bootstrap CDN nghĩa là gì?