Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Là một website được viết trên công nghệ web
Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook
Facebook
1- Bootstrap Display Utility
Display Utility (Tiện ích display) là một phần trong Bootstrap, nó xây dựng một hệ thống các lớp giúp bạn điều khiển việc hiển thị (hoặc ẩn) của các phần tử. Điều khiển cách các phần tử sẽ hiển thị và phản ứng với các thay đổi kích thước của phần tử cha. Các lớp này có tên theo định dạng sau: (Tiện ích display) là một phần trong Bootstrap, nó xây dựng một hệ thống các lớp giúp bạn điều khiển việc hiển thị (hoặc ẩn) của các phần tử. Điều khiển
cách các phần tử sẽ hiển thị và phản ứng với các thay đổi kích thước của phần tử cha. Các lớp này có tên theo định dạng sau:
.d-{breakpoint}-{value}d-{breakpoint}-{value}
Trong đó:
{breakpoint}: Không bắt buộc.: Không bắt buộc.
{value}: Bắt buộc: Bắt buộc
{breakpoint}:
{breakpoint}
Mô tả
sm
(Small). Làm việc khi chiều rộng của phần tử >= 567px567px
md
(Medium). Làm việc khi chiều rộng của phần tử >= 768px768px
lg
(Large). Làm việc khi chiều rộng của phần tử >= 992px992px
xl
(Extra Large). Làm việc khi chiều rộng của phần tử >= 1200px1200px
print
Liên quan tới in ấn.
{value}:
{value}
Mô tả
sm
(Small). Làm việc khi chiều rộng của phần tử >= 567px
md
(Medium). Làm việc khi chiều rộng của phần tử >= 768px{display: inline}.
lg
(Large). Làm việc khi chiều rộng của phần tử >= 992px{display: block}.
inline-block
xl{display: inline-block}.
(Extra Large). Làm việc khi chiều rộng của phần tử >= 1200px
print{display: table}. Làm cho phần tử có hành vi giống như phần tử
.
table-row
Liên quan tới in ấn. {display: tabled-row}. Làm cho phần tử có hành vi giống như phần tử
.
table-cell
{value}: {display: table-cell}. Làm cho phần tử có hành vi giống như phần tử
.
none
Làm cho phần tử bị ẩn đi. {display: flex}. Xem chi tiết trong bài học Bootstrap Flex.
inline-flex
inline{display: inline-flex}. Xem chi tiết trong bài học Flex Utility.
Giống với {display: inline}.
blockCSS, thì chắc chắn bạn đã quen thuộc với: {display: inline}, {display: block}, {display: inline-block}. Bootstrap sử dụng các lớp .d-inline, .d-block, .d-inline-block thay vì các property nói trên của CSS. Cả 2 cách tiếp cận trên đều hoạt động
giống nhau.
Giống với {display: block}.
Giống với {display: inline-block}. .d-block là một khối (block) hình chữ nhật. Nó ngắt dòng (Line break) ở phía trước và phía sau nó, vì vậy chúng sẽ nằm trên các hàng (row) khác nhau. Nếu phần tử này không được chỉ định chiều rộng cố định, nó sẽ có chiều rộng 100%.
table.d-block:
Giống với {display: table}. Làm cho phần tử có hành vi giống như phần tử .
Giống với {display: tabled-row}. Làm cho phần tử có hành vi giống như phần tử .
Giống với {display: table-cell}. Làm cho phần tử có hành vi giống như phần tử . .d-inline sẽ không là một khối hình chữ nhật, vì vậy bạn không thể sét đặt chiều rộng và chiều cao cho nó. Chúng thường nằm trên cùng 1 hàng (row). Nhưng nếu phần tử cha có chiều rộng quá bé, một số phần tử có thể bị đẩy xuống hàng bên dưới. Nội dung của một phần tử có thể nằm trên một hoặc nhiều dòng (Line).
flex.d-inline:
d-inline-example
<h3 class="mb-3">.d-inline example</h3>
<div class="container-fluid">
<div class="d-inline border border-primary" style="width:100px;">
I am a .d-inline (width:100px not worked!)
</div>
<div class="d-inline border border-info">
I am a .d-inline
</div>
<div class="d-inline border border-danger" style="height:90px;">
I am a .d-inline (height:90px not worked!)
</div>
</div>
Giống với {display: flex}. Xem chi tiết trong bài học Bootstrap Flex.
Giống với {display: inline-flex}. Xem chi tiết trong bài học Flex Utility. .d-inline-block là một khối hình chữ nhật. Chúng có thể nằm trên cùng một hàng. Nhưng nếu phần tử cha có chiều rộng quá bé, một số phần tử có thể bị đẩy xuống hàng bên dưới. Nếu phần tử này không được chỉ định chiều rộng cố định, chiều rộng của nó sẽ phụ thuộc vào nội dung.
2- Class .d-inline, .d-block, .d-inline-block .d-inline-block:
Flex (.d-flex, .d-inline-flex) là một tiện ích quan trọng nhất trong Bootstrap, vì tính quan trọng này nó nên được giới thiệu trong một bài học riêng biệt: (.d-flex, .d-inline-flex) là một tiện ích quan trọng nhất trong Bootstrap, vì tính quan trọng này nó nên được giới thiệu trong một bài học
riêng biệt:
4- Class .d-table, .d-table-row, .d-table-cell
Class
Mô tả
.d-table
Giống với {display: table}. Làm cho phần tử có hành vi giống như phần tử . {display: table}. Làm cho phần tử có hành vi giống như phần tử
.
.d-table-row
Giống với {display: table-row}. Làm cho phần tử có hành vi giống như phần tử . {display: table-row}. Làm cho phần tử có hành vi giống như phần tử
.
.d-table-cell
Giống với {display: tabled-cell}. Làm cho phần tử có hành vi giống như phần tử . {display: tabled-cell}. Làm cho phần tử có hành vi giống như phần tử
.
.d-table-row
Phần tử được áp dụng lớp .d-table-row phải là con của phần tử ".d-table", nó không thể xuất hiện một cách độc lập, bạn cũng không thể thiết lập margin, padding, height, width cho nó, các property này do phần tử con của nó ".d-table-cell" quyết định. .d-table-row phải là con của phần tử ".d-table", nó không thể xuất hiện một cách độc lập, bạn cũng không thể thiết lập margin, padding, height, width cho nó, các property này do phần tử con của nó ".d-table-cell" quyết định.
Phần tử ".d-table-row" chỉ có thể thiết lập border nếu nó là con của phần tử ".d-table {border-collapse: collapse}". ".d-table-row" chỉ có thể thiết lập border nếu nó là con
của phần tử ".d-table {border-collapse: collapse}".
Phần tử được áp dụng lớp .d-table-cell sẽ có hành vi giống như phần tử . Bạn có thể thiết lập padding, width, height, border cho nó, nhưng không thể thiết lập margin. Các phần tử ".d-table-cell" có thể là phần tử con trực tiếp của ".d-table-row" hoặc ".d-table". .d-table-cell sẽ có hành vi giống như phần tử
. Bạn có thể thiết lập padding, width, height, border cho nó, nhưng không thể thiết lập
margin. Các phần tử ".d-table-cell" có thể là phần tử con trực tiếp của ".d-table-row" hoặc ".d-table".
Lớp .d-none áp dụng cho một phần tử sẽ làm ẩn phần tử này, nó giống như việc bạn sử dụng Css property {display: none}. Ngược lại, nếu bạn áp dụng một trong các lớp .d-inline, .d-inline-block, .d-block sẽ làm phần tử này hiển thị. .d-none áp dụng cho một phần tử sẽ làm ẩn phần tử này, nó
giống như việc bạn sử dụng Css property {display: none}. Ngược lại, nếu bạn áp dụng một trong các lớp .d-inline, .d-inline-block, .d-block sẽ làm phần tử này hiển thị.
Các lớp .d-inline, .d-inline-block, .d-block đã được đề cập ở mục phía trên. .d-inline, .d-inline-block, .d-block đã được đề cập ở mục phía trên.
Các lớp khác áp dụng trong tình huống "Responsive": "Responsive":
.d-none
.d-sm-none
.d-md-none
.d-lg-none
.d-xl-none
Dưới đây là một vài tình huống áp dụng các lớp trên cho một phần tử, và giải thích cách hoạt động của chúng:
Class
Mô tả
Giống với {display: table}. Làm cho phần tử có hành vi giống như phần tử .
Giống với {display: table-row}. Làm cho phần tử có hành vi giống như phần tử .
Giống với {display: tabled-cell}. Làm cho phần tử có hành vi giống như phần tử .
.d-table-row xs (Extra Small) (<567px).
Phần tử được áp dụng lớp .d-table-row phải là con của phần tử ".d-table", nó không thể xuất hiện một cách độc lập, bạn cũng không thể thiết lập margin, padding, height, width cho nó, các property này do phần tử con của nó ".d-table-cell" quyết định.
Phần tử ".d-table-row" chỉ có thể thiết lập border nếu nó là con của phần tử ".d-table {border-collapse: collapse}". [567px-768px).
.table-cell
Phần tử được áp dụng lớp .d-table-cell sẽ có hành vi giống như phần tử . Bạn có thể thiết lập padding, width, height, border cho nó, nhưng không thể thiết lập margin. Các phần tử ".d-table-cell" có thể là phần tử con trực tiếp của ".d-table-row" hoặc ".d-table". [768px-992px).
5- Ẩn phần tử (.d-none)
Lớp .d-none áp dụng cho một phần tử sẽ làm ẩn phần tử này, nó giống như việc bạn sử dụng Css property {display: none}. Ngược lại, nếu bạn áp dụng một trong các lớp .d-inline, .d-inline-block, .d-block sẽ làm phần tử này hiển thị. [992px-1200px).
Các lớp .d-inline, .d-inline-block, .d-block đã được đề cập ở mục phía trên.
Các lớp khác áp dụng trong tình huống "Responsive": xl (Extra Large) (>=1200px).
Dưới đây là một vài tình huống áp dụng các lớp trên cho một phần tử, và giải thích cách hoạt động của chúng:
Giải thích
.d-none
Phần tử sẽ bị ẩn với mọi kích thước màn hình. xs (Extra Small) (<567px).
.d-none .d-sm-block
Phần tử sẽ bị ẩn với màn hình kích thước xs (Extra Small) ([567px,768px).
.d-sm-none .d-md-block
Phần tử sẽ bị ẩn với màn hình kích thước [567px-768px). [768px,992px).
.d-md-none .d-lg-block
Phần tử sẽ bị ẩn với màn hình kích thước [768px-992px). [992px,1200px).
.d-lg-none .d-xl-block
Phần tử sẽ bị ẩn với màn hình kích thước [992px-1200px). xl (Extra Large) (>=1200px).
