Hiển thị JavaScript
Các plugin có thể được bao gồm riêng lẻ (sử dụng các tệp 1 riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng 2 hoặc 3 được rút gọn) Show
Sử dụng JavaScript đã biên dịchCả 2 và 3 đều chứa tất cả các plugin trong một tệp duy nhất. Chỉ bao gồm mộtPhụ thuộc pluginMột số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu. Cũng lưu ý rằng tất cả các plugin đều phụ thuộc vào jQuery (điều này có nghĩa là jQuery phải được đưa vào trước các tệp plugin). Tham khảo 6 của chúng tôi để xem phiên bản jQuery nào được hỗ trợThuộc tính dữ liệuBạn có thể sử dụng tất cả các plugin Bootstrap hoàn toàn thông qua API đánh dấu mà không cần viết một dòng JavaScript nào. Đây là API hạng nhất của Bootstrap và bạn nên cân nhắc đầu tiên khi sử dụng plugin Điều đó nói rằng, trong một số trường hợp, có thể tắt chức năng này. Do đó, chúng tôi cũng cung cấp khả năng vô hiệu hóa API thuộc tính dữ liệu bằng cách hủy liên kết tất cả các sự kiện trên tài liệu được đặt tên bằng 7. Cái này trông như thế này
Ngoài ra, để nhắm mục tiêu một plugin cụ thể, chỉ cần bao gồm tên của plugin dưới dạng không gian tên cùng với không gian tên data-api như thế này ________số 8Chỉ một plugin cho mỗi thành phần thông qua thuộc tính dữ liệuKhông sử dụng thuộc tính dữ liệu từ nhiều plugin trên cùng một phần tử. Ví dụ: một nút không thể vừa có chú giải công cụ vừa chuyển đổi chế độ. Để thực hiện điều này, hãy sử dụng một phần tử gói API có lập trìnhChúng tôi cũng tin rằng bạn sẽ có thể sử dụng tất cả các plugin Bootstrap hoàn toàn thông qua API JavaScript. Tất cả các API công khai đều là các phương thức đơn lẻ, có thể xâu chuỗi và trả về bộ sưu tập được thực hiện theo
Tất cả các phương thức phải chấp nhận một đối tượng tùy chọn tùy chọn, một chuỗi nhắm mục tiêu một phương thức cụ thể hoặc không có gì (khởi tạo plugin có hành vi mặc định) 0Mỗi plugin cũng hiển thị hàm tạo thô của nó trên thuộc tính 8. 9. Nếu bạn muốn lấy một phiên bản plugin cụ thể, hãy truy xuất nó trực tiếp từ một phần tử. 30Thiết lập mặc địnhBạn có thể thay đổi cài đặt mặc định cho plugin bằng cách sửa đổi đối tượng 31 của plugin 5Không có xung độtĐôi khi cần sử dụng plugin Bootstrap với các khung giao diện người dùng khác. Trong những trường hợp này, xung đột không gian tên đôi khi có thể xảy ra. Nếu điều này xảy ra, bạn có thể gọi 32 trên plugin mà bạn muốn hoàn nguyên giá trị của 7Sự kiệnBootstrap cung cấp các sự kiện tùy chỉnh cho hầu hết các hành động độc đáo của plugin. Nói chung, chúng xuất hiện ở dạng nguyên mẫu và quá khứ phân từ - trong đó nguyên mẫu (ví dụ:. 33) được kích hoạt khi bắt đầu một sự kiện và dạng quá khứ phân từ của nó (ví dụ:. 34) được kích hoạt khi hoàn thành một hành độngkể từ 3. 0. 0, tất cả các sự kiện Bootstrap đều được đặt tên Tất cả các sự kiện nguyên mẫu cung cấp chức năng 35. Điều này cung cấp khả năng dừng thực hiện một hành động trước khi nó bắt đầu 1số phiên bảnCó thể truy cập phiên bản của từng plugin jQuery của Bootstrap thông qua thuộc tính 36 của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ 3Không có dự phòng đặc biệt khi JavaScript bị tắtCác plugin của Bootstrap không quay trở lại một cách đặc biệt khi JavaScript bị tắt. Nếu bạn quan tâm đến trải nghiệm người dùng trong trường hợp này, hãy sử dụng 37 để giải thích tình huống (và cách bật lại JavaScript) cho người dùng của bạn và/hoặc thêm các dự phòng tùy chỉnh của riêng bạnThư viện của bên thứ baBootstrap không chính thức hỗ trợ các thư viện JavaScript của bên thứ ba như Prototype hoặc jQuery UI. Mặc dù có 32 và các sự kiện được đặt tên, có thể có các sự cố tương thích mà bạn cần tự khắc phụcGiới thiệu về quá trình chuyển đổiĐối với các hiệu ứng chuyển tiếp đơn giản, hãy bao gồm 39 một lần cùng với các tệp JS khác. Nếu bạn đang sử dụng 2 đã được biên dịch (hoặc được rút gọn), thì không cần thêm phần này—nó đã có sẵn rồiCó gì bên trongchuyển tiếp. js là trình trợ giúp cơ bản cho các sự kiện 01 cũng như trình mô phỏng chuyển tiếp CSS. Nó được các plugin khác sử dụng để kiểm tra hỗ trợ chuyển tiếp CSS và để bắt các chuyển đổi bị treoVô hiệu hóa quá trình chuyển đổiChuyển đổi có thể bị vô hiệu hóa trên toàn cầu bằng cách sử dụng đoạn mã JavaScript sau, đoạn mã này phải xuất hiện sau khi tải xong 39 (hoặc 2 hoặc 3, tùy từng trường hợp)
Các phương thức được sắp xếp hợp lý, nhưng linh hoạt, lời nhắc hộp thoại với chức năng cần thiết tối thiểu và mặc định thông minh Nhiều phương thức mở không được hỗ trợĐảm bảo không mở một phương thức trong khi một phương thức khác vẫn hiển thị. Hiển thị nhiều phương thức cùng một lúc yêu cầu mã tùy chỉnh Vị trí đánh dấu phương thứcLuôn cố gắng đặt mã HTML của phương thức ở vị trí cấp cao nhất trong tài liệu của bạn để tránh các thành phần khác ảnh hưởng đến giao diện và/hoặc chức năng của phương thức Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML 05 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ỉnh 3ví dụví dụ tĩnhPhương thức được hiển thị có tiêu đề, nội dung và tập hợp các hành động ở chân trang 0Bản thử trực tiếpChuyển đổi phương thức qua JavaScript 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 Văn bản trong một phương thứcDuis mollis, est non commodo luctus, nisi erat porttitor ligula Popover trong một phương thứcNút này sẽ kích hoạt cửa sổ bật lên khi nhấp chuột Chú giải công cụ trong một phương thứcLiên kết này và liên kết đó phải có chú giải công cụ khi di chuột Tràn văn bản để hiển thị hành vi cuộnCras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla 1Làm cho các phương thức có thể truy cập đượcĐảm bảo thêm 06 và 07, tham chiếu tiêu đề phương thức, vào 08 và 09 vào chính 10Ngoài ra, bạn có thể đưa ra mô tả về hộp thoại phương thức của mình với 11 trên 08Nhúng video YouTubeNhú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ọnCác phương thức có hai kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ được đặt trên 10 2Xó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 14 khỏi đánh dấu phương thức của bạn 3Sử dụng hệ thống lướiĐể tận dụng lợi thế của hệ thống lưới Bootstrap trong một phương thức, chỉ cần lồng các 15 vào trong 16 và sau đó sử dụng các lớp hệ thống lưới thông thườngcol-md-4. col-md-offset-4 col-md-3. col-md-offset-3 col-md-2. col-md-offset-4 col-md-6. col-md-offset-3 Cấp độ 1. . col-sm-9 Cấp độ 2. . col-xs-8. col-sm-6 Cấp độ 2. . col-xs-4. col-sm-6 4Có một loạt các nút kích hoạt cùng một phương thức, chỉ với nội dung hơi khác nhau? . Xem tài liệu Sự kiện phương thức để biết chi tiết về 19,Mở phương thức cho @mdo Mở phương thức cho @fat Mở phương thức cho @getbootstrap. nhiều nút hơn 5 6Cách sử dụngPlugin 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 thêm 20 vào 37 để ghi đè hành vi cuộn mặc định và tạo 22 để cung cấp khu vực nhấp chuột để loại bỏ các phương thức được hiển thị khi nhấp vào bên ngoài phương thứcThông qua thuộc tính dữ liệuKích hoạt một phương thức mà không cần viết JavaScript. Đặt 23 trên thành phần bộ điều khiển, chẳng hạn như nút, cùng với 24 hoặc 25 để nhắm mục tiêu một phương thức cụ thể để chuyển đổi 7Qua JavaScriptGọi một phương thức có id 26 bằng một dòng JavaScript 8Tùy chọnCác tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào 27, như trong 28Nametypedefaultdescriptionbackdropboolean hoặc chuỗi 29trueBao gồm phần tử phông nền phương thức. Ngoài ra, hãy chỉ định 30 cho phông nền không đóng chế độ khi nhấp. keyboardbooleantrueĐóng phương thức khi nhấn phím thoátshowbooleantrueHiển thị phương thức khi được khởi tạo. điều khiển từ xaTùy chọn này không được dùng nữa kể từ v3. 3. 0 và đã bị xóa trong v4. Thay vào đó, chúng tôi khuyên bạn nên sử dụng khuôn mẫu phía máy khách hoặc khung liên kết dữ liệu hoặc gọi jQuery. tải cho mình Nếu một URL từ xa được cung cấp, nội dung sẽ được tải một lần thông qua phương thức 31 của jQuery và được đưa vào div 32. Nếu bạn đang sử dụng data-api, bạn có thể sử dụng thuộc tính 33 để chỉ định nguồn từ xa. Một ví dụ về điều này được hiển thị dưới đây 9phương pháp
$(document).off('.alert.data-api') |