Tải xuống Bootstrap

Có một số cách dễ dàng để nhanh chóng bắt đầu với Bootstrap, 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

Biên dịch CSS, JS và phông chữ

Cách nhanh nhất để tải Bootstrap là tải xuống các phiên bản CSS và JavaScript được biên dịch và rút gọn của chúng tôi, cùng với các phông chữ đi kèm. Không có tài liệu hoặc tệp nguồn gốc nào được bao gồm

Tải xuống Bootstrap

Tải xuống bổ sung

Tải mã nguồn mới nhất

Nhận các tệp gốc cho tất cả CSS và JavaScript bằng cách tải xuống phiên bản mới nhất trực tiếp từ GitHub

Sao chép hoặc rẽ nhánh qua GitHub

Sao chép toàn bộ dự án hoặc rẽ nhánh phiên bản Bootstrap của riêng bạn để biến nó thành của riêng bạn bằng cách truy cập chúng tôi trên GitHub

Cài đặt với Bower

Cài đặt và quản lý các tệp gốc cho tất cả CSS và JavaScript, cùng với bản sao cục bộ của tài liệu, sử dụng Bower

Bootstrap CDN

Những người ở NetDNA đã ân cần cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Để sử dụng, hãy trao đổi các phiên bản cục bộ của bạn để lấy các liên kết Bootstrap CDN được liệt kê bên dưới








LESS biên soạn

Nếu bạn tải xuống các tệp gốc, bạn cần biên dịch các tệp LESS của Bootstrap thành CSS có thể sử dụng được. Để làm được điều đó, Bootstrap chỉ chính thức hỗ trợ Recess, trình gợi ý CSS của Twitter được xây dựng dựa trên less. js

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

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

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.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. các tệp được biên dịch để sử dụng nhanh chóng trong hầu hết mọi dự án web. Chúng tôi cung cấp CSS và JS đã biên dịch (

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.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ũng như CSS và JS đã biên dịch và rút gọ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
1). Phông chữ từ Glyphicons được bao gồm, cũng như chủ đề Bootstrap tùy chọn

yêu cầu jQuery

Xin lưu ý rằng tất cả các plugin JavaScript yêu cầu phải có jQuery, như được hiển thị trong mẫu dành cho người mới bắt đầu

Sử dụng mẫu HTML siêu cơ bản hoặc đi sâu vào một vài ví dụ mà chúng tôi đã bắt đầu cho bạn. Chúng tôi khuyến khích mọi người lặp lại các ví dụ này và không chỉ sử dụng chúng như một kết quả cuối cùng

Sao chép và dán HTML từ bên dưới để bắt đầu với tài liệu Bootstrap cơ bản



  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  

Xây dựng dựa trên mẫu cơ bản ở trên với nhiều thành phần của Bootstrap. Hãy xem một số mẹo nâng cao hơn để biết cách tùy chỉnh và xây dựng dựa trên chúng

Tải xuống Bootstrap

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

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

Tải xuống Bootstrap

lưới

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

Tải xuống Bootstrap

Jumbotron

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

Tải xuống Bootstrap

jumbotron hẹp

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

Tải xuống Bootstrap

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

Tải xuống Bootstrap

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

Tải xuống Bootstrap

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

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

Tải xuống Bootstrap

Trang đăng nhập

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

Tải xuống Bootstrap

Chân trang cố định

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

Tải xuống Bootstrap

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

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

Tải xuống Bootstrap

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

Mở rộng trên thanh điều hướng mặc định và hơn thế nữa để tạo liên kết điều hướng hợp lý

Tải xuống Bootstrap

vải bố

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

Tải xuống Bootstrap

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

Tải xuống Bootstrap

Bootstrap không phản hồi

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

Tải xuống Bootstrap

Chủ đề Bootstrap

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

Bạn không muốn trang web hoặc ứng dụng của mình được thu nhỏ trên các thiết bị khác nhau? . Đọc bên dưới hoặc xem ví dụ không phản hồi

Các bước để tắt chế độ xem đáp ứng

Để tắt các tính năng phản hồi, hãy làm theo các bước sau. Xem nó hoạt động trong mẫu được sửa đổi bên dưới

  1. Xóa (hoặc không thêm) chế độ xem
    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 được đề cập trong tài liệu CSS
  2. Xóa
    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 trê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
    4 cho tất cả các bậc lưới 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
    5 và đặt chiều rộng thông thường như
    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. Hãy chắc chắn rằng điều này xuất hiện sau Bootstrap CSS mặc định. Bạn có thể tùy chọn tránh
    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 bằng truy vấn phương tiện hoặc một số bộ chọn-fu
  3. Nếu sử dụng thanh điều hướng, hãy hoàn tác tất cả hành vi thu gọn và mở rộng thanh điều hướng (điều này quá nhiều để hiển thị ở đây, vì vậy hãy xem ví dụ)
  4. Đối với bố cục dạng lưới, hãy sử dụng các lớp
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.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 bổ sung hoặc thay cho các lớp trung bình/lớn. Đừng lo lắng, lưới thiết bị cực nhỏ có thể chia tỷ lệ theo mọi độ phân giải, vì vậy bạn đã sẵn sàng ở đó

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

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

Chúng tôi đã thực hiện các bước trên và áp dụng chúng vào một ví dụ. Đọc mã nguồn của nó để xem những thay đổi cụ thể được gọi ra

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

Những người muốn nâng cấp lên v3 nên sử dụng phần này làm hướng dẫn nâng cấp chung. Chúng tôi đã phác thảo một số thay đổi chính và cung cấp các bảng làm nổi bật những thay đổi chính. Để biết tổng quan, hãy đọc bài đăng trên blog thông báo

Thay đổi lớp học chính

Bảng tham chiếu cho các lớp đã thay đổi giữa v2. x và v3. 0

Bootstrap 2. Bootstrap 3. 0

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


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
1


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
2


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
3


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
4


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
5


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
6


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
7


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
8


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
9
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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
37
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
38
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
39
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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
37
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
38
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
39


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
30


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
31


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
32


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
33


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
34


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
35


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
36


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
37


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
38


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
39
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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
37
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
38
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
39
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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
37

Có gì mới

Chúng tôi đã thêm một số yếu tố mới và thay đổi một số yếu tố hiện có. Đây là các lớp học mới hoặc cập nhật của họ

ElementDescriptionPanels

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
38
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
39
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
30
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
31
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
32
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
33List groups
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
34
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
35
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
36
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
37Glyphicons
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
38Jumbotron
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
36Tiny grid (<768 px)
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
8Small grid (>768 px)
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
41Medium grid (>992 px)


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
4Large grid (>1200 px)
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
43Offsets
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
44


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
6
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
46Push
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
47
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
48
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
49Pull
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
00
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
01
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
02Input groups
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
39
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
31
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
05Form controls
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
06
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
07Button group sizes
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
08
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
09
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
10Navbar text
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
11Navbar header
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
12Justified tabs / pills
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
13Responsive images
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
14Contextual table rows
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
15
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
16
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
17
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
18Contextual panels
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
19
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
20
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
21
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
22Modal
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
23
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
24Thumbnail image
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
33Well sizes
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
26
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
27Alert links
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
28

Nội dung đã bị xóa

Các yếu tố sau đã bị loại bỏ hoặc thay đổi trong v3

Phần tửRemove from 2. x3. 0 Hành động của Biểu mẫu tương đương

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
29N/A Biểu mẫu tìm kiếm
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
30N/AFlỏng chứa
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
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 (không còn lưới cố định)Hàng chất lỏng


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
1


  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
2 (không còn lưới cố định)Navbar bên trong
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
35N/ADropdown menu con
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
36N/Căn chỉnh ATab
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
37
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
38
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
39N/A

Ghi chú bổ sung

Chúng tôi đã thực hiện nhiều thay đổi cơ bản trong v3 mà không rõ ràng ngay lập tức. Các lớp cơ sở, kiểu chính và hành vi đã được điều chỉnh để linh hoạt và phương pháp tiếp cận đầu tiên trên thiết bị di động của chúng tôi

  • Điều khiển biểu mẫu dựa trên văn bản hiện rộng 100%. Bọc đầu vào bên trong
    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 để kiểm soát độ rộng đầu vào
  • 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
    41 không còn có ngữ cảnh (-success,-primary, v.v. ) các lớp họ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
    39 cũng phải sử dụng
    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
    43 để nhận nút "mặc định"
  • 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 101 Template
        
        
        
    
        
        
      
      
        Hello, world!
    
        
        
        
        
      
    
    2 hiện linh hoạt (dựa trên tỷ lệ phần trăm)
  • Hình ảnh không còn phản hồi theo mặc định. Sử dụng
    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
    14 cho kích thướ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
    47 chất lỏng
  • Các biểu tượng, bây giờ là
    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
    38, hiện dựa trên phông chữ. Họ cũng yêu cầu một lớp cơ sở và biểu tượng (e. g.
    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
    49)
  • Typeahead đã bị loại bỏ, thay vào đó sử dụng Twitter Typeahead
  • Đánh dấu phương thức đã thay đổi đáng kể. Các phầ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
    50,
    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
    51 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
    52 hiện được bao bọc trong
    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
    24 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
    23 để cải thiện kiểu dáng và hành vi trên thiết bị di động
  • Các sự kiện JavaScript được đặt tên. Ví dụ: để xử lý sự kiện "show" theo phương thức, hãy sử dụng
    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
    55. Đối với các tab "hiển thị", hãy sử dụng
    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
    56, v.v.

Để biết thêm thông tin về các bản nâng cấp và đoạn mã từ cộng đồng, hãy xem Bootply

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

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

Cụ thể, chúng tôi hỗ trợ các phiên bản mới nhất sau đây

  • Chrome (Mac, Windows, iOS và Android)
  • Safari (chỉ dành cho Mac và iOS, vì Windows ít nhiều đã ngừng hoạt động)
  • Firefox (Mac, Windows)
  • trình duyệt web IE
  • Opera (Mac, Windows)

Không chính thức, Bootstrap sẽ có giao diện và hoạt động đủ tốt trong Chromium dành cho Linux và Internet Explorer 7, mặc dù chúng không được hỗ trợ chính thức

Internet Explorer 8 và 9

Internet Explorer 8 và 9 cũng được hỗ trợ, tuy nhiên, xin lưu ý rằng nhiều thuộc tính CSS3—e. g. , các góc tròn và bóng đổ—không được IE8 hỗ trợ. Thuộc tính

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
57 cũng không được hỗ trợ trong một trong hai phiên bản này

Ngoài ra, Internet Explorer 8 yêu cầu sử dụng phản hồi. js để bật hỗ trợ truy vấn phương tiện

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

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

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.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 thích hợp vào các trang của bạ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
3

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

Windows Phone 8 và Internet Explorer 10

Internet Explorer 10 không phân biệt chiều rộng của thiết bị với chiều rộng của khung nhìn và do đó không áp dụng đúng các truy vấn phương tiện trong CSS của Bootstrap. Để giải quyết vấn đề này, bạn có thể tùy chọn thêm CSS và JavaScript sau để khắc phục sự cố này cho đến khi Microsoft đưa ra bản sửa 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
3



  
    Bootstrap 101 Template
    
    
    

    
    
  
  
    Hello, world!

    
    
    
    
  
3

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

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

Trong Safari dành cho Mac mới nhất, công cụ kết xuất của nó gặp một chút rắc rối với các vị trí thập phân dài của các lớp 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
59 của chúng tôi, nghĩa là nếu bạn có 12 cột riêng lẻ, bạn sẽ nhận thấy chúng bị thiếu so với các hàng cột khác. Chúng tôi không thể làm gì nhiều ở đây (xem #9282) nhưng bạn có một số tùy chọn

  • Thêm
    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
    60 vào cột lưới cuối cùng của bạn để căn chỉnh cứng bên phải
  • Tinh chỉnh tỷ lệ phần trăm của bạn theo cách thủ công để làm tròn hoàn hảo cho Safari (khó hơn tùy chọn đầu tiên)

Tuy nhiên, chúng tôi sẽ theo dõi vấn đề này và cập nhật mã của chúng tôi nếu chúng tôi có giải pháp dễ dàng

Phương thức và thiết bị di động

Tràn và cuộn

Hỗ trợ cho phần 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
61 khá hạn chế trong iOS và Android. Cuối cùng, khi bạn cuộn qua đầu hoặc cuối phương thức trong trình duyệt của một trong hai thiết bị đó, nội dung sẽ bắt đầu cuộn

bàn phím ảo

Ngoài ra, hãy lưu ý rằng nếu bạn đang sử dụng đầu vào trong phương thức của mình - iOS có lỗi kết xuất 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. Có một vài cách giải quyết vấn đề này, bao gồm chuyển đổi các thành phần của bạn thành

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.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
62 hoặc gọi bộ đếm thời gian tập trung để cố gắng sửa vị trí theo cách thủ công. Điều này không được xử lý bởi Bootstrap, do đó, tùy thuộc vào bạn để quyết định giải pháp nào là tốt nhất cho ứng dụng của mình

Phóng to trình duyệt

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

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

bản đồ Google

Nếu bạn đang sử dụng Google Maps trên một dự án Bootstrapped, bạn có thể gặp phải một số vấn đề về hiển thị do việc sử dụng

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
63 của chúng tôi. Trước đây, bạn cũng có thể gặp sự cố khi sử dụng
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 trên hình ảnh. Đoạn mã sau sẽ tránh được tất cả những vấ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
3

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 bằ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à xuất hiện trước nội dung chính trong DOM, hãy thêm liên kết

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.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
65 ngay sau thẻ mở của bạn. (đọc tại sao)

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

Tiêu đề lồng nhau

Một "gotcha" khác liên quan đến cách bạn lồng

yếu tố. Mục 508 quy định rằng tiêu đề lớn nhất của bạn phải là mộ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
66 và tiêu đề tiếp theo phải là một

, vân vân. Điều này khó đạt được trong thực tế, nhưng nếu tiêu đề lớn nhất trên trang web của bạn nhỏ hơn 38px mặc định của Bootstrap, bạn nên xem xét sửa đổi biểu định kiểu của mình trước khi sử dụng phần tử tiêu đề nhỏ hơn

tài nguyên bổ sung

Bootstrap được phát hành theo giấy phép Apache 2 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ó cho phép bạn

  • Tự do tải xuống và sử dụng Bootstrap, toàn bộ hoặc một phần, cho mục đích cá nhân, 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

Nó cấm bạn

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

Nó đòi hỏi bạn phải

  • Bao gồm một bản sao của giấy phép trong bất kỳ bản phân phối lại nào mà bạn có thể thực hiện bao gồm Bootstrap
  • Cung cấp ghi công rõ ràng cho Twitter đối với bất kỳ bản phân phối nào bao gồm Bootstrap

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

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

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

Việc tùy chỉnh Bootstrap được thực hiện tốt nhất khi bạn coi nó như một phần phụ thuộc khác trong ngăn xếp phát triển của mình. Làm như vậy đảm bảo việc nâng cấp trong tương lai dễ dàng nhất có thể đồng thời giúp bạn làm quen với những điều phức tạp của khung

Khi bạn đã tải xuống và bao gồm CSS của Bootstrap vào các mẫu của mình, bạn có thể chuyển sang tùy chỉnh các thành phần được bao gồm. Để làm như vậy, hãy tạo một biểu định kiểu mới (LESS, nếu bạn thích hoặc chỉ CSS đơn giản) để chứa các tùy chỉnh của bạn

Biên dịch hoặc rút gọn?

Trừ khi bạn có kế hoạch đọc một đoạn CSS được biên dịch tốt, hãy sử dụng phần rút gọn. Đó là cùng một mã, chỉ được nén. Ít băng thông hơn là tốt, đặc biệt là trong môi trường sản xuất

Từ đó, bao gồm bất kỳ thành phần Bootstrap và nội dung HTML nào bạn cần để thiết lập mẫu của mình. Tốt nhất là bạn nên có ý tưởng sơ bộ về các sửa đổi cần thực hiện và nội dung cần đưa vào, vì vậy hãy đảm bảo dành một khoảng thời gian ngắn cho việc đó trước khi tiếp tục

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

Có nhiều mức độ khác nhau để tùy chỉnh các thành phần, nhưng hầu hết rơi vào hai phe. tùy chỉnh ánh sáng và đại tu toàn bộ hình ảnh. May mắn thay, có rất nhiều ví dụ về cả hai

Chúng tôi xác định các tùy chỉnh ánh sáng chủ yếu là thay đổi lớp bề mặt, những thứ như màu sắc và phông chữ thay đổi đối với các thành phần Bootstrap hiện có. Một ví dụ tuyệt vời về điều này là Trung tâm dịch thuật Twitter (được mã hóa bởi @mdo). Hãy xem cách triển khai nút tùy chỉnh mà chúng tôi đã viết cho trang web 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
67

Thay vì sử dụng các nút Bootstrap được cung cấp, chỉ yêu cầu một lớp để bắt đầu,

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
39, chúng tôi sẽ thêm lớp sửa đổi của riêng mình,
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
67. Điều này sẽ cung cấp cho chúng tôi một giao diện hơi tùy chỉnh với nỗ lực tối thiểu

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

Trong biểu định kiểu tùy chỉnh, thêm CSS sau

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

Việc tùy chỉnh các thành phần Bootstrap cần có thời gian, nhưng phải đơn giản. Thường xuyên xem mã nguồn và sao chép các bộ chọn bạn cần cho các sửa đổi của mình. Đặt chúng sau nguồn Bootstrap giúp ghi đè dễ dàng mà không phức tạp. Tóm lại, đây là quy trình làm việc cơ bản

  • Đối với mỗi phần tử bạn muốn tùy chỉnh, hãy tìm mã của phần tử đó trong CSS Bootstrap đã biên dịch. Sao chép và dán bộ chọn cho nguyên trạng thành phần. Chẳng hạn, để tùy chỉnh nền của thanh điều hướng, chỉ cần chộp lấ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
    70
  • Thêm tất cả CSS tùy chỉnh của bạn vào một biểu định kiểu riêng bằng bộ chọn bạn vừa sao chép từ nguồn Bootstrap. Không cần mở đầu với các lớp bổ sung hoặc sử dụng
    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 tại đây
  • Rửa sạch và lặp lại cho đến khi bạn hài lòng với các tùy chỉnh của mình

Vượt ra ngoài các tùy chỉnh ánh sáng và chuyển sang đại tu trực quan cũng đơn giản như nút tùy chỉnh ở trên. Đối với một trang web như Karma, sử dụng Bootstrap làm thiết lập lại CSS với các sửa đổi lớn, cần phải thực hiện nhiều công việc hơn, nhưng cuối cùng cũng xứng đáng

Phương pháp tùy chỉnh thay thế

Mặc dù không được khuyến nghị cho những người mới sử dụng Bootstrap, nhưng bạn có thể sử dụng một trong hai phương pháp thay thế để tùy chỉnh. Đầu tiên là sửa đổi nguồn. ít tệp hơn (làm cho việc nâng cấp trở nên cực kỳ khó khăn) và thứ hai là ánh xạ mã LESS nguồn tới các lớp của riêng bạn thông qua mixin. Hiện tại, cả hai tùy chọn đó đều không được ghi lại ở đây

Loại bỏ chứng đầy hơi tiềm năng

Không phải tất cả các trang web và ứng dụng đều cần tận dụng mọi thứ mà Bootstrap cung cấp, đặc biệt là trong môi trường sản xuất nơi băng thông thực sự trở thành một vấn đề tài chính. Chúng tôi khuyến khích mọi người loại bỏ bất cứ thứ gì không được sử dụng với Công cụ tùy chỉnh của chúng tôi

Sử dụng Công cụ tùy chỉnh, chỉ cần bỏ chọn bất kỳ thành phần, tính năng hoặc nội dung nào bạn không cần. Nhấn tải xuống và trao đổi các tệp Bootstrap mặc định với các tệp mới được tùy chỉnh này. Bạn sẽ nhận được Bootstrap vanilla, nhưng không có các tính năng mà *bạn* cho là không cần thiết. Tất cả các bản dựng tùy chỉnh bao gồm các phiên bản được biên dịch và rút gọn, vì vậy hãy sử dụng bất kỳ phiên bản nào phù hợp với bạn

Bootstrap có miễn phí không?

Tự do tải xuống và sử dụng Bootstrap, toàn bộ hoặc một phần, cho mục đích cá nhân, riêng tư, nội bộ công ty hoặc thương mại .

Bootstrap có phải được cài đặt không?

Các chủ đề đi kèm với các plugin cần thiết, vì vậy bạn không cần cài đặt bootstrap , jquery, v.v. riêng biệt. Nhưng nếu bạn muốn thêm và/hoặc sửa đổi một thành phần bootstrap trong trang web của mình, bạn sẽ cần biết cách sử dụng nó.

Bootstrap là HTML hay CSS?

Bootstrap là khung CSS phổ biến nhất để phát triển các trang web đáp ứng và ưu tiên thiết bị di động.