Giới thiệu về phương thức

Một plugin được sắp xếp hợp lý, nhưng linh hoạt, sử dụng plugin phương thức javascript truyền thống chỉ 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

Dưới đây là một phương thức được kết xuất tĩnh.

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.

Sử dụng bootstrap-modal

Gọi phương thức qua javascript:

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

Tùy chọn

Đánh dấu

Bạn có thể kích hoạt các chế độ trên trang của mình một cách dễ dàng mà không cần phải viết một dòng javascript. Chỉ cần đặt data-toggle="modal"trên phần tử bộ điều khiển với một data-target="#foo"hoặc href="#foo"tương ứng với id phần tử phương thức và khi được nhấp vào, nó sẽ khởi chạy phương thức của bạn.

Ngoài ra, để thêm các tùy chọn vào phiên bản phương thức của bạn, chỉ cần bao gồm chúng dưới dạng các thuộc tính dữ liệu bổ sung trên phần tử điều khiển hoặc chính đánh dấu phương thức.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Khởi chạy phương thức </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-allow = "modal" > × </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" data-dismiss = "modal"> Đóng </a> _   
    <a href = "#" class = "btn btn-primary"> Lưu thay đổi </a>  
  </div>
</div>

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ì đó…
})

Giới thiệu về danh sách thả xuống

Thêm menu thả xuống cho hầu hết mọi thứ trong Bootstrap bằng plugin đơn giản này. Bootstrap có hỗ trợ menu thả xuống đầy đủ trên thanh điều hướng, tab và viên thuốc.

Các ví dụ

Nhấp vào liên kết điều hướng thả xuống trong thanh điều hướng và viên thuốc bên dưới để kiểm tra danh sách thả xuống.

• Liên kết thông thường
• Trình đơn thả xuống
  • Action
  • Another action
  • Something else here
  • Separated link
• Trình đơn thả xuống 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Thả xuống 3
  • Action
  • Another action
  • Something else here
  • Separated link

Sử dụng bootstrap-dropdown.js

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

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

Đánh dấu

Để nhanh chóng thêm chức năng thả xuống cho bất kỳ phần tử nào, chỉ cần thêm data-toggle="dropdown"và bất kỳ trình đơn thả xuống bootstrap hợp lệ nào sẽ tự động được kích hoạt.

<ul class = "nav nav-Drugs" > 
  <li class = "active" > <a href = "#"> Liên kết thông thường </a> </li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Trình đơn thả xuống
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li> <a href = "#"> Hành động </a> </li> 
      <li> <a href = "#"> Một hành động khác </a> </li> 
      <li> <a href = "#"> Nội dung khác ở đây </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> Liên kết được phân tách </a> </li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-Drugs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Trình đơn thả xuống
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Phương pháp

$ (). thả xuống ()

Một api được lập trình để kích hoạt menu cho điều hướng theo thanh điều hướng hoặc tab nhất định.

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.

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

Cuộn khu vực bên dưới và xem cập nhật điều hướng. Các mục phụ thả xuống cũng sẽ được đánh dấu. Thử nó!

Sử dụng bootstrap-scrollspy.js

Gọi scrollspy qua javascript:

$ ( '#navbar' ). scrollspy ()

Đánh dấ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 đây sẽ là phần thân).

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

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

Sự kiện

Plugin này bổ sung chức năng tab động và nhanh chóng để chuyển đổi qua nội dung cục bộ.

Các tab mẫu

Nhấp vào các tab bên dưới để chuyển đổi giữa các ngăn ẩn, thậm chí qua menu thả xuống.

• Nhà
• Hồ sơ
• Trình đơn thả xuống
  • @fat
  • @mdo

Sử dụng bootstrap-tab.js

Bật các tab có thể 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 = "# hồ sơ"]' ). 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 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 ( 'shows' , function ( e ) {   
  e . mục tiêu // tab đã kích hoạt
  e . RelatedTarget // tab trước
})

Giới thiệu về Chú giải công cụ

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í dụ sử dụng Chú giải công cụ

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

Sử dụng bootstrap-tooltip.js

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

Đá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.

<a href = "#" rel = "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' )

Giới thiệu về cửa sổ bật lên

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à ở.

* Yêu cầu kèm theo Chú giải công cụ

Ví dụ về cửa sổ bật lên khi di chuột

Di chuột qua nút để kích hoạt cửa sổ bật lên.

Sử dụng bootstrap-popover.js

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

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

Tùy chọn

Đá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' )

Giới thiệu về cảnh báo

Plugin cảnh báo là một lớp nhỏ để thêm chức năng đóng vào cảnh báo.

Cảnh báo mẫu

Plugin cảnh báo hoạt động trên các thông báo cảnh báo thông thường và chặn các thông báo.

Sử dụng bootstrap-alert.js

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ề

Làm được nhiều việc hơn với các nút. 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ụ.

Ví dụ sử dụng

Sử dụng plugin nút cho các trạng thái và chuyển đổi.

Sử dụng bootstrap-button.js

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.

<! - Thêm data-toggle = "button" để kích hoạt bật tắt trên một nút duy nhất ->
<button class = "btn" data-toggle = "button" > Chuyển đổi một lần </button>  
 
<! - Thêm data-toggle = "button-checkbox" để chuyển đổi kiểu hộp kiểm trên btn-group ->
<div class = "btn-group" data-toggle = "button-checkbox" >  
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Right </button> 
</div>
 
<! - Thêm data-toggle = "button-radio" để chuyển đổi kiểu radio trên btn-group ->
<div class = "btn-group" data-toggle = "button-radio" >  
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Right </button> 
</div>

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 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 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 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:

Sử dụng bootstrap-sụp đổ.js

Bật qua javascript:

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

Tùy chọn

Đánh dấ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 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.

<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>  

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 : false 
})

.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ì đó…
})

Về

Một plugin chung để đi vòng qua các phần tử. Một vòng đùa vui vẻ.

Băng chuyền mẫu

Xem trình chiếu bên dưới.

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.

‹ ›

Sử dụng bootstrap-carousel.js

Gọi qua javascript:

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

Tùy chọn

Đánh dấu

Thuộc tính dữ liệu được sử dụng cho cuộc trò chuyện trước đó và tiếp theo. Kiểm tra đánh dấu ví dụ bên dưới.

<div id = "myCarousel" class = "carousel slide" >  
  <! - 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>

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 đi qua các mặt hàng.

.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.

Về

Một plugin cơ bản, dễ dàng mở rộng để nhanh chóng tạo ra 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.

Thí dụ

Bắt đầu nhập vào trường bên dưới để hiển thị kết quả về lỗi chính tả.

Sử dụng bootstrap-typeahead.js

Gọi cho typeahead qua javascript:

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

Tùy chọn

Đánh dấ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.

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

Phương pháp

.typeahead (tùy chọn)

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