Danh sách đầy đủ tất cả các lớp Bootstrap 4Được tải lên bởi
MarCor Marco
67%[3]67% thấy tài liệu này hữu ích [3 phiếu bầu]
2 nghìn lượt xem24 trangthông tin tài liệu
nhấp để mở rộng thông tin tài liệuSự miêu tả
Lớp Bootstrap
bản quyền
© © Tất cả các quyền
định dạng có sẵn
DOCX, PDF, TXT hoặc đọc trực tuyến từ Scribd
Chia sẻ tài liệu này
Chia sẻ hoặc nhúng tài liệu
Chia sẻ lựa chọn
- Chia sẻ trên Facebook, mở ra một cửa sổ mới
Facebook
- Chia sẻ trên Twitter, mở ra một cửa sổ mới
Twitter
- Chia sẻ trên LinkedIn, mở ra một cửa sổ mới
LinkedIn
- Chia sẻ với Email, mở ứng dụng thư khách
E-mail
- Sao chép đường dẫn
Sao chép đường dẫn
Bạn có thấy tài liệu này hữu ích không?
67%67% thấy tài liệu này hữu ích, Hãy đánh dấu tài liệu này là hữu ích
33%33% thấy tài liệu này không hữu ích, Hãy đánh dấu tài liệu này là không hữu ích
Nội dung này có phù hợp không?
Báo cáo tài liệu nàyTải ngay
LưuLưu danh sách đầy đủ tất cả các lớp Bootstrap 4 để sử dụng sau
67%[3]67% thấy tài liệu này hữu ích [3 phiếu bầu]
Danh sách đầy đủ tất cả các lớp Bootstrap 4
Được tải lên bởi
MarCor MarcoSự miêu tả
Lớp Bootstrap
Mô tả đầy đủLưuLưu danh sách đầy đủ tất cả các lớp Bootstrap 4 để sử dụng sau
67%67% thấy tài liệu này hữu ích, Hãy đánh dấu tài liệu này là hữu ích
33%33% thấy tài liệu này không hữu ích, Hãy đánh dấu tài liệu này là không hữu ích
NhúngChia sẻ
InTải ngay
Chuyển đến trang
Bạn đang ở trang 1trong tổng số 24Tìm kiếm bên trong tài liệu
Bạn đang đọc bản xem trước miễn phí
Các trang 6 đến 8 are not shown in this preview.
Mua phiên bản đầy đủ
Bạn đang đọc bản xem trước miễn phí
Trang 12 đến 22 are not shown in this preview.
Mua phiên bản đầy đủ
Thưởng cho sự tò mò của bạn
Mọi thứ bạn muốn đọc
Bất cứ lúc nào. bất cứ nơi nào. Bất kỳ thiết bị
Không cam kết. Hủy bỏ bất cứ lúc nào
Chia sẻ tài liệu này
Chia sẻ hoặc nhúng tài liệu
Chia sẻ lựa chọn
- Chia sẻ trên Facebook, mở ra một cửa sổ mới
- Chia sẻ trên Twitter, mở ra một cửa sổ mới
- Chia sẻ trên LinkedIn, mở ra một cửa sổ mới
- Chia sẻ với Email, mở ứng dụng thư khách
- Sao chép đường dẫn
Trang Chủ Sách sách nói Các tài liệuđiều hướng nhanh
Lớp Mô tả Ví dụ Thể loại
.active
Thêm màu văn bản trắng vào liên kết hoạt động trong thanh điều hướng. Dùng thử Thanh điều hướng .active
Thêm màu nền xanh lam vào mục danh sách đang hoạt động trong một nhóm danh sách Dùng thử Nhóm danh sách .active
Thêm màu nền xanh đậm để mô phỏng nút "được nhấn" Dùng thử Các nút .active
Thêm màu nền xanh lam vào danh sách thả xuống đang hoạt động . alert
Tạo hộp thông báo cảnh báo Dùng thử Cảnh báo .alert-danger
Cảnh báo đỏ. Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực Hãy thử Cảnh báo .alert-dark
Cảnh báo tối. Hộp cảnh báo màu xám đậm Dùng thử Cảnh báo .active
0 Cho biết hộp cảnh báo có thể đóng được. Cùng với lớp .active
1, lớp này được sử dụng để đóng cảnh báo [thêm phần đệm bổ sung] Try it Alerts .active
2 Thêm .active
3 vào phần tử được chỉ định Try it Alerts .active
4 Teal alert. Cho biết một thay đổi hoặc hành động mang tính thông tin trung lập Hãy thử Cảnh báo .active
5 Cảnh báo nhẹ. Hộp cảnh báo màu xám nhạt Hãy thử Cảnh báo .active
6 Được sử dụng trên các liên kết bên trong cảnh báo để cung cấp các liên kết có màu phù hợp Hãy thử Cảnh báo .active
7 Cảnh báo màu xanh lam. Cho biết một hành động quan trọng Hãy thử Cảnh báo .active
8 Cảnh báo màu xám. Cho biết một hành động "ít quan trọng" Hãy thử Cảnh báo .active
9 Cảnh báo màu xanh lá cây. Cho biết một hành động thành công hoặc tích cực Hãy thử Cảnh báo .active
0 Cảnh báo màu vàng. Cho biết cần thận trọng với hành động này Hãy thử Cảnh báo .active
1 Phần tử được căn chỉnh với đường cơ sở của phần tử gốc. Đây là mặc định Try it Utilities .active
2 Phần tử được căn chỉnh với phần tử thấp nhất trên dòng Try it Utilities .active
3 Phần tử được đặt ở giữa phần tử cha Try it Utilities .active
4 Phần tử được căn chỉnh với phần trên cùng của phần tử cao nhất trên dòng . Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực Hãy dùng thử Huy hiệu .active
9 Huy hiệu tối. Hộp cảnh báo màu xám đậm Huy hiệu Dùng thử .active
0 Huy hiệu màu xanh mòng két. Biểu thị một thay đổi hoặc hành động mang tính thông tin trung lập Hãy dùng thử Huy hiệu .active
1 Huy hiệu ánh sáng. Hộp cảnh báo màu xám nhạt Huy hiệu dùng thử .active
2 Làm cho huy hiệu tròn trịa hơn Huy hiệu dùng thử .active
3 Huy hiệu màu xanh lam. Biểu thị một hành động quan trọng Dùng thử Huy hiệu .active
4 Huy hiệu màu xám. Cho biết một hành động "ít quan trọng hơn" Hãy thử Huy hiệu .active
5 Huy hiệu xanh. Biểu thị một hành động thành công hoặc tích cực Dùng thử Huy hiệu .active
6 Huy hiệu màu vàng. Cho biết cần thận trọng với hành động này Dùng thử Huy hiệu .active
7 Thêm màu nền đỏ vào một phần tử. Thể hiện sự nguy hiểm hoặc hành động tiêu cực Hãy thử Màu sắc .active
8 Thêm màu nền xám đậm vào một phần tử Hãy thử Màu sắc .active
9 Thêm màu nền xanh mòng két vào một phần tử. Đại diện cho một số thông tin Dùng thử Màu sắc ________ 70 Thêm màu nền xám nhạt vào một phần tử Dùng thử Màu sắc ________ 71 Thêm màu nền xanh lam vào một phần tử. Đại diện cho một cái gì đó quan trọng Dùng thử Màu sắc alert
2 Thêm màu nền xám cho một phần tử. Biểu thị một hành động "ít quan trọng" Dùng thử Màu sắc alert
3 Thêm màu nền xanh lục cho một phần tử. Cho biết thành công hoặc một hành động tích cực Dùng thử Màu sắc alert
4 Thêm màu nền vàng/cam vào một phần tử. Đại diện cho một cảnh báo hoặc một hành động tiêu cực Dùng thử Màu sắc alert
5 Kiểu trích dẫn các khối nội dung từ một nguồn khác [thêm cỡ chữ lớn hơn [1. 25rem]] Dùng thử Kiểu chữ alert
6 Tạo kiểu cho tiêu đề nguồn bên trong blockquote [văn bản màu xám nhạt có thụt đầu dòng] Dùng thử Kiểu chữ alert
7 Thêm đường viền vào phần tử Dùng thử Tiện ích alert
8 Xóa đường viền dưới cùng khỏi phần tử Dùng thử Tiện ích alert
9 Thêm đường viền màu đỏ . Cho biết vị trí của trang hiện tại trong hệ thống phân cấp điều hướng Dùng thử Phân trang .alert-dark
3 Kiểu liệt kê các mục hoặc liên kết bên trong breadcrumb Dùng thử Phân trang .alert-dark
4 Tạo một nút cơ bản [nền màu xám và các góc tròn] Dùng thử Các nút .alert-dark
5 Tạo một nút mức khối kéo dài toàn bộ chiều rộng . Biểu thị nguy hiểm hoặc hành động tiêu cực Hãy dùng thử Nút .alert-dark
8 Nhóm các nút lại với nhau trên một dòng Dùng thử Nhóm nút .alert-dark
9 Nhóm nút lớn [làm cho tất cả các nút trong một nhóm nút lớn hơn - tăng cỡ chữ và phần đệm] Nhóm nút dùng thử .active
00 Nhóm nút nhỏ . Đại diện cho một hành động hoặc thay đổi mang tính thông tin trung lập Hãy dùng thử Các nút .active
03 Nút màu xám nhạt Dùng thử Các nút .active
04 Làm cho một nút trông giống như một liên kết [nhận hành vi của nút] Dùng thử Các nút .active
05 Nút lớn Dùng thử Các nút .active
06 Nút có viền/đường viền màu xám đậm Dùng thử Các nút .active
07 . Biểu thị nguy hiểm hoặc hành động tiêu cực Hãy thử Các nút ________ 108 Đường viền/nút viền xanh mòng két. Đại diện cho một hành động hoặc thay đổi mang tính thông tin trung lập Hãy dùng thử Các nút .active
09 Nút có đường viền/đường viền màu xám nhạt Dùng thử Các nút .active
10 Nút có đường viền/đường viền màu xanh lam. Dùng thử Các nút .active
11 Nút có đường viền/đường viền màu xám. Biểu thị một hành động "ít quan trọng" hơn Hãy dùng thử Các nút .active
12 Nút có đường viền/đường viền màu xanh lá cây. Biểu thị thành công hoặc một hành động tích cực Hãy thử Các nút .active
13 Nút có đường viền/đường viền màu cam. Đại diện cho cảnh báo hoặc một hành động tiêu cực Hãy thử Nút .active
14 Nút màu xanh lam. Biểu thị một điều gì đó quan trọng Hãy thử Các nút ________ 115 Nút nhỏ Hãy thử Các nút ________ 116 Nút màu xám. Biểu thị một hành động "ít quan trọng" Hãy thử Các nút .active
17 Nút màu xanh lá cây. Biểu thị thành công hoặc một hành động tích cực Hãy dùng thử Các nút .active
18 Kết hợp các nhóm nút thành thanh công cụ nút cho các thành phần phức tạp hơn Dùng thử Nhóm nút .active
19 Nút màu cam. Thể hiện cảnh báo hoặc hành động tiêu cực Dùng thử Các nút .active
20 Tạo thẻ Dùng thử Thẻ .active
21 Vùng chứa nội dung thẻ Dùng thử Thẻ .active
22 Vùng chứa để tạo lưới các thẻ giống khối xây Dùng thử Thẻ .active
23 Thêm màu nền đỏ vào thẻ. Biểu thị sự nguy hiểm hoặc hành động tiêu cực Dùng thử Thẻ .active
24 Thêm màu nền xám vào thẻ Dùng thử Thẻ .active
25 Vùng chứa để tạo lưới các thẻ có chiều cao và chiều rộng bằng nhau Dùng thử Thẻ .active
26 Chân trang Thẻ Dùng thử Thẻ .active
27 Vùng chứa để tạo một . Thường được sử dụng để thêm văn bản lên trên hình ảnh Try it Cards ________ 133 Đặt hình ảnh ở trên cùng bên trong thẻ Try it Cards ________ 134 Thêm màu nền xanh lục vào thẻ. Thể hiện một số thông tin Try it Cards .active
35 Thêm màu nền xám nhạt vào thẻ Try it Cards .active
36 Thêm màu xanh lam vào bất kỳ liên kết nào và hiệu ứng di chuột bên trong thẻ Try it Cards .active
37 Thêm màu nền xanh lam vào thẻ. Đại diện cho điều gì đó quan trọng Dùng thử Thẻ .active
38 Thêm màu nền xám vào thẻ. Đại diện cho một cái gì đó "ít" quan trọng hơn Dùng thử Thẻ .active
39 .active
39 được sử dụng sau một .active
41 và thêm phần sau vào một phần tử. .active
42 Thẻ dùng thử .active
43 Thêm màu nền xanh lá cây vào thẻ. Biểu thị thành công hoặc một hành động tích cực Try it Cards .active
44 Được sử dụng để xóa lề dưới cho phần tử p nếu nó là phần tử con cuối cùng [hoặc phần tử duy nhất], bên trong .active
21 Try it Cards .active
41 Thêm tiêu đề vào bất kỳ phần tử tiêu đề nào bên trong thẻ Try it Cards . Đại diện cho một cảnh báo hoặc một hành động tiêu cực Dùng thử Thẻ .active
48 Tạo băng chuyền [trình chiếu] Dùng thử Băng chuyền .active
49 Tạo văn bản chú thích cho mỗi trang trình bày trong băng chuyền Dùng thử Băng chuyền .active
50 Vùng chứa cho liên kết mục/băng chuyền "tiếp theo" Dùng thử Băng chuyền .active
51 Được sử dụng cùng nhau . Điều này thường được sử dụng cho các cảnh báo và phương thức. Thường được sử dụng cùng với biểu tượng × để tạo biểu tượng thực [chữ "x" trông đẹp hơn]. Nó nổi bên phải theo mặc định Dùng thử Tiện ích .active
61 Tạo các cột biểu mẫu tự động định cỡ dựa trên nội dung của chúng Dùng thử Biểu mẫu .active
62 Tạo bố cục cột cho các thiết bị cực nhỏ [và trên/tất cả các thiết bị, nếu không được kết hợp với các lớp cột khác]. .active
63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active
64 Tạo bố cục cột cho các thiết bị nhỏ [và cao hơn, nếu không được kết hợp với các lớp cột khác]. .active
63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active
66 Tạo bố cục cột cho các thiết bị trung bình [và cao hơn, nếu không được kết hợp với các lớp cột khác]. .active
63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active
68 Tạo bố cục cột cho các thiết bị lớn [và cao hơn, nếu không được kết hợp với các lớp cột khác]. .active
63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active
70 Tạo bố cục cột cho các thiết bị cực lớn. .active
63 có thể là một số từ 1 đến 12 Dùng thử Hệ thống lưới .active
72 Cho biết nội dung có thể thu gọn - có thể bị ẩn hoặc hiển thị theo yêu cầu Dùng thử Thu gọn .active
73 Hiển thị nội dung có thể thu gọn theo mặc định Dùng thử Thu gọn. Lề bằng nhau ở bên trái và bên phải. Dùng thử Bộ chứa .active
75 Một bộ chứa kéo dài toàn bộ chiều rộng của màn hình Dùng thử Bộ chứa .active
76 Bộ chứa đáp ứng Dùng thử Bộ chứa .active
77 Một bộ chứa/bộ chứa cho các hộp kiểm tùy chỉnh Dùng thử Biểu mẫu tùy chỉnh .active
78 Một bộ chứa/bộ chứa cho các biểu mẫu tùy chỉnh Dùng thử Biểu mẫu tùy chỉnh .active
79 Biểu mẫu tùy chỉnh . menu thả xuống] Dùng thử Menu thả xuống .active
99 Được sử dụng để thêm văn bản thuần túy vào mục thả xuống hoặc được sử dụng trên các liên kết để tạo kiểu liên kết mặc định Dùng thử Menu thả xuống .active
00 Thêm kiểu mặc định cho vùng chứa menu thả xuống Dùng thử Menu thả xuống .active
01 Căn phải menu thả xuống Thử . Làm cho video hoặc bản trình chiếu có tỷ lệ phù hợp trên mọi thiết bị Dùng thử Hình ảnh .active
26 Vùng chứa nội dung được nhúng. Tạo một 16. Nội dung được nhúng theo tỷ lệ khung hình 9 Dùng thử Hình ảnh .active
27 Vùng chứa nội dung được nhúng. Tạo 3. Nội dung nhúng tỷ lệ khung hình 4 Dùng thử Hình ảnh .active
28 Được sử dụng bên trong .active
25. Chia tỷ lệ video độc đáo thành phần tử gốc Dùng thử Hình ảnh .active
30 Thêm hiệu ứng mờ dần khi đóng hộp cảnh báo Hãy dùng thử Cảnh báo .active
30 Thêm hiệu ứng mờ dần khi hiển thị nội dung tab/thuốc Thử Navs .active
30 Thêm hiệu ứng mờ dần khi mở một chế độ Dùng thử phương thức . Dùng thử Flex .active
37 Hiển thị các mục uốn cong theo chiều dọc, đảo ngược Dùng thử Flex .active
38 Hiển thị các mục uốn cong theo chiều dọc, đảo ngược, trên các kích thước màn hình khác nhau Dùng thử Flex . đậm hơn] Dùng thử Kiểu chữ .active
61 Văn bản có trọng lượng nhẹ [phông chữ. 300] Dùng thử Kiểu chữ .active
62 Văn bản có trọng lượng nhẹ hơn [trọng lượng phông chữ. nhẹ hơn] Dùng thử Kiểu chữ .active
63 Văn bản bình thường [độ dày phông chữ. 400] Dùng thử Kiểu chữ .active
64 Vùng chứa các hộp kiểm. Thêm phần đệm phù hợp Dùng thử Biểu mẫu .active
65 Làm cho các hộp kiểm xuất hiện trên cùng một dòng [theo chiều ngang] Dùng thử Biểu mẫu .active
66 Các hộp kiểm kiểu có lề phù hợp Dùng thử Biểu mẫu .active
67 Đảm bảo lề phù hợp cho các nhãn được sử dụng cùng với các hộp kiểm Dùng thử Biểu mẫu .active
68 Được sử dụng trên đầu vào, vùng văn bản và . 100% và chiều cao. tự động] Dùng thử Hình ảnh .active
88 Định hình hình ảnh thành hình thu nhỏ [viền xám nhạt mỏng] Dùng thử Hình ảnh .active
89 Hiển thị văn bản bên trong phần tử .active
90 ở cỡ chữ nhỏ hơn một chút Dùng thử Kiểu chữ .active
91 Vùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản . Ghi chú. đối với phía máy chủ Dùng thử Biểu mẫu .active
03 Xác thực thành phần biểu mẫu [thêm đường viền màu lục vào các trường nhập]. Ghi chú. cho phía máy chủ Dùng thử Biểu mẫu .active
04 Tạo tiêu đề/hộp màu xám có đệm với các góc tròn giúp phóng to kích thước phông chữ của văn bản bên trong nó. Được sử dụng để thu hút thêm sự chú ý đến một số nội dung hoặc thông tin đặc biệt Hãy dùng thử Jumbotron .active
05 Tạo một jumbotron có chiều rộng đầy đủ [tiêu đề đệm màu xám] không có viền tròn Dùng thử Jumbotron .active
06 Căn chỉnh các mục linh hoạt từ đầu, ở cuối, căn giữa, ở giữa và " .active
14 Xóa một số đường viền và góc tròn khỏi các mục danh sách trong một nhóm danh sách Try it List Group .active
15 Hiển thị các mục danh sách theo chiều ngang thay vì theo chiều dọc [cạnh nhau thay vì xếp chồng lên nhau] Try it List Group .active
16 .active
18 Đã thêm vào các liên kết bên trong nhóm danh sách để làm cho chúng nổi bật khi di chuột [nền tối hơn] Try it List Group .active
19 Màu nền đỏ cho một mục danh sách trong nhóm danh sách Try it List Group .active
20 Dark .active
27 Đặt tất cả các mục trong danh sách trên một dòng [được sử dụng cùng với .active
26 trên phần tử gốc- phần tử] Dùng thử Kiểu chữ
.active
30 Xóa tất cả kiểu danh sách mặc định [dấu đầu dòng, lề trái, v.v. ] kiểu dáng từ một- hoặc
- list Dùng thử Kiểu chữ
.active
31 Văn bản nổi bật. Văn bản được tô sáng Dùng thử Kiểu chữ .active
32 Căn chỉnh các đối tượng phương tiện cùng với nội dung [như hình ảnh hoặc video - thường được sử dụng cho nhận xét trong bài đăng trên blog, v.v.] Dùng thử Đối tượng phương tiện .active
33 Vùng chứa nội dung phương tiện Dùng thử Đối tượng phương tiện .active
34 Xác định nội dung dưới dạng phương thức và mang . Thêm bất kỳ đánh dấu HTML nào tại đây [p, img, v.v.] Dùng thử Phương thức .active
36 Tạo kiểu cho phương thức [đường viền, màu nền, v.v.]. Bên trong này, thêm tiêu đề, nội dung và chân trang của phương thức, nếu cần Dùng thử Phương thức .active
37 Căn giữa phương thức theo chiều dọc và chiều ngang trong trang Hãy dùng thử Phương thức .active
38 Thêm một thanh cuộn bên trong phương thức Dùng thử Phương thức .active
39 Chân trang của phương thức [thường chứa một . * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
45 Lớp lề trên đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
46 Các lớp lề dưới đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
47 Các lớp lề trái đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
48 Các lớp lề phải đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
49 Các lớp tự động [ngang] lề trái và phải đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
50 Các lớp tự động [dọc] lề trên và dưới đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5 Dùng thử Tiện ích .active
51 Căn giữa một phần tử theo chiều ngang Dùng thử Tiện ích .active
52 Tạo menu theo thẻ Dùng thử Tab .active
53 Tạo menu thuốc Dùng thử Tab .active
54 Căn chỉnh các liên kết tab/viên thuốc có độ rộng bằng nhau Dùng thử Tab .active
55 . bộ chứa thanh điều hướng Dùng thử Thanh điều hướng .active
57 Đã thêm vào một liên kết hoặc phần tử tiêu đề bên trong thanh điều hướng để thể hiện logo hoặc tiêu đề Dùng thử Thanh điều hướng .active
58 Thu gọn thanh điều hướng [ẩn và thay thế bằng biểu tượng menu/bánh mì kẹp thịt trên điện thoại di động và máy tính bảng nhỏ] Dùng thử . Tự động tạo kiểu dưới dạng bánh hamburger/ba thanh Dùng thử Thanh điều hướng .active
64 Được sử dụng để tạo kiểu cho các liên kết/neo bên trong thanh điều hướng Dùng thử Thanh điều hướng .active
65 Được sử dụng để tạo kiểu cho các mục danh sách bên trong thanh điều hướng Dùng thử Thanh điều hướng .active
66 Thêm kiểu xác thực vào biểu mẫu đã gửi Dùng thử Biểu mẫu .active
67 Xóa máng xối