Cá nhân hoặc tổng hợp

Các plugin có thể được bao gồm riêng lẻ (mặc dù một số có phụ thuộc bắt buộc) hoặc tất cả cùng một lúc. Cả bootstrap.js và bootstrap.min.js đều chứa tất cả các plugin trong một tệp duy nhất.

Thuộc tính dữ liệu

Bạ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 lớp đầu tiên của Bootstrap và bạn nên cân nhắc đầu tiên khi sử dụng một plugin.

Điều đó nói rằng, trong một số trường hợp, bạn có thể muốn 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 phần thân có tên miền bằng `` data-api ''. Nó trông như thế này:

$ ( 'body' ). tắt ( '.data-api' )

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 làm không gian tên cùng với không gian tên data-api như sau:

$ ( 'body' ). tắt ( '.alert.data-api' )

API có lập trình

Chúng tôi cũng tin rằng bạn 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ể điều khiển được và trả về bộ sưu tập đã hoạt động.

$ ( ".btn.danger" ). nút ( "chuyển đổi" ). addClass ( "chất béo" )

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 chạy một plugin với hành vi mặc định):

$ ( "#myModal" ). modal () // được khởi tạo với giá trị mặc định                       
$ ( "#myModal" ). modal ({ keyboard : false }) // được khởi tạo không có bàn phím     
$ ( "#myModal" ). modal ( 'show' ) // khởi tạo và gọi chương trình ngay lập tức                

Mỗi plugin cũng hiển thị hàm tạo thô của nó trên thuộc tính `Constructor` $.fn.popover.Constructor:. Nếu bạn muốn nhận 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ử $('[rel=popover]').data('popover'):.

Không có xung đột

Đôi khi cần sử dụng các 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, đôi khi có thể xảy ra xung đột không gian tên. Nếu điều này xảy ra, bạn có thể gọi .noConflictplugin mà bạn muốn hoàn nguyên giá trị.

var bootstrapButton = $ . fn . nút . noConflict () // trả về $ .fn.button về giá trị được gán trước đó 
$ . fn . bootstrapBtn = bootstrapButton             // cung cấp cho $ (). bootstrapBtn chức năng bootstrap

Sự kiện

Bootstrap 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 có dạng phân từ nguyên thể và quá khứ - trong đó nguyên thể (ví dụ show) được kích hoạt khi bắt đầu một sự kiện và dạng phân từ trong quá khứ của nó (ví dụ shown) được kích hoạt khi hoàn thành một hành động.

Tất cả các sự kiện nguyên bản đều cung cấp chức năng PreventDefault. Đ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.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! data ) trả về e . PreventDefault () // dừng phương thức được hiển thị   
})

Giớ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 bootstrap-transfer.js một lần cùng với các tệp JS khác. Nếu bạn đang sử dụng bootstrap.js đã biên dịch (hoặc được rút gọn) , thì không cần phải bao gồm cái này — nó đã ở đó.

Trường hợp sử dụng

Một vài ví dụ về plugin chuyển đổi:

• Trượt hoặc mờ dần trong các chế độ
• Làm mờ các tab
• Làm mờ dần các cảnh báo
• Bảng băng chuyền trượt

Các ví dụ

Các chế độ đượ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 bắt buộc tối thiểu và các giá trị mặc định thông minh.

Ví dụ tĩnh

Một phương thức được hiển thị với tiêu đề, nội dung và tập hợp các hành động trong chân trang.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dict = "modal" aria-hidden = "true" > & times; </button>    
    <h3> Tiêu đề phương thức </h3>
  </div>
  <div class = "modal-body" > 
    <p> Một cơ thể đẹp… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Đóng </a> _  
    <a href = "#" class = "btn btn-primary"> Lưu thay đổi </a>  
  </div>
</div>

Bản thử trực tiếp

Chuyển đổi một 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.

<! - Nút để kích hoạt phương thức ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Khởi chạy phương thức demo </a>    
 
<! - Phương thức ->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "hộp thoại" aria-labellingby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dict = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Tiêu đề phương thức </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Một cơ thể đẹp… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dict = "modal" aria-hidden = "true" > Đóng </button>   
    <button class = "btn btn-primary" > Lưu thay đổi </button> 
  </div>
</div>

Cách sử dụng

Qua các thuộc tính dữ liệu

Kích hoạt một phương thức mà không cần viết JavaScript. Đặt data-toggle="modal"trên một phần tử bộ điều khiển, như một nút, cùng với data-target="#foo"hoặc href="#foo"để nhắm mục tiêu một phương thức cụ thể để chuyển đổi.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Khởi chạy modal </button>   

Qua JavaScript

Gọi một phương thức có id myModalvới một dòng JavaScript:

$ ( '#myModal' ). phương thức ( tùy chọn )

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Phương pháp

.modal (tùy chọn)

Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một tùy chọn tùy chọn object.

$ ( '#myModal' ). phương thức ({
  bàn phím : false 
})

.modal ('chuyển đổi')

Chuyển đổi một phương thức theo cách thủ công.

$ ( '#myModal' ). modal ( 'chuyển đổi' )

.modal ('hiển thị')

Mở một phương thức theo cách thủ công.

$ ( '#myModal' ). modal ( 'show' )

.modal ('ẩn')

Ẩn một phương thức theo cách thủ công.

$ ( '#myModal' ). modal ( 'ẩn' )

Sự kiện

Lớp phương thức của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng phương thức.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // làm việc gì đó…
})

Các ví dụ

Thêm menu thả xuống vào hầu hết mọi thứ với plugin đơn giản này, bao gồm thanh điều hướng, tab và viên thuốc.

Trong một thanh điều hướng

Trong các tab

Cách sử dụng

Qua các thuộc tính dữ liệu

Thêm data-toggle="dropdown"vào liên kết hoặc nút để chuyển đổi menu thả xuống.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Trình kích hoạt thả xuống </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labellingby = "dLabel" >   
    ...
  </ul>
</div>

Để giữ nguyên các URL, hãy sử dụng data-targetthuộc tính thay vì href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    Trình đơn thả xuống
    <b class = "caret" > </b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labellingby = "dLabel" >   
    ...
  </ul>
</div>

Qua JavaScript

Gọi các trình đơn thả xuống qua JavaScript:

$ ( '.dropdown-toggle' ). dropdown ()

Tùy chọn

Không có

Phương pháp

$ (). thả xuống ('chuyển đổi')

Một api có lập trình để chuyển đổi menu cho một điều hướng theo thanh hoặc tab nhất định.

Ví dụ trong thanh điều hướng

Plugin ScrollSpy dùng để tự động cập nhật các mục tiêu điều hướng dựa trên vị trí cuộn. Cuộn khu vực bên dưới thanh điều hướng và xem thay đổi lớp đang hoạt động. Các mục phụ thả xuống cũng sẽ được đánh dấu.

Cách sử dụng

Qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi cuộn lên vào điều hướng thanh trên cùng của bạn, chỉ cần thêm data-spy="scroll"vào phần tử bạn muốn theo dõi (thông thường nhất là phần thân) và data-target=".navbar"chọn điều hướng sẽ sử dụng. Bạn sẽ muốn sử dụng scrollspy với một .navthành phần.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Qua JavaScript

Gọi scrollspy qua JavaScript:

$ ( '#navbar' ). scrollspy ()

Phương pháp

.scrollspy ('làm mới')

Khi sử dụng scrollspy kết hợp với việc thêm hoặc xóa các phần tử khỏi DOM, bạn sẽ cần gọi phương thức làm mới như sau:

$ ( '[data-spy = "scroll"]' ). each ( function () {  
  var $ spy = $ ( this ). scrollspy ( 'làm mới' )
});

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-offset="".

Sự kiện

Các tab mẫu

Thêm chức năng tab động, nhanh chóng để chuyển đổi qua các ngăn nội dung cục bộ, ngay cả qua menu thả xuống.

Cách sử dụng

Bật các tab có thể chuyển thành tab qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):

$ ( '#myTab a' ). nhấp vào ( hàm ( e ) {  
  e . PreventDefault ();
  $ ( cái này ). tab ( 'show' );
})

Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:

$ ( '#myTab a [href = "# profile"]' ). tab ( 'show' ); // Chọn tab theo tên 
$ ( '#myTab a: first' ). tab ( 'show' ); // Chọn tab đầu tiên 
$ ( '#myTab a: last' ). tab ( 'show' ); // Chọn tab cuối cùng 
$ ( '#myTab li: eq (2) a' ). tab ( 'show' ); // Chọn tab thứ ba (được lập chỉ mục 0) 

Đánh dấu

Bạn có thể kích hoạt điều hướng tab hoặc viên thuốc mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-toggle="tab"hoặc data-toggle="pill"trên một phần tử. Thêm navvà nav-tabscác lớp vào tab ulsẽ áp dụng kiểu dáng tab Bootstrap.

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> Trang chủ </a> </li >  
  <li> <a href = "#profile" data-toggle = "tab"> Hồ sơ </a> </li >  
  <li> <a href = "#messages" data-toggle = "tab"> Tin nhắn </a> </li >  
  <li> <a href = "#settings" data-toggle = "tab"> Cài đặt </a> </li >  
</ul>

Phương pháp

tab $ ().

Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có một data-targethoặc một hrefnhắm mục tiêu một nút vùng chứa trong DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href = "#home"> Trang chủ </a> </li>  
  <li> <a href = "#profile"> Hồ sơ </a> </li> 
  <li> <a href = "#messages"> Tin nhắn </a> </li> 
  <li> <a href = "#settings"> Cài đặt </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a: last' ). tab ( 'show' );
  })
</script>

Sự kiện

$ ( 'a [data-toggle = "tab"]' ). on ( 'display' , function ( e ) {   
  e . mục tiêu // tab đã kích hoạt
  e . RelatedTarget // tab trước
})

Các ví dụ

Lấy cảm hứng từ plugin jQuery.tipsy tuyệt vời được viết bởi Jason Frame; Chú giải công cụ là phiên bản cập nhật, không dựa vào hình ảnh, sử dụng CSS3 cho hoạt ảnh và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ.

Vì lý do hiệu suất, chú giải công cụ và apis dữ liệu cửa sổ bật lên được chọn tham gia, nghĩa là bạn phải tự khởi chạy chúng .

Di chuột qua các liên kết bên dưới để xem các chú giải công cụ:

Bốn hướng

Chú giải công cụ trong nhóm đầu vào

Khi sử dụng chú giải công cụ và cửa sổ bật lên với các nhóm đầu vào Bootstrap, bạn sẽ phải đặt containertùy chọn (được nêu dưới đây) để tránh các tác dụng phụ không mong muốn.

Cách sử dụng

Kích hoạt chú giải công cụ qua JavaScript:

$ ( '#example' ). chú giải công cụ ( tùy chọn )

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-animation="".

Đánh dấu

<a href = "#" data-toggle = "tooltip" title = "first tooltip"> di chuột qua tôi </a>   

Phương pháp

$ (). chú giải công cụ (tùy chọn)

Đính kèm trình xử lý chú giải công cụ vào tập hợp phần tử.

.tooltip ('hiển thị')

Tiết lộ chú giải công cụ của phần tử.

$ ( '#element' ). chú giải công cụ ( 'hiển thị' )

.tooltip ('ẩn')

Ẩn chú giải công cụ của phần tử.

$ ( '#element' ). chú giải công cụ ( 'ẩn' )

.tooltip ('chuyển đổi')

Chuyển đổi chú giải công cụ của phần tử.

$ ( '#element' ). chú giải công cụ ( 'chuyển đổi' )

.tooltip ('tiêu diệt')

Ẩn và hủy chú giải công cụ của phần tử.

$ ( '#element' ). chú giải công cụ ( 'tiêu diệt' )

Các ví dụ

Thêm các lớp phủ nhỏ của nội dung, như trên iPad, vào bất kỳ phần tử nào để có thông tin phụ về nhà ở. Di chuột qua nút để kích hoạt cửa sổ bật lên. Yêu cầu chú giải công cụ được bao gồm.

Cửa sổ bật lên tĩnh

Bốn tùy chọn có sẵn: trên cùng, bên phải, bên dưới và căn trái.

Không có đánh dấu nào được hiển thị là các cửa sổ bật lên được tạo từ JavaScript và nội dung trong một datathuộc tính.

Bản thử trực tiếp

Bốn hướng

Cách sử dụng

Bật cửa sổ bật lên qua JavaScript:

$ ( '#example' ). popover ( tùy chọn )

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-animation="".

Đánh dấu

Vì lý do hiệu suất, Tooltip và Popover data-apis được chọn tham gia. Nếu bạn muốn sử dụng chúng, chỉ cần chỉ định một tùy chọn bộ chọn.

Phương pháp

$ (). popover (tùy chọn)

Khởi tạo các cửa sổ bật lên cho một tập hợp phần tử.

.popover ('show')

Tiết lộ một phần tử bật lên.

$ ( '#element' ). popover ( 'show' )

.popover ('ẩn')

Ẩn một phần tử bật lên.

$ ( '#element' ). popover ( 'ẩn' )

.popover ('chuyển đổi')

Chuyển đổi cửa sổ bật lên phần tử.

$ ( '#element' ). popover ( 'chuyển đổi' )

.popover ('tiêu diệt')

Ẩn và phá hủy cửa sổ bật lên của một phần tử.

$ ( '#element' ). popover ( 'tiêu diệt' )

Cảnh báo mẫu

Thêm chức năng loại bỏ cho tất cả các thông báo cảnh báo với plugin này.

Cách sử dụng

Cho phép loại bỏ cảnh báo qua JavaScript:

$ ( ".alert" ). alert ()

Đánh dấu

Chỉ cần thêm data-dismiss="alert"vào nút đóng của bạn để tự động cung cấp chức năng đóng cảnh báo.

<a class = "close" data-dismiss = "alert" href = "#"> & lần ; </a>   

Phương pháp

$ (). alert ()

Kết hợp tất cả các cảnh báo với chức năng đóng. Để cảnh báo của bạn hiển thị hoạt ảnh khi đóng cửa, hãy đảm bảo rằng chúng đã áp dụng loại .fadevà .inlớp cho chúng.

.alert ('đóng')

Đóng một cảnh báo.

$ ( ".alert" ). alert ( 'đóng' )

Sự kiện

Lớp cảnh báo của Bootstrap cho thấy một vài sự kiện để kết nối với chức năng cảnh báo.

$ ( '# my-alert' ). bind ( 'đóng' , function () {   
  // làm việc gì đó…
})

Ví dụ sử dụng

Làm được nhiều việc hơn với các nút. Các trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ.

Trạng thái

Thêm data-loading-text="Loading..."để sử dụng trạng thái tải trên một nút.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading ..." > Trạng thái đang tải </button>   

Chuyển đổi đơn

Thêm data-toggle="button"để kích hoạt bật tắt trên một nút duy nhất.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Chuyển đổi một lần </button>   

Hộp kiểm

Thêm data-toggle="buttons-checkbox"cho chuyển đổi kiểu hộp kiểm trên btn-group.

<div class = "btn-group" data-toggle = "button-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Đài

Thêm data-toggle="buttons-radio"cho chuyển đổi kiểu radio trên btn-group.

<div class = "btn-group" data-toggle = "button-radio" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Cách sử dụng

Bật các nút qua JavaScript:

$ ( '.nav-tabs' ). nút ()

Đánh dấu

Thuộc tính dữ liệu là không thể thiếu đối với plugin nút. Kiểm tra mã ví dụ bên dưới để biết các loại đánh dấu khác nhau.

Tùy chọn

Không có

Phương pháp

Nút $ (). ('chuyển đổi')

Chuyển đổi trạng thái đẩy. Cung cấp cho nút giao diện như nó đã được kích hoạt.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

Nút $ (). ('đang tải')

Đặt trạng thái nút thành tải - tắt nút và hoán đổi văn bản thành tải văn bản. Việc tải văn bản phải được xác định trên phần tử nút bằng cách sử dụng thuộc tính dữ liệu data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading thing ..." > ... </button>    

Nút $ (). ('đặt lại')

Đặt lại trạng thái nút - hoán đổi văn bản thành văn bản gốc.

Nút $ (). (chuỗi)

Đặt lại trạng thái nút - hoán đổi văn bản thành bất kỳ trạng thái văn bản nào do dữ liệu xác định.

<button type = "button" class = "btn" data-complete-text = "xong!" > ... </button>    
<script>
  $ ( '.btn' ). nút ( 'hoàn thành' )
</script>

Về

Nhận các kiểu cơ sở và hỗ trợ linh hoạt cho các thành phần có thể thu gọn như đàn accordion và điều hướng.

* Yêu cầu phải có plugin Chuyển tiếp.

Ví dụ đàn accordion

Sử dụng plugin thu gọn, chúng tôi đã xây dựng một tiện ích phong cách đàn accordion đơn giản:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-header" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Mục nhóm có thể thu gọn # 1
      </a>
    </div>
    <div id = "sậpOne" class = "đàn accordion-body thu gọn trong" >  
      <div class = "accordion-inner" > 
        Phim hoạt hình ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-header" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Mục nhóm có thể thu gọn # 2
      </a>
    </div>
    <div id = "sậpTwo" class = "đàn accordion-body sập" >  
      <div class = "accordion-inner" > 
        Phim hoạt hình ...
      </div>
    </div>
  </div>
</div>
...

Bạn cũng có thể sử dụng plugin mà không cần đánh dấu accordion. Thực hiện một nút để chuyển đổi việc mở rộng và thu gọn của một phần tử khác.

<button type = "button" class = "btn btn-risk" data-toggle = "sập" data-target = "#demo" >    
  đóng mở đơn giản
</button>
 
<div id = "demo" class = "thu gọn trong" > … </div>  

Cách sử dụng

Qua các thuộc tính dữ liệu

Chỉ cần thêm data-toggle="collapse"và một data-targetphần tử vào để tự động gán quyền kiểm soát phần tử có thể thu gọn. Thuộc data-targettính chấp nhận một bộ chọn css để áp dụng thu gọn. Đảm bảo thêm lớp collapsevào phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy thêm lớp bổ sung in.

Để thêm quản lý nhóm giống như đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent="#selector". Tham khảo bản demo để thấy điều này trong hoạt động.

Qua JavaScript

Bật theo cách thủ công với:

$ ( ".collapse" ). sụp đổ ()

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-parent="".

Phương pháp

.collapse (tùy chọn)

Kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn. Chấp nhận một tùy chọn tùy chọn object.

$ ( '#myCollapsible' ). sụp đổ ({
  chuyển đổi : sai 
})

.collapse ('chuyển đổi')

Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn.

.collapse ('hiển thị')

Hiển thị một phần tử có thể thu gọn.

.collapse ('ẩn')

Ẩn một phần tử có thể thu gọn.

Sự kiện

Lớp thu gọn của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng thu gọn.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // làm việc gì đó…
})

Băng chuyền mẫu

Trình chiếu bên dưới hiển thị một plugin và thành phần chung để xoay vòng qua các phần tử như băng chuyền.

Nhãn Hình thu nhỏ đầu tiên

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Nhãn Hình thu nhỏ thứ hai

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Nhãn Hình thu nhỏ thứ ba

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicator" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" > </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <! - Mục băng chuyền ->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - Điều hướng băng chuyền ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ; </a>   
</div>

Cách sử dụng

Qua các thuộc tính dữ liệu

Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền. data-slidechấp nhận các từ khóa prevhoặc nextthay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Ngoài ra, sử dụng data-slide-tođể chuyển một chỉ mục trang trình bày thô đến băng chuyền data-slide-to="2", chuyển vị trí trang trình bày đến một chỉ mục cụ thể bắt đầu bằng 0.

Qua JavaScript

Gọi băng chuyền theo cách thủ công với:

$ ( '.carousel' ). băng chuyền ()

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScriptz. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-interval="".

Phương pháp

.carousel (tùy chọn)

Khởi tạo băng chuyền với một tùy chọn tùy chọn objectvà bắt đầu quay vòng qua các mục.

$ ( '.carousel' ). băng chuyền ({
  khoảng thời gian : 2000 
})

.carousel ('chu kỳ')

Xoay qua các mục trong băng chuyền từ trái sang phải.

.carousel ('tạm dừng')

Ngăn băng chuyền di chuyển qua các mục.

.carousel (số)

Xoay băng chuyền thành một khung cụ thể (dựa trên 0, tương tự như một mảng).

.carousel ('trước')

Chuyển sang mục trước đó.

.carousel ('tiếp theo')

Chuyển sang mục tiếp theo.

Sự kiện

Lớp băng chuyền của Bootstrap cho thấy hai sự kiện để kết nối vào chức năng băng chuyền.

Thí dụ

Một plugin cơ bản, dễ dàng mở rộng để nhanh chóng tạo các kiểu chữ trang nhã với bất kỳ kiểu nhập văn bản biểu mẫu nào.

<input type = "text" data-cung = "typeahead" >  

Bạn sẽ muốn đặt autocomplete="off"để ngăn các menu trình duyệt mặc định xuất hiện trên menu thả xuống của Bootstrap typeahead.

Cách sử dụng

Qua các thuộc tính dữ liệu

Thêm thuộc tính dữ liệu để đăng ký một phần tử có chức năng đánh máy như thể hiện trong ví dụ trên.

Qua JavaScript

Gọi cho người đánh máy theo cách thủ công với:

$ ( '.typeahead' ). người đánh máy ()

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-source="".

Phương pháp

.typeahead (tùy chọn)

Khởi tạo đầu vào có lỗi chính tả.

Thí dụ

Điều khoản phụ ở bên trái là bản demo trực tiếp của plugin đính kèm.

Cách sử dụng

Qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi liên kết vào bất kỳ phần tử nào, chỉ cần thêm data-spy="affix"vào phần tử bạn muốn theo dõi. Sau đó, sử dụng các hiệu số để xác định thời điểm bật và tắt ghim của một phần tử.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Qua JavaScript

Gọi plugin liên kết qua JavaScript:

$ ( '#navbar' ). đóng dấu ()

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-offset-top="200".