Tải xuống

Bootstrap (hiện tại là v3.3.7) 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.

Bootstrap CDN

Những người ở jsDelivr â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 .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Cài đặt bằng Bower

Bạn cũng có thể cài đặt và quản lý Bootstrap's Less, CSS, JavaScript và phông chữ bằng cách sử dụng Bower :

$ bower install bootstrap

Cài đặt bằng npm

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

$ npm install bootstrap@3

require('bootstrap')sẽ tải tất cả các plugin jQuery của Bootstrap vào đối tượng jQuery. Bản bootstrapthân mô-đun 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 /js/*.jstệp trong thư mục cấp cao nhất của gói.

Bootstrap's package.jsonchứa một số siêu dữ liệu bổ sung theo các khóa sau:

• less- đường dẫn đến tệp nguồn Ít hơn chính của Bootstrap
• style- đườ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ách sử dụng cài đặt mặc định (không có tùy chỉnh)

Cài đặt bằng Composer

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

$ composer require twbs/bootstrap

Yêu cầu trình sửa lỗi tự động 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 Less / Sass của nó và không sử dụng Gruntfile của chúng tôi, bạn sẽ cần tự 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 trước 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.

Bao gồm những gì

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 biến thể đã biên dịch và rút gọn.

Bootstrap được biên dịch trước

Sau khi tải xuống, hãy giải nén thư mục nén để xem cấu trúc của Bootstrap (đã biên dịch). 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.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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 sẵn để sử dụng nhanh chóng trong hầu hết các dự án web. Chúng tôi cung cấp CSS đã biên dịch và JS ( bootstrap.*), cũng như CSS và JS ( bootstrap.min.*) được biên dịch và rút gọn. Bản đồ nguồn CSS ( bootstrap.*.map) có sẵn để sử dụng với các công cụ dành cho nhà phát triển của 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 Bootstrap

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

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, Và js/là fonts/mã nguồn cho các phông chữ CSS, JS và biểu tượng của chúng tôi (tương ứng). Thư dist/mục 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ư docs/mục bao gồm mã nguồn cho tài liệu của chúng tôi và examples/cách sử dụng Bootstrap. Ngoài ra, bất kỳ tệp tin kèm theo nào khác đều cung cấp hỗ trợ cho các gói, thông tin giấy phép và phát triển.

Biên dịch CSS và JavaScript

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 công tác. Đó 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 node.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 node.js.

1. Cài đặt grunt-clitrên toàn cầu với npm install -g grunt-cli.
2. Điều hướng đến thư mục gốc /bootstrap/, sau đó chạy npm install. npm sẽ xem xét package.jsontệp 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 thành, 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

grunt dist(Chỉ cần biên dịch CSS và JavaScript)

Tạo lại thư mục /dist/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.

grunt watch(Đồng hồ)

Xem các tệp nguồn Ít 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.

grunt test(Chạy thử nghiệm)

Chạy JSHint và chạy các bài kiểm tra QUnit ngay lập tức trong PhantomJS .

grunt docs(Xây dựng và kiểm tra 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ộ qua bundle exec jekyll serve.

grunt(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 dựa trên tài liệu, tạo lại nội dung Customizer, v.v. Yêu cầu Jekyll . Thường chỉ cần thiết nếu bạn đang hack trên chính Bootstrap.

Xử lý sự cố

Nếu bạn gặp sự cố với việc cài đặt phần phụ thuộc hoặc chạy lệnh Grunt, trước tiên hãy xóa thư mục /node_modules/được tạo bởi npm. Sau đó, chạy lại npm install.

Mẫu cơ bản

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Các ví dụ

Xây dựng 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 để phù hợp với nhu cầu của dự án cá nhân của bạn.

Lấy mã nguồn cho mọi ví dụ bên dưới bằng cách tải xuống kho lưu trữ Bootstrap . Ví dụ có thể được tìm thấy trong thư mục docs/examples/.

Sử dụng khuôn khổ

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 được biên dịch cùng với một vùng chứa.

Chủ đề Bootstrap

Tải chủ đề Bootstrap tùy chọn để có trải nghiệm nâng cao về mặt hình ảnh.

Lưới

Nhiều ví dụ về bố cục lưới với tất cả bốn lớp, lồng nhau và hơn thế nữa.

Jumbotron

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

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 và jumbotron mặc định.

Thanh điều hướng đang hoạt động

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.

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.

Đã sửa lỗi đ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.

Các thành phần tùy chỉnh

Trải ra

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

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.

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.

bảng điều khiển

Cấu trúc cơ bản cho trang tổng quan quản trị với thanh bên và thanh điều hướng cố định.

Trang đăng nhập

Bố cục và thiết kế biểu mẫu tùy chỉnh cho một dấu hiệu đơn giản trong biểu mẫu.

Điều hướng hợp lý

Tạo thanh điều hướng tùy chỉnh với các liên kết hợp lý. Đứng lên! Không quá thân thiện với Safari.

Chân trang dính

Đính kèm chân trang vào cuối khung nhìn khi nội dung ngắn hơn nội dung đó.

Chân trang dính với thanh điều hướng

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

Thí nghiệm

Bootstrap không đáp ứng

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 .

Off-canvas

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

Công cụ

Bootlint

Bootlint là công cụ liên kết 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á "đơn giản". Các thành phần / widget của Vanilla Bootstrap yêu cầu các phần của DOM của chúng phải tuân theo các cấu trúc nhất định. Bootlint kiểm tra xem các trường hợp của các thành phần Bootstrap có HTML được cấu trúc chính xác hay không. Cân nhắc việ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.

Cộng đồng

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

• Đọc và đăng ký Blog Bootstrap Chính thức .
• Trò chuyện với các Bootstrappers đồng nghiệp bằng IRC trong irc.freenode.netmáy chủ, trong kênh ## bootstrap .
• Để được trợ giúp khi sử dụng Bootstrap, hãy hỏi trên StackOverflow bằng cách sử dụng thẻtwitter-bootstrap-3 .
• Các nhà phát triển nên sử dụng từ khóa bootstraptrên các gói sửa đổi hoặc thêm vào chức năng của Bootstrap khi phân phối thông qua npm hoặc các cơ chế phân phối tương tự để có khả năng phát hiện tối đa.
• Tìm những ví dụ đầy cảm hứng về những người xây dựng bằng Bootstrap tại Bootstrap Expo .

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

Tắt khả năng phản hồ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 giống như ví dụ không phản hồi này .

Các bước để tắt tính năng phản hồi của trang

1. Bỏ qua chế độ xem <meta>được đề cập trong tài liệu CSS
2. Ghi đè widthlên .containercho mỗi tầng lưới bằng một chiều rộng, chẳng hạn như width: 970px !important;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 ý tránh !importantvới các 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 lưới, hãy sử dụng .col-xs-*các lớp ngoài hoặc thay cho các lớp vừa / lớn. Đừng lo lắng, lưới thiết bị cực nhỏ có quy mô phù hợp với tất cả các độ phân giải.

Bạn sẽ vẫn cần Respond.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 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 các thay đổi cụ thể được triển khai.

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

Hỗ trợ trình duyệt và thiết bị

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, có nghĩa là các trình duyệt cũ hơn có thể hiển thị các kết xuất có kiểu dáng khác nhau, mặc dù đầy đủ chức năng của một số thành phần nhất định.

Các 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.

Các trình duyệt thay thế sử dụng phiên bản mới nhất của WebKit, Blink hoặc Gecko, cho dù trực tiếp hoặc thông qua API chế độ xem web của nền tảng, đều không được hỗ trợ rõ ràng. Tuy nhiên, Bootstrap cũng nên hiển thị và hoạt động chính xác trong các trình duyệt này. Thông tin hỗ trợ cụ thể hơn được cung cấp bên dưới.

Thiêt bị di động

Nói chung, Bootstrap hỗ trợ các phiên bản mới nhất của các trình duyệt mặc định của mỗi nền tảng chính. Lưu ý rằng các trình duyệt proxy (chẳng hạn như Opera Mini, chế độ Turbo của Opera Mobile, UC Browser Mini, Amazon Silk) không được hỗ trợ.

Trình duyệt máy tính để bàn

Tương tự, các phiên bản mới nhất của hầu hết các trình duyệt trên máy tính để bàn đều được hỗ trợ.

Trên Windows, chúng tôi hỗ trợ Internet Explorer 8-11 .

Đối với Firefox, ngoài phiên bản ổn định thông thường mới nhất, chúng tôi cũng hỗ trợ phiên bản Firefox Phát hành Hỗ trợ Mở rộng (ESR) mới nhất.

Không chính thức, Bootstrap sẽ trông và hoạt động đủ tốt trong Chromium và Chrome cho Linux, Firefox cho Linux và Internet Explorer 7, cũng như Microsoft Edge, 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 đối mặt, hãy xem Tường các 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 Respond.js để kích hoạt hỗ trợ truy vấn phương tiện.

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à Respond.js

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

Respond.js và CSS trên nhiều miền

Việc sử dụng Respond.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 tài liệu Respond.js để biết chi tiết.

Respond.js vàfile://

Do các quy tắc bảo mật của trình duyệt, Respond.js không hoạt động với các trang được xem qua file://giao thức (như khi mở tệp HTML cục bộ). Để kiểm tra các tính năng đáp ứng trong IE8, hãy xem các trang của bạn qua HTTP (S). Xem tài liệu Respond.js để biết chi tiết.

Respond.js và@import

Respond.js không hoạt động với CSS được tham chiếu qua @import. Đặc biệt, một số cấu hình Drupal được biết đến để sử dụng @import. Xem tài liệu Respond.js để biết chi tiết.

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

IE8 không hỗ trợ đầy đủ box-sizing: border-box;khi kết hợp với min-width, hoặc . Vì lý do đó, kể từ v3.0.1, chúng tôi không còn sử dụng trên s.max-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 và @ font-face

IE8 có một số vấn đề @font-facekhi kết hợp với :before. Bootstrap sử dụng sự kết hợp đó với các 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 di chuột qua cửa sổ (tức là nhấn nút làm mới hoặc tải nội dung nào đó 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ị những biểu tượng đó. Xem sự cố # 13863 để biết chi tiết.

Chế độ tương thích IE

Bootstrap không được hỗ trợ trong các chế độ tương thích Internet Explorer cũ. Để đảm bảo bạn đang sử dụng chế độ hiển thị mới nhất cho IE, hãy xem xét đưa <meta>thẻ thích hợp vào các trang của bạn:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Xác nhận chế độ tài liệu bằng cách mở công cụ gỡ lỗi: nhấn F12và 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 thiết bị với chiều rộng 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 mã CSS nhanh để khắc phục điều này:

@-ms-viewport       { width: device-width; }

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 Bản cập nhật 3 (hay còn gọi là GDR3) , vì nó khiến các thiết bị đó 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 sẽ cần bao gồm CSS và JavaScript sau để khắc phục lỗi .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
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 và hướng dẫn sử dụng, hãy đọc Windows Phone 8 và Chiều rộng thiết bị .

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 như một minh chứng.

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ố vấn đề với số lượng vị trí thập phân được sử dụng trong các .col-*-1lớp lưới 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 ngắ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 vào .pull-rightcột lưới cuối cùng của bạn để có được căn chỉnh cố định bên phải
• Điều chỉnh tỷ lệ phần trăm của bạn theo cách thủ công để có được cách làm tròn hoàn hảo cho Safari (khó hơn tùy chọn đầu tiên)

Chế độ, thanh điều hướng và bàn phím ảo

Tràn và cuộn

Hỗ trợ cho overflow: hiddenphần <body>tử này khá hạn chế trong iOS và Android. Để đạt được điều đó, khi bạn cuộn qua đầu hoặc cuối của một phương thức trong một trong hai trình duyệt của thiết bị đó, <body>nội dung sẽ bắt đầu cuộn. Xem lỗi Chrome # 175502 (đã sửa trong Chrome v40) và lỗi WebKit # 153852 .

Trường văn bản iOS và cuộn

Kể từ iOS 9.3, khi một phương thức đang mở, nếu lần chạm đầu tiên của cử chỉ cuộn nằm trong ranh giới của văn bản <input>hoặc a <textarea>, thì <body>nội dung bên dưới phương thức sẽ được cuộn thay vì chính phương thức đó. Xem lỗi WebKit # 153856 .

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 có lỗi hiển thị 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 thay thế cho điều này bao gồm chuyển đổi các yếu tố của bạn thành position: absolutehoặc gọi bộ đếm thời gian lấy nét để cố gắng điều chỉnh vị trí theo cách thủ công. Điều này không được xử lý bởi Bootstrap, vì vậy 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 bạn.

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

Phần .dropdown-backdroptử không được sử dụng trên iOS trong điều hướng vì sự 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

Tính năng phóng to trang chắc chắn sẽ hiển thị các tạo tác kết xuất 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 nó (trước tiên hãy tìm kiếm và sau đó 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ác giải pháp hacky.

Cố định :hover/ :focustrên thiết bị di động

Mặc dù không thể thực hiện di chuột qua 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 trên thiết bị di động đều mô phỏng hỗ trợ di chuột và làm cho :hover"dính". Nói cách khác, :hoverkiểu 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 trạng thái của Bootstrap :hoverbị "mắc kẹt" không thể tránh khỏi trên các trình duyệt như vậy. Một số trình duyệt dành cho thiết bị di động cũng tạo ra :focussự dính tương tự. Hiện không có cách giải quyết đơn giản nào cho những vấn đề này ngoài việc loại bỏ hoàn toàn các kiểu như vậy.

In ấn

Ngay cả trong một số trình duyệt hiện đại, việc in ấn có thể khá 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 các truy vấn phương tiện trong khi in trang web. Điều này có thể dẫn đến việc lưới cực nhỏ của Bootstrap được kích hoạt bất ngờ khi in. Xem sự cố # 12078 và lỗi Chrome # 273306 để biết một số chi tiết. Các cách giải quyết được đề xuất:

• Ôm vào 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 nó.
• Tùy chỉnh các giá trị của @screen-*biến Ít hơn để giấy máy in của bạn được coi là lớn hơn cực nhỏ.
• Thêm truy vấn phương tiện tùy chỉnh để thay đổi các điểm ngắt kích thước lưới chỉ cho giấy in.

Ngoài ra, kể từ Safari v8.0, độ rộng cố định .containercó thể khiến Safari sử dụng kích thước phông chữ nhỏ bất thường khi in. Xem # 14868 và lỗi WebKit # 138192 để biết thêm chi tiết. Một giải pháp tiềm năng cho việc này là thêm CSS sau:

@media print {
  .container {
    width: auto;
  }
}

Trình duyệt cổ phiếu Android

Ngoài ra, Android 4.1 (và thậm chí một số bản phát hành mới hơn dường như) đ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 <select>các phần tử, trình duyệt Android stock sẽ không hiển thị các điều khiển bên nếu có border-radiusvà / hoặc borderđược áp dụng. (Xem câu hỏi StackOverflow này để biết chi tiết.) Sử dụng đoạn mã bên dưới để xóa CSS vi phạm và hiển thị <select>dưới dạng phần tử chưa được định kiểu trên trình duyệt Android stock. Tính năng phát hiện tác nhân người dùng tránh can thiệp vào các trình duyệt Chrome, Safari và Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Bạn muốn xem một ví dụ? Kiểm tra bản demo JS Bin này.

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 đến các phiên bản trình duyệt nhất định để khắc phục lỗi trong chính trình duyệt. Có thể hiểu được những bản 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 tiêu chuẩn hóa hoàn toàn, nhưng những tính năng này chỉ được sử dụng hoàn toàn để cải tiến liên tục.

Các cảnh báo xác thực này không quan trọng trong thực tế vì phần không hack trong CSS của chúng tôi xác thực hoàn toàn và các phần hack không ảnh hưởng đến hoạt động bình thường của phần không hack, do đó, tại sao chúng tôi cố tình bỏ qua các cảnh báo cụ thể này.

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

Hỗ trợ của bên thứ ba

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 đưa ra một số lời khuyên hữu ích để giúp tránh các vấn đề tiềm ẩn trong các 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 * { box-sizing: border-box; }quy tắc làm cho nó paddingkhông ảnh hưởng đến chiều rộng tính toán cuối cùng của một phần tử. Tìm hiểu thêm về mô hình hộp và định cỡ tại Thủ thuật CSS .

Tùy thuộc vào ngữ cảnh, bạn có thể ghi đè khi cần thiết (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).

/* 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();
}

Khả năng tiếp cận

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 có thể truy cập được đối với những người sử dụng AT .

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à đứng trước nội dung chính trong DOM, hãy thêm Skip to main contentliên kết trước điều hướng (để có giải thích đơn giản, hãy xem bài viết Dự án A11Y này về bỏ qua liên kết điều hướng ). Việc sử dụng .sr-onlylớp sẽ ẩn liên kết bỏ qua một cách trực quan và .sr-only-focusablelớp sẽ đảm bảo rằng liên kết sẽ hiển thị sau khi được tập trung (đối với người dùng bàn phím có khả năng nhìn thấy).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Tiêu đề lồng nhau

Khi lồng các tiêu đề ( <h1>- <h6>), tiêu đề tài liệu chính của bạn phải là <h1>. Các tiêu đề tiếp theo nên sử dụng hợp lý <h2>- <h6>để trình đọc màn hình có thể xây dựng mục lục cho các trang của bạn.

Tìm hiểu thêm tại HTML CodeSniffer và Penn State AccessAbility .

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

Hiện tại, một số 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ợ giúp .bg-primary theo ngữ cảnh và màu liên kết mặc định khi được sử dụng trên nền trắng) có tỷ lệ tương phản thấp (dưới tỷ lệ khuyến nghị là 4,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. Các màu mặc định này có thể cần được sửa đổi để tăng độ tương phản và độ dễ đọc của chúng.

Tài nguyên bổ sung

• Bookmarklet "HTML Codesniffer" để xác định các vấn đề trợ năng
• Tiện ích mở rộng Công cụ dành cho nhà phát triển trợ năng của Chrome
• Máy phân tích độ tương phản màu
• Dự án A11Y
• Tài liệu trợ năng MDN

Câu hỏi thường gặp về giấy phép

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:

• Giữ giấy phép và thông báo bản quyền được bao gồm 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 các 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 phải chịu trách nhiệm về các thiệt hại do Bootstrap được cung cấp mà không có bảo hành
• Yêu cầu người sáng tạo hoặc chủ sở hữu bản quyền của Bootstrap phải 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ần ghi công thích hợp
• Sử dụng bất kỳ nhãn hiệu nào do Twitter sở hữu theo bất kỳ cách nào có thể tuyên bố 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 do Twitter sở hữu theo bất kỳ cách nào có thể tuyên bố hoặc ngụ ý rằng bạn đã tạo phần mềm Twitter được đề cập

Nó không yêu cầu bạn:

• Bao gồm chính nguồn của Bootstrap hoặc 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, bạn có thể tập hợ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.

Bản dịch

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 中文 文档 (tiếng Trung)
• Bootstrap 3 中文 手冊 (Tiếng Trung (Phồn thể))
• Bootstrap på Dansk (tiếng Đan Mạch)
• Bootstrap en Français (tiếng Pháp)
• Bootstrap auf Deutsch (tiếng Đức)
• Bootstrap in Italiano (Ý)
• Bootstrap 한국어 (tiếng Hàn)
• Bootstrap em Português do Brasil (tiếng Bồ Đào Nha ở Brazil)
• Bootstrap по-русски (tiếng Nga)
• Bootstrap en Español (tiếng Tây Ban Nha)
• Türkçe Bootstrap (tiếng Thổ Nhĩ Kỳ)
• Bootstrap українською (tiếng Ukraina)
• Bootstrap bằng tiếng Việt (Tiếng Việt)

Chúng tôi không giúp tổ chức hoặc lưu trữ các bản dịch, chúng tôi chỉ liên kết với chúng.

Đã hoàn thành một bản dịch mới hay tốt hơn? Mở một yêu cầu kéo để thêm nó vào danh sách của chúng tôi.