Bootstrap CDN 4

Nhanh chóng thiết kế và tùy chỉnh các trang web ưu tiên thiết bị di động đáp ứng với Bootstrap, bộ công cụ nguồn mở giao diện người dùng phổ biến nhất thế giới, có các biến Sass và mixin, hệ thống lưới đáp ứng, các thành phần dựng sẵn mở rộng và các plugin JavaScript mạnh mẽ

Show

Hiện tại v4. 5. 3

Bootstrap (hiện tại v3. 3. 4) có một số cách dễ dàng để nhanh chóng bắt đầu, mỗi cách phù hợp với một cấp độ kỹ năng và trường hợp sử dụng khác nhau. Đọc qua để xem những gì phù hợp với nhu cầu cụ thể của bạn

CSS, JavaScript và phông chữ được biên dịch và rút gọn. Không có tài liệu hoặc tệp nguồn gốc nào được bao gồm

Tải xuống Bootstrap

Bootstrap CDN

Những người ở MaxCDN đã ân cần cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Chỉ cần sử dụng các liên kết Bootstrap CDN này








Cài đặt với Bower

Bạn cũng có thể cài đặt và quản lý Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng Bower

Cài đặt với npm

Bạn cũng có thể cài đặt Bootstrap bằng npm

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
2 sẽ tải tất cả plugin jQuery của Bootstrap lên đối tượng jQuery. Bản thân mô-đun
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
3 không xuất bất cứ thứ gì. Bạn có thể tải từng plugin jQuery của Bootstrap theo cách thủ công bằng cách tải các tệp
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
4 trong thư mục cấp cao nhất của gói

Bootstrap's

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
5 chứa một số siêu dữ liệu bổ sung trong các khóa sau

  • bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    6 - đường dẫn đến tệp nguồn Ít hơn chính của Bootstrap
  • bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    7 - đường dẫn đến CSS không được rút gọn của Bootstrap đã được biên dịch trước bằng cài đặt mặc định (không có tùy chỉnh)

Cần có Autoprefixer cho Ít/Sass

Bootstrap sử dụng Autoprefixer để xử lý các tiền tố của nhà cung cấp CSS. Nếu bạn đang biên dịch Bootstrap từ nguồn Ít/Sass của nó và không sử dụng Gruntfile của chúng tôi, bạn sẽ cần tự mình tích hợp Autoprefixer vào quy trình xây dựng của mình. Nếu bạn đang sử dụng Bootstrap được biên dịch sẵn hoặc sử dụng Gruntfile của chúng tôi, bạn không cần phải lo lắng về điều này vì Autoprefixer đã được tích hợp vào Gruntfile của chúng tôi

Bootstrap có thể tải xuống ở hai dạng, trong đó bạn sẽ tìm thấy các thư mục và tệp sau đây, nhóm các tài nguyên chung một cách hợp lý và cung cấp cả các biến thể được biên dịch và rút gọn

Bootstrap được biên dịch sẵn

Sau khi tải xuống, hãy giải nén thư mục đã nén để xem cấu trúc của (đã biên dịch) Bootstrap. Bạn sẽ thấy một cái gì đó như thế này

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Đây là dạng cơ bản nhất của Bootstrap. các tệp được biên dịch trước để sử dụng nhanh chóng trong hầu hết mọi dự án web. Chúng tôi cung cấp CSS và JS đã biên dịch (

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
8), cũng như CSS và JS đã biên dịch và rút gọn (
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
9). Bản đồ nguồn CSS (
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
00) có sẵn để sử dụng với các công cụ dành cho nhà phát triển của một số trình duyệt nhất định. Phông chữ từ Glyphicons được bao gồm, cũng như chủ đề Bootstrap tùy chọn

Mã nguồn khởi động

Tải xuống mã nguồn Bootstrap bao gồm nội dung CSS, JavaScript và phông chữ được biên dịch sẵn, cùng với nguồn Ít hơn, JavaScript và tài liệu. Cụ thể hơn, nó bao gồm những điều sau đây và hơn thế nữa

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
0

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
01,
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
02 và
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
03 là mã nguồn cho phông chữ CSS, JS và biểu tượng của chúng tôi (tương ứng). Thư mục
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
04 bao gồm mọi thứ được liệt kê trong phần tải xuống được biên dịch trước ở trên. Thư mục
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
05 bao gồm mã nguồn cho tài liệu của chúng tôi và
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
06 của việc sử dụng Bootstrap. Ngoài ra, bất kỳ tệp nào khác được bao gồm đều cung cấp hỗ trợ cho các gói, thông tin giấy phép và phát triển

Bootstrap sử dụng Grunt cho hệ thống xây dựng của nó, với các phương pháp thuận tiện để làm việc với khung. Đó là cách chúng tôi biên dịch mã của mình, chạy thử nghiệm và hơn thế nữa

Cài đặt Grunt

Để cài đặt Grunt, trước tiên bạn phải tải xuống và cài đặt nút. js (bao gồm npm). npm là viết tắt của các mô-đun đóng gói nút và là một cách để quản lý các phụ thuộc phát triển thông qua nút. js

Sau đó, từ dòng lệnh
  1. Cài đặt
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    07 trên toàn cầu với
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    08
  2. Điều hướng đến thư mục gốc
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    09, sau đó chạy
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    10. npm sẽ xem tệp
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    5 và tự động cài đặt các phụ thuộc cục bộ cần thiết được liệt kê ở đó

Khi hoàn tất, bạn sẽ có thể chạy các lệnh Grunt khác nhau được cung cấp từ dòng lệnh

Các lệnh Grunt có sẵn

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff212 (Chỉ biên dịch CSS và JavaScript)

Tạo lại thư mục

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
13 với các tệp CSS và JavaScript được biên dịch và rút gọn. Là người dùng Bootstrap, đây thường là lệnh bạn muốn

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff214 (Xem)

Xem các tệp Ít nguồn hơn và tự động biên dịch lại chúng thành CSS bất cứ khi nào bạn lưu thay đổi

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff215 (Chạy thử nghiệm)

Chạy JSHint và chạy thử nghiệm QUnit không đầu trong PhantomJS

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff216 (Xây dựng và thử nghiệm nội dung tài liệu)

Xây dựng và kiểm tra CSS, JavaScript và các nội dung khác được sử dụng khi chạy tài liệu cục bộ thông qua

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
17

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff218 (Xây dựng hoàn toàn mọi thứ và chạy thử nghiệm)

Biên dịch và giảm thiểu CSS và JavaScript, xây dựng trang web tài liệu, chạy trình xác thực HTML5 đối với tài liệu, tạo lại nội dung Trình tùy chỉnh, v.v. Yêu cầu Jekyll. Thường chỉ cần thiết nếu bạn đang tự hack Bootstrap

Xử lý sự cố

Nếu bạn gặp sự cố khi cài đặt các phụ thuộc hoặc chạy các lệnh Grunt, trước tiên hãy xóa thư mục

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
19 được tạo bởi npm. Sau đó, chạy lại
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
10

Bắt đầu với mẫu HTML cơ bản này hoặc sửa đổi các ví dụ này. Chúng tôi hy vọng bạn sẽ tùy chỉnh các mẫu và ví dụ của chúng tôi, điều chỉnh chúng cho phù hợp với nhu cầu của bạn

Sao chép HTML bên dưới để bắt đầu làm việc với một tài liệu Bootstrap tối thiểu

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
1

Xây dựng dựa trên mẫu cơ bản ở trên với nhiều thành phần của Bootstrap. Chúng tôi khuyến khích bạn tùy chỉnh và điều chỉnh Bootstrap cho phù hợp với nhu cầu của dự án cá nhân của bạn

Sử dụng khuôn khổ

Bootstrap CDN 4

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

Không có gì ngoài những điều cơ bản. CSS và JavaScript đã biên dịch cùng với vùng chứa

Bootstrap CDN 4

Chủ đề Bootstrap

Tải chủ đề Bootstrap tùy chọn để có trải nghiệm trực quan nâng cao

Bootstrap CDN 4

lưới

Nhiều ví dụ về bố cục lưới với cả bốn tầng, lồng vào nhau, v.v.

Bootstrap CDN 4

Jumbotron

Xây dựng xung quanh jumbotron với thanh điều hướng và một số cột lưới cơ bản

Bootstrap CDN 4

jumbotron hẹp

Xây dựng một trang tùy chỉnh hơn bằng cách thu hẹp vùng chứa mặc định và jumbotron

Bootstrap CDN 4

thanh điều hướng

Mẫu siêu cơ bản bao gồm thanh điều hướng cùng với một số nội dung bổ sung

Bootstrap CDN 4

Thanh điều hướng trên cùng tĩnh

Mẫu siêu cơ bản với thanh điều hướng trên cùng tĩnh cùng với một số nội dung bổ sung

Bootstrap CDN 4

cố định thanh điều hướng

Mẫu siêu cơ bản với thanh điều hướng trên cùng cố định cùng với một số nội dung bổ sung

thành phần tùy chỉnh

Bootstrap CDN 4

Che

Mẫu một trang để xây dựng các trang chủ đơn giản và đẹp mắt

Bootstrap CDN 4

băng chuyền

Tùy chỉnh thanh điều hướng và băng chuyền, sau đó thêm một số thành phần mới

Bootstrap CDN 4

Blog

Bố cục blog hai cột đơn giản với điều hướng, tiêu đề và loại tùy chỉnh

Bootstrap CDN 4

bảng điều khiển

Cấu trúc cơ bản cho bảng điều khiển quản trị với thanh bên và thanh điều hướng cố định

Bootstrap CDN 4

Trang đăng nhập

Bố cục và thiết kế biểu mẫu tùy chỉnh cho biểu mẫu đăng nhập đơn giản

Bootstrap CDN 4

Chân trang cố định

Đính kèm một chân trang vào dưới cùng của chế độ xem khi nội dung ngắn hơn nó

Bootstrap CDN 4

Chân trang cố định với thanh điều hướng

Đính kèm chân trang vào dưới cùng của chế độ xem với thanh điều hướng cố định ở trên cùng

thí nghiệm

Bootstrap CDN 4

Bootstrap không phản hồi

Dễ dàng vô hiệu hóa khả năng phản hồi của Bootstrap theo tài liệu của chúng tôi

Bootstrap CDN 4

ngoài canvas

Xây dựng menu điều hướng ngoài canvas có thể chuyển đổi để sử dụng với Bootstrap

Bootlint là công cụ linter HTML Bootstrap chính thức. Nó tự động kiểm tra một số lỗi HTML phổ biến trong các trang web đang sử dụng Bootstrap theo cách khá "vanilla". Các thành phần/widget của Vanilla Bootstrap yêu cầu các phần của DOM tuân theo các cấu trúc nhất định. Bootlint kiểm tra xem các phiên bản của các thành phần Bootstrap có cấu trúc HTML chính xác không. Cân nhắc thêm Bootlint vào chuỗi công cụ phát triển web Bootstrap của bạn để không có lỗi phổ biến nào làm chậm quá trình phát triển dự án của bạ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

Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết tin đồn mới nhất và video âm nhạc tuyệt vời

Bootstrap tự động điều chỉnh các trang của bạn cho các kích thước màn hình khác nhau. Dưới đây là cách tắt tính năng này để trang của bạn hoạt động như ví dụ không phản hồi này

Các bước để vô hiệu hóa khả năng phản hồi của trang

  1. Bỏ qua chế độ xem
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    31 được đề cập trong tài liệu CSS
  2. Ghi đè
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    32 trên
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    33 cho mỗi tầng lưới có chiều rộng duy nhất, ví dụ:
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    34 Hãy chắc chắn rằng điều này xuất hiện sau CSS Bootstrap mặc định. Bạn có thể tùy chọn tránh
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    35 bằng truy vấn phương tiện hoặc một số bộ chọn-fu
  3. Nếu sử dụng thanh điều hướng, hãy xóa tất cả hành vi thu gọn và mở rộng thanh điều hướng
  4. Đối với bố cục dạng lưới, hãy sử dụng các lớp
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    36 bổ sung hoặc thay cho các lớp trung bình/lớn. Đừng lo lắng, lưới thiết bị cực nhỏ chia tỷ lệ cho mọi độ phân giải

Bạn vẫn sẽ cần Reply. js cho IE8 (vì các truy vấn phương tiện của chúng tôi vẫn ở đó và cần được xử lý). Điều này vô hiệu hóa các khía cạnh "trang web dành cho thiết bị di động" của Bootstrap

Mẫu Bootstrap bị vô hiệu hóa khả năng phản hồi

Chúng tôi đã áp dụng các bước này cho một ví dụ. Đọc mã nguồn của nó để xem những thay đổi cụ thể được triển khai

Xem ví dụ không phản hồi

Bootstrap được xây dựng để hoạt động tốt nhất trong các trình duyệt dành cho máy tính để bàn và thiết bị di động mới nhất, nghĩa là các trình duyệt cũ hơn có thể hiển thị các kết xuất theo kiểu khác, mặc dù đầy đủ chức năng, của một số thành phần nhất định

trình duyệt được hỗ trợ

Cụ thể, chúng tôi hỗ trợ các phiên bản mới nhất của các trình duyệt và nền tảng sau. Trên Windows, chúng tôi hỗ trợ Internet Explorer 8-11. Thông tin hỗ trợ cụ thể hơn được cung cấp dưới đây

ChromeFirefoxInternet ExplorerOperaSafariAndroidĐược hỗ trợĐược hỗ trợKhông được hỗ trợN/AKhông được hỗ trợN/AiOSĐược hỗ trợKhông được hỗ trợKhông được hỗ trợMac OS XĐược hỗ trợĐược hỗ trợĐược hỗ trợĐược hỗ trợĐược hỗ trợĐược hỗ trợĐược hỗ trợĐược hỗ trợKhông được hỗ trợ

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 7, 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

Internet Explorer 8 và 9

Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên, xin lưu ý rằng một số thuộc tính CSS3 và phần tử HTML5 không được các trình duyệt này hỗ trợ đầy đủ. Ngoài ra, Internet Explorer 8 yêu cầu sử dụng Reply. js để bật hỗ trợ truy vấn phương tiện

Tính năngInternet Explorer 8Internet Explorer 9

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
37Không được hỗ trợĐược hỗ trợ
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
38Không được hỗ trợĐược hỗ trợ
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
39Không được hỗ trợĐược hỗ trợ, với tiền tố
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
20
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
21Không được hỗ trợ
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
22Không được hỗ trợ

Truy cập Tôi có thể sử dụng. để biết chi tiết về hỗ trợ trình duyệt của các tính năng CSS3 và HTML5

Internet Explorer 8 và Phản hồi. js

Cẩn thận với những lưu ý sau khi sử dụng Reply. js trong môi trường sản xuất và phát triển của bạn cho Internet Explorer 8

Đáp ứng. js và CSS tên miền chéo

Sử dụng trả lời. js với CSS được lưu trữ trên một miền (phụ) khác (ví dụ: trên CDN) yêu cầu một số thiết lập bổ sung. Xem trả lời. tài liệu js để biết chi tiết

Đáp ứng. js và bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff223

Do các quy tắc bảo mật của trình duyệt, hãy trả lời. js không hoạt động với các trang được xem qua giao thức

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
23 (như khi mở tệp HTML cục bộ). Để kiểm tra các tính năng phản hồi trong IE8, hãy xem các trang của bạn qua HTTP(S). Xem trả lời. tài liệu js để biết chi tiết

Đáp ứng. js và bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff225

Đáp ứng. js không hoạt động với CSS được tham chiếu qua

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
25. Đặc biệt, một số cấu hình Drupal được biết là sử dụng
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
25. Xem trả lời. tài liệu js để biết chi tiết

Internet Explorer 8 và kích thước hộp

IE8 không hỗ trợ đầy đủ

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
28 khi kết hợp với
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
29,
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
20,
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
21 hoặc
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
22. Vì lý do đó, kể từ v3. 0. 1, chúng tôi không còn sử dụng
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
20 trên
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
33 nữa

Internet Explorer 8 và @font-face

IE8 có một số vấn đề với

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
25 khi kết hợp với
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
26. Bootstrap sử dụng sự kết hợp đó với Glyphicons của nó. Nếu một trang được lưu trong bộ nhớ cache và được tải mà không cần chuột trên cửa sổ (i. e. nhấn nút làm mới hoặc tải thứ gì đó trong iframe) thì trang sẽ được hiển thị trước khi tải phông chữ. Di chuột qua trang (nội dung) sẽ hiển thị một số biểu tượng và di chuột qua các biểu tượng còn lại cũng sẽ hiển thị các biểu tượng đó. Xem vấn đề #13863 để biết chi tiết

IE Các chế độ tương thích

Bootstrap không được hỗ trợ trong các chế độ tương thích cũ của Internet Explorer. Để chắc chắn rằng bạn đang sử dụng chế độ kết xuất mới nhất cho IE, hãy xem xét đưa thẻ

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
31 thích hợp vào các trang của bạn

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
3

Xác nhận chế độ tài liệu bằng cách mở các công cụ sửa lỗi. nhấn F12 và kiểm tra "Chế độ tài liệu"

Thẻ này được bao gồm trong tất cả các tài liệu và ví dụ của Bootstrap để đảm bảo hiển thị tốt nhất có thể trong mỗi phiên bản Internet Explorer được hỗ trợ

Xem câu hỏi StackOverflow này để biết thêm thông tin

Internet Explorer 10 trong Windows 8 và Windows Phone 8

Internet Explorer 10 không phân biệt chiều rộng của thiết bị với chiều rộng của khung nhìn và do đó không áp dụng đúng các truy vấn phương tiện trong CSS của Bootstrap. Thông thường, bạn chỉ cần thêm một đoạn CSS nhanh để sửa lỗi này

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
2

Tuy nhiên, điều này không hoạt động đối với các thiết bị chạy phiên bản Windows Phone 8 cũ hơn Update 3 (a. k. a. GDR3), vì nó khiến các thiết bị như vậy hiển thị chế độ xem chủ yếu là máy tính để bàn thay vì chế độ xem "điện thoại" hẹp. Để giải quyết vấn đề này, bạn cần bao gồm CSS và JavaScript sau đây để khắc phục lỗi

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
2

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
3

Để biết thêm thông tin và hướng dẫn sử dụng, hãy đọc Windows Phone 8 và Device-Width

Lưu ý, chúng tôi đưa điều này vào tất cả các tài liệu và ví dụ của Bootstrap để minh họa

Làm tròn phần trăm Safari

Công cụ kết xuất của các phiên bản Safari trước v7. 1 cho OS X và Safari cho iOS v8. 0 đã gặp một số rắc rối với số lượng chữ số thập phân được sử dụng trong các lớp lưới

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
28 của chúng tôi. Vì vậy, nếu bạn có 12 cột lưới riêng lẻ, bạn sẽ nhận thấy rằng chúng xuất hiện ngắn hơn so với các hàng cột khác. Bên cạnh việc nâng cấp Safari/iOS, bạn có một số tùy chọn để giải quyết

  • Thêm
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    29 vào cột lưới cuối cùng của bạn để có được sự liên kết cứng bên phải
  • Tinh chỉnh tỷ lệ phần trăm của bạn theo cách thủ công để làm tròn hoàn hảo cho Safari (khó hơn tùy chọn đầu tiên)

Phương thức, thanh điều hướng và bàn phím ảo

Tràn và cuộn

Hỗ trợ cho phần tử

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
30 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

bàn phím ảo

Ngoài ra, hãy lưu ý rằng nếu bạn đang sử dụng thanh điều hướng cố định hoặc sử dụng đầu vào trong một phương thức, iOS sẽ gặp lỗi kết xuất không cập nhật vị trí của các thành phần cố định khi bàn phím ảo được kích hoạt. Một vài cách giải quyết cho vấn đề này bao gồm chuyển đổi các thành phần của bạn thành

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
31 hoặc gọi bộ đếm thời gian tập trung để cố gắng sửa vị trí theo cách thủ công. Điều này không được xử lý bởi Bootstrap, do đó, tùy thuộc vào bạn để quyết định giải pháp nào là tốt nhất cho ứng dụng của mình

Thanh điều hướng thả xuống

Phần tử

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
32 không được sử dụng trên iOS trong điều hướng do tính phức tạp của lập chỉ mục z. Do đó, để đóng danh sách thả xuống trong thanh điều hướng, bạn phải nhấp trực tiếp vào phần tử thả xuống (hoặc bất kỳ phần tử nào khác sẽ kích hoạt sự kiện nhấp chuột trong iOS)

phóng to trình duyệt

Thu phóng trang chắc chắn hiển thị các thành phần tạo tác trong một số thành phần, cả trong Bootstrap và phần còn lại của web. Tùy thuộc vào sự cố, chúng tôi có thể khắc phục sự cố (tìm kiếm trước rồi mở sự cố nếu cần). Tuy nhiên, chúng tôi có xu hướng bỏ qua những điều này vì chúng thường không có giải pháp trực tiếp nào ngoài cách giải quyết hacky

Chú ý bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff233/bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff234 trên di động

Mặc dù không thể di chuột thực sự trên hầu hết các màn hình cảm ứng, nhưng hầu hết các trình duyệt di động đều mô phỏng hỗ trợ di chuột và làm cho

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
33 trở nên "dính". Nói cách khác, các kiểu
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
33 bắt đầu áp dụng sau khi nhấn vào một phần tử và chỉ ngừng áp dụng sau khi người dùng nhấn vào một số phần tử khác. Điều này có thể khiến các trạng thái
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
33 của Bootstrap bị "mắc kẹt" không mong muốn trên các trình duyệt như vậy. Một số trình duyệt di động cũng làm cho
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
34 dính tương tự. Hiện tại không có cách giải quyết đơn giản nào cho những sự cố này ngoài việc xóa hoàn toàn các kiểu đó

in ấn

Ngay cả trong một số trình duyệt hiện đại, việc in ấn có thể kỳ quặc

Đặc biệt, kể từ Chrome v32 và bất kể cài đặt lề, Chrome sử dụng chiều rộng khung nhìn hẹp hơn đáng kể so với kích thước giấy vật lý khi giải quyết truy vấn phương tiện trong khi in trang web. Điều này có thể dẫn đến lưới cực nhỏ của Bootstrap được kích hoạt bất ngờ khi in. Xem #12078 để biết một số chi tiết. giải pháp đề xuất

  • Nắm lấy lưới cực nhỏ và đảm bảo rằng trang của bạn trông có thể chấp nhận được dưới lưới đó
  • Tùy chỉnh các giá trị của biến
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2
    39 Ít hơn để giấy máy in của bạn được coi là lớn hơn loại cực nhỏ
  • Thêm truy vấn phương tiện tùy chỉnh để thay đổi các điểm dừng kích thước lưới chỉ dành cho phương tiện in

Ngoài ra, kể từ Safari v8. 0, các

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
33 có chiều rộng cố định có thể khiến Safari sử dụng cỡ chữ nhỏ bất thường khi in. Xem #14868 để biết thêm chi tiết. Một giải pháp thay thế tiềm năng cho việc này là thêm CSS sau

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
7

Trình duyệt chứng khoán Android

Ra khỏi hộp, Android 4. 1 (và thậm chí một số bản phát hành mới hơn rõ ràng) đi kèm với ứng dụng Trình duyệt làm trình duyệt web mặc định được lựa chọn (trái ngược với Chrome). Thật không may, ứng dụng Trình duyệt có rất nhiều lỗi và không nhất quán với CSS nói chung

Chọn menu

Trên

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
71 dưới dạng phần tử chưa được tạo kiểu trên trình duyệt chứng khoán Android. Tác nhân người dùng đánh hơi tránh can thiệp vào trình duyệt Chrome, Safari và Mozilla

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
3

Bạn muốn xem một ví dụ?

Trình xác thực

Để cung cấp trải nghiệm tốt nhất có thể cho các trình duyệt cũ và nhiều lỗi, Bootstrap sử dụng các bản hack trình duyệt CSS ở một số nơi để nhắm mục tiêu CSS đặc biệt tới các phiên bản trình duyệt nhất định nhằm khắc phục các lỗi trong chính trình duyệt đó. Có thể hiểu được những vụ hack này khiến trình xác thực CSS phàn nàn rằng chúng không hợp lệ. Ở một số nơi, chúng tôi cũng sử dụng các tính năng CSS tiên tiến chưa được chuẩn hóa hoàn toàn, nhưng chúng được sử dụng hoàn toàn cho mục đích nâng cao tiến bộ

Trên thực tế, các cảnh báo xác thực này không quan trọng vì phần không bị hack trong CSS của chúng tôi xác thực đầy đủ và các phần bị hack không can thiệp vào hoạt động bình thường của phần không bị hack, do đó tại sao chúng tôi cố tình bỏ qua những cảnh báo cụ thể này

Tương tự như vậy, các tài liệu HTML của chúng tôi có một số cảnh báo xác thực HTML tầm thường và không quan trọng do chúng tôi đưa vào giải pháp thay thế cho một lỗi nhất định của Firefox

Mặc dù chúng tôi không chính thức hỗ trợ bất kỳ plugin hoặc tiện ích bổ sung nào của bên thứ ba, nhưng chúng tôi cung cấp một số lời khuyên hữu ích để giúp tránh các sự cố tiềm ẩn trong dự án của bạn

kích thước hộp

Một số phần mềm của bên thứ ba, bao gồm Google Maps và Công cụ Tìm kiếm Tùy chỉnh của Google, xung đột với Bootstrap do

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
72, một quy tắc làm cho nó như vậy
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
73 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử. Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS

Tùy thuộc vào ngữ cảnh, bạn có thể ghi đè khi cần (Tùy chọn 1) hoặc đặt lại kích thước hộp cho toàn bộ vùng (Tùy chọn 2)

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
0

Bootstrap tuân theo các tiêu chuẩn web phổ biến và—với nỗ lực tối thiểu—có thể được sử dụng để tạo các trang web mà những người sử dụng AT có thể truy cập được

Bỏ qua điều hướng

Nếu điều hướng của bạn chứa nhiều liên kết và xuất hiện trước nội dung chính trong DOM, hãy thêm liên kết

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
74 trước điều hướng (để biết giải thích đơn giản, hãy xem bài viết này của Dự án A11Y về bỏ qua liên kết điều hướng). Sử dụng lớp
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
75 sẽ ẩn liên kết bỏ qua một cách trực quan và lớp
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
76 sẽ đảm bảo rằng liên kết sẽ hiển thị sau khi được đặt tiêu điểm (đối với người dùng bàn phím có thị giác)

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
1

tiêu đề lồng nhau

Khi lồng các tiêu đề (

-), tiêu đề tài liệu chính của bạn phải là một. Các tiêu đề tiếp theo nên sử dụng hợp lý

- sao cho trình đọc màn hình có thể tạo mục lục cho các trang của bạnTìm hiểu thêm tại HTML CodeSniffer và Khả năng truy cập của Penn State

Độ tương phản màu

Hiện tại, một số kết hợp màu mặc định có sẵn trong Bootstrap (chẳng hạn như các lớp nút được tạo kiểu khác nhau, một số màu tô sáng mã được sử dụng cho các khối mã cơ bản, lớp trình trợ giúp nền theo ngữ cảnh

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
77 và màu liên kết mặc định khi được sử dụng trên nền trắng . 5. 1). Điều này có thể gây ra vấn đề cho người dùng có thị lực kém hoặc mù màu. Những màu mặc định này có thể cần được sửa đổi để tăng độ tương phản và mức độ dễ đọc của chúng

tài nguyên bổ sung

Bootstrap được phát hành theo giấy phép MIT và có bản quyền 2016 Twitter. Đun sôi thành các khối nhỏ hơn, nó có thể được mô tả với các điều kiện sau

Nó yêu cầu bạn phải

  • Giữ giấy phép và thông báo bản quyền có trong các tệp CSS và JavaScript của Bootstrap khi bạn sử dụng chúng trong các tác phẩm của mình

Nó cho phép bạn

  • Tự do tải xuống và sử dụng Bootstrap, toàn bộ hoặc một phần, cho mục đích cá nhân, riêng tư, nội bộ công ty hoặc thương mại
  • Sử dụng Bootstrap trong các gói hoặc bản phân phối mà bạn tạo
  • Sửa đổi mã nguồn
  • Cấp giấy phép con để sửa đổi và phân phối Bootstrap cho các bên thứ ba không có trong giấy phép

Nó cấm bạn

  • Yêu cầu các tác giả và chủ sở hữu giấy phép chịu trách nhiệm về các thiệt hại vì Bootstrap được cung cấp mà không có bảo hành
  • Giữ người sáng tạo hoặc người giữ bản quyền của Bootstrap chịu trách nhiệm pháp lý
  • Phân phối lại bất kỳ phần nào của Bootstrap mà không có ghi công hợp lý
  • Sử dụng bất kỳ nhãn hiệu nào thuộc sở hữu của Twitter theo bất kỳ cách nào có thể nêu rõ hoặc ngụ ý rằng Twitter xác nhận việc phân phối của bạn
  • Sử dụng bất kỳ nhãn hiệu nào thuộc sở hữu của Twitter theo bất kỳ cách nào có thể nêu rõ hoặc ngụ ý rằng bạn đã tạo ra phần mềm Twitter được đề cập

Nó không yêu cầu bạn phải

  • Bao gồm nguồn của chính Bootstrap hoặc của bất kỳ sửa đổi nào bạn có thể đã thực hiện đối với nó, trong bất kỳ bản phân phối lại nào mà bạn có thể lắp ráp bao gồm nó
  • Gửi các thay đổi mà bạn thực hiện cho Bootstrap trở lại dự án Bootstrap (mặc dù phản hồi như vậy được khuyến khích)

Giấy phép Bootstrap đầy đủ nằm trong kho dự án để biết thêm thông tin

Các thành viên cộng đồng đã dịch tài liệu của Bootstrap sang nhiều ngôn ngữ khác nhau. Không có cái nào được hỗ trợ chính thức và chúng có thể không phải lúc nào cũng được cập nhật

Bootstrap 4 CDN là gì?

Bootstrap CDN là mạng phân phối nội dung miễn phí giúp chúng tôi tải nhanh các thư viện CSS, Javascript và jQuery của Bootstrap vào các dự án của mình để làm cho dự án phản hồi nhanh, thân thiện với thiết bị di động và hấp dẫn< . .

Bootstrap có CDN không?

Bootstrap CDN là bản phân phối khung CSS phổ biến nhất trên thế giới sử dụng mạng phân phối nội dung. Đây là một nhóm máy chủ được phân phối theo địa lý hoạt động cùng nhau để cung cấp nội dung Internet nhanh chóng.

Làm cách nào để liên kết Bootstrap 4 trong HTML ngoại tuyến?

Một cách khác để nhập Bootstrap vào HTML là tải trực tiếp các tệp cục bộ xuống thư mục dự án HTML của bạn . Các tập tin có thể được tải về từ các liên kết sau. Bootstrap 4. https. //getbootstrap. com/docs/4. 3/bắt đầu/tải xuống/Bootstrap 5. https. //v5. getbootstrap. com/docs/5. 0/bắt đầu/tải xuống/

Làm cách nào để sử dụng CSS trong Bootstrap 4?

Cách sử dụng Bootstrap CSS. Để sử dụng Bootstrap CSS, bạn cần phải tích hợp nó vào môi trường phát triển của bạn . Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của mình. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và một tệp HTML mới nơi bạn sẽ tải Bootstrap.