Đất Việt Lập Trình: 40. Tạo một webpage đơn giản với Bootstrap phần 5

Thứ Năm, 27 tháng 6, 2024

40. Tạo một webpage đơn giản với Bootstrap phần 5

Trước khi chuyển qua các phần khác của Bootstrap, chúng ta thảo luận qua về màu sắc.

Bootstrap 5 Colors

Text Colors: Các color class cho văn bản là: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (màu mặc định của phần body thường là màu đen) và .text-light.

Về phần Background Colors, chúng ta đã thử qua vài màu trong các phần trước. Các lớp cho màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light.

Chúng ta sẽ thử hết luôn một lần trên OnlineGDB. Tiếp tục với mã HTML trước. Chúng ta thêm phần sau vào trước thẻ </div> cuối cùng.

<h2>Text Colors</h2>
<p class="text-muted">This text is Muted.</p>
<p class="text-primary">This text is Primary.</p>
<p class="text-success">This text indicates Success.</p>
<p class="text-info">This text represents some Info.</p>
<p class="text-warning">This text represents a Warning.</p>
<p class="text-danger">This text represents Danger.</p>
<p class="text-secondary">This text represents Secondary.</p>
<p class="text-dark">This text is Dark.</p>
<p class="text-body">Mặc định body color(Black).</p>
<p class="text-light">This text is light grey.</p>
<p class="text-white">This text is white.</p>

<h2>Background Colors</h2>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>

Bấm Run để thực thi. Chúng ta cần sử dụng chuột để quét chọn 2 dòng Text cuối thì mới thấy vì màu của những Text này sáng màu.

Bây giờ chúng ta sẽ chuyển qua thảo luận qua về Table. Chúng ta không đi sâu về Table.

Một bảng Bootstrap 5 cơ bản có phần padding nhỏ và các ngăn chia theo chiều ngang.

Class .table được sử dụng để tạo bảng. Chúng ta sẽ thêm mã tạo một bảng đơn giản nối tiếp vào mã phía trên.

<h2>Một Table Đơn Giản</h2>
<table class="table">
<thead>
    <tr>
      <th>Tên</th>
      <th>Địa Chỉ</th>
      <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>Tran Van A</td>
      <td>123 HV Da Nang</td>
      <td>tranvana@email.com</td>
    </tr>
    <tr>
      <td>Nguyen Van B</td>
      <td>256 HV Da Nang</td>
      <td>nguyenvanb@email.com</td>
    </tr>
    <tr>
      <td>Le Thi C</td>
      <td>789 HV Da Nang</td>
      <td>lethic@email.com</td>
    </tr>
</tbody>
</table>

Bấm Run để thực thi

Tiếp tục với một phần thú vị hơn, đó là hình ảnh.

Bootstrap 5 Images

Responsive images

Hình ảnh trong Bootstrap được tạo Responsive với .img-fluid. Điều này áp dụng max-width: 100%; và height: auto; cho hình ảnh để nó có thể mở rộng theo phần tử cha.

Thêm mã sau vào trước thẻ </div> cuối cùng

<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="img-fluid" alt="Đất Việt Lập Trình">

Bấm Run để thực thi, khi thay đổi chiều ngang, hình ảnh vẫn giữ nguyên tỷ lệ.

Thumbnail

Chúng ta sẽ chuyển qua tạo những hình ảnh nhỏ hơn, dễ dàng "nhìn" và thảo luận cho các tinh năng khác. Lớp .img-thumbnail định hình hình ảnh thành Thumbnail (có viền)

Tiếp tục thêm mã sau:

<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="img-thumbnail" alt="Đất Việt Lập Trình" width="300" height="200">

Bấm Run để thực thi

Aligning Images

Làm hình ảnh sang bên trái bằng lớp .float-start hoặc sang bên phải bằng lớp .float-end. Thêm mã sau, trước đó chúng ta tạm sử dụng thẻ <br> để xuống dòng