IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Tables

by GokiSoft.Com - 19:30 12/10/2020 3,295 Lượt Xem

Bootstrap 4 Basic Table

Class .table làm cho table của bạn mặc định như sau:

Ví dụ

<table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooley

july@example.com



Striped Rows

Class .table-striped add zebra-stripes cho bảng (bạn có thể thấy màu xám màu trắng zic zac từng dòng):

Ví dụ


<table class="table table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com



Bordered Table

Class .table-bordered add borders (dòng kẻ phân chia bảng):

Ví dụ


<table class="table table-bordered">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Hover Rows

Class.table-hover add hiệu ứng hover cho các row trong bảng (Hiệu ứng hover là hiệu ứng khi di chuột vào thì row trong bảng sẽ chuyển màu xám):

Ví dụ


<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Black/Dark Table

Class .table-dark add background màu tối cho bảng:

Ví dụ


<table class="table table-dark">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Dark Striped Table

Sự kết hợp giữa .table-dark và .table-striped sẽ tạo ra table vừa dark, vừa striped:

Ví dụ


<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Hoverable Dark Table

Tương tự class .table-hover add thêm hiệu ứng hover trên dark table:

Ví dụ



<table class="table table-dark table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Borderless Table

Class .table-borderless loại bỏ borders khỏi table:

Ví dụ



<table class="table table-borderless">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Contextual Classes

Contextual classes có thể được sử dụng để tô màu toàn bộ bảng (<table>),  các row của bảng (<tr>) hoặc các cell (1 cell = 1 ô) của bảng (<td>).

Ví dụ


<table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Default</td>
            <td>Defaultson</td>
            <td>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>bo@example.com</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
DefaultDefaultsondef@somemail.com
PrimaryJoejoe@example.com
SuccessDoejohn@example.com
DangerMoemary@example.com
InfoDooleyjuly@example.com
WarningRefsbo@example.com
ActiveActivesonact@example.com
SecondarySecondsonsec@example.com
LightAngieangie@example.com
DarkBobo@example.com

Contextual classes có thể được sử dụng là:

ClassMô tả (Các màu sẽ hiển thị lên bảng)
.table-primaryBlue
.table-successGreen
.table-dangerRed
.table-infoLight blue
.table-warningOrange
.table-activeGrey: Áp dụng màu cho hàng của bảng hoặc ô của bảng
.table-secondaryGrey
.table-lightLight grey cho bảng hoặc background row
.table-darkDark grey cho bảng hoặc background row

Table Head Colors

Class .thead-dark add background màu đen cho header của table, còn class .thead-light add background màu xám cho header của table:

Ví dụ


<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <thead class="thead-light">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com
FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Small table

Class .table-sm làm table bé đi bằng cách cắt padding các ô của bảng đi một nửa:

Ví dụ


<table class="table table-bordered table-sm">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Responsive Tables

Ví dụ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Class .table-responsive khiến table có thể responsive: thêm scrollbar để vừa màn hình nếu thực tế bảng dài tràn màn hình:

    Đâybảngdàihơn so với màn hình của bạn
    VDĐâybảngdàihơn so với màn hình của bạn

Bạn có thể quyết định khi nào table có scrollbar, tùy thuộc vào chiều rộng màn hình:

ClassScreen width
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

Ví dụ

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!