Javascript cho Bootstrap

Làm cho các thành phần của Bootstrap trở nên sống động — giờ đây với 12 plugin jQuery tùy chỉnh.

Phương thức

Một plugin được sắp xếp hợp lý, nhưng linh hoạt, sử dụng plugin phương thức javascript truyền thống chỉ với chức năng bắt buộc tối thiểu và các giá trị mặc định thông minh.

Trình đơn thả xuống

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

Scrollspy

Sử dụng scrollspy để tự động cập nhật các liên kết trong thanh điều hướng của bạn để hiển thị liên kết đang hoạt động hiện tại dựa trên vị trí cuộn.

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

Sử dụng plugin này để làm cho các tab và viên thuốc hữu ích hơn bằng cách cho phép chúng chuyển đổi qua các ngăn có thể tab của nội dung cục bộ.

Chú giải công cụ

Một điểm mới trên plugin jQuery Tipsy, Tooltip không dựa vào hình ảnh — chúng sử dụng CSS3 cho hoạt ảnh và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ.

Popovers *

Thêm các lớp phủ nhỏ của nội dung, như trên iPad, vào bất kỳ phần tử nào để có thông tin phụ về nhà ở.

* Yêu cầu các Chú giải công cụ được bao gồm

Thông báo cảnh báo

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

nút

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

Sụp đổ

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

Băng chuyền

Tạo một vòng quay của bất kỳ nội dung nào bạn muốn để cung cấp trình chiếu nội dung tương tác.

Người đánh máy

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

Chuyển tiếp *

Đối với các hiệu ứng chuyển tiếp đơn giản, hãy bao gồm bootstrap-transfer.js một lần để trượt theo các chế độ hoặc làm mờ dần các cảnh báo.

* Cần thiết cho hoạt ảnh trong plugin

Đứng lên! Tất cả các plugin javascript đều yêu cầu phiên bản jQuery mới nhất.

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

Một plugin được sắp xếp hợp lý, nhưng linh hoạt, sử dụng plugin phương thức javascript truyền thống chỉ với chức năng bắt buộc tối thiểu và các giá trị mặc định thông minh.

Tải tập tin

Ví dụ tĩnh

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

Bản thử trực tiếp

Chuyển đổi một phương thức qua javascript bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang.

Khởi chạy phương thức demo

Sử dụng bootstrap-modal

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

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

Tùy chọn

Tên loại hình mặc định sự mô tả
phông nền boolean thật Bao gồm một yếu tố phương thức-phông nền. Ngoài ra, chỉ định staticphông nền không đóng phương thức khi nhấp chuột.
bàn phím boolean thật Đóng phương thức khi nhấn phím thoát
buổi bieu diễn boolean thật Hiển thị phương thức khi khởi tạo.

Đánh dấu

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Khởi chạy phương thức </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-allow = "modal" > × </button>
  4. <h3> Tiêu đề phương thức </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Một cơ thể đẹp… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Đóng </a> _
  11. <a href = "#" class = "btn btn-primary"> Lưu thay đổi </a>
  12. </div>
  13. </div>
Đứng lên! Nếu bạn muốn phương thức của mình hoạt hình trong và ngoài, chỉ cần thêm một .fadelớp vào .modalphần tử (tham khảo bản trình diễn để xem điều này trong hoạt động) và bao gồm bootstrap-transfer.js.

Phương pháp

.modal (tùy chọn)

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

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

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

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

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

.modal ('hiển thị')

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

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

.modal ('ẩn')

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

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

Sự kiện

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

Biến cố Sự mô tả
buổi bieu diễn Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi.
cho xem Sự kiện này được kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
ẩn giấu Sự kiện này được kích hoạt ngay lập tức khi hidephương thức thể hiện đã được gọi.
ẩn giấu Sự kiện này được kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // làm việc gì đó…
  3. })

Plugin ScrollSpy dùng để tự động cập nhật các mục tiêu điều hướng dựa trên vị trí cuộn.

Tải tập tin

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

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

@mập mạp

Bàn phím quảng cáo xà cạp, bữa tiệc nửa buổi id nghệ thuật dolor labore. Pitchfork yr enim lo-fi trước khi họ bán hết. Tumblr farm-to-table xe đạp quyền bất cứ điều gì. Anim keffiyeh carles cardigan. Gian hàng ảnh 3 con sói mặt trăng của Velit seitan mcsweeney. Cosby áo len lomo quần short jean, williamsburg hoodie minim qui có thể bạn chưa nghe nói về chúng et cardigan quỹ tín thác quần áo culpa biodiesel wes anderson thẩm mỹ. Nihil hình xăm tố cáo, tín dụng mỉa mai biodiesel keffiyeh nghệ nhân ullamcoequat.

@mdo

Veniam marfa ria mép ván trượt, adipisicing fugiat velit pitchfork râu. Freegan râu aliqua cupidatat mcsweeney's vero. Cupidatat bốn loko nisi, ea helvetica nulla carles. Xe chở đồ ăn bằng áo len hình xăm cosby, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles tập thể dục không thẩm mỹ quis gentrify. Brooklyn adipisicing bia thủ công phó bàn thờ chính.

một

Occaecat Goodso aliqua delectus. Fap bia thủ công cần thiết ván trượt ea. Lomo xe đạp quyền adipisicing banh mi, velit ea sunt cấp tiếp theo locavore cà phê một nguồn gốc ở magna veniam. Cuộc sống cao id vinyl, công viên tiếng vang hậu quả là quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Túi nhỏ nhắn tự làm Consectetur nisi. Cred ex in, bền vững delectus consectetur fanny pack iphone.

hai

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 bất cứ thứ gì xe tải đồ ăn ngon. Sapiente synth id giả định. Locavore sed helvetica mỉa mai châm biếm, những chiếc áo khoác sấm sét mà bạn có thể chưa nghe nói về chúng do áo hoodie không chứa gluten lo-fi fap aliquip. Labore elit placeat trước khi bán hết hàng, terry richardson proident brunch nesciunt quis cosby sweater nghệ nhân của nghệ nhân p Cosre elit keffiyeh ut helvetica. Cardigan bia thủ công seitan velit làm sẵn. VHS chambray labris tempor veniam. Hoạt hình mollit minimine hàng hóa ullamco Thundercats.


Sử dụng bootstrap-scrollspy.js

Gọi scrollspy qua javascript:

  1. $ ( '#navbar' ). scrollspy ()

Đánh dấu

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

  1. <body data-spy = "scroll" > ... </body>
Đứng lên! Các liên kết thanh điều hướng phải có các mục tiêu id có thể phân giải được. Ví dụ, a <a href="#home">home</a>phải tương ứng với một cái gì đó trong dom như <div id="home"></div>.

Phương pháp

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

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

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

Tùy chọn

Tên loại hình mặc định sự mô tả
bù lại con số 10 Điểm ảnh để bù đắp từ trên xuống khi tính toán vị trí của cuộn.

Sự kiện

Biến cố Sự mô tả
hoạt động Sự kiện này kích hoạt bất cứ khi nào một mục mới được kích hoạt bởi con lăn.

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

Tải tập tin

Các tab mẫu

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

Chất liệu denim thô chắc hẳn bạn chưa từng nghe nói đến quần short jean Austin. Nesciunt đậu phụ stumptown aliqua, làm sạch tổng thể retro synth. Ria mép khuôn mẫu, williamsburg carles vegan helvetica. Người bán thịt người bán thịt retro keffiyeh dreamcatcher synth. Áo len Cosby eu banh mi, qui irure terry richardson ex ink. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan may mặc của mỹ, 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.


Sử dụng bootstrap-tab.js

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

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

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

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

Đánh dấu

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

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

Phương pháp

tab $ ().

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> Trang chủ </a> </li>
  3. <li> <a href = "#profile"> Hồ </a> </li>
  4. <li> <a href = "#messages"> Tin nhắn </a> </li>
  5. <li> <a href = "#settings"> Cài đặt </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a: last' ). tab ( 'show' );
  18. })
  19. </script>

Sự kiện

Biến cố Sự mô tả
buổi bieu diễn Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.targetevent.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
cho xem Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.targetevent.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
  1. $ ( 'a [data-toggle = "tab"]' ). on ( 'shows' , function ( e ) {
  2. e . mục tiêu // tab đã kích hoạt
  3. e . RelatedTarget // tab trước
  4. })

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

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

Tải tập tin

Ví dụ sử dụng Chú giải công cụ

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

Những chiếc quần bó sát cấp độ tiếp theo có thể bạn chưa từng nghe nói về chúng. Ảnh gian hàng râu vải thô denim letterpress túi đưa tin thuần chay stumptown. Seitan từ trang trại đến bàn ăn, quần áo Mỹ 8-bit quinoa bền vững fixie của mcsweeney có một chambray vinyl richardson terry. Beard stumptown, cardigans banh mi lomo Thundercats. Đậu phụ diesel sinh học williamsburg marfa, bánh chambray thuần chay làm sạch 4 loko mcsweeney. Một nghệ nhân thực sự mỉa mai bất cứ thứ gì keytar , scenester farm-to-table banky Austin twitter xử lý freegan credit thô denim single-origin coffee lan truyền.


Sử dụng bootstrap-tooltip.js

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

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

Tùy chọn

Tên loại hình mặc định sự mô tả
hoạt hình boolean thật áp dụng một chuyển đổi mờ dần css cho chú giải công cụ
vị trí chuỗi | hàm 'đứng đầu' cách đặt chú giải công cụ - trên cùng | dưới cùng | trái | bên phải
bộ chọn sợi dây sai Nếu một bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu được chỉ định.
Tiêu đề chuỗi | hàm số '' giá trị tiêu đề mặc định nếu không có thẻ `title`
Kích hoạt sợi dây 'bay lượn' cách kích hoạt chú giải công cụ - di chuột | tiêu điểm | thủ công
sự chậm trễ số | sự vật 0

độ trễ hiển thị và ẩn chú giải công cụ (mili giây) - không áp dụng cho loại trình kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện

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

Đứng lên! Ngoài ra, các tùy chọn cho chú giải công cụ riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu.

Đánh dấu

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

  1. <a href = "#" rel = "tooltip" title = "first tooltip"> di chuột qua tôi </a>

Phương pháp

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

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

.tooltip ('hiển thị')

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

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

.tooltip ('ẩn')

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

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

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

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

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

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

Thêm các lớp phủ nhỏ của nội dung, như trên iPad, vào bất kỳ phần tử nào để có thông tin phụ về nhà ở.

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

Tải tập tin

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

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


Sử dụng bootstrap-popover.js

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

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

Tùy chọn

Tên loại hình mặc định sự mô tả
hoạt hình boolean thật áp dụng một chuyển đổi mờ dần css cho chú giải công cụ
vị trí chuỗi | hàm 'bên phải' làm thế nào để định vị cửa sổ bật lên - trên cùng | dưới cùng | trái | bên phải
bộ chọn sợi dây sai nếu một bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu được chỉ định
Kích hoạt sợi dây 'bay lượn' cách kích hoạt chú giải công cụ - di chuột | tiêu điểm | thủ công
Tiêu đề chuỗi | hàm số '' giá trị tiêu đề mặc định nếu thuộc tính `title` không có
Nội dung chuỗi | hàm số '' giá trị nội dung mặc định nếu thuộc tính `data-content` không có
sự chậm trễ số | sự vật 0

độ trễ hiển thị và ẩn cửa sổ bật lên (mili giây) - không áp dụng cho loại kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện

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

Đứng lên! Ngoài ra, các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu.

Đánh dấu

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

Phương pháp

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

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

.popover ('show')

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

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

.popover ('ẩn')

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

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

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

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

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

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

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

Tải xuống

Cảnh báo mẫu

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

Guacamole thánh! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.

Oh snap! Bạn có một lỗi!

Thay đổi cái này cái kia và thử lại. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit. Cras mattis consectetur purus sit amet fermentum.

Thực hiện hành động này Hoặc làm điều này


Sử dụng bootstrap-alert.js

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

  1. $ ( ".alert" ). alert ()

Đánh dấu

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

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

Phương pháp

$ (). alert ()

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

.alert ('đóng')

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

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

Sự kiện

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

Biến cố Sự mô tả
gần Sự kiện này kích hoạt ngay lập tức khi closephương thức thể hiện được gọi.
đóng cửa Sự kiện này được kích hoạt khi cảnh báo đã được đóng (sẽ đợi quá trình chuyển đổi css hoàn tất).
  1. $ ( '# my-alert' ). bind ( 'đóng' , function () {
  2. // làm việc gì đó…
  3. })

Về

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

Tải tập tin

Ví dụ sử dụng

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

Trạng thái
Chuyển đổi đơn
Hộp kiểm
Đài

Sử dụng bootstrap-button.js

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

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

Đánh dấu

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

  1. <! - Thêm data-toggle = "button" để kích hoạt bật tắt trên một nút duy nhất ->
  2. <button class = "btn" data-toggle = "button" > Chuyển đổi một lần </button>
  3.  
  4. <! - Thêm data-toggle = "button-checkbox" để chuyển đổi kiểu hộp kiểm trên btn-group ->
  5. <div class = "btn-group" data-toggle = "button-checkbox" >
  6. <button class = "btn" > Left </button>
  7. <button class = "btn" > Middle </button>
  8. <button class = "btn" > Right </button>
  9. </div>
  10.  
  11. <! - Thêm data-toggle = "button-radio" để chuyển đổi kiểu radio trên btn-group ->
  12. <div class = "btn-group" data-toggle = "button-radio" >
  13. <button class = "btn" > Left </button>
  14. <button class = "btn" > Middle </button>
  15. <button class = "btn" > Right </button>
  16. </div>

Phương pháp

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

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

Đứng lên! Bạn có thể bật tính năng tự động bật / tắt nút bằng cách sử dụng data-togglethuộc tính.
  1. <button class = "btn" data-toggle = "button" > </button>

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

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

  1. <button class = "btn" data-loading-text = "loading thing ..." > ... </button>
Đứng lên! Firefox vẫn tồn tại trạng thái bị vô hiệu hóa qua các lần tải trang . Một giải pháp cho điều này là sử dụng autocomplete="off".

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

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

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

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

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

Về

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

Tải tập tin

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

Ví dụ đàn accordion

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

Phim hoạt hình chuyên nghiệp sáo ngữ, enim eiusmod cuộc sống cao cấp accamus terry richardson quảng cáo mực. 3 Wolf moon officia aute, bữa nửa buổi dolor trượt ván không cupidatat. Xe tải thực phẩm quinoa nesciunt labourum eiusmod. Brunch 3 Wolf moon tempor, sunt aliqua đặt một con chim trên đó mực cà phê nguồn gốc đơn nulla assnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher Vice lomo. Leggings occaecat craft beer farm-to-table, raw denim synth nesciunt thẩm mỹ có thể bạn chưa từng nghe về chúng tố cáo VHS bền vững lao động.
Phim hoạt hình chuyên nghiệp sáo ngữ, enim eiusmod cuộc sống cao cấp accamus terry richardson quảng cáo mực. 3 Wolf moon officia aute, bữa nửa buổi dolor trượt ván không cupidatat. Xe tải thực phẩm quinoa nesciunt labourum eiusmod. Brunch 3 Wolf moon tempor, sunt aliqua đặt một con chim trên đó mực cà phê nguồn gốc đơn nulla assnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher Vice lomo. Leggings occaecat craft beer farm-to-table, raw denim synth nesciunt thẩm mỹ có thể bạn chưa từng nghe về chúng tố cáo VHS bền vững lao động.
Phim hoạt hình chuyên nghiệp sáo ngữ, enim eiusmod cuộc sống cao cấp accamus terry richardson quảng cáo mực. 3 Wolf moon officia aute, bữa nửa buổi dolor trượt ván không cupidatat. Xe tải thực phẩm quinoa nesciunt labourum eiusmod. Brunch 3 Wolf moon tempor, sunt aliqua đặt một con chim trên đó mực cà phê nguồn gốc đơn nulla assnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher Vice lomo. Leggings occaecat craft beer farm-to-table, raw denim synth nesciunt thẩm mỹ có thể bạn chưa từng nghe về chúng tố cáo VHS bền vững lao động.

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

Bật qua javascript:

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

Tùy chọn

Tên loại hình mặc định sự mô tả
cha mẹ bộ chọn sai If selector thì tất cả các phần tử có thể thu gọn dưới phần tử gốc được chỉ định sẽ bị đóng khi mục có thể thu gọn này được hiển thị. (tương tự như hành vi đàn accordion truyền thống)
chuyển đổi boolean thật Chuyển đổi phần tử có thể thu gọn khi gọi

Đánh dấu

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

  1. <button class = "btn btn-risk" data-toggle = "sập" data-target = "#demo" >
  2. đóng mở đơn giản
  3. </button>
  4.  
  5. <div id = "demo" class = "thu gọn trong" > </div>
Đứng lên! Để thêm quản lý nhóm giống như đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu data-parent="#selector". Tham khảo bản demo để thấy điều này trong hoạt động.

Phương pháp

.collapse (tùy chọn)

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

  1. $ ( '#myCollapsible' ). sụp đổ ({
  2. chuyển đổi : false
  3. })

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

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

.collapse ('hiển thị')

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

.collapse ('ẩn')

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

Sự kiện

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

Biến cố Sự mô tả
buổi bieu diễn Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi.
cho xem Sự kiện này được kích hoạt khi một phần tử thu gọn được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
ẩn giấu Sự kiện này được kích hoạt ngay lập tức khi hidephương thức đã được gọi.
ẩn giấu Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi css hoàn tất).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // làm việc gì đó…
  3. })

Về

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

Tải tập tin

Thí dụ

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


Sử dụng bootstrap-typeahead.js

Gọi cho typeahead qua javascript:

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

Tùy chọn

Tên loại hình mặc định sự mô tả
nguồn mảng [] Nguồn dữ liệu để truy vấn.
mặt hàng con số số 8 Số lượng mục tối đa để hiển thị trong menu thả xuống.
người kết hợp hàm số trường hợp không nhạy cảm Phương pháp được sử dụng để xác định xem một truy vấn có khớp với một mục hay không. Chấp nhận một đối số duy nhất itemđể kiểm tra truy vấn. Truy cập truy vấn hiện tại với this.query. Trả về boolean truenếu truy vấn trùng khớp.
người sắp xếp hàm số đối sánh chính xác , phân biệt chữ hoa chữ thường
,
không phân biệt chữ hoa chữ thường
Phương pháp được sử dụng để sắp xếp kết quả tự động hoàn thành. Chấp nhận một đối số duy nhất itemsvà có phạm vi của ví dụ điển hình. Tham chiếu truy vấn hiện tại với this.query.
bút đánh dấu hàm số đánh dấu tất cả các kết quả phù hợp mặc định Phương pháp được sử dụng để đánh dấu kết quả tự động hoàn thành. Chấp nhận một đối số duy nhất itemvà có phạm vi của ví dụ điển hình. Nên trả về html.

Đánh dấu

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

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

Phương pháp

.typeahead (tùy chọn)

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