Bài Tập Layout Bootstrap
Breakpoint
Class infix
Dimensions
Quy định
Extra small
None
<576px
Di động
Small
sm
≥576px
Di động
Medium
md
≥768px
Tablet
Large
lg
≥992px
Laptop
Extra large
xl
≥1200px
Desktop
Extra extra large
xxl
≥1400px
Tivi
Bài Tập 1
33% Tablet, 100% di động
33% Tablet, 100% di động
33% Tablet, 100% di động
33% Tablet, 100% di động
33% Tablet, 100% di động
33% Tablet, 100% di động
<!-- Hãy chỉnh sửa mã HTML của các khối màu cam dưới đây để chúng hoạt động giống như khối màu đỏ nhạt. --> <div class="row"> <div class="">33% Tablet, 100% di động</div> <div class="">33% Tablet, 100% di động</div> <div class="">33% Tablet, 100% di động</div> </div>
Áp dụng thay đổi
Bài Tập 2
Cột 1
Cột 2
Cột 3
Cột 1
Cột 2
Cột 3
<!-- Hãy chỉnh sửa mã HTML dưới đây để các khối màu xanh lục nhạt hoạt động giống như khối màu xanh nhạt. --> <div class="row"> <div class="">Cột 1</div> <div class="">Cột 2</div> <div class="">Cột 3</div> </div>
Áp dụng thay đổi
Bài Tập 3
Cột 1
Cột 2
Cột 1
Cột 2
<!-- Hãy chỉnh sửa mã HTML dưới đây để các khối màu lục sẫm hoạt động giống như khối màu vàng nhạt. --> <div class="row"> <div class="">Cột 1</div> <div class="">Cột 2</div> </div>
Áp dụng thay đổi