Bootstrap 4 Tiện ích – bootstrap 4 lớp lề

Bạn đang xem : bootstrap 4 lớp lề

Bootstrap 4

Tiện ích

Bootstrap 4 Utilities

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.

Đường viền

Sử dụng các lớp border để thêm hoặc xóa đường viền khỏi một phần tử:

Ví dụ

Ví dụ

& lt; span class = “border” & gt; & lt; / span & gt;
& lt; span class = “border border-0” & gt; & lt; / span & gt;
& lt; span class = “border border-top-0” & gt; & lt; / span & gt;
& lt; span class = “border border-right-0” & gt; & lt; / span & gt;
& lt; span
class = “border border-bottom-0” & gt; & lt; / span & gt;
& lt; span class = “border border-left-0” & gt; & lt; / span & gt;

Hãy tự mình thử »

Màu đường viền

Thêm màu vào đường viền bằng bất kỳ lớp màu đường viền nào theo ngữ cảnh:

Ví dụ

Ví dụ

& lt; span class = “border border-primary” & gt; & lt; / span & gt;
& lt; span class = “border
border-second “& gt; & lt; / span & gt;
& lt; span class =” border border-success “& gt; & lt; / span & gt;
& lt; span class = “border border-risk” & gt; & lt; / span & gt;
& lt; span class = “border
border-warning “& gt; & lt; / span & gt;
& lt; span class =” border border-info “& gt; & lt; / span & gt;
& lt; span class = “border border-light” & gt; & lt; / span & gt;
& lt; span class = “border
border-dark “& gt; & lt; / span & gt;
& lt; span class =” border border-white “& gt; & lt; / span & gt;

Hãy tự mình thử »

Bán kính đường viền

Thêm các góc được làm tròn vào phần tử có các lớp được làm tròn :

Ví dụ

​​

Ví dụ

& lt; span class = “round-sm” & gt; & lt; / span & gt;
& lt; span class = “round” & gt; & lt; / span & gt;
& lt; span class = “round-lg” & gt; & lt; / span & gt;
& lt; span class = “round-top” & gt; & lt; / span & gt;
& lt; span class = “round-right” & gt; & lt; / span & gt;
& lt; span
class = “round-bottom” & gt; & lt; / span & gt;
& lt; span class = “round-left” & gt; & lt; / span & gt;
& lt; span class = “round-circle” & gt; & lt; / span & gt;
& lt; span
class = “round-0” & gt; & lt; / span & gt;

Hãy tự mình thử »

Float và Clearfix

Đánh dấu phần tử sang bên phải với lớp . float-right hoặc sang bên trái với . float-left < / code>, và clear float với lớp . clearfix :

Ví dụ

Nổi trái

Nổi bên phải

Ví dụ

& lt; div class = "clearfix" & gt;
& lt; span class = "float-left" & gt; Nổi trái & lt; / span & gt;
& lt; span
class = "float-right" & gt; Float right & lt; / span & gt;
& lt; / div & gt;

Hãy tự mình thử »

Pha nổi đáp ứng

Làm nổi một phần tử sang trái hoặc sang phải tùy thuộc vào chiều rộng màn hình, với các lớp float đáp ứng (. float - * - left | right - where * is sm (& gt; = 576px), md (& gt; = 768px), lg (& gt; = 992px) hoặc xl (& gt; = 1200px)):

Ví dụ

Nổi ngay trên màn hình nhỏ trở lên

Nổi ngay trên màn hình trung bình trở lê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

Float none

Ví dụ

& lt; div class = "float-sm-right" & gt; Nổi ngay trên màn hình nhỏ hoặc rộng hơn & lt; / div & gt; & lt; br & gt;
& lt; div class = "float-md-right" & gt; Nổi ngay trên màn hình trung bình trở lên & lt; / div & gt; & lt; br & gt;
& lt; div class = "float-lg-right" & gt; Nổi ngay trên màn hình lớn hoặc rộng hơn & lt; / div & gt; & lt; br & gt;
& lt; div class = "float-xl-right" & gt; Nổi ngay trên màn hình cực lớn hoặc
rộng hơn & lt; / div & gt; & lt; br & gt;
& lt; div class = "float-none" & gt; Float none & lt; / div & gt;

Hãy tự mình thử »

Căn giữa

Căn giữa một phần tử bằng lớp . mx-auto (thêm margin-left và margin-right: auto):

Ví dụ

Căn giữa

Ví dụ

& lt; div class = "mx-auto
bg-warning "style =" width: 150px "& gt; Căn giữa & lt; / div & gt;

Hãy 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- * (. w-25 , . w-50 < / code>, . w-75 , . w-100 , .mw-100 ):

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%

Ví dụ

& lt; div class = "w-25 bg-warning" & gt; Width 25% & lt; / div & gt;
& lt; div class = "w-50 bg-warning" & gt; Width
50% & lt; / div & gt;
& lt; div class = "w-75 bg-warning" & gt; Width 75% & lt; / div & gt;
& lt; div
class = "w-100 bg-warning" & gt; Width 100% & lt; / div & gt;
& lt; div class = "mw-100 bg-warning" & gt; Chiều rộng tối đa 100% & lt; / div & gt;

Hãy tự mình thử »

Chiều cao

Đặt chiều cao của phần tử bằng các lớp h- * (. h-25 , . h-50 < / code>, . h-75 , . h-100 , .mh-100 ):

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%

Ví dụ

& lt; div style = "height: 200px; background-color: #ddd" & gt;
& lt; div class = "h-25 bg-warning" & gt; Chiều cao 25% & lt; / div & gt;
& lt; div class = "h-50 bg-warning" & gt; Chiều cao
50% & lt; / div & gt;
& lt; div class = "h-75 bg-warning" & gt; Chiều cao 75% & lt; / div & gt;
& lt; div
class = "h-100 bg-warning" & gt; Chiều cao 100% & lt; / div & gt;
& lt; div class = "mh-100 bg-warning"
style = "height: 500px" & gt; Chiều cao Tối đa 100% & lt; / div & gt;
& lt; / div & gt;

Hãy tự mình thử »

Khoảng cách

Bootstrap 4 có nhiều loại tiện ích lề và đệm đáp ứng.
Chúng hoạt động cho tất cả các điểm ngắt: xs (& lt; = 576px), sm (& gt; = 576px), md (& gt; = 768px), lg (& gt; = 992px) hoặc xl (& gt; = 1200px)):

Các lớp được sử dụng ở định dạng: {property} {side} - {size} cho xs {property} {side} - {breakpoint} - {size} cho sm , md , lg xl .

Nơi thuộc tính là một trong những:

  • m - bộ margin
  • p - bộ padding

Nơi các bên là một trong:

  • t - set margin-top hoặc padding- đầu trang
  • b - bộ margin-bottom hoặc padding- dưới cùng
  • l - bộ margin-left hoặc padding-left
  • r - set margin-right hoặc padding- đúng
  • x - đặt cả padding-left padding -right hoặc margin-left margin-right
  • y - đặt cả padding-top padding -bottom hoặc margin-top margin-bottom
  • blank - đặt margin hoặc padding trên cả 4 mặt của phần tử

Trong đó kích thước là một trong số:

  • 0 - bộ margin hoặc padding đến 0
  • 1 - bộ margin hoặc padding thành . 25rem (4px nếu font-size là 16px)
  • 2 - bộ margin hoặc padding thành . 5rem (8px nếu font-size là 16px)
  • 3 - bộ margin hoặc padding thành 1rem (16px nếu font-size là 16px)
  • 4 - bộ margin hoặc padding thành 1.5rem (24px nếu font-size là 16px)
  • 5 - bộ margin hoặc padding thành 3rem (48px nếu font-size là 16px)
  • auto - đặt margin thành tự động

Lưu ý: lề cũng có thể là số âm, bằng cách thêm "n" vào trước kích thước:

  • n1 - đặt margin thành -. 25rem < / code> (-4px nếu font-size là 16px)
  • n2 - đặt margin thành -. 5rem < / code> (-8px nếu font-size là 16px)
  • n3 - đặt margin thành - 1rem (-16px nếu font-size là 16px)
  • n4 - đặt margin thành - 1.5rem < / code> (-24px nếu font-size là 16px)
  • n5 - đặt margin thành - 3rem (-48px nếu font-size là 16px)

Ví dụ

Tôi chỉ có phần đệm trên cùng (1.5rem = 24px)

Tôi có phần đệm ở tất cả các bên (3rem = 48px)

Tôi có lề ở tất cả các bên (3rem = 48px) và đệm ở dưới (3rem = 48px)

Ví dụ

& lt; div class = "pt-4 bg-warning" & gt; Tôi chỉ có phần đệm trên cùng (1.5rem =
24px) & lt; / div & gt;
& lt; div class = "p-5 bg-success" & gt; Tôi có một phần đệm ở tất cả các bên
(3rem = 48px) & lt; / div & gt;
& lt; div class = "m-5 pb-5 bg-info" & gt; Tôi có lợi nhuận trên
tất cả các bên (3rem = 48px) và đệm ở dưới (3rem = 48px) & lt; / div & gt;

Hãy tự mình thử »

Thêm các ví dụ về khoảng cách

Bóng đổ

Sử dụng các lớp shadow- để thêm bóng vào một phần tử:

Ví dụ

Không có bóng

Bóng nhỏ

Bóng mặc định

Bóng lớn

Ví dụ

& lt; div class = "shadow-none p-4 mb-4 bg-light" & gt; Không có bóng & lt; / div & gt;
& lt; div
class = "shadow-sm p-4 mb-4 bg-white" & gt; Nhỏ
shadow & lt; / div & gt;
& lt; div class = "shadow p-4 mb-4 bg-white" & gt; Mặc định
shadow & lt; / div & gt;
& lt; div class = "shadow-lg p-4 mb-4 bg-white" & gt; Large
bóng & lt; / div & gt;

Hãy tự mình thử »

Căn chỉnh theo chiều dọc

Sử dụng align- các lớp để thay đổi căn chỉnh của các phần tử (chỉ hoạt động trên các phần tử nội tuyến, inline-block, inline-table và in table cell):

Ví dụ

đường cơ sở

top

middle

bottom

text-top

text-bottom

Ví dụ

& lt; span class = "align-baseline" & gt; baseline & lt; / span & gt;
& lt; span
class = "align-top" & gt; top & lt; / span & gt;
& lt; span class = "align-middle" & gt; middle & lt; / span & gt;
& lt; span class = "align-bottom" & gt; bottom & lt; / span & gt;
& lt; span
class = "align-text-top" & gt; text-top & lt; / span & gt;
& lt; span
class = "align-text-bottom" & gt; text-bottom & lt; / span & gt;

Hãy tự mình thử »

Nhúng đáp ứng

Tạo video hoặc bản trình chiếu thích ứng nhúng dựa trên chiều rộng của video gốc.

Thêm . nhúng-responsive-item vào bất kỳ phần tử nhúng nào (như
& lt; iframe & gt; hoặc & lt; video & gt;) trong phần tử mẹ có . nhúng-đáp ứng và tỷ lệ khung hình bạn chọn:

Ví dụ

Ví dụ

& lt;! - Tỷ lệ khung hình 21: 9 - & gt;
& lt; div class = "nhúng-đáp ứng
nhúng-responsive-21by9 "& gt;
& lt; iframe class =" nhúng-responsive-item "
src = "..." & gt; & lt; / iframe & gt;
& lt; / div & gt;

& lt;! - Tỷ lệ khung hình 16: 9 - & gt;
& lt ; div class = "nhúng-đáp ứng
nhúng-responsive-16by9 "& gt;
& lt; iframe class =" nhúng-responsive-item "
src = "..." & gt; & lt; / iframe & gt;
& lt; / div & gt;

& lt;! - Tỷ lệ co 4: 3 - & gt;
& lt ; div class = "nhúng-đáp ứng
nhúng-responsive-4by3 "& gt;
& lt; iframe class =" nhúng-responsive-item "
src = "..." & gt; & lt; / iframe & gt;
& lt; / div & gt;

& lt;! - Tỷ lệ co 1: 1 - & gt;
& lt ; div class = "nhúng-đáp ứng
nhúng-responsive-1by1 "& gt;
& lt; iframe class =" nhúng-responsive-item "
src = "..." & gt; & lt; / iframe & gt;
& lt; / div & gt;

Hãy tự mình thử »

Khả năng hiển thị

Sử dụng các lớp . hidden hoặc . hidden để kiểm soát khả năng hiển thị của các phần tử. Lưu ý: Các lớp này không thay đổi giá trị hiển thị CSS. Họ chỉ thêm display: hidden hoặc hidden: hidden :

Ví dụ

Tôi được hiển thị

Ví dụ

& lt; div class = "hiển thị" & gt; Tôi hiển thị & lt; / div & gt;
& lt; div class = "ẩn" & gt; Tôi
ẩn & lt; / div & gt;

Hãy tự mình thử »

Chức vụ

Sử dụng lớp . fixed-top để làm cho bất kỳ phần tử nào được cố định / ở
đầu trang của trang:

Sử dụng lớp . fixed-bottom để làm cho bất kỳ phần tử nào được cố định / ở
dưới cùng của trang:

Sử dụng lớp . stick-top để làm cho bất kỳ phần tử nào được cố định / ở
đầu của trang khi bạn cuộn qua nó. Lưu ý:
Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là position: relative ).

Biểu tượng đóng

Sử dụng lớp . close để tạo kiểu cho biểu tượng đóng. Điều này thường được sử dụng cho các cảnh báo và phương thức. Lưu ý rằng chúng tôi sử dụng ký hiệu & amp; times; để tạo biểu tượng thực tế (trông đẹp hơn
"x"). Cũng xin lưu ý rằng nó nổi ngay theo mặc định:

Ví dụ

Ví dụ

& lt; button type = "button" class = "close" & gt; & amp; times; & lt; / button & gt;

Hãy tự mình thử »

Trình đọc màn hình

Sử dụng lớp . sr-only để ẩn một phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình:

Ví dụ

& lt; span class = "sr-only" & gt; Tôi sẽ bị ẩn trên tất cả các màn hình ngoại trừ màn hình
người đọc. & lt; / span & gt;

Hãy tự mình thử »

Màu sắc

Như được mô tả trong chương Màu sắc , đây là danh sách tất cả các lớp màu văn bản và màu nền:

Các lớp cho màu văn bản là: . text-muted ,
. text-primary , . text-success , . text -info ,. text-warning , . text-risk , . text -secondary , . text-white ,
. text-dark , . text-body (màu nội dung mặc định / thường là màu đen) và . text-light :

Ví dụ

Văn bản này bị tắt tiếng.

Văn bản này quan trọng.

Văn bản này biểu thị sự thành công.

Văn bản này thể hiện một số thông tin.

Văn bản này thể hiện 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.

Nội dung văn bản.

Văn bản màu xám nhạt.

Hãy 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, các lớp này sẽ thêm màu di chuột tối hơn:

Bạn cũng có thể thêm 50% độ mờ cho văn bản đen hoặc trắng với . text-black-50 hoặc . text -trắng-50 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

Hãy tự mình thử »

Màu nền

Các lớp cho màu nền là: . bg-primary ,
.bg-success
, . bg-info , . bg-warning , . bg-risk , . bg-Secondary , . bg-dark < / code> và . bg-light .

Lưu ý rằng màu nền không đặt màu 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 . text- * .

Ví dụ

Văn bản này quan trọng.

Văn bản này cho biết thành công.

Văn bản này thể hiện một số thông tin.

Văn bản này thể hiện 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.

Hãy tự mình thử »

Kiểu chữ / Lớp văn bản

Như được 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:

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 . d-block . Sử dụng bất kỳ lớp nào trong số các lớp d - * - block để kiểm soát KHI phần tử phải là phần tử khối trên một chiều rộng màn hình cụ thể:

Ví dụ

d-block

d-sm-block

d-md-block

d-lg-block

d-xl-block

Ví dụ

& lt; span class = "d-block bg-success" & gt; d-block & lt; / span & gt;
& lt; span class = "d-sm-block
bg-success "& gt; d-sm-block & lt; / span & gt;
& lt; span class =" d-md-block bg-success "& gt; d-md-block & lt; / span & gt;
& lt; span class = "d-lg-block bg-success" & gt; d-lg-block & lt; / span & gt;
& lt; span
class = "d-xl-block bg-success" & gt; d-xl-block & lt; / span & gt;

Hãy tự mình thử »

Các lớp hiển thị khác

Các lớp hiển thị khác cũng có sẵn:

Linh hoạt

Sử dụng các lớp . flex- * để kiểm soát bố cục bằng flexbox.

Đọc thêm về Bootstrap 4 Flex, trong chương tiếp theo của chúng tôi .

Ví dụ

Ngang:

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

Dọc:

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3

Mục linh hoạt 1

Mục linh hoạt 2

Mục linh hoạt 3


Xem thêm những thông tin liên quan đến chủ đề bootstrap 4 lớp lề

Bài 14: Làm web với Bootstrap - Cách chỉnh sửa các thuộc tính css

  • Tác giả: Gola - Góc làm web
  • Ngày đăng: 2018-04-16
  • Đánh giá: 4 ⭐ ( 3524 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🌳 Trong bài học này, mình sẽ hướng dẫn các bạn cách chỉnh sửa các thuộc tính css trong trang web sử dụng Bootstrap. Một trong những lưu ý đầu tiên là tuyệt đối không sửa file gốc của bootstrap mà chỉ chỉnh sửa bằng cách ghi đè class.

    🌳 Bài viết hướng dẫn và code mẫu: https://goclamweb.com/bai-14-lam-web-voi-bootstrap-cach-chinh-sua-thuoc-tinh-trong-bootstrap/

Bootstrap Grid là gì? Cách sử dụng của bootstrap grid

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 3 ⭐ ( 2519 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap Grid System là gì? Hướng dẫn cách sử dụng Bootstrap Grid System toàn tập. Tác dụng của bootstrap system tuỳ biến css với giao diện

Bootstrap Grid System: Hệ thống lưới trong bootstrap

  • Tác giả: lamvt.vn
  • Đánh giá: 4 ⭐ ( 9575 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Căn trái và căn phải trong div trong Bootstrap

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 1280 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cập nhật 2018 ... Bootstrap 4.1+ pull-right Hiện tại là float-right text-right giống như 3.x và…

Hướng dẫn và ví dụ Bootstrap Nav, Tab, Pill

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 9851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bootstrap: thêm không gian lề / đệm giữa các cột

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 3225 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng đặt thêm một số không gian lề / đệm giữa các cột trên bố cục lưới Bootstrap của mình. Tôi đã thử điều này nhưng tôi không thích kết quả. Đây là mã của tôi:
    & lt ...

Flex trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 3 ⭐ ( 7959 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ học sử dụng Flex trong Bootstrap 4 các bạn nhé!

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thay đổi màu liên kết bằng CSS - liên kết css không thay đổi màu sắc