III.

1.9. Thay thế, loại bỏ, sao chép phần tử

 Thay thế phần tử này bởi phần tử khác
.replaceWith(): Thay thế từng nội dung và thành phần mới tới thành phần mục tiêu
đã chọn.

.replaceWith('Thành phần mới')

$('.test').replaceWith('<p>Đây là thành phần thay thế</p>');

 Xóa phần tử
$( selector).remove();

 Tạo bản sao cho phần tử và sự kiện

$(selector).clone(eventHandlers);

- Trong đó, tham số "eventHandlers" dùng để xác định việc các sự kiện trên phần
tử có được sao chép hay không, nó có thể nhận một trong hai giá trị:

o true: có sao chép các sự kiện trên phần tử.

o false: không sao chép các sự kiện trên phần tử.

 Sao chép phần tử không kèm sự kiện

// Sao chép phần tử có ID là "originalElement" nhưng không kèm sự kiện

var $clone = $('#originalElement').clone();

$clone.off(); // Xóa tất cả sự kiện của bản sao

2. BOOTSTRAP
2.1. Tổng quan về Bootstrap
 Bootstrap là gì?
Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template
dùng để phát triển website chuẩn responsive.

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons,
tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có
thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ
dàng, thuận tiện và nhanh chóng hơn

 Cấu trúc file Bootstrap

Cấu trúc Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các file
được biên dịch trước, các file này dễ dàng tích hợp vào các dự án
xây dựng web để công việc thiết kế được diễn ra nhanh chóng. Bên
cạnh file CSS và JS, Bootstrap còn có file phông chữ từ Glyphicons.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

 Hệ thống lưới mặc định (Default Grid System)

o Grid HTML
Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu
tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước
trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout.
Thay vì chỉ định rõ ràng kích thước là 200px, 300px, … thì giờ chúng ta sẽ dùng đơn vị là cột. Số
phần % của mỗi cột đã được định nghĩa sẵn trong bootstrap. Việc của chúng ta lúc này chỉ đơn
giản là sử dụng nó.

Vậy thì Cột (Column) và Dòng (Row) ở đây là gì?

 Dòng (row): là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng
của thành phần chứa nó.
 Cột (Column): Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy
nhất các cột được đặt trong hàng, đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.
Hệ thống lưới Bootstrap 4 có năm lớp:

 .col-( chiều rộng màn hình nhỏ hơn 576px)

 .col-sm-( chiều rộng màn hình bằng hoặc lớn hơn 576px)
 .col-md-( chiều rộng màn hình bằng hoặc lớn hơn 768px)
 .col-lg-( chiều rộng màn hình bằng hoặc lớn hơn 992px)
 .col-xl-( chiều rộng màn hình bằng hoặc lớn hơn 1200px)

o Offsetting Columns
Một câu hỏi tiếp tục được đặt ra khi làm giao diện là bạn muốn một thành
phần nào đó hiển thị cách ra 1 khoảng so với thành phần kia thì sao ?

Nếu xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến
giao diện sẽ không còn đúng chuẩn nữa. Trong trường hợp này các bạn
nên khai báo thêm class: col-@@-offset-@ trong đó.

 @@: là 4 giá trị xs, sm, md và lag

 @: là giá trị từ 1 đến 12.

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
o Nesting Columns
Nesting Columns là một cách để bạn có thể tạo cấu trúc dạng lưới
phức tạp hơn bằng cách đặt các cột con bên trong các cột cha. Điều
này cho phép bạn tạo ra các bố cục phức tạp hơn và điều chỉnh chi
tiết hơn về việc hiển thị nội dung trên trang web của bạn.
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>

 Hệ thống lưới Fluid

Hệ thống lưới Fluid sử dụng phần trăm thay vì pixel cho chiều rộng cột. Nó có khả
năng phản hồi tương tự như hệ thống lưới cố định của chúng tôi, đảm bảo tỷ lệ phù
hợp cho các thiết bị và độ phân giải màn hình chính.

 Lớp Container
Containers thường được sử dụng để bọc nội dung bên trong chúng và có 2 container class:
1/ .container class cung cấp một container với chiều rộng tương thích (responsive fixed width container).
2/ .container-fluid class cung cấp một container có chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của
khung nhìn (full width container).

 Thiết kế đáp ứng thiết bị (Responsive Design)

Bootstrap 5 tiếp tục hỗ trợ tính năng "responsive" mạnh mẽ, giúp bạn xây dựng các trang web có
thể hiển thị đẹp trên nhiều thiết bị và kích thước màn hình khác nhau. Để tạo các thiết kế
responsive trong Bootstrap 5, bạn có thể sử dụng một số lớp và công cụ đã được tích hợp.

Dưới đây là một số cách để tạo thiết kế responsive trong Bootstrap 5:

1. Grid System:

Bootstrap sử dụng hệ thống lưới để chia trang web thành các cột và hàng. Bằng cách sử dụng các
lớp như col-md-4 hoặc col-lg-6, bạn có thể kiểm soát cách các phần tử sẽ hiển thị trên các kích
thước màn hình cụ thể.

2. Classes Display:

Bootstrap cung cấp các lớp display để ẩn hoặc hiển thị nội dung trên các thiết bị cụ thể. Sử dụng
các lớp như d-none, d-sm-block, d-md-none, và d-lg-flex để kiểm soát hiển thị của các phần tử
trên các kích thước màn hình khác nhau.

3. Breakpoints:

Bootstrap 5 xác định các điểm tạo điểm bẻ (breakpoints) để xác định cách hiển thị nội dung trên
các kích thước màn hình khác nhau. Các breakpoints thường được đặt tên theo kích thước màn
hình, ví dụ: sm, md, lg, xl. Bạn có thể sử dụng CSS media queries và các lớp dựa trên
breakpoints như d-md-block để điều chỉnh thiết kế.
2.2. Bootstrap CSS
 Trình bày
o Headings
Chúng ta có thể xác định tất cả các thẻ heading HTML từ h1 đến h6 tương tự như cách xác định
các thẻ này trong tài liệu HTML đơn giản. Trong trường hợp nếu muốn áp dụng các style của
phần tử giống style của heading, chúng ta có thể sử dụng các lớp heading .h1 đến .h6 trên các
phần tử khác nhau.

o Lớp Lead
Để làm nổi bật đoạn văn bản, chúng ta thêm lớp .lead vào đó.

o Lớp Text Emphasis (text-*):

Lớp này được sử dụng để thay đổi màu sắc của văn bản để làm nổi
bật nó. Các lớp text-* thường được sử dụng để thay đổi màu sắc chữ
hoặc làm cho chữ in đậm hoặc nghiêng. Dưới đây là một số ví dụ: =
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

o Danh sách
1.Danh sách không sắp xếp (Unordered List):
Để tạo một danh sách không sắp xếp, bạn có thể sử dụng thẻ <ul> và các thẻ <li>
để liệt kê các mục. Dưới đây là một ví dụ:

<ul>

<li>Mục 1</li>

<li>Mục 2</li>

<li>Mục 3</li>

</ul>

2. Danh sách sắp xếp (Ordered List):

Để tạo một danh sách sắp xếp, bạn có thể sử dụng thẻ <ol> và các thẻ <li>. Ví dụ:

<ol>

<li>Mục 1</li>

<li>Mục 2</li>

<li>Mục 3</li>

</ol>

3. Danh sách có danh sách con (Nested List):

Bạn có thể tạo danh sách con bên trong danh sách khác bằng cách đặt một danh
sách bên trong thẻ <li> của danh sách cha:

<ul>

<li>Mục 1</li>

<li>Mục 2

<ul>

<li>Mục con 1</li>

<li>Mục con 2</li>

 </ul>

</li>

<li>Mục 3</li>

</ul>

4. Danh sách theo chiều ngang (Horizontal List): Để tạo danh sách theo chiều
ngang, bạn có thể sử dụng lớp .list-inline. Ví dụ:

<ul class="list-inline">

<li class="list-inline-item">Mục 1</li>

<li class="list-inline-item">Mục 2</li>

<li class="list-inline-item">Mục 3</li>

</ul>

 Lớp Code
1. Inline code
Gói các đoạn mã nội tuyến bằng <code>.

<p> For example, <code>&lt;section&gt;</code> should be wrapped as

inline.</p>

2. Code blocks
Sử dụng <pre> cho nhiều dòng mã.Bạn có thể tùy ý thêm lớp .pre-scrollable,
lớp này sẽ đặt chiều cao tối đa là 350px và cung cấp thanh cuộn trục y.
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>
 Lớp Tables
o Các dạng bảng (Optional Table Classes): Striped, Bordered,
Hover, Condensed
1. Striped rows
Sử dụng.table-striped để thêm sọc ngựa vằn vào bất kỳ hàng nào của bảng
trong <tbody>.

<table class="table table-striped">

<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
 2. Bordered table
Thêm .table-bordered cho đường viền ở tất cả các cạnh của bảng và ô.

<table class="table table-bordered">

<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
 3. Hoverable table
Thêm .table-hover để bật trạng thái di chuột trên các hàng của bảng trong
<tbody>.

<table class="table table-hover">

<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

4.Condense table
-.table-condensed là một lớp trong Bootstrap 3 Framework. Nó có th ể
được sử dụng khi chúng ta muốn có một nửa hàng đệm để có thể thu gọn
bảng. Do đó, lớp .table-condensed được sử dụng khi bạn muốn hiển thị
các bảng dày đặc hơn trên các trang web. Nếu chúng ta không sử dụng
lớp .table-condensed trong bảng bootstrap thì khi bạn có một bảng dày
đặc và bạn cố xem nó trên các thiết bị màn hình nhỏ thì chúng ta cần
cuộn theo chiều ngang để xem các cột ẩn trong khi khi lớp .table-
condensed thì đã sử dụng, toàn bộ bảng được cô đọng theo kích thước
màn hình của bạn để bạn có thể xem toàn bộ bảng cùng một lúc
-Từ boostrap 4 table-condenses đã chuyển thành table-sm

<table class="table table-sm">

<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
 </tbody>
</table>

o Phân biệt hàng (Table Row Classes)

Sử dụng các lớp theo ngữ cảnh để tô màu các hàng trong bảng hoặc các ô
riêng lẻ.

<!-- On rows -->

<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->

<tr>
<td class="table-active">...</td>

<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
 Lớp Form
o Các dạng form (Optional Form Layouts):
Bootstrap cung cấp nhiều bố cục biểu mẫu tùy chọn khác nhau để giúp bạn t ạo
kiểu và cấu trúc biểu mẫu theo yêu cầu thiết kế của bạn. Các bố cục này có thể
được áp dụng bằng cách sử dụng các lớp Bootstrap để đạt được các kiểu và
cách sắp xếp biểu mẫu khác nhau. Dưới đây là một số bố cục biểu mẫu tùy
chọn trong Bootstrap:

1. Form grid

- Các biểu mẫu phức tạp hơn có thể được xây dựng bằng cách sử dụng các lớp grid.
Sử dụng các tùy chọn này cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau
và các tùy chọn căn chỉnh bổ sung.
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
2. Horizontal Form Layout

Ở dạng nằm ngang, nhãn và điều khiển biểu mẫu được đặt cạnh nhau theo chiều ngang.

Sử dụng lớp .form-horizontal để tạo dạng ngang.

<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1"
checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3"
disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
 <div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>

3. Inline forms
Sử dụng các lớp .row-cols-* để tạo bố cục ngang đáp ứng. Bằng cách thêm các
lớp sửa đổi Gutter, chúng ta sẽ có các Gutter theo hướng ngang và dọc. Trên
các khung nhìn di động hẹp, .col-12 giúp xếp chồng các điều khiển bi ểu m ẫu và
hơn thế nữa.

<form class="row row-cols-lg-auto g-3 align-items-center">

<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
 </select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

o Điều khiển (Supported Form Controls):

1.Input
2.Textarea
-Textarea được sử dụng khi bạn cần nhiều dòng đầu vào.Bạn có thể
sửa thuộc tính rowthay bằng số lượng hàng mà bạn muốn.
- Theo mặc định, các <textarea> có .form-control sẽ có cùng chiều cao với
các <input>.

<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
3.Checkboxes và Radio
- Checkbox thường được dùng nếu bạn muốn người sử dụng chọn số bất kỳ trong các lựa
chọn từ một danh sách có sẵn.

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>

- Các button Radio được dùng khi bạn muốn hạn chế số người dùng chỉ có một lựa chọn trong
danh sách.

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>

4.Selects
Các menu <select> tùy chỉnh chỉ cần một lớp tùy chỉnh, .form-select để kích
hoạt các kiểu tùy chỉnh. Kiểu tùy chỉnh bị giới hạn ở giao diện ban đầu của
<select> và không thể sửa đổi <option> do giới hạn của trình duyệt.

<select class="form-select" aria-label="Default select example">

<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

o Điều chỉnh kích thước các điều khiển trên form (Form Control
Sizing)
Đặt độ cao bằng cách sử dụng các lớp như .form-control-lg và .form-control-
sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-

lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-
control-sm example">

o Các trạng thái điều khiển (Form Control States):

1.Disabled

Thêm thuộc tính disabled boolean vào để làm cho nó có giao diện màu xám và xóa các
sự kiện con trỏ.
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example"
disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example"
disabled readonly>

2.Readonly
Thêm thuộc tính readonly boolean vào để ngăn việc sửa đổi giá trị đầu vào.
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example"
readonly>

3.Validation state
Đối với các thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn sẽ cần thêm thuộc tính
boolean novalidate vào <form> của mình. Điều này vô hiệu hóa chú giải công cụ phản hồi mặc
định của trình duyệt nhưng vẫn cung cấp quyền truy cập vào API xác thực biểu mẫu trong
JavaScript. Hãy thử gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ chặn nút gửi và chuyển
tiếp phản hồi cho bạn. Khi cố gắng gửi, bạn sẽ thấy các kiểu :invalid và :valid được áp dụng cho
các điều khiển biểu mẫu của bạn.

Kiểu phản hồi tùy chỉnh áp dụng màu sắc, đường viền, kiểu tiêu điểm và biểu tượng nền tùy
chỉnh để truyền đạt phản hồi tốt hơn. Biểu tượng nền cho <select> chỉ khả dụng với .form-select
chứ không phải .form-control.

<form class="row g-3 needs-validation" novalidate>

<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
 <div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-
describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
 Nút (Buttons)
Bootstrap bao gồm một số kiểu nút được xác định trước, mỗi kiểu phục vụ mục
đích ngữ nghĩa riêng, với một số tính năng bổ sung được đưa vào để kiểm soát
nhiều hơn.

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

o Kích thước (Button Sizes)

-Nếu bạn cần các nút lớn hơn hay nhỏ hơn? Thêm .btn-lg hoặc .btn-sm để có
thêm kích thước.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

-Tạo các nút cấp độ khối—những nút trải dài toàn bộ chiều rộng của nút gốc—bằng
cách thêm .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level
button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level
button</button>

o Nút dạng chưa kích hoạt (Disabled Button Styling)

Làm cho các nút trông không hoạt động bằng cách thêm thuộc tính
disabled boolean vào bất kỳ phần tử <button> nào.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

 Ảnh (Images)
- Ảnh thích ứng
Trong Boostrap, bạn sẽ sử dụng class .img-fluid trên tất cả những hình ảnh bạn
muốn nó có tính responsive. Class này sẽ "bảo" với trình duyệt là đừng mở rộng hình
ảnh lớn hơn kích thước gốc của ảnh bằng cách sử dụng max-width, và thu nhỏ hình ảnh
lại nếu cửa sổ trình duyệt hẹp hơn độ rộng của ảnh (tính theo pixel).
Để tạo ảnh có thể responsive, bạn thêm class .img-fluid vào thẻ <img> . Class này sẽ
áp dụng max-width: 100%; và height: auto; cho ảnh.

- Bo góc cho ảnh:Class .rounded sẽ bo tròn góc của ảnh (tương đương với border-
radius:6px;)

- Hình thu nhỏ của hình ảnh(Image thumbnails): Thêm viền và padding để làm
cho hình ảnh trông giống như hình thu nhỏ.

-Hình ảnh được căn giữa: Để căn giữa một hình ảnh theo chiều ngang trong m ột
phần tử cha, bạn có thể sử dụng lớp .mx-auto.

 Biểu tượng Icons

Bootstrap 5 không còn sử dụng "Glyphicons" như trong Bootstrap 3. Thay vào đó, Bootstrap 5 khuyến
nghị sử dụng biểu tượng (icons) từ các thư viện hoặc các dự án phổ biến như Font Awesome, Material
Icons, Feather Icons, và nhiều thư viện khác. Bạn có thể tích hợp biểu tượng này vào trang web của mình
bằng cách sử dụng các thẻ HTML hoặc các lớp CSS được cung cấp bởi thư viện biểu tượng bạn chọn.