D nội tuyến trong bootstrap là gì?

Sử dụng lớp d-inline-flex trong Bootstrap để tạo một thùng chứa flexbox nội tuyến −

Bây giờ thêm các mục linh hoạt bên trong nó như trong đoạn mã sau -

  
  

    One
  
  

    Two
  
  

    Three
  

Bạn có thể thử chạy đoạn mã sau để triển khai. lớp d-inline -

Thí dụ

Bản thử trực tiếp

  
    Bootstrap Example
    
    
    
    
    
  


  

    
Understanding Inline Flex
    
  
      
One
      
Two
      
Three
    

  

Cập nhật ngày 17-Jun-2020 13. 46. 54

Mục lục

1. Tiện ích hiển thị Bootstrap
2. Lớp. d-nội tuyến,. khối d,. d-inline-block
3. Lớp. d-flex,. d-inline-flex
4. Lớp. bảng d,. d-bảng-hàng,. d-bảng-ô
5. Giấu (. phần tử d-none)
6. Hiển thị khi in (. d-in-*)

• Hướng dẫn Bootstrap

Xem thêm Hướng dẫn

• Hướng dẫn Bootstrap

1. Tiện ích hiển thị Bootstrap
2. Lớp. d-nội tuyến,. khối d,. d-inline-block
3. Lớp. d-flex,. d-inline-flex
4. Lớp. bảng d,. d-bảng-hàng,. d-bảng-ô
5. Giấu (. phần tử d-none)
6. Hiển thị khi in (. d-in-*)

Các trang web học ngoại ngữ miễn phí

• Tiếng Anh
• Tiếng Việt
• Những ngôn ngữ khác

1- Tiện ích hiển thị Bootstrap

Tiện ích hiển thị là một phần của Bootstrap. Nó xây dựng một hệ thống các lớp giúp bạn kiểm soát việc hiển thị (hoặc ẩn) các phần tử. Kiểm soát 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 tên theo định dạng sau

.d -{breakpoint}- {value}

Trong đó

• {điểm dừng}. Không bắt buộc
• {giá trị}. Bắt buộc
  

{điểm dừng}

{breakpoint}Mô tả
sm(Nhỏ). hoạt động khi chiều rộng phần tử >= 567pxmd(Medium). hoạt động khi chiều rộng phần tử >= 768pxlg(Large). hoạt động khi chiều rộng phần tử >= 992pxxl(Extra Large). hoạt động khi chiều rộng phần tử >= 1200pxprintliên quan đến in

{giá trị}

{value}Description
nonemake các phần tử bị ẩn. nội tuyến giống như {display. nội tuyến}. block giống như  {display. khối}. inline-block giống như  {display. chặn Nội tuyến}. table giống như  {display. bàn}. Nó làm cho các phần tử có cùng hành vi như phần tử 

2- Lớp. d-nội tuyến,. khối d,. d-inline-block

Nếu bạn đã học CSS, chắc chắn bạn đã quen thuộc với. {trưng bày. nội tuyến}, {hiển thị. khối}, {hiển thị. chặn Nội tuyến}. Bootstrap sử dụng. d-nội tuyến,. khối d,. các lớp d-inline-block thay vì các thuộc tính CSS ở trên. Cả hai cách tiếp cận trên đều hoạt động tương tự nhau

khối d

Phần tử đã áp dụng. lớp d-block là một khối hình chữ nhật. Nó ngắt một dòng phía trước và phía sau dòng đó, vì vậy chúng sẽ nằm trên các hàng khác nhau. Nếu phần tử này không được gán chiều rộng cố định, nó sẽ có chiều rộng là 100%

Ví dụ với. khối d

d-block-ví dụ

<div class="container-fluid">
   <h3 class="mb-3">.d-block example</h3>
   <div class="d-block border" style="width:150px;">
      .d-block (width:150px)
   </div>
   <div class="d-block border">
      .d-block
   </div>
   <div class="d-block border" style="height:90px;">
      .d-block (height:90px)
   </div>
</div>

d-nội tuyến

Các phần tử đã áp dụng. lớp d-inline không phải là một khối hình chữ nhật, do đó, bạn không thể đặt chiều rộng và chiều cao cho chúng. Chúng thường ở cùng một hàng. Nhưng nếu chiều rộng của phần tử cha quá nhỏ, một số phần tử có thể bị đẩy xuống hàng thấp hơn. Nội dung của một phần tử có thể nằm trên một hoặc nhiều dòng

Ví dụ với. d-nội tuyến

d-inline-ví dụ

<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>

d-inline-block

Phần tử đã áp dụng. lớp d-inline-block là một khối hình chữ nhật. Họ có thể trên cùng một hàng. Nhưng nếu chiều rộng của phần tử cha quá nhỏ, một số phần tử có thể bị đẩy xuống các hàng thấp hơn. Nếu phần tử này không được gán chiều rộng cố định thì 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-ví dụ

<h3 class="mb-3">.d-inline-block example</h3>

<div class="container-fluid">
   <div class="d-inline-block border border-primary" style="width:100px;">
      .d-inline (width:100px)
   </div>
   <div class="d-inline-block border border-info">
      .d-inline (no width, no height)
   </div>
   <div class="d-inline-block border border-danger" style="height:90px;">
      .d-inline (height:90px)
   </div>
</div>

3- Lớp. d-flex,. d-inline-flex

Uốn cong (. d-flex,. d-inline-flex) là tiện ích quan trọng nhất trong Bootstrap, vì tầm quan trọng này nên được giới thiệu trong một bài học riêng

• Bootstrap linh hoạt

4- Lớp. bảng d,. d-bảng-hàng,. d-bảng-ô

Mô tả lớp học
. d-table giống như {display. bàn}. Nó làm cho các phần tử có cùng hành vi như phần tử

d-bảng-hàng

Phần tử đã áp dụng. lớp d-table-row phải là thành phần con của ". phần tử bảng d". Nó không thể xuất hiện độc lập. Bạn không thể thiết lập margin, padding, height, width cho nó. Những thuộc tính này được quyết định bởi ". d-table-cell" phần tử con

Các ". d-table-row" phần tử chỉ có thể thiết lập đường viền nếu nó là phần tử con của ". d-table {biên giới-sụp đổ. phần tử sụp đổ}"

d-bảng-hàng-ví dụ

<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table + .d-table-row</h3>

   <h4>.d-table {border-collapse: collapse}</h4>
   <div class="d-table" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

   <h4 class="mt-3">.d-table {border-collapse: collapse} + width: 100% </h4>
   <div class="d-table w-100" style="border-collapse: collapse;">
      <div class="d-table-row border border-primary">
         .d-table-row .border .border-primary
      </div>
      <div class="d-table-row border border-success" >
         .d-table-row .border .border-success
      </div>
   </div>

</div>

ô bảng

The elements applied the .d-table-cell class will have act like the