Các plugin có thể được bao gồm riêng lẻ [sử dụng
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Nếu bạn sử dụng một gói [Webpack, Rollup…], bạn có thể sử dụng các tệp
Launch demo modal
Modal title
...
Close
Save changes
Sử dụng Bootstrap làm mô-đun
Chúng tôi cung cấp phiên bản Bootstrap được xây dựng dưới dạng
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
plugin không tương thích
Do giới hạn của trình duyệt, một số plugin của chúng tôi, cụ thể là plugin Dropdown, Tooltip và Popover, không thể được sử dụng trong
Launch demo modal
Modal title
...
Close
Save changes
Trước khi bắt đầu với thành phần phương thức của Bootstrap, hãy nhớ đọc phần sau vì các tùy chọn menu của chúng tôi đã thay đổi gần đây
- Các phương thức được xây dựng bằng HTML, CSS và JavaScript. Chúng được định vị trên mọi thứ khác trong tài liệu và xóa cuộn khỏi để thay vào đó, nội dung phương thức sẽ cuộn
- Nhấp vào "phông nền" của phương thức sẽ tự động đóng phương thức
- Bootstrap chỉ hỗ trợ một cửa sổ phương thức tại một thời điểm. Các phương thức lồng nhau không được hỗ trợ vì chúng tôi tin rằng chúng mang lại trải nghiệm người dùng kém
- Các phương thức sử dụng
4, đôi khi có thể hơi cụ thể về cách hiển thị của nó. Bất cứ khi nào có thể, hãy đặt HTML phương thức của bạn ở vị trí cấp cao nhất để tránh khả năng can thiệp từ các phần tử khác. Bạn có thể gặp sự cố khi lồng mộtLaunch demo modalModal title
...
Close Save changes
5 trong một phần tử cố định khácLaunch demo modalModal title
...
Close Save changes
- Một lần nữa, do
4, có một số lưu ý khi sử dụng phương thức trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiếtLaunch demo modalModal title
...
Close Save changes
- Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML
7 không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnhLaunch demo modalModal title
...
Close Save changes
const myModal = document.getElementById['myModal']
const myInput = document.getElementById['myInput']
myModal.addEventListener['shown.bs.modal', [] => {
myInput.focus[]
}]
Tiếp tục đọc các bản demo và hướng dẫn sử dụng
ví dụ
thành phần phương thức
Dưới đây là một ví dụ về phương thức tĩnh [có nghĩa là
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch static backdrop modal
Modal title
...
Close
Understood
Văn bản nội dung phương thức ở đây
Modal title
Modal body text goes here.
Close
Save changes
Trong ví dụ tĩnh trên, chúng tôi sử dụng, để tránh các sự cố với hệ thống phân cấp tiêu đề trong trang tài liệu. Tuy nhiên, về mặt cấu trúc, hộp thoại phương thức đại diện cho tài liệu/ngữ cảnh riêng biệt của nó, vì vậy, lý tưởng nhất là
Launch static backdrop modal
Modal title
...
Close
Understood
Bản thử trực tiếp
Chuyển đổi bản trình diễn phương thức đang hoạt động bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang
Woo-hoo, bạn đang đọc văn bản này trong một phương thức
Launch demo modal
Modal title
...
Close
Save changes
phông nền tĩnh
Khi phông nền được đặt thành tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài phông nền. Nhấp vào nút bên dưới để dùng thử
Tôi sẽ không đóng nếu bạn nhấp bên ngoài tôi. Thậm chí đừng cố nhấn phím thoát
Khởi chạy phương thức phông nền tĩnh
________số 8
Khi các phương thức trở nên quá dài đối với chế độ xem hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang đó. Hãy thử bản demo bên dưới để xem chúng tôi muốn nói gì
Đây là một số nội dung giữ chỗ để hiển thị hành vi cuộn cho các phương thức. Thay vì lặp lại văn bản theo phương thức, chúng tôi sử dụng kiểu nội tuyến đặt chiều cao tối thiểu, do đó kéo dài độ dài của phương thức tổng thể và thể hiện cuộn tràn. Khi nội dung trở nên dài hơn chiều cao của chế độ xem, thao tác cuộn sẽ di chuyển phương thức khi cần
Bạn cũng có thể tạo một phương thức có thể cuộn cho phép cuộn phần thân của phương thức bằng cách thêm
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
Đây là một số nội dung giữ chỗ để hiển thị hành vi cuộn cho các phương thức. Chúng tôi sử dụng các ngắt dòng lặp đi lặp lại để chứng minh cách nội dung có thể vượt quá chiều cao bên trong tối thiểu, do đó hiển thị cuộn bên trong. Khi nội dung trở nên dài hơn chiều cao tối đa được xác định trước của phương thức, nội dung sẽ bị cắt và có thể cuộn được trong phương thức
Nội dung này sẽ xuất hiện ở dưới cùng sau khi bạn cuộn
Launch demo modal
Modal title
...
Close
Save changes
Căn giữa theo chiều dọc
Thêm
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
Đây là một phương thức tập trung theo chiều dọc
Đây là một số nội dung giữ chỗ để hiển thị phương thức tập trung theo chiều dọc. Chúng tôi đã thêm một số bản sao bổ sung ở đây để hiển thị cách thức hoạt động của phương thức định tâm theo chiều dọc khi được kết hợp với các phương thức có thể cuộn. Chúng tôi cũng sử dụng một số ngắt dòng lặp lại để nhanh chóng kéo dài chiều cao của nội dung, do đó kích hoạt thao tác cuộn. Khi nội dung trở nên dài hơn chiều cao tối đa được xác định trước của phương thức, nội dung sẽ bị cắt và có thể cuộn được trong phương thức
cứ thế
Phương thức có thể cuộn được căn giữa theo chiều dọc Phương thức có thể cuộn được căn giữa theo chiều dọc
Launch demo modal
Modal title
...
Close
Save changes
Chú giải công cụ và cửa sổ bật lên có thể được đặt trong các phương thức khi cần. Khi các phương thức bị đóng, mọi chú giải công cụ và cửa sổ bật lên bên trong cũng sẽ tự động bị loại bỏ
Launch demo modal
Modal title
...
Close
Save changes
Sử dụng lưới
Sử dụng hệ thống lưới Bootstrap trong một phương thức bằng cách lồng
Launch static backdrop modal
Modal title
...
Close
Understood
Launch static backdrop modal
Modal title
...
Close
Understood
Cấp độ 1. . col-sm-9
Cấp độ 2. . col-8. col-sm-6
Cấp độ 2. . col-4. col-sm-6
Launch demo modal
Modal title
...
Close
Save changes
Thay đổi nội dung phương thức
Có một loạt các nút kích hoạt cùng một phương thức với nội dung hơi khác nhau?
Dưới đây là bản trình diễn trực tiếp theo sau là ví dụ về HTML và JavaScript. Để biết thêm thông tin, hãy đọc các tài liệu về sự kiện phương thức để biết chi tiết về
Launch demo modal
Modal title
...
Close
Save changes
Mở phương thức cho @mdo Mở phương thức cho @fat Mở phương thức cho @getbootstrap
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Chuyển đổi giữa các phương thức
Chuyển đổi giữa nhiều phương thức với một số vị trí thông minh của các thuộc tính
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Hiển thị phương thức thứ hai và ẩn phương thức này bằng nút bên dưới
Ẩn phương thức này và hiển thị phương thức đầu tiên bằng nút bên dưới
Mở phương thức đầu tiên
Modal title
Modal body text goes here.
Close
Save changes
Thay đổi hoạt ảnh
Biến
Launch demo modal
Modal title
...
Close
Save changes
Launch static backdrop modal
Modal title
...
Close
Understood
Launch demo modal
Modal title
...
Close
Save changes
Launch static backdrop modal
Modal title
...
Close
Understood
Ví dụ, nếu bạn muốn một hoạt ảnh phóng to, bạn có thể đặt
Launch demo modal
Modal title
...
Close
Save changes
Xóa hoạt ảnh
Đối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa lớp
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Độ cao động
Nếu chiều cao của một modal thay đổi khi nó đang mở, bạn nên gọi
Launch demo modal
Modal title
...
Close
Save changes
khả năng tiếp cận
Đảm bảo thêm
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Nhúng video YouTube
Nhúng video YouTube vào các phương thức yêu cầu JavaScript bổ sung không có trong Bootstrap để tự động dừng phát lại và hơn thế nữa. Xem bài đăng Stack Overflow hữu ích này để biết thêm thông tin
Kích thước tùy chọn
Các phương thức có ba kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ được đặt trên một
Launch static backdrop modal
Modal title
...
Close
Understood
SizeClassModal max-widthNhỏ
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Phương thức mặc định của chúng tôi không có lớp sửa đổi cấu thành phương thức kích thước “trung bình”
Phương thức cực lớn Phương thức lớn Phương thức nhỏ
Modal title
Modal body text goes here.
Close
Save changes
Chế độ toàn màn hình
Một ghi đè khác là tùy chọn bật lên một phương thức bao phủ chế độ xem của người dùng, có sẵn thông qua các lớp bổ trợ được đặt trên một
Launch static backdrop modal
Modal title
...
Close
Understood
Lớp học có sẵn
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Full màn hình Full màn hình dưới sm Full màn hình dưới md Full màn hình dưới lg Full màn hình dưới xl Full màn hình dưới xxl
Modal title
Modal body text goes here.
Close
Save changes
CSS
Biến
Đã thêm vào v5. 2. 0Là một phần trong cách tiếp cận các biến CSS đang phát triển của Bootstrap, các phương thức hiện sử dụng các biến CSS cục bộ trên
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
biến sass
Modal title
Modal body text goes here.
Close
Save changes
Vòng
Chế độ toàn màn hình đáp ứng được tạo thông qua bản đồ ________ 227 và một vòng lặp trong ________ 228
Modal title
Modal body text goes here.
Close
Save changes
Cách sử dụng
Plugin phương thức chuyển đổi nội dung ẩn của bạn theo yêu cầu, thông qua thuộc tính dữ liệu hoặc JavaScript. Nó cũng ghi đè hành vi cuộn mặc định và tạo
Launch demo modal
Modal title
...
Close
Save changes
Thông qua thuộc tính dữ liệu
chuyển đổi
Kích hoạt một phương thức mà không cần viết JavaScript. Đặt
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Miễn nhiệm
Có thể loại bỏ bằng thuộc tính
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
hoặc trên một nút bên ngoài phương thức sử dụng
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Qua JavaScript
Tạo một phương thức với một dòng JavaScript
Launch demo modal
Modal title
...
Close
Save changes
Tùy chọn
Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Kể từ Bootstrap 5. 2. 0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệm
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
NameTypeDefaultDescription_______276boolean,
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
phương pháp
Các phương thức và chuyển tiếp không đồng bộ
Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin
tùy chọn vượt qua
Kích hoạt nội dung của bạn dưới dạng phương thức. Chấp nhận một tùy chọn tùy chọn
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
MethodDescription
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Sự kiện
Lớp phương thức của Bootstrap hiển thị một số sự kiện để nối vào chức năng phương thức. Tất cả các sự kiện phương thức được kích hoạt tại chính phương thức đó [i. e. tại
]
EventDescription
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes
Modal title
Modal body text goes here.
Close
Save changes
Launch demo modal
Modal title
...
Close
Save changes