Bootstrap 4 có rất nhiều lớp tiện ích/trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào Show
biên giớiSử dụng các lớp Thí dụThí dụMàu viềnThêm màu vào đường viền với bất kỳ lớp màu đường viền theo ngữ cảnh nào Thí dụThí dụBán kính biên giớiThêm các góc tròn vào một phần tử với các lớp Thí dụThí dụNổi và ClearfixDi chuyển một phần tử sang bên phải với lớp Thí dụThí dụ
Phao đáp ứngDi chuyển phần tử sang trái hoặc sang phải tùy thuộc vào độ rộng màn hình, với các lớp float đáp ứng ( Thí dụNổi ngay trên màn hình nhỏ hoặc rộng hơn Nổi ngay trên màn hình trung bình hoặc rộng hơn Nổi ngay trên màn hình lớn hoặc rộng hơn Nổi ngay trên màn hình cực lớn hoặc rộng hơn Thí dụNổi ngay trên màn hình nhỏ hoặc rộng hơn Nổi ngay trên màn hình trung bình hoặc rộng hơn Nổi ngay trên màn hình lớn hoặc rộng hơn Nổi ngay trên màn hình cực lớn hoặc rộng hơn không nổi Try it Yourself »Căn giữaCăn giữa một phần tử với lớp Thí dụThí dụcăn giữa Tự mình thử »Bề rộngĐặt chiều rộng của một phần tử với các lớp w-* ( Thí dụThí dụChiều rộng 25% Chiều rộng 50% Chiều rộng 75% Chiều rộng 100% Chiều rộng tối đa 100% Try it Yourself »Chiều caoĐặt chiều cao của phần tử với các lớp h-* ( Thí dụThí dụ
Chiều cao 25% Chiều cao 50% Chiều cao 75% Chiều cao 100% Chiều cao tối đa 100% Tự mình thử » khoảng cáchBootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: Các lớp được sử dụng trong định dạng. Trường hợp tài sản là một trong
Trường hợp các bên là một trong những
Trường hợp kích thước là một trong những
Ghi chú. lề cũng có thể âm, bằng cách thêm chữ "n" trước kích thước
Thí dụTôi chỉ có một phần đệm trên cùng (1. 5rem = 24px) Tôi có phần đệm ở tất cả các mặt (3rem = 48px) Tôi có lề ở tất cả các cạnh (3rem = 48px) và phần đệm phía dưới (3rem = 48px) Thí dụTôi chỉ có một phần đệm trên cùng (1. 5rem = 24px) Tôi có phần đệm ở tất cả các mặt (3rem = 48px) Tôi có lề ở tất cả các cạnh (3rem = 48px) và phần đệm phía dưới (3rem = 48px) Try it Yourself »Thêm ví dụ về khoảng cáchborder 03margin trên tất cả các bên ngoài, nó ____104Margin toptry Nó ____105margin bottomtry id ____106margin leftry eybóng tốiSử dụng các lớp Thí dụThí dụKhông có bóng cái bóng nhỏ bóng mặc định bóng lớn Try it Yourself »Căn dọcSử dụng các lớp Thí dụđường cơ sở trên cùng ở giữa dưới cùng văn bản trên cùng văn bản dưới cùng Thí dụđường cơ sở Nhúng đáp ứngTạo video phản hồi hoặc nhúng trình chiếu dựa trên chiều rộng của cha mẹ Thêm Thí dụThí dụ
Hiển thịSử dụng các lớp Thí dụThí dụtôi có thể nhìn thấy tôi vô hình Try it Yourself »Chức vụSử dụng lớp Thí dụ... Tự mình thử » Sử dụng lớp Thí dụ... Tự mình thử » Sử dụng lớp Thí dụ... Tự mình thử » đóng biểu tượngSử dụng lớp Trình đọc màn hìnhSử dụng lớp Thí dụTôi sẽ bị ẩn trên tất cả các màn hình ngoại trừ trình đọc màn hình Tự mình thử »Màu sắcNhư được mô tả trong chương Màu sắc, đây là danh sách tất cả các lớp màu nền và văn bản Các lớp cho màu văn bản là. Thí dụVăn bản này bị tắt tiếng văn bản này là quan trọng Văn bản này cho biết thành công Văn bản này đại diện cho một số thông tin Văn bản này đại diện cho một cảnh báo Văn bản này thể hiện sự nguy hiểm Văn bản phụ Văn bản màu xám đậm Bài kiểm tra cơ thể Văn bản màu xám nhạt Tự mình thử »Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, điều này sẽ thêm màu di chuột tối hơn Bạn cũng có thể thêm 50% opacity cho văn bản đen trắng với các lớp Thí dụVăn bản màu đen với độ mờ 50% trên nền trắng Văn bản màu trắng với độ mờ 50% trên nền đen Tự mình thử »Màu nềnCác lớp cho màu nền là. Lưu ý rằng màu nền không đặt màu cho văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp Thí dụvăn bản này là quan trọng Văn bản này cho biết thành công Văn bản này đại diện cho một số thông tin Văn bản này đại diện cho một cảnh báo Văn bản này thể hiện sự nguy hiểm Màu nền phụ Màu nền xám đậm Màu nền xám nhạt Tự mình thử »Kiểu chữ / Lớp văn bảnNhư đã mô tả trong chương Kiểu chữ, đây là danh sách tất cả các lớp kiểu chữ/văn bản LớpMô tảVí dụ_______154Các tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường (cỡ chữ lớn hơn và độ đậm của phông chữ nhẹ hơn) và có bốn loại để lựa chọn.border 55, border 56, border 57, border 58Try itborder 59Bold textTry itborder 60Bolder bold textTry itborder 61Normal textTry itborder 62Light weight textTry itborder 63Lighter weight textTry itborder 64Italic textTry itborder 65Makes a paragraph stand outTry itborder 66Indicates smaller text (set to 85% of the size of the parent)Try itborder 67Prevents long text from breaking layoutTry itborder 68Indicates
border 82Đặt tất cả các mục danh sách trên một dòng (được sử dụng cùng với border 83 trên mỗiborder 84Làm nên mộtelement scrollableHãy thử đi Phần tử khốiĐể biến một phần tử thành một phần tử khối, hãy thêm lớp Làm cách nào để đặt chân trang ở dưới cùng trong Bootstrap?Đặt chân trang ở cuối trang bằng Bootstrap . Add the following Bootstrap classes in the tag or a wrapper. d-flex flex-column min-vh-100. .. . Add the mt-auto class to the Làm cách nào để đặt vị trí nút trong Bootstrap?Định dạng là {property}-{position}. . top - cho vị trí trên cùng theo chiều dọc bắt đầu - cho vị trí nằm ngang bên trái (tính bằng LTR) đáy - cho vị trí đáy thẳng đứng kết thúc - cho vị trí nằm ngang bên phải (trong LTR) Làm cách nào để định vị các phần tử trong Bootstrap?Sắp xếp các phần tử dễ dàng với các tiện ích định vị cạnh. Định dạng là {property}-{position}. . top - cho vị trí trên cùng theo chiều dọc trái - cho vị trí nằm ngang bên trái đáy - cho vị trí đáy thẳng đứng bên phải - cho vị trí nằm ngang bên phải P3 trong Bootstrap là gì?Ký quỹ và phần đệm được thực hiện dễ dàng với Bootstrap. Hầu hết nhu cầu đệm và lề của bạn có thể được thực hiện với các thuộc tính Bootstrap này |