Tìm hiểu về các trình duyệt và thiết bị, từ hiện đại đến cũ, được Bootstrap hỗ trợ, bao gồm các lỗi và lỗi đã biết cho từng trình duyệt
trình duyệt được hỗ trợ
Bootstrap 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. Trên Windows, chúng tôi hỗ trợ Internet Explorer 10-11 / Microsoft Edge
Các trình duyệt thay thế sử dụng phiên bản mới nhất của WebKit, Blink hoặc Gecko, dù trực tiếp hay thông qua API chế độ xem web của nền tảng, đều không được hỗ trợ rõ ràng. Tuy nhiên, Bootstrap (trong hầu hết các trường hợp) cũng sẽ hiển thị và hoạt động chính xác trong các trình duyệt này. Thông tin hỗ trợ cụ thể hơn được cung cấp dưới đây
Bạn có thể tìm thấy phạm vi trình duyệt được hỗ trợ của chúng tôi và các phiên bản của chúng trong .browserslistrc file của chúng tôi
# //github.com/browserslist/browserslist#readme >= 1% last 1 major version not dead Chrome >= 45 Firefox >= 38 Edge >= 12 Explorer >= 10 iOS >= 9 Safari >= 9 Android >= 4.4 Opera >= 30
Chúng tôi sử dụng Autoprefixer để xử lý hỗ trợ trình duyệt dự kiến thông qua các tiền tố CSS, sử dụng Browserslist để quản lý các phiên bản trình duyệt này. Tham khảo tài liệu của họ để biết cách tích hợp các công cụ này vào dự án của bạn
Thiêt bị di động
Nói chung, Bootstrap hỗ trợ các phiên bản mới nhất của các trình duyệt mặc định của mỗi nền tảng chính. Lưu ý rằng các trình duyệt proxy (chẳng hạn như Opera Mini, chế độ Turbo của Opera Mobile, UC Browser Mini, Amazon Silk) không được hỗ trợ
ChromeFirefoxSafariTrình duyệt Android & WebView Microsoft Edge AndroidĐược hỗ trợĐược hỗ trợN/Android v5. 0+ được hỗ trợHỗ trợiOSĐược hỗ trợĐược hỗ trợĐược hỗ trợN/AĐược hỗ trợWindows 10 MobileN/AN/AN/AN/AĐược hỗ trợTrình duyệt máy tính để bàn
Tương tự, các phiên bản mới nhất của hầu hết các trình duyệt máy tính để bàn đều được hỗ trợ
ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafariMacSupportedSupportedN/ASupportedSupportedSupportedWindowsSupportedSupportedSupported, IE10+SupportedSupportedNot supportedĐối với Firefox, ngoài bản phát hành ổn định thông thường mới nhất, chúng tôi cũng hỗ trợ phiên bản Bản phát hành hỗ trợ mở rộng (ESR) mới nhất của Firefox
Không chính thức, Bootstrap sẽ có giao diện và hoạt động đủ tốt trong Chromium và Chrome dành cho Linux, Firefox dành cho Linux và Internet Explorer 9, mặc dù chúng không được hỗ trợ chính thức
Để biết danh sách một số lỗi trình duyệt mà Bootstrap phải vật lộn với, hãy xem Bức tường lỗi trình duyệt của chúng tôi
trình duyệt web IE
Internet Explorer 10+ được hỗ trợ; . Xin lưu ý rằng một số thuộc tính CSS3 và phần tử HTML5 không được hỗ trợ đầy đủ trong IE10 hoặc yêu cầu các thuộc tính có tiền tố để có đầy đủ chức năng. Truy cập Tôi có thể sử dụng… để biết chi tiết về việc trình duyệt hỗ trợ các tính năng CSS3 và HTML5. Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3
Phương thức và danh sách thả xuống trên thiết bị di động
Hỗ trợ cho phần tử overflow: hidden; khá hạn chế trong iOS và Android. Cuối cùng, khi bạn cuộn qua đầu hoặc cuối phương thức trong trình duyệt của một trong hai thiết bị đó, nội dung sẽ bắt đầu cuộn. Xem lỗi Chrome #175502 (đã sửa trong Chrome v40) và lỗi WebKit #153852
Kể từ iOS 9. 2, trong khi một phương thức đang mở, nếu lần chạm đầu tiên của cử chỉ cuộn nằm trong ranh giới của một văn bản hoặc một
Và bây giờ là người mà tất cả các bạn đang chờ đợi. Chúc cả nhà cười sảng khoái. Cũng không hẳn, bởi vì không giống như một số ứng cử viên khác, Internet Explorer thực sự hỗ trợ @font-face (tất cả chỉ có ở. eot). Trên thực tế, nó đã hỗ trợ nó trong một thời gian, thậm chí IE6 cung cấp hỗ trợ đầy đủ
Tuy nhiên, ngoại trừ kiểu chữ, Internet Explorer hiển thị sự thiếu hỗ trợ rõ rệt cho hầu hết mọi loại tính năng nâng cao/tiến bộ. Hy vọng rằng nhóm IE sẽ có thể xem xét điều này trong một bản phát hành trong tương lai, nhưng tôi không có bất kỳ hy vọng nào
Quy tắc CSS tại @supports (transform-origin: 5% 5%) { } 0 cho phép bạn chỉ định các khai báo CSS phụ thuộc vào sự hỗ trợ của trình duyệt đối với các tính năng CSS. Sử dụng quy tắc này thường được gọi là truy vấn tính năng. Quy tắc phải được đặt ở cấp cao nhất trong mã của bạn hoặc được lồng vào bên trong bất kỳ mã nào khác
Trong JavaScript, có thể truy cập @supports (transform-origin: 5% 5%) { } 0 thông qua giao diện mô hình đối tượng CSS @supports (transform-origin: 5% 5%) { } 2
Quy tắc tại @supports (transform-origin: 5% 5%) { } 0 bao gồm một khối các câu lệnh với điều kiện hỗ trợ. Điều kiện hỗ trợ là một tập hợp của một hoặc nhiều cặp tên-giá trị (e. g. , @supports (transform-origin: 5% 5%) { } 4)
@supports (<supports-condition>) { /* If the condition is true, use the CSS in this block. */ }
Các điều kiện có thể được kết hợp bởi các liên từ (@supports (transform-origin: 5% 5%) { } 5), các từ tách biệt (@supports (transform-origin: 5% 5%) { } 6), và/hoặc phủ định (@supports (transform-origin: 5% 5%) { } 7)
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ }
Thứ tự ưu tiên của các toán tử có thể được xác định bằng dấu ngoặc đơn. Các điều kiện hỗ trợ có thể sử dụng cú pháp khai báo @supports (transform-origin: 5% 5%) { } 4 hoặc cú pháp @supports (transform-origin: 5% 5%) { } 9. Các phần sau đây mô tả việc sử dụng từng loại điều kiện hỗ trợ
Cú pháp khai báo kiểm tra xem trình duyệt có hỗ trợ khai báo @supports (transform-origin: 5% 5%) { } 4 đã chỉ định không. Khai báo phải được bao quanh bởi dấu ngoặc đơn. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ biểu thức @supports selector(h2 > p) { } 1
@supports (transform-origin: 5% 5%) { }
Cú pháp hàm kiểm tra xem trình duyệt có hỗ trợ các giá trị hoặc biểu thức trong hàm không. Các chức năng được hỗ trợ trong cú pháp chức năng được mô tả trong các phần sau
@supports selector(h2 > p) { } 2 Thử nghiệm
Hàm này đánh giá xem trình duyệt có hỗ trợ cú pháp bộ chọn đã chỉ định hay không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ bộ kết hợp con
@supports selector(h2 > p) { }
@supports selector(h2 > p) { } 3
Hàm này kiểm tra xem trình duyệt có hỗ trợ công nghệ phông chữ được chỉ định để bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ @supports selector(h2 > p) { } 4
@supports font-tech(color-COLRv1) { }
Bảng dưới đây mô tả các công nghệ phông chữ có sẵn có thể được truy vấn bằng chức năng này
TechnologySupports@supports selector(h2 > p) { } 5Multi-colored glyphs via COLR version 0 table@supports selector(h2 > p) { } 6Multi-colored glyphs via COLR version 1 table@supports selector(h2 > p) { } 7SVG multi-colored tables@supports selector(h2 > p) { } 8Standard bitmap graphics tables@supports selector(h2 > p) { } 9Color bitmap data tables@supports font-tech(color-COLRv1) { } 0OpenType @supports font-tech(color-COLRv1) { } 1 and @supports font-tech(color-COLRv1) { } 2 tables@supports font-tech(color-COLRv1) { } 3TrueType @supports font-tech(color-COLRv1) { } 4 and @supports font-tech(color-COLRv1) { } 5 tables@supports font-tech(color-COLRv1) { } 6Graphite features, namely @supports font-tech(color-COLRv1) { } 7, @supports font-tech(color-COLRv1) { } 8 , @supports font-tech(color-COLRv1) { } 9 , @supports font-format(opentype) { } 0, and @supports font-format(opentype) { } 1 tables@supports font-format(opentype) { } 2Incremental font . @supports font-format(opentype) { } 4Bảng màu phông chữ bằng cách sử dụng @supports font-format(opentype) { } 5 để chọn một trong nhiều bảng màu trong phông chữ@supports font-format(opentype) { } 6
Hàm này kiểm tra xem trình duyệt có hỗ trợ định dạng phông chữ được chỉ định cho bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ định dạng phông chữ @supports font-format(opentype) { } 7
@supports font-format(opentype) { }
Bảng sau đây mô tả các định dạng có sẵn có thể được truy vấn bằng chức năng này
FormatDescriptionFile extensions@supports font-format(opentype) { } 8OpenType Collection@supports font-format(opentype) { } 9, @supports not (transform-origin: 10em 10em 10em) { } 0@supports not (transform-origin: 10em 10em 10em) { } 1Embedded OpenType@supports not (transform-origin: 10em 10em 10em) { } 2@supports font-format(opentype) { } 7OpenType@supports not (transform-origin: 10em 10em 10em) { } 4, @supports not (transform-origin: 10em 10em 10em) { } 5@supports not (transform-origin: 10em 10em 10em) { } 6SVG Font (deprecated)@supports not (transform-origin: 10em 10em 10em) { } 7, @supports not (transform-origin: 10em 10em 10em) { } 8@supports not (transform-origin: 10em 10em 10em) { } 9TrueType@supports not (transform-origin: 10em 10em 10em) { } 4@supports not (not (transform-origin: 2px)) { } @supports (display: grid) and (not (display: inline-grid)) { } 1WOFF 1. 0 (Định dạng phông chữ mở trên web)_______58_______2@supports not (not (transform-origin: 2px)) { } @supports (display: grid) and (not (display: inline-grid)) { } 3WOFF 2. 0 (Định dạng phông chữ mở trên web)_______58_______4Toán tử @supports (transform-origin: 5% 5%) { } 7 đứng trước một biểu thức dẫn đến phủ định của biểu thức. Điều sau đây trả về true nếu thuộc tính @supports not (not (transform-origin: 2px)) { } @supports (display: grid) and (not (display: inline-grid)) { } 6 của trình duyệt coi @supports not (not (transform-origin: 2px)) { } @supports (display: grid) and (not (display: inline-grid)) { } 7 là không hợp lệ
@supports not (transform-origin: 10em 10em 10em) { }
Như với bất kỳ toán tử nào, toán tử @supports (transform-origin: 5% 5%) { } 7 có thể được áp dụng cho một khai báo có độ phức tạp bất kỳ. Các ví dụ sau đều hợp lệ
@supports not (not (transform-origin: 2px)) { } @supports (display: grid) and (not (display: inline-grid)) { }
Ghi chú. Không cần đặt toán tử @supports (transform-origin: 5% 5%) { } 7 giữa hai dấu ngoặc đơn ở cấp cao nhất. Để kết hợp nó với các toán tử khác, như @supports (transform-origin: 5% 5%) { } 5 và @supports (transform-origin: 5% 5%) { } 6, cần có dấu ngoặc đơn
Toán tử @supports (transform-origin: 5% 5%) { } 5 tạo một biểu thức mới từ sự kết hợp của hai biểu thức ngắn hơn. Nó chỉ trả về true nếu cả hai biểu thức ngắn hơn cũng đúng. Ví dụ sau trả về true khi và chỉ khi hai biểu thức ngắn hơn đồng thời là true
@supports (display: table-cell) and (display: list-item) { }
Nhiều liên từ có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương
@supports (display: table-cell) and (display: list-item) and (display: contents) { } @supports (display: table-cell) and ((display: list-item) and (display: contents)) { }
Toán tử @supports (transform-origin: 5% 5%) { } 6 tạo một biểu thức mới từ phép tách hai biểu thức ngắn hơn. Nó trả về true nếu một hoặc cả hai biểu thức ngắn hơn cũng đúng. Ví dụ sau trả về true nếu ít nhất một trong hai biểu thức ngắn hơn là true
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 0
Nhiều phân đoạn có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 1
Ghi chú. Khi sử dụng cả hai toán tử @supports (transform-origin: 5% 5%) { } 5 và @supports (transform-origin: 5% 5%) { } 6, dấu ngoặc đơn phải được sử dụng để xác định thứ tự áp dụng. Mặt khác, điều kiện không hợp lệ và toàn bộ quy tắc bị bỏ qua
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 2
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 3
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 4
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 5
Các quy tắc có điều kiện của CSS cung cấp khả năng kiểm tra sự hỗ trợ của bộ chọn, chẳng hạn như @supports (display: table-cell) and (display: list-item) { } 6
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 6
Ví dụ sau áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ @supports selector(h2 > p) { } 4
@supports (<supports-condition>) and (<supports-condition>) { /* If both conditions are true, use the CSS in this block. */ } 7
Cũng có thể kiểm tra sự hỗ trợ của công nghệ phông chữ bằng cách sử dụng hàm @supports (display: table-cell) and (display: list-item) { } 8 bên trong quy tắc @supports (display: table-cell) and (display: list-item) { } 9. Nếu trình duyệt không hỗ trợ công nghệ phông chữ, bạn có thể sử dụng phông chữ dự phòng (@supports (display: table-cell) and (display: list-item) and (display: contents) { } @supports (display: table-cell) and ((display: list-item) and (display: contents)) { } 0) để thay thế