Tổng hợp bài tập về Bootstrap 5

Bạn có thể kiểm tra kỹ năng về Bootstrap 5 qua những bài tập được chia theo từng phần dưới đây. Giải bài tập bằng cách điền vào phần code còn thiếu. Bạn sẽ nhận được 1 điểm cho mỗi câu trả lời đúng.

Container trong Bootstrap 5

Bài 1: Thêm một class Bootstrap vào phần tử <div> để tạo một container với chiều rộng tương thích:

<div class="...........">
 <p>Hello World!</p>
</div>

Đáp án: container

Bài 2: Thêm class Bootstrap vào phần tử <div> để tạo container có chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của màn hình:

<div class="............">
<p>Hello World!</p>
</div>

Đáp án: container-fluid

Typography trong Bootstrap 5

Bài 1: Dùng class Bootstrap để căn giữa văn bản sau:

<p class="........">Hello World!</p>

Đáp án: text-center

Bài 2: Dùng class hiển thị để làm phần tử <h1> nổi bật hơn tiêu đề bình thường ( kích thước font lớn hơn và độ dày font mỏng hơn):

<h1 class=".............">My Heading</h1>

Đáp án: display-1

Bài 3: Dùng môt class Bootstrap để viết hoa văn bản sau:

<p class=".............">Hello World!</p>

Đáp án: text-uppercase

Colors trong Bootstrap 5

Bài 1: Dùng class theo ngữ cảnh để tô màu văn bản của phần tử <p> sang "orange":

<p class=".............">Hello World!</p>

Đáp án: text-warning

Bài 2: Dùng class theo ngữ cảnh để đặt màu nền của phần tử <p> sang màu xám nhạt:

<p class="................">Hello World!</p>

Đáp án: bg-light

Image trong Bootstrap 5

Bài 1: Dùng một class Bootstrap để tạo hình ảnh thành một hình tròn

<img src="img_chania.jpg" alt="Chania" class="............">

Đáp án: rounded-circle

Bài 2: Dùng một class Bootstrap để thêm các góc bo tròn trên ảnh.

<img src="img_chania.jpg" alt="Chania" class="..............">

Đáp án: rounded

Bài 3: Dùng class Bootstrap để xếp ảnh dưới dạng “thumbnail”

<img src="img_chania.jpg" alt="Chania" class=".............">

Đáp án: img-thumbnail

Bài 4: Dùng class Bootstrap để làm ảnh phản hồi.

<img src="img_chania.jpg" alt="Chania" class="................">

Đáp án: img-fluid

Bảng biểu trong Bootstrap 5

Bài 1: Thêm một thuộc tính class để tạo kiểu cho bảng biểu dưới dạng bảng Bootstrap cơ bản:

<table ..............>
<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>
</table>

Đáp án: class="table"

Bài 2: Thêm zebra-stripes vào đúng vị trí trong bảng này:

<table class="table">
  <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>
</table>

Đáp án:

<table class="table
table-striped">
<tr>
<td>John</td>
<td>Doe</td>

Bài 3: Thêm một class thêm đường viền vào tất cả các mặt của bảng và ô:

<table class="table ...........">
  <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>
</table>

Đáp án: table-bordered

Bài 4: Thêm một class hiện trạng thái trỏ chuột trên các hàng trong bảng:

<table class="table ...............">
  <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>
</table>

Đáp án: table-hover

Bài 5: Dùng class theo ngữ cảnh để thêm những màu sau vào các hàng:

• Hàng đầu tiên là màu xanh lá
• Hàng thứ hai là màu đỏ
• Hàng cuối cùng là màu xanh dương

<table class="table">
  <tr class="..........">
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr class="..............">
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
  <tr class="...........">
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
  </tr>
</table>

Đáp án: table-success/table-danger/table-primary (theo thứ tự từ trên xuống dưới)

Alerts trong Bootstrap 5

Bài 1:Thêm class “alert” để hiển thị kết quả của một tác vụ thành công.

<div class="......">
Success!
</div>

Đáp án: alert alert-success

Bài 2: Đọc đoạn code sau, rồi thêm class “alert” phù hợp:

<div class=".......">
This alert box could indicate a successful or positive action.
</div>
<div class="......">
This alert box could indicate a neutral informative change or action.
</div>
<div class="......">
This alert box could indicate a warning that might need attention.
</div>
<div class="......">
This alert box could indicate a dangerous or potentially negative action.
</div>

Đáp án:

• alert alert-success
• alert alert-info
• alert alert-warning
• alert alert-danger

Bài 3: Thêm class Bootstrap phù hợp để có thể tạo thông báo có thể đóng.

<div class="alert alert-success.......">
<button class="btn-close" data-bs-dismiss="alert"></button>
Blah blah blah.
</div>

Đáp án: alert-dismissible

Buttons trong Bootstrap 5

Bài 1: Thêm một class Bootstrap để tạo kiểu phù hợp cho nút bấm dưới dạng một nút “danger”.

<button class=".......">Danger</button>

Đáp án: btn btn-danger

Bài 2: Thêm một class Bootstrap để thiết lập kích thước của nút bấm đầu tiên là “large”, nút bấm cuối cùng là “small”.

<button class="btn btn-primary.......">Button</button>
<button class="btn btn-primary.......">Button</button>

Đáp án:

• btn-lg
• btn-sm

Ảnh trong BS5

Bài 1:

Thêm class Bootstrap vào phần tử <div> để tạo một container fixed width đáp ứng:

<img src="img_chania.jpg" alt="Chania" class="..........."> 

Đáp án: container

Bài 2: Dùng một class Bootstrap để thêm các góc bo tròn cho ảnh.

<img src="img_chania.jpg" alt="Chania" class="..............">

Đáp án: rounded

Bài 3: Dùng một class Bootstrap để tạo hình ảnh dưới dạng thumbnail.

<img src="img_chania.jpg" alt="Chania" class="...............">

Đáp án: img-thumbnail

Bài 4: Dùng class Bootstrap để tạo ảnh đáp ứng

<img src="img_chania.jpg" alt="Chania" class="..............">

Đáp án: img-fluid

Bảng trong Bootstrap 5

Bài 1: Thêm thuộc tính class để tạo kiểu bảng dưới dạng một bảng Bootstrap cơ bản:

<table ..............>
  <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>
</table>

Đáp án: class="table"

Bài 2: Thêm zebra-stripes vào bảng.

<table class="table .............">
<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>
</table>

Đáp án: table-striped

Bài 3: Thêm một class sẽ bổ sung đường viền trên tất cả các cạnh của bảng và ô.

<table class="table ............">
<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>
</table>

Đáp án: table-bordered

(Còn tiếp)