Hướng dẫn này bao gồm Bootstrap Containers, Bootstrap Grid System, tiện ích Bố cục Bootstrap và Flex với các ví dụ

Xin lưu ý rằng chúng tôi đã sử dụng Bootstrap phiên bản 4 cho tất cả các ví dụ

=> Kiểm tra tại đây để xem hướng dẫn đào tạo Bootstrap từ A-Z

Bạn sẽ học được gì

• Bộ chứa Bootstrap
  • (hình ảnh mới()). src = 'https. // capi. connatix. com/tr/si?token=d493855a-0d62-46c8-8552-26549ded5489&cid=f8a5d881-907e-47b5-a4f5-6980d40520cc'; . cmd. đẩy (chức năng () { cnx ({ playerId. "d493855a-0d62-46c8-8552-26549ded5489" }). kết xuất("f1b665d743fc45cbac4851003ee8cd11");
  • Vùng chứa cố định Bootstrap
  • Thùng chứa chất lỏng Bootstrap
  • Bộ chứa đáp ứng Bootstrap
  • Sơ lược về Container
• Hệ thống lưới Bootstrap
  • Lớp lưới
  • Cấu trúc cơ bản của hệ thống lưới
  • Cột bằng Bootstrap
  • Cột đáp ứng
• Tiện ích Bố cục Bootstrap
  • biên giới
  • Khoảng cách – Padding và Margin
  • Phao nổi và phao đáp ứng
  • Căn giữa
  • định cỡ
  • bóng tối
  • Phần tử khối
  • Các lớp hiển thị khác của bố cục Bootstrap
  • Bootstrap linh hoạt
    • Bộ chứa Flexbox và Bộ chứa Flexbox nội tuyến
    • Hướng ngang và dọc
    • Nội dung hợp lý
    • Lấp đầy
    • Lớn lên
    • Co lại
    • Đặt hàng Bootstrap
    • Bọc
    • Căn chỉnh nội dung
    • Căn chỉnh các mục
    • căn chỉnh bản thân
    • Ký quỹ tự động
• Các câu hỏi thường gặp
• Phần kết luận
  • đề xuất đọc

Bộ chứa Bootstrap

Vùng chứa là thành phần bố cục cơ bản nhất trong Bootstrap 4. Cần thiết khi bạn đang sử dụng hệ thống lưới mặc định. Thông thường, vùng chứa chứa tất cả các phần tử khác trên trang

Có ba loại vùng chứa trong Bootstrap 4

1. Container cố định (. lớp chứa)
2. Bình chứa chất lỏng (. lớp chứa-chất lỏng)
3. Vùng chứa đáp ứng (. container-{breakpoint} lớp)

Có bốn lớp điểm dừng vùng chứa chính. Họ đang,

• lớp container-sm
• lớp container-md
• lớp container-lg
• lớp container-xl

Vùng chứa cố định Bootstrap

Các. lớp container đại diện cho một container cố định. Nó là bộ chứa Bootstrap mặc định và cũng là bộ chứa đáp ứng, có chiều rộng cố định. Nó đặt độ rộng tối đa tại mọi điểm ngắt đáp ứng

Ví dụ

…

Bảng dưới đây cho thấy cách. lớp container đáp ứng các kích thước màn hình khác nhau

Lớp vùng chứaLoại thiết bịChiều rộngThiết bị siêu nhỏ - chiều rộng màn hình nhỏ hơn 576px (<576px)100%Thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px (?576px)540px. containerThiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px (?768px)720pxThiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px (?992px)960pxThiết bị cực lớn - chiều rộng màn hình bằng hoặc lớn hơn 1200px (?1200px)1140px

Thùng chứa chất lỏng Bootstrap

Các. lớp container-fluid đại diện cho một thùng chứa chất lỏng. Đó là chiều rộng. 100% tại tất cả các điểm dừng. Nói cách khác, nó là một vùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của màn hình thiết bị

Ví dụ

...

Bảng sau đây cho thấy cách. lớp container-fluid đáp ứng các kích thước màn hình khác nhau

Loại vùng chứa Loại thiết bị Chiều rộng. container-fluidThiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px (<576px)100%Thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px (?576px)100%Thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px (?768px)100

Ví dụ

Hãy xem một ví dụ để thấy sự khác biệt giữa. thùng chứa và. các lớp chứa chất lỏng

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Bộ chứa đáp ứng Bootstrap

Responsive container mới được giới thiệu trong Bootstrap phiên bản 4. 4. Các. lớp container-{breakpoint} (. thùng chứa-sm. md. lg. xl) đại diện cho một vùng chứa đáp ứng. Đó là chiều rộng. 100% cho đến điểm dừng được chỉ định

Ví dụ

100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra-large breakpoint

Bảng sau đây cho thấy cách. thùng chứa-sm. md. lg. xl đáp ứng các kích thước màn hình khác nhau

Lớp vùng chứaThiết bị trung tâm mua sắm bổ sung
<576pxSmall device
?576pxThiết bị trung bình
?768pxThiết bị lớn
?992pxExtra-large device
?1200px.container-sm100%540px720px960px1140px.container-{breakpoint}.container-md100%100%720px960px1140px.container-lg100%100%100%960px1140px.container-xl100%100%100%100%1140px

Sơ lược về Container

Bảng bên dưới hiển thị tóm tắt về cách các loại lớp vùng chứa khác nhau phản ứng với các kích thước màn hình khác nhau

Lớp vùng chứaThiết bị cực nhỏ
<576pxSmall device
?576pxThiết bị trung bình
?768pxThiết bị lớn
?992pxExtra-large device
?1200px.container100%540px720px960px1140px.container-{breakpoint}.container-sm100%540px720px960px1140px.container-md100%100%720px960px1140px.container-lg100%100%100%960px1140px.container-xl100%100%100%100%1140px.container-fluid100%100%100%100%100%

Hệ thống lưới Bootstrap

Hệ thống lưới Bootstrap 4 đáp ứng nhanh. Nó sẽ tự động điều chỉnh các cột cho các kích thước màn hình khác nhau. Hệ thống lưới bao gồm 12 cột. Tuy nhiên, bạn không cần phải sử dụng tất cả 12 cột

Ngoài ra, bạn có thể kết hợp các cột Bootstrap để tạo các cột rộng hơn có tổng bằng hoặc nhỏ hơn 12. Một số ví dụ được hiển thị dưới đây

Lớp lưới

Hệ thống lưới Bootstrap 4 bao gồm năm lớp

1. lớp col
2. lớp col-sm
3. lớp col-md
4. lớp col-lg
5. lớp col-xl

Lớp lưới Loại thiết bị Chiều rộng. col Thiết bị cực nhỏ Chiều rộng màn hình nhỏ hơn 576px (<576px). col-smThiết bị nhỏChiều rộng màn hình bằng hoặc lớn hơn 576px (?576px). col-mdThiết bị trung bìnhChiều rộng màn hình bằng hoặc lớn hơn 768px (?768px). col-lgThiết bị lớnChiều rộng màn hình bằng hoặc lớn hơn 992px (?992px). col-xlThiết bị cực lớnChiều rộng màn hình bằng hoặc lớn hơn 1200px (?1200px)

Cấu trúc cơ bản của hệ thống lưới

Đoạn mã dưới đây cho thấy cấu trúc cơ bản của hệ thống lưới Bootstrap 4

Ghi chú

* dành cho sm, md, lg hoặc xl, đại diện cho kích thước màn hình nhỏ, trung bình, lớn hoặc cực lớn

# Đối với kích thước hàng Bootstrap (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 hoặc 12)

...




...






...

Ghi chú. Sử dụng bộ khung mã sau để chạy phần còn lại của các mã mẫu bên dưới.

Cột bằng Bootstrap

Ví dụ. Tạo ba cột bằng nhau.

Item 1
Item 2
Item 3

đầu ra

Cột đáp ứng

Mã số

Item 1
Item 2
Item 3

đầu ra

Tiện ích Bố cục Bootstrap

biên giới

Bảng sau đây cho thấy một bản tóm tắt của các lớp biên giới

ClassDescriptionBorders - trừ. viền-0Không có viền. border-top-0Xóa viền trên cùng. border-right-0Xóa viền phải. border-bottom-0Xóa viền dưới. border-left-0 Xóa viền trái Màu viền. border-primaryThêm màu chính vào đường viền. border-secondaryThêm màu phụ vào đường viền. border-successThêm màu thành công vào đường viền. border-dangerThêm màu nguy hiểm vào đường viền. cảnh báo đường viềnThêm màu cảnh báo vào đường viền. border-infoThêm màu thông tin vào đường viền. border-lightThêm màu sáng cho đường viền. border-darkThêm màu tối cho đường viền. viền trắng Và màu trắng cho viền Bán kính viền. trònThêm viền tròn. đầu trònThêm đường viền trên đầu tròn. round-rightThêm đường viền tròn bên phải. round-bottomThêm đường viền đáy tròn. round-leftThêm đường viền tròn bên trái. round-circleThêm vòng trong một vòng tròn. tròn-0Không tròn. round-smThêm một đường viền tròn nhỏ. round-lgThêm một đường viền tròn lớn

Ví dụ

Border Subtractive






Border Color










Border Radius

đầu ra

Khoảng cách – Padding và Margin

Danh sách sau đây hiển thị phần đệm mặc định của. lớp chứa

• Phần đệm trên cùng – 0px
• Đệm dưới cùng – 0px
• Phần đệm bên trái – 15px
• Phần đệm bên phải – 15px

Bảng bên dưới hiển thị tóm tắt các lớp khoảng cách Bootstrap (phần đệm và lề)

Các lớp thuộc tính ClassDescripđặt phần đệmmđặt phần lềcác lớpthiết lập phần đệm/lề trênđặt phần đệm/lề dướiđặt phần đệm/lề tráiđặt phần đệm/lề phảixđặt cả phần đệm/lề trái và phần đệm/lề phảiđặt cả phần đệm/lề trên và phần đệm/lề dưới . 25rem2sets padding/margin để. 5rem3sets padding/margin thành 1rem4sets padding/margin thành 1. 5rem5sets padding/margin thành 3remautosets margin thành auton1sets margin thành -. 25remn2đặt lề thành -. 5remn3đặt lề thành -1remn4đặt lề thành -1. 5remn5 đặt lề thành -3rem

Ví dụ

...

đầu ra

Phao nổi và phao đáp ứng

Bảng bên dưới hiển thị tóm tắt về Bootstrap float và các lớp float đáp ứng

ClassDescriptionFloatsfloat-leftTrôi một mục sang tráifloat-phảiTrôi một mục sang phảiFloat phản hồifloat-sm-rightTrôi một mục ở bên phải trên màn hình nhỏ hoặc rộng hơn float-md-rightTrôi một mục ở bên phải trên màn hình trung bình hoặc rộng hơnfloat-lg-rightTrôi một mục

Ví dụ

...

đầu ra

Căn giữa

Bảng sau đây hiển thị tóm tắt về lớp căn chỉnh trung tâm Bootstrap

Lớp Mô tả. mx-autoCenter một mục (thêm lề trái và lề phải. tự động)

Ví dụ

...

đầu ra

định cỡ

Bảng sau đây hiển thị tóm tắt các lớp định cỡ Bootstrap

Lớp Mô tảChiều rộng. w-25Chiều rộng 25%. w-50Chiều rộng 50%. w-75Chiều rộng 75%. w-100Chiều rộng 100%Chiều cao. h-25Chiều cao 25%. h-50Chiều cao 50%. h-75Chiều cao 75%. h-100Height 100%Max-width. mw-100Độ rộng tối đa 100%Chiều cao tối đa. mh-100Max- chiều cao 100%

Ví dụ

...

đầu ra

bóng tối

Bảng sau đây hiển thị tóm tắt các lớp phần tử bóng Bootstrap

LớpMô tảshadow-noneKhông có bóngbóngBóng mặc địnhshadowshadow-smBóng nhỏshadowshadow-lgBóng lớn

Ví dụ

...

đầu ra

Phần tử khối

Bảng sau đây hiển thị tóm tắt các lớp phần tử khối Bootstrap

 ClassDescriptiond-blockd-blockControls mà tại đó
trỏ phần tử
phải là một khối
phần tử trên một phần tử cụ thể
screen sized-*-blockd-sm-blockd-md-blockd-lg-blockd-xl-block

Ví dụ

...

Đầu ra (Toàn màn hình)

Đầu ra (Nửa màn hình)

Các lớp hiển thị khác của bố cục Bootstrap

Bảng bên dưới hiển thị tóm tắt các lớp hiển thị khác

Lớp Mô tả. d-noneẨn phần tử. d-*-không. d-inlineTạo một phần tử nội tuyến. d-*-nội tuyến. d-inline-blockTạo phần tử khối nội tuyến. d-*-inline-block

Bootstrap linh hoạt

Bộ chứa Flexbox và Bộ chứa Flexbox nội tuyến

 Bộ chứa ClassDescriptionFlexbox và
bộ chứa flexbox nội tuyến. d-flexTạo hộp chứa flexbox. d-*-flex. d-inline-flexTạo một thùng chứa flexbox nội tuyến. d-*-inline-flex

Ví dụ

...

đầu ra

Hướng ngang và dọc

Lớp Mô tả Hướng ngang và dọc. flex-*-rowHiển thị các mục flex theo chiều ngang. flex-*-row-reverse Hiển thị các mục flex theo chiều ngang trên căn phải. flex-*-columnHiển thị theo chiều dọc các mục flex. flex-*-column-reverseHiển thị theo chiều dọc các mục flex theo thứ tự đảo ngược

Ví dụ

...

đầu ra

Nội dung hợp lý

Lớp Mô tảNội dung chính đáng. justify-content-*-start Hiển thị các mục flex trên căn trái/bắt đầu. justify-content-*-end Hiển thị các mục flex trên căn phải/cuối. justify-content-*-center Hiển thị các mục linh hoạt ở trung tâm. justify-content-*-between Hiển thị các mục flex trong "between". justify-content-*-around Hiển thị các mục linh hoạt "xung quanh"

Ví dụ

...

đầu ra

Lấp đầy

ClassDescriptionFill/chiều rộng bằng nhau. flex-*-fillForce uốn các mục thành chiều rộng bằng với nội dung của chúng

Ví dụ

...

đầu ra

Lớn lên

LớpMô tảPhát triển. flex-*-grow-0Không cho phép các mục phát triển. flex-*-grow-1Làm cho vật phẩm phát triển

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Co lại

LớpMô tảThu nhỏ. flex-*-shrink-0 Không cho phép các mục co lại. flex-*-shrink-1Thu nhỏ các mục

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Đặt hàng Bootstrap

LớpMô tảThứ tự. order-*-0-12Thay đổi thứ tự (0 thành 12 ) trên kích thước màn hình nhỏ

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Bọc

LớpMô tảBọc. flex-*-nowrapKhông bọc vật phẩm. flex-*-wrapWrap các mục. flex-*-wrap-reverseĐảo ngược gói vật phẩm

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

Đầu ra (với kích thước trình duyệt giảm)

Căn chỉnh nội dung

ClassDescriptionCăn chỉnh nội dung. align-content-*-startCăn chỉnh các mục từ đầu. align-content-*-endCăn chỉnh các mục ở cuối. align-content-*-center Căn chỉnh các mục ở giữa. căn chỉnh nội dung-*-xung quanhCăn chỉnh các mục "xung quanh". align-content-*-stretchStretch item

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

Đầu ra (với kích thước trình duyệt giảm)

Căn chỉnh các mục

ClassDescriptionCăn chỉnh các mục. align-items-*-startCăn chỉnh hàng của các mục từ đầu. align-items-*-endCăn chỉnh một hàng của các mục ở cuối. align-items-*-center Căn chỉnh một hàng các mục ở giữa. align-items-*-baselineCăn chỉnh một hàng các mục trên đường cơ sở. align-items-*-stretch Kéo giãn một hàng vật phẩm

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

căn chỉnh bản thân

Lớp Mô tảTự sắp xếp. align-self-*-startCăn chỉnh một mục linh hoạt ngay từ đầu. align-self-*-endCăn chỉnh một mục linh hoạt ở cuối. align-self-*-center Căn chỉnh một mục linh hoạt ở giữa. align-self-*-baselineCăn chỉnh một mục flex trên đường cơ sở. align-self-*-stretch Kéo giãn một mục flex

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Ký quỹ tự động

Lớp Mô tả Lề tự động. mr-autoĐẩy các mục sang phải. ml-autoPush các mục sang trái

Ví dụ

Bootstrap 4 simple container (.container class)

example button 1
example button 2
 



Bootstrap 4 fluid container (.container-fluid class)

example button 1
example button 2

 

đầu ra

Ghi chú. Các tiện ích bố cục Bootstrap khác sẽ được thảo luận trong các hướng dẫn sắp tới của chúng tôi theo các chủ đề cụ thể.

Các câu hỏi thường gặp

Trong phần này, chúng ta sẽ xem xét một số câu hỏi thường gặp về bố cục Bootstrap

Q #1) Thành phần bố cục cơ bản nhất của Bootstrap 4 là gì?

Câu trả lời. Thùng đựng hàng

Q #2) Mô tả ngắn gọn các loại container trong Bootstrap 4

Câu trả lời. Các loại container được liệt kê dưới đây

Họ đang,

1. lớp vùng chứa - Lớp này đặt độ rộng tối đa tại mỗi điểm dừng đáp ứng
2. container-fluid class – Lớp này có chiều rộng. 100% tại tất cả các điểm dừng
3. container-{breakpoint} class – Lớp này có chiều rộng. 100% cho đến điểm ngắt được chỉ định
4. lớp container-sm
5. lớp container-md
6. lớp container-lg
7. lớp container-xl

Q #3) Năm lớp trong hệ thống lưới Bootstrap 4 là gì?

Câu trả lời

1. lớp col
2. lớp col-sm
3. lớp col-md
4. lớp col-lg
5. lớp col-xl

Q #4) Hệ thống lưới của Bootstrap 4 có hỗ trợ các cột phản hồi không?

Câu trả lời. Đúng

Phần kết luận

Có ba loại bộ chứa Bootstrap được gọi là. thùng đựng hàng,. chất lỏng chứa và. vùng chứa-{breakpoint}. Các. container-{breakpoint} là. thùng chứa-sm,. thùng chứa-md,. container-lg và. vùng chứa-xl

Hệ thống lưới Bootstrap bao gồm năm lớp được gọi là. col,. col-sm,. col-md,. col-lg và. col-xl

Hệ thống lưới phản hồi nhanh và nó tự động điều chỉnh các cột cho các kích thước màn hình khác nhau. Nó bao gồm 12 cột (tối đa). Bạn có thể kết hợp các cột để tạo các cột rộng hơn có tổng từ 12 trở xuống. Nó có nhiều tiện ích khác nhau để thêm kiểu vào bố cục

Làm cách nào để thêm đường viền vào lưới Bootstrap?

Tại sao Bootstrap chia lưới thành 12 cột tưởng tượng?

Làm cách nào để chia div thành 2 hàng?

col lg2 là gì?