Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này
Tạo một tệp
index.html
mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻđể có hành vi phản hồi phù hợp trong thiết bị di động
Bootstrap demo Hello, world!
Bao gồm CSS và JS của Bootstrap. Đặt thẻ
trong CSS của chúng tôi và thẻ
Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper
Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi
Để tham khảo, đây là các liên kết CDN chính của chúng tôi
DescriptionURLCSS//cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css
JS
0Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung
Bước tiếp theo
thành phần JS
Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . 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
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]
- 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 các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
- Điều hướng với plugin Tab để chuyển đổi bảng nội dung
- Offcanvases để hiển thị, định vị và hành vi cuộn
- Scrollspy cho hành vi cuộn và cập nhật điều hướng
- Chúc mừng để hiển thị và loại bỏ
- 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]
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, tất cả đều 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 ngộ nghĩnh và không đầy đủ
...
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
1 từ
2 thành
3. Điều này đảm bảo
4 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 GoogleTrong 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
5 và
6—tất cả sẽ kế thừa
1 đã chỉ định cho
8 đó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
Có một số cách rất đơn giản để bắt đầu với Bootstrap [phiên bản hiện tại v3. 1. 1], mỗi cách phù hợp với các mức độ và các nhu cầu khác nhau. Hãy đọc qua và xem cách nào phù hợp với nhu cầu cụ thể của bạn
Chứa các tệp CSS, JavaScript và phông chữ đã được biên dịch và nén lại. Không bao gồm tài liệu và mã nguồn gốc của các tập tin
Tải xuống Bootstrap
Mã nguồn
Chứa các tập tin mã nguồn Ít hơn, JavaScript và các tập tin về phông chữ, cùng với tài liệu của chúng tôi. Request a bộ biên dịch Less and
nguồn tải xuống
Bootstrap CDN
Ai đó ở MaxCDN hỗ trợ lưu trữ định dạng CDN cho CSS và JavaScript của Bootstrap. Bạn chỉ cần sử dụng các liên kết Bootstrap CDN
Cài đặt với Bower
Cài đặt và quản lý các tập tin Ít hơn, CSS, JavaScript và phông chữ của Bootstrap bằng cách sử dụng Bower
Bootstrap được tải xuống theo hai định dạng, bên trong mỗi định dạng, bạn sẽ tìm thấy các tập tin và thư mục được nêu dưới đây, nhóm các tài nguyên sử dụng chung một cách logic và cung cấp cả hai biến có thể biên dịch và nén
Bootstrap compile
Khi tải xuống, hãy giải nén thư mục và bạn sẽ thấy cấu trúc của Bootstrap [đã biên dịch] tương tự như thế này
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
Đây là dạng cơ bản nhất của Bootstrap, bao gồm các tập tin đã được biên dịch từ trước để có thể sử dụng một cách nhanh chóng trong tất cả các dự án web. Chúng tôi cung cấp các CSS và JS đã được biên dịch [_______15_______1], cũng như CSS và JS đã được biên dịch và nén lại [
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
2]. Phông chữ Glyphicons cũng được tích hợp sẵn trong định dạng này của BootstrapMã nguồn của Bootstrap
Mã nguồn của Bootstrap bao gồm các tập tin CSS, JavaScript, phông chữ đã được biên dịch cùng với đó là mã nguồn Ít hơn, JavaScript và tài liệu hướng dẫn sử dụng. Các cụ thể hơn, cấu trúc của nó tương tự như sau
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Các thư mục
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
3, bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
4, và bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
5 là nơi lưu trữ mã nguồn CSS, JS và phông chữ của chúng tôi. Thư mục bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
6 lưu trữ toàn bộ những tập tin được biên dịch đã nói ở trên. Thư mục bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
7 lưu trữ mã nguồn của phần tài liệu hướng dẫn sử dụng và thư mục bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
8 lưu trữ các ví dụ về cách sử dụng Bootstrap. Ngoài ra, các tập tin khác đi kèm được sử dụng để hỗ trợ đóng gói công việc, cung cấp thông tin bản quyền và thông tin phát triển của BootstrapBootstrap sử dụng Grunt để xây dựng hệ thống, với các phương thức thuận tiện khi làm việc với framework. Đây là cách mà chúng tôi biên dịch nên mã nguồn, chạy kiểm tra và nhiều hơn thế nữa
Cài đặt Grunt
Để cài đặt Grunt, trước hết bạn phải tải về và cài đặt nút. js [đã bao gồm npm]. npm là tên 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 sự kiện phụ thuộc khi phát triển thông qua nút. js
Sau đó từ màn hình giao diện dòng lệnh [command-line]- Cài đặt
9 một cách toàn cục bằng lệnhbootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── 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
0bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
- Chuyển đến thư mục làm việc
1, sau đó chạy lệnhbootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
2. npm will find tệp tinbootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
3 và tự động cài đặt các thuộc tính phụ thuộc được liệt kê trong tệp tin nàybootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
Sau khi cài đặt xong, bạn sẽ có thể chạy lệnh Grunt từ màn hình dòng lệnh
Lệnh Grunt có sẵn
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
4 [chỉ biên dịch CSS và Javascript]
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Tái tạo lại thư mục
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
5 với các tập tin CSS và Javascript đã được biên dịch và nén lại. Nếu bạn là người sử dụng Bootstrap, thì thông thường đây là lệnh mà bạn sẽ sử dụngbootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
6 [Theo dõi]
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Theo dõi mã nguồn tệp Ít hơn và tự động biên dịch lại các tệp CSS bất kể khi nào có thay đổi
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
7 [Chạy kiểm tra]
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Chạy JSHint và chạy các kiểm tra QUnit trên cùng trong PhantomJS
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
8 [Nên tạo tất cả thứ và chạy kiểm tra]
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Biên dịch và nén CSS với Javascript, xây dựng hướng dẫn tài liệu hướng dẫn sử dụng, chạy trình xác thực HTML5 so sánh với tài liệu, tái tạo lại các Customizer tài nguyên và nhiều hơn thế nữa. Lệnh này thường chỉ cần thiết khi bạn muốn đưa vào Bootstrap
Vấn đề
Nếu bạn gặp vấn đề khi cài đặt sự phụ thuộc hoặc chạy lệnh Grunt, trước hết hãy xóa thư mục
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
9 được tạo bởi npm. Sau đó, hãy chạy lại lệnh bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
2Please started with this template cơ bản, hoặc chỉnh sửa. Chúng tôi hy vọng bạn sẽ thay đổi các mẫu và ví dụ của chúng tôi để phù hợp với nhu cầu của bạn
Vui lòng sao chép đoạn mã HTML bên dưới để bắt đầu làm việc với Bootstrap
Bootstrap 101 Template
Hello, world!
Các ví dụ sau đây được xây dựng bằng cách kết hợp mẫu cơ bản bên trên cùng với các thành phần của Bootstrap. Vui lòng tham khảo để biết thêm một số gợi ý trong việc duy trì các biến thể Bootstrap của riêng bạn
Sử dụng framework
khởi động mẫu
Mẫu này chỉ bao gồm CSS và Javascript đã biên dịch và một vùng chứa
Chủ đề của Bootstrap
Tăng kinh nghiệm người dùng trực tiếp quan trọng hơn
lưới
Bao gồm rất nhiều ví dụ khác nhau về bố cục dạng lưới cục bộ
Jumbotron
Được xây dựng dựa trên các thành phần jumbotron và thanh điều hướng tương tự với một hệ thống lưới cơ bản
Jumbotron
Xây dựng nên có nhiều trang tùy biến bằng cách sử dụng container và jumbotron mặc định
Thanh điều hướng
Mẫu rất cơ bản bao gồm một thanh điều hướng cùng với một chút nội dung
Thanh điều hướng không cố định [static-top]
Mẫu rất cơ bản bao gồm một thanh điều hướng tĩnh-top với một chút nội dung
Thanh điều hướng cố định
Mẫu rất cơ bản bao gồm một thanh điều hướng cố định với một chút nội dung
Các thành phần tùy biến
Che phủ
Một mẫu dưới dạng một trang được sử dụng bởi người xây dựng nên những trang chủ đơn giản mà đẹp mắt
băng chuyền
Tùy chỉnh thanh điều hướng và băng chuyền và kết hợp với một số thành phần mới khác
Blog
Bố cục cục bộ 2 cột đơn giản của blog với thanh điều hướng, tiêu đề và loại đã được tùy biến
Control Panel
Cấu trúc cơ bản của bảng điều khiển cho quản trị viên với thanh điều hướng và thanh bên cố định
Trang đăng nhập
Thay đổi thiết kế và bố cục của biểu mẫu để tạo ra một biểu mẫu đăng nhập đơn giản
Chân trang cố định
Gắn chặt chân trang vào phía dưới cùng của khung nhìn khi nội dung hiển thị quá ngắn
Sticky footer và thanh điều hướng
Gắn chân trang vào phía dưới cùng với thanh điều hướng cố định bên trên của khung nhìn
thử nghiệm
vải bố
Xây dựng nên một menu điều hướng dạng đóng/mở ngoài khung vẽ để sử dụng
Các cột hệ thống có chiều cao bằng nhau của lưới
Thêm hệ thống cột có chiều cao bằng nhau vào hệ thống lưới hiện tại của Bootstrap
Hãy cập nhật sự phát triển của Bootstrap và hòa nhập với cộng đồng của chúng tôi bằng những tài nguyên sau đây
Bạn cũng có thể theo dõi @twbootstrap trên Twitter để luôn được cập nhật thông tin mới nhất về Bootstrap
Mặc dù vậy, Bootstrap sẽ tự động thay đổi các trang của bạn để phù hợp với các kích thước màn hình khác nhau. Tuy nhiên, nếu bạn muốn vô hiệu hóa tính năng này, hãy tham khảo tài liệu bên dưới của chúng tôi và khi đó trang web của bạn sẽ hoạt động giống như ví dụ này
Các bước để vô hiệu hóa tính năng đáp ứng
- Please remove the tag
1 viewport has been up to inBootstrap 101 Template Hello, world!
- Please write over property
2 onBootstrap 101 Template Hello, world!
3 đối với mỗi cột trong hệ thống lưới, ví dụBootstrap 101 Template Hello, world!
4 Hãy chắc chắn rằng, các tùy chọn mã CSS này được tích hợp vào sau CSS mặc định của Bootstrap. Bạn cũng có thể tránh sử dụngBootstrap 101 Template Hello, world!
5 bằng truy vấn phương tiện hoặc một số selector-fuBootstrap 101 Template Hello, world!
- Nếu bạn sử dụng thanh điều hướng, hãy vô hiệu hóa toàn bộ các tính năng thu gọn và mở rộng trên thanh điều hướng đó
- Đối với các lưới định dạng cục bộ, hãy sử dụng lớp
6 bằng cách thêm vào hoặc thay thế cho các lớp trung bình/lớn. Đừng lo lắng, hệ thống lưới hệ thống trên các thiết bị có màn hình siêu nhỏ sẽ tự động co giãn đối với mọi tốc độ phân giảiBootstrap 101 Template Hello, world!
You will also need to have Reply. js để chạy trên trình duyệt IE8 [vì truy vấn phương tiện của chúng tôi vẫn ở đó và cần được xử lý]
Mẫu của Bootstrap với tính năng đáp ứng bị vô hiệu hóa
Ví dụ sau đây được tạo ra bằng cách áp dụng những bước đã nói ở trên, hãy tham khảo mã nguồn của nó để xem những thay đổi nào đã được áp dụng
Xem ví dụ về vô hiệu hóa tính năng đáp ứng
Bootstrap được xây dựng để hoạt động ổn định nhất với các trình duyệt mới nhất trên máy tính để bàn và các thiết bị di động, điều đó có nghĩa là các trình duyệt cũ có thể hiển thị các kiểu khác nhau mặc định vẫn có đầy đủ
Các trình duyệt được hỗ trợ
Cụ thể, chúng tôi hỗ trợ phiên bản mới nhất cho trình duyệt và nền tảng sau đây. Trên Windows, chúng tôi hỗ trợ các trình duyệt từ IE8-IE11. Vui lòng xem bảng bên dưới để biết thêm chi tiết
ChromeFirefoxInternet ExplorerOperaSafariAndroidHỗ trợ Hỗ trợN/AKhông Hỗ trợN/AiOS Hỗ trợN/AKhông hỗ trợHỗ trợMac OS X Hỗ trợ Hỗ trợWindows Hỗ trợ Hỗ trợ Hỗ trợKhông Hỗ trợ
Bootstrap cũng hoạt động tốt trên trình duyệt Chromium và trình duyệt Chrome trong Linux, Firefox trong Linux và Internet Explorer 7, mặc dù các trình duyệt này không được hỗ trợ theo một cách chính thức
Để xem danh sách các lỗi trình duyệt mà Bootstrap gặp phải, hãy tham khảo phần Trình duyệt bị lỗi
Trình duyệt Internet Explorer 8 và 9
Trình duyệt Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên có một số thuộc tính CSS và phần tử HTML5 không được hỗ trợ một cách đầy đủ trên các trình duyệt này. Ngoài ra, Trình duyệt Internet Explorer 8 yêu cầu sử dụng Phản hồi. js to support for media query
Tính năngInternet Explorer 8Internet Explorer 9_______37_______7Không hỗ trợ hỗ trợ
Bootstrap 101 Template
Hello, world!
8Không hỗ trợ hỗ trợ
Bootstrap 101 Template
Hello, world!
9Không hỗ trợ hỗ trợ, với tiền tố
0
1Không hỗ trợ
2Không hỗ trợVui lòng tham khảo Tôi có thể sử dụng. để biết thêm chi tiết về các tính năng CSS3 và HTML5 mà trình duyệt hỗ trợ
Browse Internet Explorer 8 and Reply. js
Hãy cẩn thận với các vấn đề khi sử dụng Phản hồi. js trong môi trường phát triển và khai thác của bạn trên trình duyệt Internet Explorer 8
Trả lời. js và CSS tên miền chéo
Việc sử dụng Reply. js tương tự với CSS được lưu trữ trên một tên miền [phụ] khác [ví dụ như trên CDN] yêu cầu thêm một số thiết lập. to know more chi tiết
Trả lời. js và
3
Do các quy tắc bảo mật của trình duyệt, Phản hồi. js sẽ không hoạt động với những trang được truy cập thông qua giao thức
3 [giống như khi mở tệp HTML trên máy tính của bạn]. Để kiểm tra tính năng phản hồi trên trình duyệt IE8, hãy xem trang của bạn được truy cập thông qua giao thức HTTP[S]. to know more chi tiếtTrả lời. js và
5
Trả lời. js không hoạt động với CSS được tham chiếu bằng
5. Tuy nhiên, một vài thiết lập cấu hình của Drupal có thể sử dụng
5. to know more chi tiếtBrowse Internet Explorer 8 and box-sizing
Trình duyệt IE8 không hỗ trợ thuộc tính
8 một cách đầy đủ khi kết hợp tương tự với
9, @-ms-viewport { width: device-width; }
0, @-ms-viewport { width: device-width; }
1, hoặc @-ms-viewport { width: device-width; }
2. Vì lý do đó, trong phiên bản v3. 0. 1, chúng tôi không còn sử dụng @-ms-viewport { width: device-width; }
0 trên các
Bootstrap 101 Template
Hello, world!
3 nữaCác chế độ tương thích với trình duyệt Internet Explorer
Bootstrap không hỗ trợ đầy đủ cách thức duyệt IE cũ. Để chắc chắn rằng bạn đang sử dụng chế độ kết xuất mới nhất trong IE, vui lòng thêm thẻ
Bootstrap 101 Template
Hello, world!
1 thích hợp vào các trang của bạn
Xác nhận chế độ tài liệu bằng cách mở các công cụ gỡ lỗi. Vui lòng nhấn F12 và nhấp vào mục "Chế độ tài liệu"
Thẻ này đã được tích hợp sẵn trong toàn bộ các ví dụ và tài liệu hướng dẫn sử dụng Bootstrap để đảm bảo kết xuất tốt nhất trên mỗi phiên bản Internet Explorer
Vui lòng tham khảo câu hỏi StackOverflow này để biết thêm chi tiết
Trình duyệt Internet Explorer 10 trong Windows 8 và Windows Phone 8
Trình duyệt Internet Explorer 10 không phân biệt độ rộng của thiết bị với độ rộng của khung nhìn, và do đó, nó sẽ không áp dụng các truy vấn phương tiện theo một cách thích hợp. Thông thường, bạn chỉ cần thêm một đoạn mã CSS ngắn để sửa lỗi này
@-ms-viewport { width: device-width; }
Tuy nhiên, đoạn mã không hoạt động với các thiết bị chạy phiên bản Windows Phone 8 cũ hơn Bản cập nhật 3 [a. k. a. CHDC Đức 3]. Vì thế, nó sẽ gây ra lỗi hiển thị khung nhìn của máy tính để bàn thay vì khung nhìn của điện thoại di động. Để giải quyết vấn đề này, bạn phải tích hợp thêm mã CSS và Javascript sau
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
if [navigator.userAgent.match[/IEMobile\/10\.0/]] {
var msViewportStyle = document.createElement['style']
msViewportStyle.appendChild[
document.createTextNode[
'@-ms-viewport{width:auto!important}'
]
]
document.querySelector['head'].appendChild[msViewportStyle]
}
Để biết thêm thông tin chi tiết và hướng dẫn sử dụng, hãy tham khảo Windows Phone 8 và chiều rộng của thiết bị
Theo mặc định, chúng tôi đã tích hợp sẵn các đoạn mã này vào toàn bộ ví dụ và tài liệu của Bootstrap
Vấn đề làm tròn tỷ lệ phần trăm trong trình duyệt Safari
Khi sử dụng trình duyệt Safari phiên bản v7. 0. 1 trên hệ điều hành OS X và trình duyệt Safari trên hệ điều hành iOS v7. 0. 1, bộ máy kết xuất của Safari có một số vấn đề về số lượng các chữ số thập phân được sử dụng trong các lớp lưới
@-ms-viewport { width: device-width; }
6 của chúng tôi. Vì thế, nếu bạn có một hệ thống lưới bao gồm 12 cột, bạn sẽ lưu ý rằng chúng có chiều rộng ngăn hơn so với các hàng của các cột khác [Vui lòng xem #9282]. Bạn có một số tùy chọn để giải quyết vấn đề này- Thêm lớp
7 vào cột cuối cùng trong hệ thống lưới để thực thi cơ sở phải một cách bắt buộc@-ms-viewport { width: device-width; }
- Tinh chỉnh tỷ lệ phần trăm của bạn bằng tay [khó hơn rất nhiều so với tùy chọn 1]
Chúng tôi sẽ luôn theo dõi vấn đề này và sẽ cập nhật giải pháp ngay khi chúng tôi tìm ra
Modal, thanh điều hướng và bàn phím ảo
Tràn và cuộn
Tính năng hỗ trợ thuộc tính
@-ms-viewport { width: device-width; }
8 trên phần tử bị giới hạn trên iOS và Android. Để giải quyết vấn đề này, khi bạn cuộn qua màn trập trên hoặc màn hình dưới của một phương thức trên trình duyệt của các thiết bị sử dụng iOS hoặc Android, nội dung của bạn sẽ bắt đầu cuộn xuốngVirtual key
Ngoài ra, hãy lưu ý rằng nếu bạn sử dụng đầu vào trong các phương thức hoặc thanh điều hướng của bạn, iOS có một lỗi kết xuất là không cập nhật vị trí của các phần tử cố định khi bàn phím ảo được kích hoạt. Một số giải pháp cho vấn đề này bao gồm việc thay đổi các phần tử của bạn thành
@-ms-viewport { width: device-width; }
9 hoặc kích hoạt bộ đếm thời gian khi tập trung để cố gắng sửa đổi vị trí theo một cách thủ công. Vấn đề này không được xử lý bởi Bootstrap, vì thế bạn cần tự quyết định xem giải pháp nào phù hợp với nhu cầu của bạnMenu window down nằm trong thanh điều hướng
Phần tử
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
0 không được sử dụng trong các thành phần điều hướng trên iOS do sự phức tạp của thuộc tính z-index. Vì thế, để đóng một menu sổ xuống trong thanh điều hướng, bạn phải nhấp trực tiếp vào phần tử menu sổ xuống [hoặc các phần tử khác sẽ kích hoạt sự kiện nhấp trong iOS]Phóng to trong trình duyệt
Khi phóng to một trang web trên trình duyệt, sẽ không thể tránh khỏi việc các thành phần bị lỗi hiển thị. Tùy theo từng vấn đề mà chúng tôi có thể giải quyết được vấn đề đó [trước hết là tìm kiếm và sau đó là mở ra một vấn đề nếu cần]. Tuy nhiên, chúng tôi có thiên hướng bỏ qua các vấn đề này bởi vì dường như không có giải pháp trực tiếp nào tốt hơn giải pháp "hack"
Khẳng định khi in ấn
Ngoài ra, trên các trình duyệt hiện đại, công việc in ấn nhiều khi được thực hiện hơi kỳ dị. Cụ thể, như trong trình duyệt Chrome phiên bản v32, bất kể lề thiết lập như thế nào, Chrome sử dụng một khung nhìn có chiều rộng vải hơn đáng kể so với kích thước thực tế của một tờ giấy khi xử lý các truy vấn phương tiện . Điều này có thể dẫn đến một định dạng cực nhỏ trong hệ thống lưới hiển thị không như mong muốn. Vui lòng tham khảo số phát hành #12078 để biết thêm chi tiết. Chúng tôi gợi ý một số giải pháp như sau
- Chế độ sử dụng lưới có dạng siêu nhỏ và chắc chắn rằng trang web của bạn có thể chấp nhận được
- Tùy chỉnh giá trị của các biến số Ít hơn
1 để tờ giấy in của bạn có vẻ lớn hơn kích thước cực nhỏ@-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; }
- Add the media query options to change the fire dimensions in mesh only in the field contract in the ấn
Trình duyệt trên Android
Ngoài ra, Hệ điều hành Android 4. 1 [và ngay cả các phiên bản mới hơn] luôn đi kèm với một ứng dụng trình duyệt mặc định [đối lập với Chrome]. Thật không may, trình duyệt ứng dụng đó luôn có rất nhiều lỗi và không đồng nhất với CSS nói chung
Các menu chọn
Trên các phần tử
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
2 như một phần tử không được tạo kiểu trên các trình duyệt đi kèm với Android. Tác nhân người dùng tránh xung đột với trình duyệt Chrome, Safari và Mozilla
Nếu bạn muốn tìm một ví dụ cụ thể, hãy tham khảo vấn đề này trên JS Bin
Mặc dù chúng tôi không hỗ trợ bất kỳ plugin hoặc tiện ích bổ sung nào của bên thứ 3 theo một cách thức chính thức, nhưng chúng tôi vẫn có một số lời khuyên được khuyến nghị hỗ trợ bạn tránh khỏi các lỗi tiềm tàng trong các dự án của bạn
kích thước hộp
Một vài ứng dụng của bên thứ 3, bao gồm cả Google Maps và bộ máy tìm kiếm Google, đều xung đột với Bootstrap do
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
3, một thuộc tính để @-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần . Vui lòng tham khảo box model and sizing trên CSS Tricks để biết thêm chi tiếtPhụ thuộc vào từng ngữ cảnh, bạn có thể phải ghi đè nếu cần [tùy chọn 1] hoặc đặt lại kích thước hộp trong tất cả các vùng [Tùy chọn 2]
/* Box-sizing resets
*
* Reset individual elements or override regions to avoid conflicts due to
* global box model settings of Bootstrap. Two options, individual overrides and
* region resets, are available as plain CSS and uncompiled Less formats.
*/
/* Option 1A: Override a single element's box model via CSS */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
.box-sizing[content-box];
}
/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing[content-box];
}
}
.element {
.reset-box-sizing[];
}
Bootstrap được xây dựng theo tiêu chuẩn Web nói chung và—với một chút nỗ lực—có thể được sử dụng để tạo ra các trang web có thể truy cập được bằng cách sử dụng AT
Remove the direction
Nếu như điều hướng của bạn chứa nhiều liên kết và hiển thị trước nội dung chính trong DOM, vui lòng thêm một liên kết
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
5 [Chuyển đến nội dung chính] ngay sau thẻ. hãy tham khảo ở đây để biết nguyên nhânbootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── 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
0Các nhóm lồng nhau
Khi lồng các tiêu đề vào nhau [
-], tiêu đề chính trong trang của bạn phải là. Các tiêu đề tiếp theo nên sử dụng- to the screen reads could create a lục mục cho các trang của bạn
Vui lòng tham khảo HTML CodeSniffer và Penn State's AccessAbility
Các tài liệu khác nhau
Bootstrap được phát hành với giấy phép MIT và bản quyền Twitter 2015. Về cơ bản, nó có thể được mô tả bằng các điều kiện sau
Yêu cầu người sử dụng phải
- Tổng hợp những lưu ý về giấy phép và bản quyền khi bạn sử dụng
Cho phép người sử dụng
- Toàn quyền tải xuống và sử dụng một phần hoặc toàn bộ Bootstrap để phục vụ cho các mục đích cá nhân, sử dụng cho các công ty nội bộ hoặc các mục tiêu thương mại
- Sử dụng Bootstrap dưới dạng đóng gói hoặc phân phối mà bạn tạo ra
- Edited source code
- Tạo giấy phép bổ sung để chỉnh sửa và phân phối Bootstrap tới bên thứ 3 không nằm trong giấy phép đã có
Không cho phép người sử dụng
- 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 tạo ra hoặc người giữ bản quyền của Bootstrap
- Phân phối lại Bootstrap mà không có bất kỳ đóng góp nào
- Sử dụng bất kỳ dấu hiệu nào được sở hữu bởi Twitter dưới bất kỳ hình thức nào chỉ sử dụng Twitter chứng thực bản phân phối của bạn
- Sử dụng bất kỳ dấu hiệu nào do Twitter sở hữu theo bất kỳ hình thức nào được chỉ định hoặc tạo ra do vấn đề bạn đã tạo ra phần mềm Twitter
Không yêu cầu người sử dụng
- Tích hợp mã nguồn gốc của Bootstrap, hoặc của bất kỳ bản sửa đổi nào đã sửa đổi, trong bất kỳ bản phân phối lại nào
- Gửi những thay đổi của bạn đối với Bootstrap ngược trở lại dự án Bootstrap hiện tại [mặc dù chúng tôi khuyến khích những phản hồi như thế nhưng không bắt buộc]
Nguyên văn giấy phép của Bootstrap được lưu trữ tại đây. Vui lòng tham khảo để biết thêm thông tin chi tiết
Cộng đồng của chúng tôi đã giao dịch tài liệu này thành nhiều ngôn ngữ khác nhau. Không có bản dịch nào được hỗ trợ theo một cách chính thức và có thể chúng không được cập nhật theo một cách thông thường
Chúng tôi không hỗ trợ công việc quản lý và lưu trữ bản dịch, chúng tôi chỉ liên kết với chúng tôi
Bạn đã hoàn thành một bản dịch mới hay tốt hơn?