Hướng dẫn display: none bootstrap

2- Class .d-inline, .d-block, .d-inline-block

Nếu bạn đã học về CSS, 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.

.d-block

Phần tử được áp dụng lớp .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%.

Ví dụ với lớp .d-block:

d-block-example

   
.d-block example
   

      .d-block (width:150px)
   
   

      .d-block
   
   

      .d-block (height:90px)
   

.d-inline

Phần tử được áp dụng lớp .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).

Ví dụ với .d-inline:

d-inline-example

.d-inline example


   

      I am a .d-inline (width:100px not worked!)
   
   

      I am a .d-inline
   
   

      I am a .d-inline (height:90px not worked!)
   

.d-inline-block

Phần tử được áp dụng lớp .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.

Ví dụ với .d-inline-block:

d-inline-block-example

.d-inline-block example


   

      .d-inline (width:100px)
   
   

      .d-inline (no width, no height)
   
   

      .d-inline (height:90px)
   

3- Class .d-flex, .d-inline-flex

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:

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ử . . .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ử .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ử . .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. 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-example .d-table + .d-table-row .d-table {border-collapse: collapse} .d-table-row .border .border-primary .d-table-row .border .border-success .d-table {border-collapse: collapse} + width: 100% .d-table-row .border .border-primary .d-table-row .border .border-success .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". d-table-cell-example .d-table-cell .d-table-cell .border .p-4 (padding) {width:200px;height:50px;} .d-table-cell .border .d-table-cell .border .d-table-cell .border 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ị. 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": .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 Giải thích .d-none Phần tử sẽ bị ẩn với mọi kích thước màn hình. .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). .d-sm-none .d-md-block Phần tử sẽ bị ẩn với màn hình kích thước [567px-768px). .d-md-none .d-lg-block Phần tử sẽ bị ẩn với màn hình kích thước [768px-992px). .d-lg-none .d-xl-block Phần tử sẽ bị ẩn với màn hình kích thước [992px-1200px). .d-xl-none Phần tử sẽ bị ẩn với màn hình kích thước xl (Extra Large) (>=1200px). .d-block Phần tử luôn hiển thị với mọi kích thước màn hình. .d-block .d-sm-none Phần tử hiển thị với màn hình kích thước xs (Extra Small) (<567px). .d-none .d-sm-block .d-md-none Phần tử hiển thị với màn hình kích thước [567px,768px). .d-none .d-md-block .d-lg-none Phần tử hiển thị với màn hình kích thước [768px,992px). .d-none .d-lg-block .d-xl-none Phần tử hiển thị với màn hình kích thước [992px,1200px). .d-none .d-xl-block Phần tử hiển thị với màn hình kích thước xl (Extra Large) (>=1200px). d-none-responsive-example.html .d-none .d-none .d-sm-block 6- Hiển thị khi In (.d-print-*) Đôi khi người dùng muốn in nội dung của một trang. Nhưng thực tế trên trang có những nội dung không cần thiết để in, nó chỉ gây ra sự tốn kém về giấy cho người dùng. Bootstrap đưa ra một vài lớp giúp bạn ẩn hoặc hiển thị các vùng khi in. Dưới đây là danh sách các lớp liên quan tới việc hiển thị hoặc ẩn các phần tử khi in: .d-print-none .d-print-inline .d-print-inline-block .d-print-block .d-print-table .d-print-table-row .d-print-table-cell .d-print-flex .d-print-inline-flex Ví dụ: d-print-example.html Print Example .d-print-block Print this Content. Print this Content. Print this Content. .d-print-none Do not print this Content. Do not print this Content. Đọc tiếp

Reply 1 0 Chia sẻ

Bài Viết Liên Quan

Bất động sản văn phòng loại c và b năm 2024

mẹo hay

Hệ thống điều khiển đèn tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh

Mong anh sẽ nhận lời tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh

Bài tập sbt tiếng anh 7 trang 118 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Tiếng anh

Top 10 luong cau thu cao nhat the gioi năm 2024

mẹo hay Top List Top

Gói 30 nghìn tỷ đồng là gì năm 2024

là ai Hỏi Đáp Là gì

Sửa lỗi hãy tắt trình duyệt facebook hiện tại năm 2024

mẹo hay Công Nghệ Facebook

Dịch vụ đại lý vận chuyển hàng hóa năm 2024

mẹo hay Ngôn ngữ Dịch

Bài văn tự sự lớp 9 là gì năm 2024

là ai Hỏi Đáp Là gì

Cho trẻ em đi ngoài lúc nào là tốt nhất năm 2024

mẹo hay Top List Tốt nhất Review

Mơ thấy ác mộng là điềm gì năm 2024

là ai

Tô màu top 5 giá trị lớn nhất trong excel năm 2024

mẹo hay Top List Top Cryto Giá Conditional formatting Excel

Dân cư và đô thị hóa ở việt nam năm 2024

mẹo hay

Kinh tế thủy sản là gì năm 2024

là ai Hỏi Đáp Là gì

Cắt hạch thần kinh giao cảm ở bệnh viện nào năm 2024

mẹo hay

Giáo dục chính trị là ngành gì năm 2024

là ai

Bài văn hay nhất về vội vàng xuân diệu năm 2024

mẹo hay Thơ Xuân Diệu

Alessandra ambrosio wear crop top and high waist jeans 2023 năm 2024

mẹo hay Top List Top

Top shop bán đồ nữ đẹp tp.hcm she review năm 2024

mẹo hay Khỏe Đẹp Đẹp Top List Top Review

Data science data engineer là cái con mẹ gì năm 2024

là ai

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Xây Nhà Inc.