Tài liệu Bootstrap

Tải xuống Bootstrap để nhận CSS và JavaScript đã biên dịch, mã nguồn hoặc đưa nó vào trình quản lý gói yêu thích của bạn như npm, RubyGems, v.v.

Biên dịch CSS và JS

Tải xuống mã đã biên dịch sẵn sàng để sử dụng cho Bootstrap v4. 3. 1 để dễ dàng tham gia vào dự án của bạn, bao gồm

Điều này không bao gồm tài liệu, tệp nguồn hoặc bất kỳ phần phụ thuộc JavaScript tùy chọn nào (jQuery và Popper. js)

Tải xuống

tập tin nguồn

Biên dịch Bootstrap với đường dẫn nội dung của riêng bạn bằng cách tải xuống các tệp tài liệu Sass, JavaScript và nguồn của chúng tôi. Tùy chọn này yêu cầu một số công cụ bổ sung

  • Trình biên dịch Sass (Libsass hoặc Ruby Sass được hỗ trợ) để biên dịch CSS của bạn
  • Autoprefixer cho tiền tố nhà cung cấp CSS

Nếu bạn yêu cầu các công cụ xây dựng, chúng được bao gồm để phát triển Bootstrap và các tài liệu của nó, nhưng chúng có thể không phù hợp với mục đích của riêng bạn

nguồn tải xuống

jsDelivr

Bỏ qua phần tải xuống với jsDelivr để phân phối phiên bản CSS và JS đã được lưu trong bộ nhớ cache của Bootstrap cho dự án của bạn


Nếu bạn đang sử dụng JavaScript được biên dịch của chúng tôi, đừng quên bao gồm các phiên bản CDN của jQuery và Popper. js trước nó


quản lý gói

Kéo các tệp nguồn của Bootstrap vào hầu hết mọi dự án với một số trình quản lý gói phổ biến nhất. Bất kể trình quản lý gói nào, Bootstrap sẽ yêu cầu trình biên dịch Sass và Autoprefixer để thiết lập phù hợp với các phiên bản được biên dịch chính thức của chúng tôi

npm

Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói npm

npm install bootstrap


1 sẽ tải tất cả plugin jQuery của Bootstrap lên đối tượng jQuery. Bản thân mô-đun

0 không xuất bất cứ thứ gì. Bạn có thể tải từng plugin jQuery của Bootstrap theo cách thủ công bằng cách tải các tệp

1 trong thư mục cấp cao nhất của gói

Bootstrap's


2 chứa một số siêu dữ liệu bổ sung theo các khóa sau

  • 
    
    3 - đường dẫn đến tệp nguồn Sass chính của Bootstrap
  • 
    
    4 - đường dẫn đến CSS không được rút gọn của Bootstrap đã được biên dịch trước bằng cài đặt mặc định (không có tùy chỉnh)

sợi

Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói sợi

________số 8

RubyGems

Cài đặt Bootstrap trong các ứng dụng Ruby của bạn bằng Bundler (được khuyến nghị) và RubyGems bằng cách thêm dòng sau vào


5 của bạn


0

Ngoài ra, nếu bạn không sử dụng Bundler, bạn có thể cài đặt gem bằng cách chạy lệnh này


1

Xem README của đá quý để biết thêm chi tiết

nhà soạn nhạc

Bạn cũng có thể cài đặt và quản lý Sass và JavaScript của Bootstrap bằng Composer


2

NuGet

Nếu bạn phát triển trong. NET, bạn cũng có thể cài đặt và quản lý CSS hoặc Sass và JavaScript của Bootstrap bằng NuGet

Tài liệu và ví dụ về kiểu dáng bảng chọn tham gia (do chúng được sử dụng phổ biến trong các plugin JavaScript) với Bootstrap

ví dụ

Do việc sử dụng rộng rãi các bảng trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, chúng tôi đã thiết kế các bảng của mình để được chọn tham gia. Chỉ cần thêm lớp cơ sở


31 vào bất kỳ

2 nào


3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


5

33

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


7

Tùy chọn đầu bảng

Tương tự với table và dark table, sử dụng các lớp bổ trợ


34 hoặc

35 để làm cho s có màu xám nhạt hoặc đậm

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


3

hàng sọc

Sử dụng


36 để thêm sọc vằn vào bất kỳ hàng nào trong bảng

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


7

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


7

bảng có viền

Thêm


37 cho đường viền trên tất cả các mặt của bảng và ô

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

bảng không viền

Thêm


38 cho bảng không có viền

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5


38 cũng có thể được sử dụng trên bàn tối

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

Hàng có thể di chuột

Thêm


70 để bật trạng thái di chuột trên các hàng của bảng trong một

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

Bàn nhỏ

Thêm


71 để làm cho các bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

npm install bootstrap
5

các lớp theo ngữ cảnh

Sử dụng các lớp theo ngữ cảnh để tô màu các hàng của bảng hoặc các ô riêng lẻ

ClassHeadingHeadingActiveCellCellDefaultCellCellPrimaryCellSecondaryCellCellSuccessCellCellDangerCellCảnh báoCellCellInfoCellCellLightCellCellDarkCellCell


73

Các biến thể nền của bảng thông thường không khả dụng với bảng tối, tuy nhiên, bạn có thể sử dụng các tiện ích nền hoặc văn bản để đạt được các kiểu tương tự

#HeadingHeading1CellCell2CellCell3CellCell4CellCell5CellCell6CellCell7CellCell8CellCell9CellCell


74

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp


72

Tạo các bảng đáp ứng bằng cách bao bọc bất kỳ


31 nào bằng

74, làm cho bảng cuộn theo chiều ngang tại mỗi điểm dừng của

75 lên tới (nhưng không bao gồm) 576px, 768px, 992px và 1120px tương ứng

Lưu ý rằng vì các trình duyệt hiện không hỗ trợ các truy vấn ngữ cảnh phạm vi, nên chúng tôi khắc phục các hạn chế của tiền tố


76 và

77 và chế độ xem có độ rộng phân số (ví dụ: có thể xảy ra trong một số điều kiện nhất định trên thiết bị có độ phân giải cao) bằng cách sử dụng các giá trị có độ chính xác cao hơn cho

chú thích

Một chức năng giống như một tiêu đề cho một bảng. Nó giúp người dùng có trình đọc màn hình tìm một bảng và hiểu nội dung của bảng đó cũng như quyết định xem họ có muốn đọc bảng đó không

Danh sách người dùng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


75

bảng đáp ứng

Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi trên tất cả các chế độ xem bằng cách gói một


31 với

79. Hoặc, chọn một điểm dừng tối đa để có một bảng phản hồi tối đa bằng cách sử dụng

74

Các bảng đáp ứng sử dụng


71, loại bỏ bất kỳ nội dung nào nằm ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích con của bên thứ ba khác

Luôn đáp ứng

Trên mọi điểm ngắt, hãy sử dụng


79 cho các bảng cuộn theo chiều ngang

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading1CellCellCellCellCellCellCell2CellCellCellCellCellCellCell3CellCellCellCellCellCellCell

Bootstrap là gì và tại sao nó được sử dụng?

Bootstrap là khung phát triển giao diện người dùng nguồn mở, miễn phí để tạo các trang web và ứng dụng web . Được thiết kế để cho phép phát triển đáp ứng các trang web ưu tiên thiết bị di động, Bootstrap cung cấp một bộ cú pháp cho các thiết kế mẫu.

Bạn có thể tìm tài liệu về cách sử dụng Bootstrap ở đâu?

Mã nguồn Bootstrap . Thư mục docs/ bao gồm mã nguồn cho tài liệu của chúng tôi và các ví dụ/ về cách sử dụng Bootstrap. Ngoài ra, bất kỳ tệp nào khác được bao gồm đều cung cấp hỗ trợ cho các gói, thông tin giấy phép và phát triển.

Bootstrap có yêu cầu loại tài liệu HTML5 không?

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 không hoàn chỉnh thú vị, nhưng việc bao gồm nó sẽ không gây ra bất kỳ trục trặc đáng kể nào.

Bootstrap là JavaScript 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.