Tổng quan

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

Các plugin có thể được bao gồm riêng lẻ (sử dụng các tệp riêng lẻ của Bootstrap *.js) hoặc tất cả cùng một lúc (sử dụng bootstrap.jshoặc rút gọn bootstrap.min.js).

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 hạng nhất 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ố tình huống, 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 tài liệu có vị trí đặt với data-api. Nó trông như thế này:

$(document).off('.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:

$(document).off('.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').button('toggle').addClass('fat')

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()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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.ConstructorNế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'):.

Thiết lập mặc định

Bạn có thể thay đổi cài đặt mặc định cho plugin bằng cách sửa đổi Constructor.DEFAULTSđối tượng của plugin:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

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.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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.

Kể từ 3.0.0, tất cả các sự kiện Bootstrap đều có không gian tên.

Tất cả các sự kiện vô tận đều cung cấp preventDefaultchức năng. Đ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.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Chất tẩy rửa

Chú giải công cụ và Trình mở rộng sử dụng trình khử trùng tích hợp của chúng tôi để khử trùng các tùy chọn chấp nhận HTML.

Giá trị mặc định whiteListnhư sau:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Nếu bạn muốn thêm các giá trị mới vào mặc định này, whiteListbạn có thể làm như sau:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Nếu bạn muốn bỏ qua trình khử trùng của chúng tôi vì bạn thích sử dụng một thư viện chuyên dụng, chẳng hạn như DOMPurify , bạn nên làm như sau:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Số phiên bản

Phiên bản của mỗi plugin jQuery của Bootstrap có thể được truy cập thông qua thuộc VERSIONtính của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

Không có dự phòng đặc biệt khi JavaScript bị tắt

Các plugin của Bootstrap không hoạt động trở lại một cách đặc biệt duyên dáng 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 <noscript>để 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ạn.

Chuyển đổi chuyển tiếp.js

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

Có gì bên trong

Transition.js là một trình trợ giúp cơ bản cho transitionEndcác sự kiện cũng như một trình mô phỏng chuyển đổi 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ị treo.

Tắt chuyển đổi

Quá trình chuyể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 transition.js(hoặc bootstrap.jshoặc bootstrap.min.js, tùy từng trường hợp) đã tải xong:

$.support.transition = false

Modals modal.js

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.

Do cách HTML5 xác định ngữ nghĩa của nó, autofocusthuộc tính HTML 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:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Các ví dụ

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 fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Kích thước tùy chọn

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 a .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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 .fadelớp khỏi đánh dấu phương thức của bạn.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Sử 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 .rowcác s vào bên trong .modal-bodyvà sau đó sử dụng các lớp hệ thống lưới thông thường.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Thay đổi nội dung phương thức dựa trên nút kích hoạt

Có một loạt các nút đều kích hoạt cùng một phương thức, chỉ với nội dung hơi khác nhau? Sử dụng event.relatedTargetvà các thuộc tính HTMLdata-* (có thể thông qua jQuery ) để thay đổi nội dung của phương thức tùy thuộc vào nút nào được nhấp. Xem tài liệu Sự kiện phương thức để biết chi tiết về relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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 các thuộc tính dữ liệu hoặc JavaScript. Nó cũng thêm .modal-openvào <body>để ghi đè hành vi cuộn mặc định và tạo ra một .modal-backdropvùng 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ức.

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">Launch modal</button>

Qua JavaScript

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

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

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(options)

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').modal({
  keyboard: false
})

.modal('toggle')

Chuyển đổi một phương thức theo cách thủ công. Trả về cho người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn (tức là trước khi sự kiện shown.bs.modalhoặc hidden.bs.modalsự kiện xảy ra).

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

.modal('show')

Mở một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị (tức là trước khi shown.bs.modalsự kiện xảy ra).

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

.modal('hide')

Ẩn một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự bị ẩn (tức là trước khi hidden.bs.modalsự kiện xảy ra).

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

.modal('handleUpdate')

Điều chỉnh lại vị trí của phương thức để chống lại một thanh cuộn trong trường hợp một thanh cuộn xuất hiện, điều này sẽ làm cho phương thức nhảy sang trái.

Chỉ cần thiết khi chiều cao của phương thức thay đổi trong khi nó đang mở.

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

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.

Tất cả các sự kiện của phương thức được kích hoạt tại chính phương thức (tức là tại <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdown dropdown.js

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 viên thuốc

Cách sử dụng

Thông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi .openlớp trên mục danh sách mẹ.

Trên thiết bị di động, việc mở menu thả xuống sẽ thêm .dropdown-backdropvùng nhấn để đóng menu thả xuống khi nhấn bên ngoài menu, một yêu cầu để được hỗ trợ iOS thích hợp. Điều này có nghĩa là việc chuyển từ một menu thả xuống đang mở sang một menu thả xuống khác yêu cầu thêm một lần nhấn trên thiết bị di động.

Lưu ý: data-toggle="dropdown"Thuộc tính được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng nó.

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">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="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

$().dropdown('toggle')

Chuyển đổi menu thả xuống của một thanh điều hướng hoặc tab điều hướng nhất định.

Sự kiện

Tất cả các sự kiện thả xuống đều được kích hoạt tại .dropdown-menuphần tử mẹ của.

Tất cả các sự kiện thả xuống đều có một relatedTargetthuộc tính, có giá trị là phần tử neo chuyển đổi.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

Yêu cầu định vị tương đối

Bất kể phương pháp triển khai nào, scrollspy yêu cầu sử dụng position: relative;phần tử mà bạn đang theo dõi. Trong hầu hết các trường hợp, đây là <body>. Khi cuộn tìm kiếm trên các phần tử khác với phần tử <body>, hãy đảm bảo có một heighttập hợp và overflow-y: scroll;được áp dụng.

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

Để dễ dàng thêm hành vi cuộn tròn vào điều hướng thanh trên cùng của bạn, hãy thêm data-spy="scroll"vào phần tử bạn muốn theo dõi (thông thường nhất sẽ là phần tử này <body>). Sau đó, thêm data-targetthuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .navthành phần Bootstrap nào.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Qua JavaScript

Sau khi thêm position: relative;CSS của bạn, hãy gọi scrollspy qua JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Phương pháp

.scrollspy('refresh')

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('refresh')
})

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Các tab có thể chuyển đổi tab.js

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ác tab lồng nhau không được hỗ trợ.

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Đá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 sẽ áp dụng kiểu tabul Bootstrap , trong khi thêm và các lớp sẽ áp dụng kiểu viên .navnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Hiệu ứng mờ dần

Để làm cho các tab mờ dần, hãy thêm .fadevào từng tab .tab-pane. Ngăn tab đầu tiên cũng phải .inhiển thị nội dung ban đầu.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

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. Trong các ví dụ trên, các tab là các tab <a>có data-toggle="tab"thuộc tính.

.tab('show')

Chọn tab nhất định và hiển thị nội dung liên quan của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và nội dung liên quan của nó bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi shown.bs.tabsự kiện xảy ra).

$('#someTab').tab('show')

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:

1. hide.bs.tab(trên tab hoạt động hiện tại)
2. show.bs.tab(trên tab được hiển thị)
3. hidden.bs.tab(trên tab hoạt động trước đó, tab tương tự như cho hide.bs.tabsự kiện)
4. shown.bs.tab(trên tab vừa được hiển thị mới hoạt động, tab tương tự như đối với show.bs.tabsự kiện)

Nếu không có tab nào hoạt động, thì sự kiện hide.bs.tabvà hidden.bs.tabsẽ không được kích hoạt.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Chú giải công cụ tooltip.js

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

Chú giải công cụ có tiêu đề dài bằng 0 không bao giờ được hiển thị.

Các ví dụ

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

Chú giải công cụ 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.

Bốn hướng

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Cách sử dụng

Plugin chú giải công cụ tạo nội dung và đánh dấu theo yêu cầu và theo mặc định đặt chú giải công cụ sau phần tử kích hoạt của chúng.

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

$('#example').tooltip(options)

Đánh dấu

Đánh dấu bắt buộc cho chú giải công cụ chỉ là một datathuộc tính và titletrên phần tử HTML mà bạn muốn có chú giải công cụ. Đánh dấu được tạo của chú giải công cụ khá đơn giản, mặc dù nó yêu cầu một vị trí (theo mặc định, được đặt thành topbởi plugin).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

Phương pháp

$().tooltip(options)

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

.tooltip('show')

Tiết lộ chú giải công cụ của một phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị (tức là trước khi shown.bs.tooltipsự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ. Chú giải công cụ có tiêu đề dài bằng 0 không bao giờ được hiển thị.

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

.tooltip('hide')

Ẩn chú giải công cụ của phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự bị ẩn (tức là trướchidden.bs.tooltip sự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.

$('#element').tooltip('hide')

.tooltip('toggle')

Chuyển đổi chú giải công cụ của phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị hoặc bị ẩn (nghĩa là trước khi sự kiện shown.bs.tooltiphoặc hidden.bs.tooltipsự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.

$('#element').tooltip('toggle')

.tooltip('destroy')

Ẩn và hủy chú giải công cụ của phần tử. Chú giải công cụ sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selectorchọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con.

$('#element').tooltip('destroy')

Sự kiện

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

Các cửa sổ bật lên có cả tiêu đề và nội dung có độ dài bằng 0 sẽ không bao giờ được hiển thị.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Các ví dụ

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.

Bản thử trực tiếp

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Bốn hướng

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Bỏ qua trong lần nhấp tiếp theo

Sử dụng trình focuskích hoạt để loại bỏ cửa sổ bật lên vào lần nhấp tiếp theo mà người dùng thực hiện.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Cách sử dụng

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

$('#example').popover(options)

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

Phương pháp

$().popover(options)

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

Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (tức là trước khi shown.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên. Các cửa sổ bật lên có cả tiêu đề và nội dung có độ dài bằng 0 sẽ không bao giờ được hiển thị.

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

.popover('hide')

Ẩn cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (tức là trước khi hidden.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.

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

.popover('toggle')

Chuyển đổi cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.popoverhoặc hidden.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.

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

.popover('destroy')

Ẩn và phá hủy cửa sổ bật lên của một phần tử. Các cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selectorchọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu.

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

Sự kiện

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Thông báo cảnh báo alert.js

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.

Khi sử dụng một .closenút, nó phải là nút con đầu tiên .alert-dismissiblevà không có nội dung văn bản nào có thể đứng trước nó trong phần đánh dấu.

Cách sử dụng

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. Đóng một cảnh báo sẽ xóa nó khỏi DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Để cảnh báo của bạn sử dụng hoạt ảnh khi đóng, hãy đảm bảo rằng chúng có các lớp .fadevà .inlớp đã được áp dụng cho chúng.

Phương pháp

$().alert()

Làm cho cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con có data-dismiss="alert"thuộc tính. (Không cần thiết khi sử dụng tự động khởi tạo data-api.)

$().alert('close')

Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp .fadevà .incó trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.

Sự kiện

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

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.

Tính năng này không được dùng nữa kể từ v3.3.5 và đã bị xóa trong v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

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" aria-pressed="false">
  Single toggle
</button>

Hộp kiểm / Đài

Thêm vào data-toggle="buttons"hộp .btn-groupkiểm có chứa hoặc các đầu vào radio để bật chuyển đổi theo các kiểu tương ứng.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

Phương pháp

$().button('toggle')

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('reset')

Đặt lại trạng thái nút - hoán đổi văn bản thành văn bản gốc. Phương thức này không đồng bộ và trả về trước khi quá trình đặt lại thực sự hoàn tất.

$().button(string)

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" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Thu gọn sụp đổ.js

Plugin linh hoạt sử dụng một số lớp để dễ dàng chuyển đổi hành vi.

Thí dụ

Nhấp vào các nút bên dưới để hiển thị và ẩn một phần tử khác thông qua các thay đổi lớp:

• .collapseẩn nội dung
• .collapsingđược áp dụng trong quá trình chuyển đổi
• .collapse.inhiển thị nội dung

Bạn có thể sử dụng liên kết có hrefthuộc tính hoặc nút có data-targetthuộc tính. Trong cả hai trường hợp, data-toggle="collapse"yêu cầu là bắt buộc.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Ví dụ về Accordion

Mở rộng hành vi thu gọn mặc định để tạo đàn accordion với thành phần bảng điều khiển.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Cũng có thể hoán đổi .panel-bodys với .list-groups.

Cách sử dụng

Plugin thu gọn sử dụng một số lớp để xử lý công việc nặng nhọc:

• .collapseẩn nội dung
• .collapse.inhiển thị nội dung
• .collapsingđược thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi kết thúc

Các lớp này có thể được tìm thấy trong component-animations.less.

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

Chỉ cần thêm data-toggle="collapse"và a data-targetvào phần tử để 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 tính nă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').collapse()

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(options)

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').collapse({
  toggle: false
})

.collapse('toggle')

Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn. Trả về trình gọi trước khi phần tử thu gọn thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.collapsehoặc hidden.bs.collapsesự kiện xảy ra).

.collapse('show')

Hiển thị một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử thu gọn thực sự được hiển thị (tức là trước khi shown.bs.collapsesự kiện xảy ra).

.collapse('hide')

Ẩn một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử thu gọn thực sự bị ẩn (tức là trước khi hidden.bs.collapsesự kiện xảy ra).

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.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Một thành phần trình chiếu để quay vòng qua các phần tử, như băng chuyền. Băng chuyền lồng nhau không được hỗ trợ.

Các ví dụ

Trước Tiếp theo

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Chú thích tùy chọn

Thêm chú thích vào trang trình bày của bạn một cách dễ dàng với .carousel-captionphần tử bên trong bất kỳ .item. Chỉ đặt khoảng bất kỳ HTML tùy chọn nào trong đó và nó sẽ được căn chỉnh và định dạng tự động.

Nhãn trang trình bày đầu tiên

Nulla vitae elit libero, một loài pharetra augue mollis interdum.

Nhãn trang trình bày thứ hai

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nhãn trang trình bày thứ ba

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Trước Tiếp theo

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Cách sử dụng

Nhiều băng chuyền

Băng chuyền yêu cầu sử dụng idhộp chứa ở ngoài cùng (cái .carousel) để điều khiển băng chuyền hoạt động bình thường. Khi thêm nhiều băng chuyền hoặc khi thay đổi một băng chuyền id, hãy nhớ cập nhật các điều khiển có liên quan.

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ô vào 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.

Thuộc data-ride="carousel"tính được sử dụng để đánh dấu một băng chuyền là hoạt ảnh bắt đầu khi tải trang. Nó không thể được sử dụng kết hợp với khởi tạo JavaScript rõ ràng (thừa và không cần thiết) của cùng một băng chuyền.

Qua JavaScript

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

$('.carousel').carousel()

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-interval="".

Phương pháp

.carousel(options)

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').carousel({
  interval: 2000
})

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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('prev')

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

.carousel('next')

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.

Cả hai sự kiện đều có các thuộc tính bổ sung sau:

• direction: Hướng băng chuyền đang trượt (một trong hai "left"hoặc "right").
• relatedTarget: Phần tử DOM đang được trượt vào vị trí như một mục đang hoạt động.

Tất cả các sự kiện băng chuyền được kích hoạt tại chính băng chuyền (tức là tại <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Liên kết affix.js

Thí dụ

Plugin liên kết bật position: fixed;và tắt, mô phỏng hiệu ứng được tìm thấy với position: sticky;. Điều khoản phụ ở bên phải là bản demo trực tiếp của plugin đính kèm.

Cách sử dụng

Sử dụng plugin đính kèm thông qua các thuộc tính dữ liệu hoặc theo cách thủ công với JavaScript của riêng bạn. Trong cả hai trường hợp, bạn phải cung cấp CSS để định vị và chiều rộng của nội dung được dán.

Lưu ý: Không sử dụng plugin gắn trên phần tử có trong phần tử được định vị tương đối, chẳng hạn như cột được kéo hoặc đẩy, do lỗi kết xuất Safari .

Định vị qua CSS

Plugin liên kết chuyển đổi giữa ba lớp, mỗi lớp đại diện cho một trạng thái cụ thể .affix:, .affix-topvà .affix-bottom. Bạn phải cung cấp các kiểu, ngoại trừ position: fixed;bật .affix, cho chính các lớp này (độc lập với plugin này) để xử lý các vị trí thực tế.

Đây là cách hoạt động của plugin đính kèm:

1. Để bắt đầu, plugin thêm.affix-top để cho biết phần tử đang ở vị trí cao nhất. Tại thời điểm này, không cần định vị CSS.
2. Cuộn qua phần tử bạn muốn gắn sẽ kích hoạt việc dán thực tế. Đây là nơi .affixthay thế .affix-topvà thiết lập position: fixed;(được cung cấp bởi Bootstrap's CSS).
3. Nếu độ lệch đáy được xác định, cuộn qua nó sẽ thay thế .affixbằng .affix-bottom. Vì hiệu số là tùy chọn, cài đặt một yêu cầu bạn phải đặt CSS thích hợp. Trong trường hợp này, hãy bổ sung position: absolute;khi cần thiết. Plugin sử dụng thuộc tính dữ liệu hoặc tùy chọn JavaScript để xác định vị trí của phần tử từ đó.

Làm theo các bước trên để đặt CSS của bạn cho một trong các tùy chọn sử dụng bên dưới.

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. Sử dụng hiệu số để xác định thời điểm chuyển đổi ghim của một phần tử.

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

Qua JavaScript

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

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

Phương pháp

.affix(options)

Kích hoạt nội dung của bạn dưới dạng nội dung gắn liền. Chấp nhận một tùy chọn tùy chọn object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Tính toán lại trạng thái của dấu dựa trên kích thước, vị trí và vị trí cuộn của các phần tử có liên quan. Các .affix, .affix-topvà .affix-bottomcác lớp được thêm vào hoặc xóa khỏi nội dung được gắn theo trạng thái mới. Phương thức này cần được gọi bất cứ khi nào kích thước của nội dung được gắn hoặc phần tử đích được thay đổi, để đảm bảo vị trí chính xác của nội dung được gắn.

$('#myAffix').affix('checkPosition')

Sự kiện

Plugin liên kết của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng gắn kết.