Bootstrap ít hơn

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

1. 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!
     
   
   

2. 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

3. 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

DescriptionURLCSShttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cssJS

0

Bạ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 Google

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

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

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

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 Bootstrap

Mã 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 Bootstrap

Bootstrap 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)

1. Cài đặt

   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

   9 một cách toàn cục bằng lệnh

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

   0
2. Chuyển đến thư mục làm việc

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

   1, sau đó chạy lệnh

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

   2. npm will find tệp tin

   bootstrap/
   
   
   
   ├── 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ày

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)

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ụng

bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/6 (Theo dõi)

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)

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)

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/

2

Please 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

1. Please remove the tag

   
   
   
   
   
   
   
   
     
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       Bootstrap 101 Template
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
     
   
   
   
       Hello, world!
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
   

   1 viewport has been up to in
2. Please write over property

   
   
   
   
   
   
   
   
     
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       Bootstrap 101 Template
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
     
   
   
   
       Hello, world!
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
   

   2 on

   
   
   
   
   
   
   
   
     
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       Bootstrap 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ụng

   
   
   
   
   
   
   
   
     
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       Bootstrap 101 Template
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
     
   
   
   
       Hello, world!
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
   

   5 bằng truy vấn phương tiện hoặc một số selector-fu
3. 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 đó
4. Đối với các lưới định dạng cục bộ, hãy sử dụng lớp

   
   
   
   
   
   
   
   
     
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       Bootstrap 101 Template
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
     
   
   
   
       Hello, world!
   
   
   
   
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
       
   
   
   
     
   
   
   
   

   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ải

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ết

Trả 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ết

Browse 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ữa

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

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

  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
• 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ống

Virtual 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ạn

Menu 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

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

  1 để tờ giấy in của bạn có vẻ lớn hơn kích thước cực nhỏ
• 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ết

Phụ 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ân

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

0

Cá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ạnVui 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?