Làm cách nào để thay đổi kích thước phương thức trong Bootstrap 5?

html3_______2__________>6 >7_______5__________35 36=15 39=6_______41>

Các phương thức trong Bootstrap được sử dụng để thêm hộp thoại để thông báo cho người dùng hoặc những thứ khác. Các phương thức đi kèm với chiều rộng mặc định trung bình. Nhưng chúng ta có thể thay đổi chiều rộng mặc định của hộp phương thức bằng Bootstrap 5

Các phương thức trong Bootstrap 5 có ba kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ. Nó nên được đặt trên một .modal-dialog.

kích thước

tầng lớp

chiều rộng tối đa của phương thức

bé nhỏ

phương thức-sm

300px

Vỡ nợ

Không có

500px

lớn

modal-lg

800px

cực lớn

phương thức-xl

1140px

Phương thức có chiều rộng trung bình mặc định. Các kích thước này khởi động tại các điểm dừng nhất định để tránh các thanh cuộn ngang

Thí dụ. Tạo một phương thức kích thước nhỏ trong Bootstrap 5

Dưới đây là một ví dụ, nơi chúng tôi đã tạo một phương thức kích thước nhỏ bằng cách thêm lớp .modal-sm vào .modal-dialog




	Bootstrap Example
	
	
	
    
    


    

Click to lunch small size modal

đầu ra

Đây là đầu ra của chương trình trên

Làm cách nào để thay đổi kích thước phương thức trong Bootstrap 5?

Chế độ toàn màn hình

Vẫn còn một tập hợp các lớp sửa đổi khác được sử dụng để bật lên một phương thức bao phủ toàn bộ màn hình. Lớp công cụ sửa đổi này cũng được đặt trên .modal-dialog.

classAvailability.modal-fullscreenAlways.modal-fullscreen-sm-downBelow 576px.modal-dialog0.modal-dialog1.modal-dialog2.modal-dialog3.modal-dialog4.modal-dialog5.modal-dialog6.modal-dialog7

Thí dụ. Thêm chế độ toàn màn hình

Trong ví dụ này, chúng tôi đã thêm chế độ toàn màn hình

Phần kết luận

Trong hướng dẫn này, chúng tôi đã sử dụng lớp công cụ sửa đổi Bootstrap 5 để thay đổi độ rộng của hộp thoại phương thức. Có một số lớp công cụ sửa đổi cho các chế độ toàn màn hình tại các điểm dừng khác nhau

In order to increase or decrease the modal window height and width properties of Bootstrap, you need to get the modal related classes and use desired values either in the