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 
	
	
	  Launch demo modal
	
	
	

	
	  

		

		  

			Modal title
			
		  
		  

			...
		  
		  

			Close
			Save changes
		  
		
	  
	

đầu ra

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

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.

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 section or in your external CSS file.

Trong cả hai trường hợp, bạn phải sử dụng nó sau khi tham khảo tệp Bootstrap CSS. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể thay đổi chiều rộng và chiều cao của cửa sổ phương thức

Ghi chú. Bootstrap 4 có các lớp tích hợp để tạo các phương thức có kích thước lớn và nhỏ. Một ví dụ được liên kết ở trên. Bạn có thể tìm hiểu thêm về chiều cao và chiều rộng của phương thức Bootstrap 4 trong hướng dẫn của nó

Bản demo thay đổi độ rộng của cửa sổ phương thức

For this demo, the .modal-dialog class which is the built-in class of Bootstrap framework for the modal window is used in the tag.

Ở đó, tôi chỉ cần chỉ định chiều rộng 360px sẽ ghi đè giá trị mặc định. Bên cạnh đó, tôi cũng đã thay đổi thuộc tính tiêu đề mặc định để thay đổi giao diện

CSS được sử dụng trong bản demo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.modal-dialog {

          chiều rộng. 360px;

        }

.modal-header {

    màu nền. #337AB7;

    phần đệm. 16px 16px;

    màu. #FFF;

    đường viền dưới. 2px nét đứt #337AB7;

 }

đánh dấu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61