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 2,741 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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley

[email protected]



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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]



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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>[email protected]</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>[email protected].com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
DefaultDefaultson[email protected]
PrimaryJoe[email protected]
SuccessDoe[email protected]
DangerMoe[email protected]
InfoDooley[email protected]
WarningRefs[email protected]
ActiveActiveson[email protected]
SecondarySecondson[email protected]
LightAngie[email protected]
DarkBo[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>
FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]
FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>


FirstnameLastnameEmail
JohnDoe[email protected]
MaryMoe[email protected]
JulyDooley[email protected]

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