Tổng quan

Sử dụng các tập tin riêng lẻ hoặc tập tin tổng hợp đã được biên dịch

Bạn có thể sử dụng các plugin bằng cách sử dụng các tập tin *.js của Bootstrap hoặc tập tin tổng hợp bootstrap.js cũng như tập tin nén bootstrap.min.js.

Sử dụng JavaScript đã được biên dịch

Cả 2 tập tin bootstrap.jsbootstrap.min.js bao gồm toàn bộ các plugin. Vì vậy bạn chỉ cần tích hợp duy nhất một trong 2 tập tin đó là đủ.

Các thuộc tính dữ liệu thành phần

Đừng sử dụng các thuộc tính dữ liệu từ nhiều plugin trên cùng một phần tử. Ví dụ như, một nút không thể vừa áp dụng hiệu ứng tooltip vừa sử dụng để kích hoạt modal cùng lúc. Nếu bạn muốn như vậy, hãy thêm một phần tử bọc ngoài nút đó.

Tính phụ thuộc của plugin

Một vài plugin và thành phần CSS bị phụ thuộc vào các plugin khác. Nếu bạn muốn sử dụng các plugin này một cách riêng lẻ, hãy chắc chắn rằng bạn đã hiểu rõ về tính phụ thuộc. Cũng cần lưu ý rằng, toàn bộ các plugin đều phụ thuộc vào thư viện jQuery (Điều này có nghĩa là jQuery bắt buộc phải được thêm vào trước các tập tin plugin). Hãy tham khảo bower.json để nắm được phiên bản nào của jQuery được hỗ trợ.

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

Bạn có thể sử dụng toàn bộ các plugin của Bootstrap thông qua các API markup mà không phải viết thêm bất cứ một dòng JavaScript nào cả. Đây là API cấp cao nhất và là thứ bạn sẽ phải nắm được đầu tiên khi sử dụng plugin.

Điều đó có nghĩa là, trong nhiều trường hợp, bạn có thể vô hiệu hóa chức năng này đi. Vì thế, chúng tôi cũng cung cấp chức năng vô hiệu hóa các thuộc tính dữ liệu API bằng cách gỡ bỏ các sự kiện liên quan trên document với data-api:

$(document).off('.data-api')

Ngoài ra, để vô hiệu hóa một plugin cụ thể, hãy gắn thêm tên của plugin đó cùng với data-api giống như sau:

$(document).off('.alert.data-api')

Programmatic API

Bạn cũng có thể muốn sử dụng toàn bộ các pluign Bootstrap chỉ bằng JavaScript API. Toàn bộ các API là riêng lẻ, là các phương thức móc nối với nhau.

$('.btn.danger').button('toggle').addClass('fat')

Toàn bộ các phương thức đều có thể nhận đầu vào là một đối tượng, đối tượng đó có thể là một chuỗi chứa các phương thức cụ thể hoặc không gì cả (khởi tạo plugin một cách 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 đều có phương thức khởi tạo thuần túy của riêng nó thông qua thuộc tính Constructor: $.fn.popover.Constructor. Nếu bạn muốn sử dụng một một đối tượng plugin cụ thể, hãy lấy chúng trực tiếp từ một phần tử: $('[rel="popover"]').data('popover').

Tránh đụng độ

Nhiều khi bạn muốn sử dụng các plugin Bootstrap cùng với các framework UI khác. Trong những trường hợp đó, việc không gian tên (namespace) đụng độ nhau là hoàn toàn có thể xảy ra. Khi đó, hãy sử dụng .noConflict trên plugin mà bạn muốn để tránh đụng độ.

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 biến cho các hầu hết các tính năng của plugin. Nói chung, các sự kiện này đều ở dạng nguyên thể hoặc quá khứ - dạng nguyên thể (Ví dụ như show) được kích hoạt khi bắt đầu một sự kiện, và dạng quá khứ của nó (Ví dụ như shown) được kích hoạt khi hoàn thành một hành động.

Ở phiên bản 3.0.0, toàn bộ các sự kiện của Bootstrap đều được không gian tên hóa.

Toàn bộ các sự kiện dạng nguyên thể đều cung cấp tính năng preventDefault.Tính năng này cho phép dừng việc thực thi của một hành động trước khi nó kịp bắt đầu.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Các thư viện của bên thứ 3

Bootstrap không hỗ trợ các thư viện JavaScript của bên thứ 3 một cách chính thức như Prototype hay jQuery UI. Dù đã sử dụng .noConflict và các sự kiện được không gian tên hóa, nhưng vẫn còn đó các vấn đề về tính tương thích mà bạn cần phải tự giải quyết.

Hiệu ứng dịch chuyển transition.js

Giới thiệu

Đối với các hiệu ứng dịch chuyển đơn giản, hãy tích hợp transition.js cùng với các tập tin JS khác của bạn. Nếu như bạn đang sử dụng tập tin đã biên dịch (hay đã được nén) bootstrap.js, thì bạn không cần phải tích hợp vào nữa vì nó đã có sẵn ở trong đó rồi.

Mô tả

Transition.js là một tập tin hỗ trợ cơ bản cho các sự kiện transitionEnd cũng như là bộ mô phỏng CSS transition. Nó được sử dụng bởi các plugin khác để kiểm tra việc hỗ trợ CSS transition và bắt các transition đang bị treo.

Modals modal.js

Các ví dụ

Modal là một hộp thoại đơn giản nhưng rất linh hoạt với rất ít tính năng được yêu cầu cùng với các thiết lập thông minh.

Không hỗ trợ các hộp thoại xếp chồng lên nhau

Hãy lưu ý rằng, không nên mở một modal trong khi một modal khác vẫn đang hiển thị. Nếu bạn muốn hiển thị nhiều modal cùng một lúc, bạn sẽ phải chỉnh sửa code.

Ví trí các markup

Hãy luôn luôn đặt mã HTML của một modal ở vị trí cao nhất trong document của bạn để tránh việc các thành phần khác làm ảnh hưởng đến việc hiển thị cũng như là tính năng của modal

Một số vấn đề đối với thiết bị di động

Có một số vấn đề liên quan đến việc sử dụng modal trên các thiết bị di động. Hãy tham khảo tài liệu về tính hỗ trợ các trình duyệt để biết thêm chi tiết.

Ví dụ tĩnh

Một modal đã được tạo ra với phần tiêu đề, phần nội dung và một tập hợp các hành động nằm trong phần cuối.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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 -->

Demo trực tiếp

Kích hoạt một modal thông qua JavaScript bằng cách nhấn vào nút bên dưới. Modal sẽ trượt xuống từ phía trên của trang và dần dần hiển thị lên

<!-- Button trigger modal -->
<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" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>

Truy nhập modal

Hãy thêm role="dialog" vào .modal, thuộc tính aria-labelledby="myModalLabel" dùng để tham chiếu đến phần tiêu đề của modal, và aria-hidden="true" để các công nghệ hỗ trợ bỏ qua các phần tử DOM của modal.

Thêm vào đó, bạn cũng có thể thêm phần mô tả cho modal của bạn thông qua thuộc tính aria-describedby trên .modal.

Nhúng video YouTube

Việc nhúng các video trên YouTube vào modal đòi hỏi phải thêm JavaScript để tùy chỉnh video. Hãy tham khảo một bài viết trên Stack Overflow để biết thêm chi tiết.

Các kích thước tùy chọn

Các modal có hai kích thước tùy chọn được định nghĩa bằng các class được đặt cùng với .modal-dialog.

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

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

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

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

Xóa bỏ hiệu ứng động

Nếu bạn muốn các modal hiển thị một cách đơn giản thay vì có các hiệu ứng như fade, hãy xóa bỏ class .fade khỏi markup modal của bạn.

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

Cách sử dụng

Plugin modal hiển thị nội dung ẩn của bạn khi được gọi, thông qua các thuộc tính dữ liệu hoặc JavaScript. Nó cũng thêm .modal-open vào <body> để ghi đè hành vi của scroll mặc định và sinh ra một .modal-backdrop, một vùng mà khi bạn nhấn vào đó (bên ngoài modal) sẽ làm ẩn modal đó đi.

Thông qua các thuộc tính dữ liệu

Bạn có thể kích hoạt một modal mà không cần phải viết một đoạn mã JavaScript nào cả. Chỉ cần thiết lập data-toggle="modal" trên phần tử điều khiển, ví dụ như một nút, cùng với data-target="#foo" hoặc href="#foo" để hướng mục tiêu đến một modal cụ thể.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Thông qua JavaScript

Gọi một modal với id myModal bằng chỉ một dòng JavaScript duy nhất:

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

Các tùy chọn

Các tùy chọn có thể được truyền thông 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 thêm tên của tùy chọn đó vào sau data-, tương tự như data-backdrop="".

Tên Loại Mặc định Mô tả
backdrop boolean or the string 'static' true Thêm phần tử modal-backdrop. Ngoài ra, thiết lập static cho một backdrop để không đóng modal khi click vào backdrop đó.
keyboard boolean true Đóng modal khi nhấn phím "Escape"
show boolean true Hiển thị modal khi đã được khởi tạo.
remote path false

Nếu một đường dẫn được cung cấp, nội dung sẽ được tải duy nhất một lần thông qua phương thức load của jQuery và tích hợp vào .modal-content. nếu bạn đang sử dụng data-api, bạn có thể sử dụng thuộc tính href để chỉ rõ nguồn điều khiển từ xa. Ví dụ:

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

Các phương thức

.modal(options)

Phương thức này có tác dụng hiển thi nội dung của bạn giống như một modal, nó nhận object đầu vào như là các tùy chọn.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Mở modal bằng tay. Trả về cho caller trước khi modal thực sự được hiển thị hoặc ẩn đi (Ví dụ :Trước khi sự kiện shown.bs.modal hoặc hidden.bs.modal xảy ra).

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

.modal('show')

Mở modal bằng tay. Trả về cho caller trước khi modal thực sự được hiển thị (Ví dụ: Trước khi sự kiện shown.bs.modal xảy ra).

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

.modal('hide')

Đóng modal bằng tay. Trả về cho caller trước khi modal thực sự ẩn đị (Ví dụ: Trước khi sự kiện hidden.bs.modal xảy ra).

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

Các sự kiện

Các class modal của Bootstrap hỗ trợ một số sự kiện cho việc kích hoạt các tính năng của modal.

Loại sự kiện Mô tả
show.bs.modal Sự kiện xảy ra ngay khi phương thức show được gọi. Nếu được kích hoạt bằng click thì phần tử được click sẽ giống như thuộc tính relatedTarget của sự kiện.
shown.bs.modal Sự kiện này xảy ra ngay khi modal hiển thị (đang chờ CSS transition kết thúc). Nếu được kích hoạt bằng click thì phần tử được click sẽ giống như thuộc tính relatedTarget của sự kiện.
hide.bs.modal Sự kiện này xảy ra ngay khi phương thức hide được gọi.
hidden.bs.modal Sự kiện này xảy ra ngay khi modal ẩn đi hoàn toàn (đang chờ CSS transition kết thúc).
loaded.bs.modal Sự kiện này xảy ra khi modal được tải nội dung bằng tùy chọn từ xa.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Menu sổ xuống dropdown.js

Bạn có thể thêm menu sổ xuống chỉ với một plugin rất đơn giản.

Menu sổ xuống nằm bên trong thanh điều hướng

Menu sổ xuống nằm bên trong trình đơn dạng viên thuốc (pill)

Bạn có thể sử dụng thông qua các thuộc tính dữ liệu hoặc JavaScript, Plugin sổ xuống sẽ hiển thị nội dung ẩn (menu sổ xuống) bằng cách kích hoạt class .open trên phần tử cha. Khi đã được mở ra, plugin sẽ thêm .dropdown-backdrop để tạo ra một vùng mà khi bạn click vào đó (bên ngoài menu sổ xuống) thì menu sổ xuống sẽ ẩn đi. Lưu ý: Thuộc tính data-toggle=dropdown được sử dụng để đóng menu sổ xuống ở mức ứng dụng, vì thế hãy luôn sử dụng nó khi có thể.

Thông qua các thuộc tính dữ liệu

Thêm data-toggle="dropdown" vào một liên kết hoặc một nút để đóng/mở menu sổ xuống.

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Kích hoạt menu sổ xuống</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Để giữ đường dẫn nguyên vẹn, hãy sử dụng thuộc tính data-target thay vì href="#".

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Thông qua JavaScript

Đóng/mở menu sổ xuống bằng JavaScript:

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

Yêu cầu data-toggle="dropdown"

Bất kể bạn gọi menu sổ xuống bằng JavaScript hay data-api, data-toggle="dropdown" luôn luôn được yêu cầu để hiển thị phần tử kích hoạt menu sổ xuống.

Các tùy chọn

Không có tùy chọn nào

Các phương thúc

$().dropdown('toggle')

Đóng/mở menu sổ xuống.

Các sự kiện

Toàn bộ các sự kiện được kích hoạt tại phần tử cha của .dropdown-menu.

Loại sự kiện Mô tả
show.bs.dropdown Sự kiện này xảy ra ngay khi phương thức show được gọi. Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện.
shown.bs.dropdown Sự kiện này xảy ra ngay khi menu sổ xuống hiển thị (đang đợi CSS transition kết thúc). Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện.
hide.bs.dropdown Sự kiện này xảy ra ngay khi phương thức hide được gọi. Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện.
hidden.bs.dropdown Sự kiện này xảy ra khi menu sổ xuống ẩn đi hoàn toàn (đang đợi CSS transition kết thúc). Phần tử kích hoạt đóng/mở sẽ giống như thuộc tính relatedTarget của sự kiện.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

Plugin ScrollSpy sẽ tự động cập nhật vị trí của các mục tiêu điều hướng dựa trên vị trí của thanh cuộn. Hãy thử kéo thanh cuộn trong vùng nội dung bên dưới thanh điều hướng và quan sát sự thay đổi của class được kích hoạt. Các mục con trong menu sổ xuống cũng sẽ được in đậm

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Cách sử dụng

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

Bất kể bạn sử dụng cách nào, scrollspy luôn yêu cầu position: relative; được thiết lập trên phần tử mà bạn muốn sử dụng. Thông thường, nó được sử dụng trên <body>.

Thông qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi scrollspy vào thanh điều hướng trên cùng của bạn, bạn chỉ cần thêm thuộc tính data-spy="scroll" vào phần tử mà bạn muôn (thông thường là <body>). Sau đó thêm thuộc tính data-target là ID hoặc class của phần tử cha của bất kỳ thành phần .nav nào trong BootStrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Thông qua JavaScript

Sau khi thêm thuộc tính position: relative; vào CSS của bạn, hãy gọi scrollspy bằng JavaScript:

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

Yêu cầu ID đích

Các liên kết trên thanh điều hướng luôn phải có id đích tương ứng. Ví dụ, một <a href="#home">home</a> phải tương ứng với <div id="home"></div>.

Các phần tử đích Non-:visible bị bỏ qua

Các phần tử đích mà không :visible theo jQuery sẽ bị bỏ qua và các thành phần điều hướng tương ứng của chúng sẽ không được in đậm.

Các phương thức

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Các tùy chọn

Các tùy chọn có thể được truyền vào bằng 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 thêm tên của tùy chọn vào data-, tương tự như data-offset="".

Tên Loại Mặc định Mô tả
offset number 10 Độ lệch so với bên trên tính bằng pixel khi tính toán vị trí của thanh cuộn.

Các sự kiện

Loại sự kiện Mô tả
activate.bs.scrollspy Sự kiện này xảy ra bất cứ khi nào một mục mới thay đổi thành trạng thái kích hoạt bởi scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Thẻ đóng/mở tab.js

Các ví dụ

Thêm tính năng chuyển đổi qua lại giữa các vùng nội dung bằng thẻ động hoặc thậm chí là các menu sổ xuống một cách nhanh chóng.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Mở rộng thanh điều hướng dạng thẻ

Plugin này mở rộng thành phần điều hướng dạng thẻ để thêm vào các vùng tabbable.

Cách sử dụng

Kích hoạt các thẻ tabbable bằng JavaScript (mỗi thẻ cần phải được kích hoạt một cách riêng lẻ):

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

Bạn có thể kích hoạt các tab riêng lẻ bằng nhiều cách:

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

Markup

Bạn có thể kích hoạt thanh điều hướng dạng thẻ hoặc dạng viên thuốc mà không cần phải viết bất kỳ đoạn mã JavaScript nào bằng cách chỉ rõ data-toggle="tab" hoặc data-toggle="pill" trên một phần tử. Thêm các class navnav-tabs vào một thẻ ul sẽ áp dụng tab styling của BootStrap, trong khi đó việc thêm các class navnav-pills sẽ áp dụng pill styling.

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

<!-- Tab panes -->
<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>

Hiệu ứng mờ dần

Để tạo hiệu ứng mờ dần cho tab (fade), hãy thêm class .fade vào mỗi .tab-pane. .tab-pane đầu tiên cũng cần phải có .in để tạo hiệu ứng mờ ngay khi khởi tạo.

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

Các phương thức

$().tab

Kích hoạt một phần tử dạng thẻ và một container nội dung. Thẻ sẽ phải có thuộc tính data-target hoặc href với đích đến là một nút container trong DOM.

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</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>

Các sự kiện

Loại sự kiện Mô tả
show.bs.tab Sự kiện này xảy ra khi nội dụng của một thẻ hiển thị, nhưng trước khi nội dung của một thẻ mới được hiển thị. Hãy sử dụng event.targetevent.relatedTarget với đích đến là thẻ đang được kích hoạt và thẻ trước đó được kích hoạt (nếu có).
shown.bs.tab Sự kiện này xảy ra khi nội dung của một thẻ hiện thị sau khi nội dung của một thẻ khác đã được hiển thị. Hãy sử dụng event.targetevent.relatedTarget với đích đến là thẻ đang được kích hoạt và thẻ trước đó được kích hoạt (nếu có).
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Chú thích tooltip.js

Các ví dụ

Lấy cảm hứng từ plugin jQuery.tipsy của Jason Frame; Plugin này hiện đang ở phiên bản mới nhất, phiên bản này không dựa vào ảnh mà sử dụng CSS3 cho các hiệu ứng động, và các thuộc tính dữ liệu cho cho việc lưu trữ các tiêu đề.

Di chuột qua các liên kết bên dưới để thấy chú thích:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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>

Tính năng opt-in

Vì lí do hiệu năng, Tooltip và Popover data-apis là opt-in, điều đó có nghĩa là bạn phải tự mình khởi tạo chúng.

Chú thích trong các nhóm nút và nhóm input cần các thiết lập đặc biệt

Khi sử dụng chú thích trên một phần tử bên trong một .btn-group hoặc một .input-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' (được mô tả ở bên dưới) để tránh side-effect không mong muốn (ví dụ như phần tử có chiều rộng tăng lên hoặc mất đi góc bo tròn khi chú thích được kích hoạt).

Đừng cố gằng hiển thị chú thích trên các phần tử ẩn

Kích hoạt $(...).tooltip('show') khi phần tử đích là display: none; sẽ khiến cho chú thích hiển thị ở vị trí không chính xác.

Các chú thích trên các phần tử bị vô hiệu hóa cần các phần tử bọc ngoài

Để thêm một chú thích cho một phần tử disabled hoặc .disabled, hãy đặt phần tử đó vào bên trọng một <div> và sử dụng tooltip trên phần tử <div> đó.

Cách sử dụng

Plugin chú thích tạo ra nội dung và markup khi được yêu cầu và mặc định đặt các chú thích đó sao phần tử kích hoạt.

Kích hoạt chú thích bằng JavaScript:

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

Markup

Markup cần thiết cho chú thích chỉ là thuộc tính datatitle trên phần tử HTML mà bạn muốn gắn chú thích. Markup được tạo ra của chú thích khá đơn giản, mặc dù nó yêu cầu một vị trí (mặc định là top).

Các liên kết nhiều dòng

Thi thoảng bạn muốn thêm chú thích cho một siêu liên kết trải dài trên nhiều dòng. Hành vi mặc định của plugin chú thích là căn giữa chúng theo hàng ngang và hàng dọc, vì vậy khi đó hãy thêm white-space: nowrap; vào liên kết của bạn để tránh điều này.

 1 <!-- HTML to write -->
 2 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 3 
 4 <!-- Generated markup by the plugin -->
 5 <div class="tooltip top">
 6   <div class="tooltip-inner">
 7     Some tooltip text!
 8   </div>
 9   <div class="tooltip-arrow"></div>
10 </div>

Các tùy chọn

Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào data-, tương tự như data-animation="".

Tên Loại Mặc định Mô tả
animation boolean true Áp dụng hiệu ứng CSS fade transition vào chú thích
container string | false false

Gắn chú thích vào một phần tử cụ thể. Ví dụ: container: 'body'. Tùy chọn này đặc biệt hữu dụng ở chỗ nó cho phép bạn định vị vị trí của chú thích trong document bên cạnh phần tử kích hoạt - có tác dụng ngăn chặn việc chú thích hiển thị không mong muốn khi cửa sổ window thay đổi kích thước.

delay number | object 0

Tạo thời gian trễ cho việc ẩn/hiện chú thích (ms) - không áp dụng cho trường hợp kích hoạt bằng tay

Nếu chỉ có một số được truyền vào, thì sẽ được áp dụng cho cả việc ẩn và hiện

Cấu trúc của đối tượng: delay: { show: 500, hide: 100 }

html boolean false Chèn mã HTML vào chú thích. Nếu giá trị là false, phương thức text của jQuery sẽ được sử dụng để chèn thêm nội dung vào DOM. Hãy sử dụng text nếu bạn lo lắng về các cuộc tấn công XSS.
placement string | function 'top' Xác định vị trí của chú thích - top | bottom | left | right | auto.
Khi "auto" được truyền vào, nó sẽ tự động định hướng lại chú thích. Ví dụ, nếu placement là "auto left", chú thích sẽ hiển thị về phía bên trái khi có thể, nếu không nó sẽ hiển thị về phía bên phải.
selector string false Nếu một selector được cung cấp, các đối tượng chú thích sẽ được gắn với các mục tiêu cụ thể. Thực tế, tùy chọn này được sử dụng để cho phép thêm chú thích vào các nội dung HTML động. Hãy tham khảo mục nàymột ví dụ trực tiếp.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Mã HTML cơ sở được sử dụng khi tạo chú thích.

title của chú thích sẽ được thêm vào .tooltip-inner.

.tooltip-arrow sẽ trở thành mũi tên của chú thích.

Phần tử bọc ngoài cùng cần có class .tooltip.

title string | function '' Giá trị mặc định nếu như thuộc tính title không được chỉ rõ
trigger string 'hover focus' Cách chú thích được kích hoạt - click | hover | focus | manual. Bạn cũng có thể truyền vào nhiều cách kích hoạt, phân tách nhau bởi dấu cách.
viewport string | object { selector: 'body', padding: 0 }

Giữ chú thích nằm bên trong vùng giới hạn của phần tử này. Ví dụ: viewport: '#viewport' hoặc { selector: '#viewport', padding: 0 }

Các thuộc tính dữ liệu cho các chú thích riêng lẻ

Các tùy chọn cho các chú thích riêng lẻ có thể được thay thế bằng cách chỉ rõ thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên

Các phương thức

$().tooltip(options)

Gắn một bộ xử lý chú thích vào một tập hợp các phần tử.

.tooltip('show')

Hiển thị chú thích của phần tử.

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

.tooltip('hide')

Ẩn chú thích của một phần tử.

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

.tooltip('toggle')

Toggles an element's tooltip.

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

.tooltip('destroy')

Ẩn và xóa bỏ chú thích của một phần tử.

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

Các sự kiện

Loại sự kiện Mô tả
show.bs.tooltip Sự kiện này xảy ra ngay khi phương thức show được gọi.
shown.bs.tooltip Sự kiện này xảy ra ngay khi chú thích hiển thị (đang đợi CSS transition kết thúc).
hide.bs.tooltip Sự kiện này xảy ra ngay khi phương thức hide được gọi.
hidden.bs.tooltip Sự kiện này xảy ra khi chú thích ẩn đi hoàn toàn (đang đợi CSS transition kết thúc).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Các ví dụ

Thêm các lớp phủ nhỏ của nội dung, giống như trên iPad, vào bất kỳ phần tử nào để chứa thông tin bổ sung.

Tính phụ thuộc của plugin

Popovers cần plugin chú thích phải đươc tích hợp sẵn trong phiên bản Bootstrap của bạn.

Tính năng opt-in

Vì lí do hiệu năng, Tooltip và Popover data-apis đều là opt-in, điều đó có nghĩa là bạn phải tự mình khởi tạo chúng.

Popover trong các nhóm nút và nhóm input cần các thiết lập đặc biệt

Khi sử dụng popover trên một phần tử bên trong một .btn-group hoặc một .input-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' (được mô tả ở bên dưới) để tránh side-effect không mong muốn (ví dụ như phần tử có chiều rộng tăng lên hoặc mất đi góc bo tròn khi chú thích được kích hoạt)..

Đừng cố gằng hiển thị popover trên các phần tử ẩn

Kích hoạt $(...).popover('show') khi phần tử đích là display: none; sẽ khiến cho chú thích hiển thị ở vị trí không chính xác.

Các popover trên các phần tử bị vô hiệu hóa cần các phần tử bọc ngoài

Để thêm một popover cho một phần tử disabled hoặc .disabled element, hãy đặt phần tử đó vào bên trọng một <div> và sử dụng tooltip trên phần tử <div> đó.

Popover tĩnh

Có 4 tùy chọn cho popover tĩnh bao gồm: bên trên, bên dưới, bên trái và bên phải.

Popover bên trên

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bên phải

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bên dưới

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bên trái

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Demo 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 để kích hoạt 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 bên trái
</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 bên trên
</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 bên dưới
</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 bên phải
</button>

Ẩn popover khi click vào

Hãy sử dụng focus để kích hoạt việc ẩn popover khi click và popover đó.

<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Popover có thể ẩn</button>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Liên kết nhiều dòng

Nhiều khi bạn muốn thêm gắn một popover vào một siêu liên kết trải dài trên nhiều dòng, khi đó hành vi mặc định của plugin popover là tự động căn giữa theo cả chiều ngang lẫn chiều dọc. Hãy thêm white-space: nowrap; vào liên kết của bạn để tránh điều này.

Cách sử dụng

Kích hoạt popover bằng JavaScript:

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

Các tùy chọn

Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-animation="".

Tên Loại Mặc định Mô tả
animation boolean true Áp dụng hiệu ứng CSS fade transition lên popover
container string | false false

Gắn popover vào một phần tử cụ thể. Ví dụ: container: 'body'. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị vị trí của popover trong document bên cạnh phần tử kích hoạt - có tác dụng ngăn chặn việc popover hiển thị không mong muốn khi cửa sổ window thay đổi kích thước..

content string | function ''

Giá trị nội dung mặc định nếu như thuộc tính data-content không được chỉ rõ.

Nếu đầu vào là một hàm, nó sẽ được gọi với 1 tham số truyền vào là phần tử mà popover được gắn vào.

delay number | object 0

Tạo thời gian trễ cho việc ẩn/hiện popover (ms) - không áp dụng cho trường hợp kích hoạt bằng tay

Nếu chỉ có một số được truyền vào, thì sẽ được áp dụng cho cả việc ẩn và hiện

Cấu trúc của đối tượng: delay: { show: 500, hide: 100 }

html boolean false Chèn mã HTML vào popover . Nếu giá trị là false, phương thức text của jQuery sẽ được sử dụng để chèn thêm nội dung vào DOM. Hãy sử dụng text nếu bạn lo lắng về các cuộc tấn công XSS.
placement string | function 'right' Xác định vị trí của popover - top | bottom | left | right | auto. .
Khi "auto" được truyền vào, nó sẽ tự động định hướng lại popover. Ví dụ, nếu placement là "auto left", popover sẽ hiển thị về phía bên trái khi có thể, nếu không nó sẽ hiển thị về phía bên phải..
selector string false Nếu một selector được cung cấp, các đối tượng popover sẽ được gắn với các mục tiêu cụ thể. Thực tế, tùy chọn này được sử dụng để cho phép thêm popover vào các nội dung HTML động. Hãy tham khảo mục nàymột ví dụ trực tiếp.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Mã HTML cơ sở được sử dụng khi tạo popover.

title của popover sẽ được thêm vào .popover-title.

content của popover sẽ được thêm vào .popover-content.

.arrow sẽ trở thành mũi tên của popover.

Phần tử bọc ngoài cùng cần có class .popover.

title string | function '' Giá trị mặc định nếu như thuộc tính title không được chỉ rõ
trigger string 'click' Cách popover được kích hoạt - click | hover | focus | manual. Bạn cũng có thể truyền vào nhiều cách kích hoạt, phân tách nhau bởi dấu cách.
viewport string | object { selector: 'body', padding: 0 }

Giữ popover nằm bên trong vùng giới hạn của phần tử này. Ví dụ: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

Các thuộc tính dữ liệu cho các popover riêng lẻ

Các tùy chọn cho các popover riêng lẻ có thể được thay thế bằng cách chỉ rõ thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên.

Các phương thức

$().popover(options)

Khởi tạo popover trên một tập hợp các phần tử.

.popover('show')

Mở popover.

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

.popover('hide')

Đóng popover.

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

.popover('toggle')

Đóng/mở popover.

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

.popover('destroy')

Đóng và xóa bỏ popover của phần tử.

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

Các sự kiện

Loại sự kiện Mô tả
show.bs.popover Sự kiện này xảy ra ngay khi phương thức show được gọi.
shown.bs.popover Sự kiện này xảy ra khi popover đã hiển thị (đang chờ CSS transition kết thúc).
hide.bs.popover Sự kiện này xảy ra ngay khi phương thức hide được gọi.
hidden.bs.popover Sự kiện này xảy ra khi popover đã bị ẩn đi (đang chờ CSS transition kết thúc).
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Tin nhắn thông báo alert.js

Các ví dụ

Thêm tính năng đóng tin nhắn bằng cách sử dụng plugin này.

Cách sử dụng

Kích hoạt việc đóng một tin nhắn bằng Javascript:

$(".alert").alert()

Markup

Bạn chỉ cần thêm data-dismiss="alert" vào nút "Đóng" của bạn để tự động thêm tính năng đóng tin nhắn.

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

Các phương thức

$().alert()

Thêm tính năng đóng cho toan bộ các tin nhắn thông báo. Để tạo hiệu ứng động cho tin nhắn khi đóng, hãy thêm class .fade.in vào tin nhắn đó.

.alert('close')

Đóng tin nhắn.

$(".alert").alert('close')

Các sự kiện

Các class gắn với tin nhắn thông báo của Bootstrap hỗ trợ một số các sự kiện để can thiệp vào tính năng của tin nhắn.

Loại sự kiện Mô tả
close.bs.alert Sự kiện này xảy ra ngay khi phương thức close được gọi.
closed.bs.alert Sự kiện này xảy ra khi tin nhắn đã được đóng lại (đang chờ CSS transition kết thúc).
$('#my-alert').on('closed.bs.alert', function () {
  // do something…
})

Nút button.js

Các ví dụ

Bạn có thể làm rất nhiều thứ với nút. Việc điều khiển các trạng thái của nút hoặc tạo ra các nhóm nút sẽ tạo nên các thành phần giống như thanh công cụ.

Stateful

Hãy thêm data-loading-text="Loading..." để áp dụng trạng thái "đang tải" lên nút.

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Nút bật/tắt

Hãy thêm vào data-toggle="button" để kích hoạt trạng thái bật/tắt trên 1 nút.

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

Checkbox

Hãy thêm data-toggle="buttons" vào một nhóm các checkbox để kích hoạt trạng thái bật/tắt tương tự như checkbox thông thường.

Các tùy chọn đã được chọn từ trước phải được thêm class .active

Đối với các tùy chọn đã được chọn từ trước, bạn sẽ phải tự mình thêm class .active vào label của input đó.

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

Radio

Hãy thêm data-toggle="buttons" vào một nhóm các radio để kích hoạt trạng thái bật/tắt giống như radio thông thường.

Các tùy chọn được chọn từ trước cần phải được thêm class .active

Đối với các tùy chọn được chọn từ trước, bạn phải tự mình thêm class .active vào label của input đó.

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

Cách sử dụng

Kích hoạt nút bằng Javascript:

$('.btn').button()

Markup

Các thuộc tính dữ liệu được tích hợp vào plugin nút. Hãy tham khảo các ví dụ bên dưới để biết được các dạng markup khác nhau.

Các tùy chọn

Không có tùy chọn nào

Các phương thức

$().button('toggle')

Kích hoạt trạng thái bật của nút, khi đó các nút sẽ trông giống như là đã được ấn.

Tự động bật/tắt

Bạn có thể kích hoạt tính năng tự động bật/tắt của một nút bằng cách sử dụng thuộc tính data-toggle.

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

$().button('loading')

Thiết lập nút về trạng thái "đang tải" - khi đó nút sẽ bị vô hiệu hóa và text trên nút sẽ được chuyển thành text của trạng thái "đang tải". Text của trạng thái "đang tải" được định nghĩa thông qua thuộc tính dữ liệu data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Tính tương thích với các trình duyệt

Firefox luôn duy trì trạng thái vô hiệu hóa khi tải trang. Một hướng giải quyết cho vấn đề này là sử dụng autocomplete="off".

$().button('reset')

Khôi phục trạng thái ban đầu của nút - chuyển text trên nút về text ban đầu.

$().button(string)

Khôi phục trạng thái ban đầu của nút - chuyển text trên nút về một text được định nghĩa.

<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Collapse collapse.js

Giới thiệu

Sử dụng các style cơ sở và hỗ trợ một cách linh hoạt cho các thành phần collapsible như accordion hay thành điều hướng.

Tính phụ thuộc của plugin

Collapse yêu cầu plugin transition phải được tích hợp sẵn trong phiên bản Bootstrap của bạn.

Ví dụ về accordion

Sử dụng plugin collapse, chúng ta sẽ xây dựng một accordion đơn giản bằng cách mở rộng thành phần panel.

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.
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.
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 class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

Bạn cũng có thể sử dụng plugin mà không cần biết markup của accordion. Biến một nút thành một phần tử điều khiển, đi kích hoạt việc mở rộng hoặc thu gọn phần tử khác.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in">...</div>

Cách sử dụng

Plugin collapse sử dụng một số ít các class để xử lý:

  • .collapse sử dụng để ẩn nội dung
  • .collapse.in sử dụng để hiển thị nội dung
  • .collapsing được thêm vào khi transition bắt đầu, và sẽ bị xóa bỏ khi transition kết thúc

Các class này nằm trong tập tin component-animations.less.

Thông qua các thuộc tính dữ liệu

Bạn chỉ cần thêm data-toggle="collapse"data-target vào một phần tử mà bạn muốn biến nó về dạng collapsible. Thuộc tính data-target nhận giá trị là một selector như một phần tử đích . Hãy chắc chắn thêm class collapse vào phần tử collapsible. Nếu bạn muốn mặc định là mở, Hãy thêm class bổ sung in.

Để thêm bộ quản lý nhóm tương tự như accordion vào một collapsible control, hãy thêm vào thuộc tính data-parent="#selector". Hãy xem demo để hiểu rõ hơn.

Thông qua JavaScript

Bạn có thể kích hoạt bằng tay với:

$('.collapse').collapse()

Các tùy chọn

Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-parent="".

Tên Loại Mặc định Mô tả
parent selector false Nếu một selector được truyền vào thì toàn bộ các phần tử collapsible khác là con của phần tử cha được truyền vào ấy sẽ bị đóng lại khi phần tử này được mở ra. (tương tự như hoạt động của accordion - phụ thuộc vào class panel)
toggle boolean true Đóng/mở phần tử collapsible khi kích hoạt

Các phương thức

.collapse(options)

Biến nội dung của bạn thành một phần tử collapsible, nhận đầu vào là mộtobject tùy chọn.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Đóng/mở một phần tử collapsible.

.collapse('show')

Mở một phần tử collapsible.

.collapse('hide')

Đóng một phần tử collapsible.

Các sự kiện

Class collapse của Bootstrap cho phép một số sự kiện can thiệp vào tính năng collapse.

Loại sự kiện Mô tả
show.bs.collapse Sự kiện này xảy ra ngay khi phương thức show được gọi.
shown.bs.collapse Sự kiện này xảy ra khi một phần tử collapse đã được mở ra (đang chờ CSS transition kết thúc).
hide.bs.collapse Sự kiện này xảy ra ngay khi phương thức hide được gọi.
hidden.bs.collapse Sự kiện này xảy ra khi một phần tử collapse đã được đóng lại (đang chờ CSS transition kết thúc).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Slideshow bên dưới sử dụng một plugin chung và thành phần tương ứng để quay vòng qua các phần tử trông giống như một carousel.

<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">
    <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"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Caption tùy chọn

Bạn có thể thêm caption vào slide của bạn một cách dễ dàng bằng cách đặt phần tử .carousel-caption vào bên trong một .item. Bạn hãy chèn bất kỳ mã HTML nào vào trong caption đó và nó sẽ được định dạng và căn chỉnh một cách tự động.

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

Vấn đề truy nhập

Thành phần carousel không tuân theo các tiêu chuẩn về tính truy nhập. Tuy nhiên nếu bạn muốn, hãy cân nhắc việc sử dụng các tùy chọn để hiển thị nội dung của bạn.

Nhiều carousel

Carousel yêu cầu việc sử dụng id trên container ngoài cùng (.carousel) đối với các carousel-control để có thể hoạt động tốt. Khi sử dụng nhiều carousel, hoặc khi thay đổi id của carousel, hãy nhớ cập nhật các control liên quan.

Thông qua các thuộc tính dữ liệu

Hãy sử dụng các thuộc tính dữ liệu để dễ dàng định vị vị trí của các carousel. data-slide nhận giá trị là prev hoặc next, có tác dụng thay đổi vị trí của slide một cách tương đối so với vị trí hiện tại. Ngoài ra, bạn hãy sử dụng data-slide-to để truyền chỉ số của một slide vào carousel data-slide-to="2", có tác dụng chuyển vị trí slide tới một vị trí có chỉ số cụ thể tính từ 0.

Thuộc tính data-ride="carousel" được sử dụng để đánh dấu một carousel bắt đầu chuyển động tại thời điểm trang được tải.

Thông qua JavaScript

Kích hoạt carousel bằng tay bằng cách sử dụng:

$('.carousel').carousel()

Các tùy chọn

Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-interval="".

Tên Loại Mặc định Mô tả
interval number 5000 Khoảng thời gian trễ giữa 2 slide. Nếu giá trị truyền vào là false thì carousel sẽ không tự động chuyển động.
pause string "hover" Tạm dừng chuyển động của carousel khi di chuột vào và tiếp tục chuyển động khi di chuột ra khỏi carousel.
wrap boolean true Xác định xem carousel sẽ chuyển động một cách liên tục hay dừng tại một vị trí cụ thể.

Các phương thức

.carousel(options)

Khởi tạo carousel với các tùy chọn tùy chỉnh object và bắt đầu chuyển động qua các slide.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Chuyển động quay vòng qua các slide của carousel.

.carousel('pause')

Tạm dừng chuyển động của carousel.

.carousel(number)

Dịch chuyển carousel tới một vị trí cụ thể (đánh số từ 0, tương tự như mảng).

.carousel('prev')

Dịch chuyển carousel về slide trước đó.

.carousel('next')

Dịch chuyển carousel sang slide tiếp theo.

Các sự kiện

Các class carousel của Bootstrap hỗ trợ 2 sự kiện cho phép can thiệp vào tính năng của carousel.

Cả 2 sự kiện đều gồm các thuộc tính sau:

  • direction: Hướng chuyển động của carousel (có thể là "left" hoặc "right").
  • relatedTarget: Phần tử DOM sẽ được chuyển động tới.
Loại sự kiện Mô tả
slide.bs.carousel Sự kiện này xảy ra ngay khi phương thức slide được kích hoạt.
slid.bs.carousel Sự kiện này xảy ra khi carousel kết thúc transition của các slide của nó.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Các ví dụ

Menu điều hướng nằm bên phải trang này chính là một ví dụ trực tiếp về plugin affix.


Cách sử dụng

Bạn có thể sử dụng plugin affix thông qua các thuộc tính dữ liệu hoặc JavaScript. Bất kể bằng cách nào, bạn cũng đều phải thêm CSS để xác định vị trí cho nội dung của bạn.

Định vị thông qua CSS

Plugin affix chuyển qua lại giữa 3 class, mỗi class thể hiện một trạng thái cụ thể: .affix, .affix-top, và .affix-bottom. Tuy nhiên, bạn cũng sẽ phải tự mình thêm style cho các class này (không phụ thuộc vào plugin) để quản lý vị trí thực tế của nội dung.

Và đây là cách mà plugin affix hoạt động:

  1. Khi bắt đầu, plugin thêm vào class .affix-top để chỉ định phần tử nằm ở vị trí trên cùng. Tại thời điểm này, không yêu cầu sử dụng CSS để xác định vị trí.
  2. Khi cuộn qua phần tử mà bạn muốn đóng cố định, nó sẽ kích hoạt trạng thái đóng cố định. Đây là thời điểm mà .affix thay thế cho .affix-top và thiết lập position: fixed; (được hỗ trợ bởi CSS của Bootstrap).
  3. Nếu tồn tại bottom offset, khi cuộn sẽ thay thế .affix bằng .affix-bottom. Vì offset là tùy chọn nên khi offset được thiết lập sẽ đòi hỏi CSS được thiết lập tương ứng. Trong trường hợp này, hãy thêm position: absolute; nếu cần thiết. Plugin sử dụng các thuộc tính dữ liệu hoặc JavaScript để xác định điểm định vị tính từ đó.

Hãy làm theo các bước trên để thiết lập CSS cho các tùy chọn sử dụng ở bên dưới.

Thông qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi affix vào một phần tử, bạn chỉ cần thêm data-spy="affix" vào phần tử mà bạn muốn sử dụng. Sử dụng offset để xác định khi nào thì kích hoạt trạng thái "đóng đinh" lên phần tử.

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

Thông qua JavaScript

Kích hoạt plugin affix thông qua JavaScript:

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

Các tùy chọn

Cac tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào sau data-, tương tự như data-offset-top="200".

Tên Loại Mặc định Mô tả
offset number | function | object 10 Offset tính bằng pixel sử dụng khi tính toán vị trí scroll. Nếu giá trị truyền vào là một số, offset sẽ được áp dụng vào cả phía trên và phía dưới. Để truyền vào giá trị offset cụ thể cho 2 phía, hãy sử dụng đối tượng offset: { top: 10 } hoặc offset: { top: 10, bottom: 5 }. Hãy sử dụng một hàm khi bạn muốn tính toán động giá trị offset.
target selector | node | jQuery element the window object Chỉ rõ phần tử đích của affix.

Các sự kiện

Class của plugin affix hỗ trợ một số sự kiện cho phép can thiệp vào tính năng của plugin affix.

Loại sự kiện Mô tả
affix.bs.affix Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix.
affixed.bs.affix Sự kiện này xay ra sau khi phần tử được thiết lập affix.
affix-top.bs.affix Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix-top.
affixed-top.bs.affix Sự kiện này xay ra sau khi khi phần tử được thiết lập affix-top.
affix-bottom.bs.affix Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix-bottom.
affixed-bottom.bs.affix Sự kiện này xay ra sau khi khi phần tử được thiết lập affix-bottom.