openplanning

Hướng dẫn và ví dụ tiện ích Bootstrap Display

  1. Bootstrap Display Utility
  2. Class .d-inline, .d-block, .d-inline-block
  3. Class .d-flex, .d-inline-flex
  4. Class .d-table, .d-table-row, .d-table-cell
  5. Ẩn phần tử (.d-none)
  6. Hiển thị khi In (.d-print-*)

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:
.d-{breakpoint}-{value}
Trong đó:
  • {breakpoint}: Không bắt buộc.
  • {value}: Bắt buộc
{breakpoint}:
{breakpoint}
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
lg
(Large). Làm việc khi chiều rộng của phần tử >= 992px
xl
(Extra Large). Làm việc khi chiều rộng của phần tử >= 1200px
print
Liên quan tới in ấn.
{value}:
{value}
Mô tả
none
Làm cho phần tử bị ẩn đi.
inline
Giống với {display: inline}.
block
Giống với {display: block}.
inline-block
Giống với {display: inline-block}.
table
Giống với {display: table}. Làm cho phần tử có hành vi giống như phần tử <table>.
table-row
Giống với {display: tabled-row}. Làm cho phần tử có hành vi giống như phần tử <tr>.
table-cell
Giống với {display: table-cell}. Làm cho phần tử có hành vi giống như phần tử <td>.
flex
Giống với {display: flex}. Xem chi tiết trong bài học Bootstrap Flex.
inline-flex
Giống với {display: inline-flex}. Xem chi tiết trong bài học Flex Utility.

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
<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-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
<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ử đượ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
<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. 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ử <table>.
.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ử <tr>.
.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ử <td>.
.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
<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>
.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ử <td>. 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
<div class="container-fluid">
   <h3 class="mb-3 text-danger">.d-table-cell</h3>

   <div class="d-table">
      <div class="d-table-row">
         <div class="d-table-cell border p-4" style="width:200px;height:50px;">
            .d-table-cell .border .p-4 (padding)
            {width:200px;height:50px;}
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
      <div class="d-table-row">
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
         <div class="d-table-cell border">
            .d-table-cell .border
         </div>
      </div>
   </div>

</div>

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:
.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
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-danger p-2">
         <h3 class="mb-3 text-danger">.d-none</h3>

         <div class="d-none d-sm-block bg-info">
            .d-none .d-sm-block
         </div>
         
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

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
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Display</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid">
         <h3 class="d-print-none">Print Example</h3>

         <div class="d-print-block border bg-info mb-2 p-2">
             <p>.d-print-block</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
             <p>Print this Content.</p>
         </div>
         <div class="d-print-none border bg-danger p-2">
             <p>.d-print-none</p>
             <p>Do not print this Content.</p>
             <p>Do not print this Content.</p>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Các hướng dẫn Bootstrap

Show More