Trong phát triển web, Bootstrap là một trong những framework nổi tiếng nhất của CSS. Nó được sử dụng để thiết kế và tạo các trang web có thiết kế tuyệt vời và khả năng đáp ứng đầy đủ. Nó được sử dụng trong quá trình phát triển giao diện người dùng, giúp tạo các trang web rất dễ dàng mà không cần quá nhiều HTML và CSS. Nó tương thích với hầu hết các trình duyệt. Bootstrap-5 là phiên bản mới nhất hiện có. Nó có một lớp chứa là phần quan trọng nhất của mã hoàn chỉnh
Nó có rất nhiều lớp có thể được sử dụng trực tiếp trong lớp và các định nghĩa của chúng đã được định nghĩa trong tài liệu của Bootstrap
Căn chỉnh nút ở bên phải của hộp văn bản
Đối với bất kỳ phần nào, nếu chúng ta muốn căn chỉnh vị trí của nó thì chúng ta có thể sử dụng lớp float. Chúng tôi sử dụng lớp float-end để căn chỉnh nút sang bên phải. Nếu chúng ta muốn căn nó sang bên trái, chúng ta có thể sử dụng lớp float-start
Chúng ta sẽ xem mã HTML để hiểu lớp float-end
ví dụ 1
đầu ra
Giải trình
Trong mã HTML ở trên, chúng tôi đã sử dụng Bootstrap để thiết kế một trang web bình thường có hai trường đầu vào và một nút gửi. Trong phần nội dung, chúng tôi đã sử dụng lớp chứa chứa tất cả mã. Chúng tôi đã sử dụng
Ghi chú. Đối với Bootstrap-3 và Bootstrap-4, chúng ta có thể text-right class để căn chỉnh bất kỳ phần tử nào sang bên phải. Nhưng text-right không hoạt động trong Bootstrap-5
ví dụ 2
đầu ra
Giải trình
Trong đoạn mã trên, chúng tôi đã sử dụng cùng một mã, nhưng trong thẻ nút, chúng tôi đã sử dụng lớp text-right thay vì lớp float-right. Trong Bootstrap-2 hoặc Bootstrap-3, lớp text-right được sử dụng để căn chỉnh bất kỳ phần tử nào sang bên phải. Nhưng trong Bootstrap-5, lớp này được thay thế bằng lớp float-right để canh lề phải. Vì vậy, chúng tôi đã thử đoạn mã trên trong Bootstrap-5. Nó không hoạt động và theo mặc định, nút này được căn chỉnh về phía bên trái của hộp văn bản
Các lớp căn chỉnh văn bản Bootstrap 5 được sử dụng để sắp xếp lại các thành phần với biến thể bắt đầu, kết thúc và trung tâm. Nó có thể được sử dụng trong các điểm dừng chiều rộng khung nhìn giống như hệ thống lưới
Bootstrap 5 Các lớp căn chỉnh văn bản. Ở đây * có thể thay thế bằng start, end và center và ** có thể thay thế bằng sm, md, lg & xl
- chữ-*. Lớp này được sử dụng để căn chỉnh thành phần bắt đầu, trung tâm hoặc kết thúc
- chữ-**-*. Lớp này được sử dụng để căn chỉnh thành phần ở đầu, giữa hoặc cuối tùy thuộc vào kích thước màn hình
cú pháp
...
Ghi chú. Lớp này sẽ hoạt động trên các đoạn văn, tiêu đề và các phần tử neo
Các ví dụ dưới đây minh họa Căn chỉnh Văn bản
ví dụ 1. Trong ví dụ này, chúng ta sẽ căn chỉnh văn bản sang bên phải bằng cách sử dụng lớp text-end
HTML