Danh sách lớp bootstrap 4 với mô tả pdf
|
Danh sách đầy đủ tất cả các lớp Bootstrap 4 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ệunhấp để mở rộng thông tin tài liệu
Lớp Bootstrap bản quyền© © Tất cả các quyền định dạng có sẵnDOCX, PDF, TXT hoặc đọc trực tuyến từ Scribd Chia sẻ tài liệu nàyChia sẻ hoặc nhúng tài liệuChia sẻ lựa chọ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ởiMarCor Marco
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í Mua phiên bản đầy đủ Bạn đang đọc bản xem trước miễn phí Mua phiên bản đầy đủ Thưởng cho sự tò mò của bạnMọ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àyChia sẻ hoặc nhúng tài liệuChia sẻ lựa chọn
Trang Chủ Sách sách nói Các tài liệu 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 .active0 Cho biết hộp cảnh báo có thể đóng được. Cùng với lớp .active1, lớp này được sử dụng để đóng cảnh báo (thêm phần đệm bổ sung) Try it Alerts .active2 Thêm .active3 vào phần tử được chỉ định Try it Alerts .active4 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 .active5 Cảnh báo nhẹ. Hộp cảnh báo màu xám nhạt Hãy thử Cảnh báo .active6 Đượ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 .active7 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 .active8 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 .active9 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 .active0 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 .active1 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 .active2 Phần tử được căn chỉnh với phần tử thấp nhất trên dòng Try it Utilities .active3 Phần tử được đặt ở giữa phần tử cha Try it Utilities .active4 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 .active9 Huy hiệu tối. Hộp cảnh báo màu xám đậm Huy hiệu Dùng thử .active0 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 .active1 Huy hiệu ánh sáng. Hộp cảnh báo màu xám nhạt Huy hiệu dùng thử .active2 Làm cho huy hiệu tròn trịa hơn Huy hiệu dùng thử .active3 Huy hiệu màu xanh lam. Biểu thị một hành động quan trọng Dùng thử Huy hiệu .active4 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 .active5 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 .active6 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 .active7 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 .active8 Thêm màu nền xám đậm vào một phần tử Hãy thử Màu sắc .active9 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 alert2 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 alert3 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 alert4 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 alert5 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ữ alert6 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ữ alert7 Thêm đường viền vào phần tử Dùng thử Tiện ích alert8 Xóa đường viền dưới cùng khỏi phần tử Dùng thử Tiện ích alert9 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-dark3 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-dark4 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-dark5 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-dark8 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-dark9 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ử .active00 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 .active03 Nút màu xám nhạt Dùng thử Các nút .active04 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 .active05 Nút lớn Dùng thử Các nút .active06 Nút có viền/đường viền màu xám đậm Dùng thử Các nút .active07 . 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 .active09 Nút có đường viền/đường viền màu xám nhạt Dùng thử Các nút .active10 Nút có đường viền/đường viền màu xanh lam. Dùng thử Các nút .active11 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 .active12 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 .active13 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 .active14 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 .active17 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 .active18 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 .active19 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 .active20 Tạo thẻ Dùng thử Thẻ .active21 Vùng chứa nội dung thẻ Dùng thử Thẻ .active22 Vùng chứa để tạo lưới các thẻ giống khối xây Dùng thử Thẻ .active23 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ẻ .active24 Thêm màu nền xám vào thẻ Dùng thử Thẻ .active25 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ẻ .active26 Chân trang Thẻ Dùng thử Thẻ .active27 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 .active35 Thêm màu nền xám nhạt vào thẻ Try it Cards .active36 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 .active37 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ẻ .active38 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ẻ .active39 .active39 được sử dụng sau một .active41 và thêm phần sau vào một phần tử. .active42 Thẻ dùng thử .active43 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 .active44 Đượ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 .active21 Try it Cards .active41 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ẻ .active48 Tạo băng chuyền (trình chiếu) Dùng thử Băng chuyền .active49 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 .active50 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 .active51 Đượ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 .active61 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 .active62 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). .active63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active64 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). .active63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active66 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). .active63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active68 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). .active63 có thể là một số từ 1 đến 12 Hãy dùng thử Hệ thống lưới .active70 Tạo bố cục cột cho các thiết bị cực lớn. .active63 có thể là một số từ 1 đến 12 Dùng thử Hệ thống lưới .active72 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 .active73 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 .active75 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 .active76 Bộ chứa đáp ứng Dùng thử Bộ chứa .active77 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 .active78 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 .active79 Biểu mẫu tùy chỉnh . menu thả xuống) Dùng thử Menu thả xuống .active99 Đượ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 .active00 Thêm kiểu mặc định cho vùng chứa menu thả xuống Dùng thử Menu thả xuống .active01 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 .active26 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 .active27 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 .active28 Được sử dụng bên trong .active25. Chia tỷ lệ video độc đáo thành phần tử gốc Dùng thử Hình ảnh .active30 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 .active30 Thêm hiệu ứng mờ dần khi hiển thị nội dung tab/thuốc Thử Navs .active30 Thêm hiệu ứng mờ dần khi mở một chế độ Dùng thử phương thức . Dùng thử Flex .active37 Hiển thị các mục uốn cong theo chiều dọc, đảo ngược Dùng thử Flex .active38 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ữ .active61 Văn bản có trọng lượng nhẹ (phông chữ. 300) Dùng thử Kiểu chữ .active62 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ữ .active63 Văn bản bình thường (độ dày phông chữ. 400) Dùng thử Kiểu chữ .active64 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 .active65 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 .active66 Các hộp kiểm kiểu có lề phù hợp Dùng thử Biểu mẫu .active67 Đả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 .active68 Đượ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 .active88 Đị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 .active89 Hiển thị văn bản bên trong phần tử .active90 ở cỡ chữ nhỏ hơn một chút Dùng thử Kiểu chữ .active91 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 .active03 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 .active04 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 .active05 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 .active06 Căn chỉnh các mục linh hoạt từ đầu, ở cuối, căn giữa, ở giữa và " .active14 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 .active15 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 .active16 .active18 Đã 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 .active19 Màu nền đỏ cho một mục danh sách trong nhóm danh sách Try it List Group .active20 Dark .active27 Đặ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 .active26 trên phần tử gốc
.active30 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
.active31 Văn bản nổi bật. Văn bản được tô sáng Dùng thử Kiểu chữ .active32 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 .active33 Vùng chứa nội dung phương tiện Dùng thử Đối tượng phương tiện .active34 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 .active36 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 .active37 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 .active38 Thêm một thanh cuộn bên trong phương thức Dùng thử Phương thức .active39 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 .active45 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 .active46 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 .active47 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 .active48 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 .active49 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 .active50 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 .active51 Căn giữa một phần tử theo chiều ngang Dùng thử Tiện ích .active52 Tạo menu theo thẻ Dùng thử Tab .active53 Tạo menu thuốc Dùng thử Tab .active54 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 .active55 . bộ chứa thanh điều hướng Dùng thử Thanh điều hướng .active57 Đã 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 .active58 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 .active64 Đượ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 .active65 Đượ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 .active66 Thêm kiểu xác thực vào biểu mẫu đã gửi Dùng thử Biểu mẫu .active67 Xóa máng xối Các lớp Bootstrap khác nhau là gì?Tất cả các lớp CSS Bootstrap . đàn phong cầm. . đàn accordion. nút đàn accordion. đàn accordion sụp đổ. đàn accordion tuôn ra. tiêu đề đàn accordion. mục đàn accordion. sụp đổ cảnh báo. . danh hiệu. . biên giới. . vụn bánh mì. . Nhóm nút. . Công cụ sửa đổi nút. . nút Bootstrap có bao nhiêu lớp?Lưới của Bootstrap bao gồm sáu tầng của các lớp được xác định trước để xây dựng các bố cục đáp ứng phức tạp. Tùy chỉnh kích thước cột của bạn trên các thiết bị cực nhỏ, nhỏ, trung bình, lớn hoặc cực lớn theo cách bạn thấy phù hợp.
Kiểu CSS được sử dụng trong Bootstrap 4 là gì?Bootstrap 4 sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5
Bootstrap 4 hay 5 tốt hơn?Bootstrap 5 bao gồm các điều khiển biểu mẫu tùy chỉnh. Các điều khiển biểu mẫu của Bootstrap 4 đã sử dụng bất kỳ giá trị đặt trước nào có sẵn trong mỗi trình duyệt. Các điều khiển biểu mẫu trong Bootstrap 5 sẽ có giao diện và cảm giác nhất quán hơn đáng kể trên tất cả các trình duyệt do thiết kế tùy chỉnh của chúng. |
