Bootstrap trái
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 Ví dụVí 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 Ví dụVí 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 Ví dụVí dụNổi và ClearfixDi chuyển một phần tử sang bên phải với lớp Ví dụVí 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 ( Ví 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 Ví 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 Ví dụVí dụcăn giữa Tự mình thử »Chiều rộngĐặt chiều rộng của một phần tử với các lớp w-* ( Ví dụVí 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-* ( Ví dụVí 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
Ví 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) Ví 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 cạnh nó ____104Margin toptry Nó ____105margin bottomtry eybóng tốiSử dụng các lớp Ví dụVí 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 Ví 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 Ví 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 Ví dụVí dụ
Hiển thịSử dụng các lớp Ví dụVí 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 Ví dụ... Tự mình thử » Sử dụng lớp Ví dụ... Tự mình thử » Sử dụng lớp Ví 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 Ví 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à. Ví 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 Ví 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 Ví 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 Kéo trái trong Bootstrap là gì?lớp pull-left được dùng để di chuyển phần tử sang bên trái . Các. lớp kéo bên phải được sử dụng để di chuyển phần tử sang bên phải.
Làm cách nào để thay đổi vị trí 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 Làm cách nào để căn chỉnh div ngay trong Bootstrap?Trong Bootstrap 4, có thể căn chỉnh các phần tử sang bên phải bằng cách sử dụng bất kỳ lớp nào sau đây. . Thêm lớp float-right. Các. . Sử dụng lớpjustify-content-end. Các. . Thêm một lớp align-items-right. . sử dụng. . Sử dụng lớp text-right Phao trong Bootstrap là gì?Tổng quan. Các lớp tiện ích này thả nổi một phần tử sang trái hoặc phải hoặc vô hiệu hóa thả nổi, dựa trên kích thước khung nhìn hiện tại bằng cách sử dụng thuộc tính float CSS . . quan trọng được bao gồm để tránh các vấn đề cụ thể. Chúng sử dụng các điểm dừng chế độ xem giống như hệ thống lưới của chúng tôi. |