JavaScript cùng Bootstrap – getbootstrap.com.vn

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.

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



})

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.

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.

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

Launch demo modal

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

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

Small modal

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

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

$('#myModal').on('hidden.bs.modal', function (e) {



  // do something...



})

Các ví dụ

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)

Cách sử dụng

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

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.

$('#myDropdown').on('show.bs.dropdown', function () {



  // do something…



})

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

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

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

Các sự kiện

$('#myScrollspy').on('activate.bs.scrollspy', function () {



  // do something…



})

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.

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 nav và nav-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 nav và nav-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

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {



  e.target // activated tab



  e.relatedTarget // previous tab



})

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:

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>

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 data và title 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).

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

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

$('#myTooltip').on('hidden.bs.tooltip', function () {



  // do something…



})

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.

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.

Demo trực tiếp

Click để kích hoạt popover

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

Popover có thể ẩn

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



})

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

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

$('#myPopover').on('hidden.bs.popover', function () {



  // do something…



})

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:

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

$('#my-alert').on('closed.bs.alert', function () {



  // do something…



})

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.

Loading state

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

Single toggle

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

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

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

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.

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

$().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>

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.

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.

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

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.

$('#myCollapsible').on('hidden.bs.collapse', function () {



  // do something…



})

Các ví dụ

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>

Cách sử dụng

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

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

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.

$('#myCarousel').on('slide.bs.carousel', function () {



  // do something…



})

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

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.