{"id":4741,"date":"2022-03-27T20:29:39","date_gmt":"2022-03-27T12:29:39","guid":{"rendered":"https:\/\/egonlin.com\/?p=4741"},"modified":"2022-04-26T14:21:07","modified_gmt":"2022-04-26T06:21:07","slug":"%e7%ac%ac%e5%9b%9b%e8%8a%82%ef%bc%9abootstrap%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4741","title":{"rendered":"\u7b2c\u56db\u8282\uff1aBootStrap\u63d2\u4ef6"},"content":{"rendered":"

Bootstrap\u63d2\u4ef6<\/h1>\n

1 BootStrap\u63d2\u4ef6\u4f7f\u7528\u89c4\u5219<\/h2>\n

1.1 \u5355\u4e2a\u5f15\u5165<\/h3>\n

JavaScript \u63d2\u4ef6\u53ef\u4ee5\u5355\u4e2a\u5f15\u5165\uff08\u4f7f\u7528 Bootstrap \u63d0\u4f9b\u7684\u5355\u4e2a\u00a0*.js<\/code>\u00a0\u6587\u4ef6\uff09\uff0c\u6216\u8005\u4e00\u6b21\u6027\u5168\u90e8\u5f15\u5165\uff08\u4f7f\u7528\u00a0bootstrap.js<\/code>\u00a0\u6216\u538b\u7f29\u7248\u7684\u00a0bootstrap.min.js<\/code>\uff09\u3002 <\/p>\n

\n

\u67d0\u4e9b\u63d2\u4ef6\u548c CSS \u7ec4\u4ef6\u4f9d\u8d56\u4e8e\u5176\u5b83\u63d2\u4ef6\u3002\u5982\u679c\u4f60\u662f\u5355\u4e2a\u5f15\u5165\u6bcf\u4e2a\u63d2\u4ef6\u7684\uff0c\u8bf7\u786e\u4fdd\u5728\u6587\u6863\u4e2d\u68c0\u67e5\u63d2\u4ef6\u4e4b\u95f4\u7684\u4f9d\u8d56\u5173\u7cfb\u3002\u6ce8\u610f\uff0c\u6240\u6709\u63d2\u4ef6\u90fd\u4f9d\u8d56 jQuery \uff08\u4e5f\u5c31\u662f\u8bf4\uff0cjQuery\u5fc5\u987b\u5728\u6240\u6709\u63d2\u4ef6\u4e4b\u524d<\/strong>\u5f15\u5165\u9875\u9762\uff09\u3002\u00a0bower.json<\/code><\/a>\u00a0\u6587\u4ef6\u4e2d\u5217\u51fa\u4e86 Bootstrap \u6240\u652f\u6301\u7684 jQuery \u7248\u672c\u3002<\/p>\n<\/blockquote>\n

1.2 data\u5c5e\u6027<\/h3>\n

\u4f60\u53ef\u4ee5\u4ec5\u4ec5\u901a\u8fc7 data \u5c5e\u6027 API \u5c31\u80fd\u4f7f\u7528\u6240\u6709\u7684 Bootstrap \u63d2\u4ef6\uff0c\u65e0\u9700\u5199\u4e00\u884c JavaScript \u4ee3\u7801\u3002\u8fd9\u662f Bootstrap \u4e2d\u7684\u4e00\u7b49 API\uff0c\u4e5f\u5e94\u8be5\u662f\u4f60\u7684\u9996\u9009\u65b9\u5f0f\u3002<\/p>\n

\u8bdd\u53c8\u8bf4\u56de\u6765\uff0c\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\u53ef\u80fd\u9700\u8981\u5c06\u6b64\u529f\u80fd\u5173\u95ed\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u8fd8\u63d0\u4f9b\u4e86\u5173\u95ed data \u5c5e\u6027 API \u7684\u65b9\u6cd5\uff0c\u5373\u89e3\u9664\u4ee5 data-api<\/code> \u4e3a\u547d\u540d\u7a7a\u95f4\u5e76\u7ed1\u5b9a\u5728\u6587\u6863\u4e0a\u7684\u4e8b\u4ef6\u3002\u5c31\u50cf\u4e0b\u9762\u8fd9\u6837\uff1a<\/p>\n

$(document).off('.data-api')<\/code><\/pre>\n
\u53e6\u5916\uff0c\u5982\u679c\u662f\u9488\u5bf9\u67d0\u4e2a\u7279\u5b9a\u7684\u63d2\u4ef6\uff0c\u53ea\u9700\u5728\u00a0data-api<\/code>\u00a0\u524d\u9762\u6dfb\u52a0\u90a3\u4e2a\u63d2\u4ef6\u7684\u540d\u79f0\u4f5c\u4e3a\u547d\u540d\u7a7a\u95f4\uff0c\u5982\u4e0b\uff1a<\/p>\n
$(document).off('.alert.data-api')<\/code><\/pre>\n
1.3 \u7f16\u7a0b\u65b9\u5f0f\u7684 API<\/h3>\n
\u6211\u4eec\u4e3a\u6240\u6709 Bootstrap \u63d2\u4ef6\u63d0\u4f9b\u4e86\u7eaf JavaScript \u65b9\u5f0f\u7684 API\u3002\u6240\u6709\u516c\u5f00\u7684 API \u90fd\u662f\u652f\u6301\u5355\u72ec\u6216\u94fe\u5f0f\u8c03\u7528\u65b9\u5f0f\uff0c\u5e76\u4e14\u8fd4\u56de\u5176\u6240\u64cd\u4f5c\u7684\u5143\u7d20\u96c6\u5408\uff08\u6ce8\uff1a\u548cjQuery\u7684\u8c03\u7528\u5f62\u5f0f\u4e00\u81f4\uff09\u3002<\/p>\n
$('.btn.danger').button('toggle').addClass('fat')<\/code><\/pre>\n
\u6240\u6709\u65b9\u6cd5\u90fd\u53ef\u4ee5\u63a5\u53d7\u4e00\u4e2a\u53ef\u9009\u7684 option \u5bf9\u8c61\u4f5c\u4e3a\u53c2\u6570\uff0c\u6216\u8005\u4e00\u4e2a\u4ee3\u8868\u7279\u5b9a\u65b9\u6cd5\u7684\u5b57\u7b26\u4e32\uff0c\u6216\u8005\u4ec0\u4e48\u4e5f\u4e0d\u63d0\u4f9b\uff08\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u63d2\u4ef6\u5c06\u4f1a\u4ee5\u9ed8\u8ba4\u503c\u521d\u59cb\u5316\uff09\uff1a<\/p>\n
$('#myModal').modal()                      \/\/ \u4ee5\u9ed8\u8ba4\u503c\u521d\u59cb\u5316\n$('#myModal').modal({ keyboard: false })   \/\/ initialized with no keyboard\n$('#myModal').modal('show')                \/\/ \u521d\u59cb\u5316\u540e\u7acb\u5373\u8c03\u7528 show \u65b9\u6cd5<\/code><\/pre>\n
\u6bcf\u4e2a\u63d2\u4ef6\u8fd8\u901a\u8fc7 Constructor<\/code> \u5c5e\u6027\u66b4\u9732\u4e86\u5176\u539f\u59cb\u7684\u6784\u9020\u51fd\u6570\uff1a$.fn.popover.Constructor<\/code>\u3002\u5982\u679c\u4f60\u60f3\u83b7\u53d6\u67d0\u4e2a\u63d2\u4ef6\u7684\u5b9e\u4f8b\uff0c\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7\u9875\u9762\u5143\u7d20\u83b7\u53d6\uff1a$('[rel="popover"]').data('popover')<\/code>\u3002<\/p>\n
\u9ed8\u8ba4\u8bbe\u7f6e<\/strong><\/p>\n
\u6bcf\u4e2a\u63d2\u4ef6\u90fd\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\u5176\u81ea\u8eab\u7684 Constructor.DEFAULTS<\/code> \u5bf9\u8c61\u4ece\u800c\u6539\u53d8\u63d2\u4ef6\u7684\u9ed8\u8ba4\u8bbe\u7f6e\uff1a<\/p>\n
$.fn.modal.Constructor.DEFAULTS.keyboard = false \/\/ \u5c06\u6a21\u6001\u6846\u63d2\u4ef6\u7684 `keyboard` \u9ed8\u8ba4\u9009\u53c2\u6570\u7f6e\u4e3a false<\/code><\/pre>\n
1.4 \u907f\u514d\u547d\u540d\u7a7a\u95f4\u51b2\u7a81<\/h3>\n
\u67d0\u4e9b\u65f6\u5019\u53ef\u80fd\u9700\u8981\u5c06 Bootstrap \u63d2\u4ef6\u4e0e\u5176\u4ed6 UI \u6846\u67b6\u5171\u540c\u4f7f\u7528\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u547d\u540d\u7a7a\u95f4\u51b2\u7a81\u968f\u65f6\u53ef\u80fd\u53d1\u751f\u3002\u5982\u679c\u4e0d\u5e78\u53d1\u751f\u4e86\u8fd9\u79cd\u60c5\u51b5\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528\u63d2\u4ef6\u7684 .noConflict<\/code> \u65b9\u6cd5\u6062\u590d\u5176\u539f\u59cb\u503c\u3002<\/p>\n
var bootstrapButton = $.fn.button.noConflict() \/\/ return $.fn.button to previously assigned value\n$.fn.bootstrapBtn = bootstrapButton            \/\/ give $().bootstrapBtn the Bootstrap functionality<\/code><\/pre>\n
1.5 \u4e8b\u4ef6<\/h3>\n
Bootstrap \u4e3a\u5927\u90e8\u5206\u63d2\u4ef6\u6240\u5177\u6709\u7684\u52a8\u4f5c\u63d0\u4f9b\u4e86\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\u4e00\u822c\u6765\u8bf4\uff0c\u8fd9\u4e9b\u4e8b\u4ef6\u90fd\u6709\u4e0d\u5b9a\u5f0f\u548c\u8fc7\u53bb\u5f0f\u4e24\u79cd\u52a8\u8bcd\u7684\u547d\u540d\u5f62\u5f0f\uff0c\u4f8b\u5982\uff0c\u4e0d\u5b9a\u5f0f\u5f62\u5f0f\u7684\u52a8\u8bcd\uff08\u4f8b\u5982 show<\/code>\uff09\u8868\u793a\u5176\u5728\u4e8b\u4ef6\u5f00\u59cb\u65f6\u88ab\u89e6\u53d1\uff1b\u800c\u8fc7\u53bb\u5f0f\u52a8\u8bcd\uff08\u4f8b\u5982 shown<\/code> \uff09\u8868\u793a\u5728\u52a8\u4f5c\u6267\u884c\u5b8c\u6bd5\u4e4b\u540e\u88ab\u89e6\u53d1\u3002<\/p>\n
\u4ece 3.0.0 \u7248\u672c\u5f00\u59cb\uff0c\u6240\u6709 Bootstrap \u4e8b\u4ef6\u7684\u540d\u79f0\u90fd\u91c7\u7528\u547d\u540d\u7a7a\u95f4\u65b9\u5f0f\u3002<\/p>\n
\u6240\u6709\u4ee5\u4e0d\u5b9a\u5f0f\u5f62\u5f0f\u7684\u52a8\u8bcd\u547d\u540d\u7684\u4e8b\u4ef6\u90fd\u63d0\u4f9b\u4e86 preventDefault<\/code> \u529f\u80fd\u3002\u8fd9\u5c31\u8d4b\u4e88\u4f60\u5728\u52a8\u4f5c\u5f00\u59cb\u6267\u884c\u524d\u5c06\u5176\u505c\u6b62\u7684\u80fd\u529b\u3002<\/p>\n
$('#myModal').on('show.bs.modal', function (e) {\n  if (!data) return e.preventDefault() \/\/ \u963b\u6b62\u6a21\u6001\u6846\u7684\u5c55\u793a\n})<\/code><\/pre>\n
1.6 \u7248\u672c\u53f7<\/h3>\n
\u6bcf\u4e2a Bootstrap \u7684 jQuery \u63d2\u4ef6\u7684\u7248\u672c\u53f7\u90fd\u53ef\u4ee5\u901a\u8fc7\u63d2\u4ef6\u7684\u6784\u9020\u51fd\u6570\u4e0a\u7684 VERSION<\/code> \u5c5e\u6027\u83b7\u53d6\u5230\u3002\u4f8b\u5982\u5de5\u5177\u63d0\u793a\u6846\uff08tooltip\uff09\u63d2\u4ef6\uff1a<\/p>\n
$.fn.tooltip.Constructor.VERSION \/\/ => "3.3.7"<\/code><\/pre>\n
2 \u8fc7\u6e21\u6548\u679c transition.js<\/h2>\n
2.1 \u5173\u4e8e\u8fc7\u6e21\u6548\u679c<\/h3>\n
\u5bf9\u4e8e\u7b80\u5355\u7684\u8fc7\u6e21\u6548\u679c\uff0c\u53ea\u9700\u5c06 transition.js<\/code> \u548c\u5176\u5b83 JS \u6587\u4ef6\u4e00\u8d77\u5f15\u5165\u5373\u53ef\u3002\u5982\u679c\u4f60\u4f7f\u7528\u7684\u662f\u7f16\u8bd1\uff08\u6216\u538b\u7f29\uff09\u7248\u7684 bootstrap.js<\/code> \u6587\u4ef6\uff0c\u5c31\u65e0\u9700\u518d\u5355\u72ec\u5c06\u5176\u5f15\u5165\u4e86\u3002<\/p>\n
2.3 \u5305\u542b\u7684\u5185\u5bb9<\/h3>\n
Transition.js \u662f\u9488\u5bf9 transitionEnd<\/code> \u4e8b\u4ef6\u7684\u4e00\u4e2a\u57fa\u672c\u8f85\u52a9\u5de5\u5177\uff0c\u4e5f\u662f\u5bf9 CSS \u8fc7\u6e21\u6548\u679c\u7684\u6a21\u62df\u3002\u5b83\u88ab\u5176\u5b83\u63d2\u4ef6\u7528\u6765\u68c0\u6d4b\u5f53\u524d\u6d4f\u89c8\u5668\u5bf9\u662f\u5426\u652f\u6301 CSS \u7684\u8fc7\u6e21\u6548\u679c\u3002<\/p>\n
2.4 \u7981\u7528\u8fc7\u5ea6\u6548\u679c<\/h3>\n
\u901a\u8fc7\u4e0b\u9762\u7684 JavaScript \u4ee3\u7801\u53ef\u4ee5\u5728\u5168\u5c40\u8303\u56f4\u7981\u7528\u8fc7\u6e21\u6548\u679c\uff0c\u5e76\u4e14\u5fc5\u987b\u5c06\u6b64\u4ee3\u7801\u653e\u5728 transition.js<\/code> \uff08\u6216 bootstrap.js<\/code> \u6216 bootstrap.min.js<\/code>\uff09\u540e\u9762\uff0c\u786e\u4fdd\u5728 js \u6587\u4ef6\u52a0\u8f7d\u5b8c\u6bd5\u540e\u518d\u6267\u884c\u4e0b\u9762\u7684\u4ee3\u7801\uff1a<\/p>\n
$.support.transition = false\n<\/code><\/pre>\n
3 \u6a21\u6001\u6846 modal.js<\/h2>\n
\n
\u52a1\u5fc5\u5c06\u6a21\u6001\u6846\u7684 HTML \u4ee3\u7801\u653e\u5728\u6587\u6863\u7684\u6700\u9ad8\u5c42\u7ea7\u5185\uff08\u4e5f\u5c31\u662f\u8bf4\uff0c\u5c3d\u91cf\u4f5c\u4e3a body \u6807\u7b7e\u7684\u76f4\u63a5\u5b50\u5143\u7d20\uff09\uff0c\u4ee5\u907f\u514d\u5176\u4ed6\u7ec4\u4ef6\u5f71\u54cd\u6a21\u6001\u6846\u7684\u5c55\u73b0\u548c\/\u6216\u529f\u80fd\u3002 <\/p>\n<\/blockquote>\n
3.1 \u6a21\u6001\u6846\u5b9a\u4e49<\/h3>\n
<!-- Modal -->\n<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\n  <div class="modal-dialog" role="document">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">\u00d7<\/span><\/button>\n        <h4 class="modal-title" id="myModalLabel">Modal title<\/h4>\n      <\/div>\n      <div class="modal-body">\n        ...\n      <\/div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-default" data-dismiss="modal">Close<\/button>\n        <button type="button" class="btn btn-primary">Save changes<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
3.2 \u6309\u94ae<\/h3>\n
<!-- Button trigger modal -->\n<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">\n  Launch demo modal\n<\/button>\n<\/code><\/pre>\n
3.3 \u6a21\u6001\u6846\u5c3a\u5bf8<\/h3>\n
<!-- Large modal -->\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal<\/button>\n\n<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">\n  <div class="modal-dialog modal-lg" role="document">\n    <div class="modal-content">\n      ...\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Small modal -->\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal<\/button>\n\n<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">\n  <div class="modal-dialog modal-sm" role="document">\n    <div class="modal-content">\n      ...\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
3.4 \u7981\u6b62\u52a8\u753b\u6548\u679c<\/h3>\n
\u5982\u679c\u4f60\u4e0d\u9700\u8981\u6a21\u6001\u6846\u5f39\u51fa\u65f6\u7684\u52a8\u753b\u6548\u679c\uff08\u6de1\u5165\u6de1\u51fa\u6548\u679c\uff09\uff0c\u5220\u6389 .fade<\/code> \u7c7b\u5373\u53ef\u3002<\/p>\n
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">\n  ...\n<\/div>\n<\/code><\/pre>\n
3.5 \u6a21\u6001\u6846\u4e2d\u4f7f\u7528\u6805\u683c\u7cfb\u7edf<\/h3>\n
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">\n  <div class="modal-dialog" role="document">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">\u00d7<\/span><\/button>\n        <h4 class="modal-title" id="gridSystemModalLabel">Modal title<\/h4>\n      <\/div>\n      <div class="modal-body">\n        <div class="row">\n          <div class="col-md-4">.col-md-4<\/div>\n          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4<\/div>\n        <\/div>\n        <div class="row">\n          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3<\/div>\n          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4<\/div>\n        <\/div>\n        <div class="row">\n          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3<\/div>\n        <\/div>\n        <div class="row">\n          <div class="col-sm-9">\n            Level 1: .col-sm-9\n            <div class="row">\n              <div class="col-xs-8 col-sm-6">\n                Level 2: .col-xs-8 .col-sm-6\n              <\/div>\n              <div class="col-xs-4 col-sm-6">\n                Level 2: .col-xs-4 .col-sm-6\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-default" data-dismiss="modal">Close<\/button>\n        <button type="button" class="btn btn-primary">Save changes<\/button>\n      <\/div>\n    <\/div><!-- \/.modal-content -->\n  <\/div><!-- \/.modal-dialog -->\n<\/div><!-- \/.modal -->\n<\/code><\/pre>\n
3.6 \u57fa\u4e8e\u89e6\u53d1\u5668\u6309\u94ae\u7684\u4e0d\u540c\u6a21\u6001\u5185\u5bb9<\/h3>\n
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo<\/button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat<\/button>\n<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap<\/button>\n...more buttons...\n\n<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">\n  <div class="modal-dialog" role="document">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">\u00d7<\/span><\/button>\n        <h4 class="modal-title" id="exampleModalLabel">New message<\/h4>\n      <\/div>\n      <div class="modal-body">\n        <form>\n          <div class="form-group">\n            <label for="recipient-name" class="control-label">Recipient:<\/label>\n            <input type="text" class="form-control" id="recipient-name">\n          <\/div>\n          <div class="form-group">\n            <label for="message-text" class="control-label">Message:<\/label>\n            <textarea class="form-control" id="message-text"><\/textarea>\n          <\/div>\n        <\/form>\n      <\/div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-default" data-dismiss="modal">Close<\/button>\n        <button type="button" class="btn btn-primary">Send message<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
$('#exampleModal').on('show.bs.modal', function (event) {\n  var button = $(event.relatedTarget) \/\/ Button that triggered the modal\n  var recipient = button.data('whatever') \/\/ Extract info from data-* attributes\n  \/\/ If necessary, you could initiate an AJAX request here (and then do the updating in a callback).\n  \/\/ Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.\n  var modal = $(this)\n  modal.find('.modal-title').text('New message to ' + recipient)\n  modal.find('.modal-body input').val(recipient)\n})\n<\/code><\/pre>\n
3.7 \u901a\u8fc7JavaScript\u5904\u7406\u6a21\u6001\u6846<\/h3>\n
\u6253\u5f00<\/h4>\n
$('#myModal').modal(options)\n<\/code><\/pre>\n
\u53c2\u6570<\/h4>\n\n\n\n\n\n\n\n\n
\u540d\u79f0<\/th>\n\u7c7b\u578b<\/th>\n\u9ed8\u8ba4\u503c<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
backdrop<\/td>\nboolean \u6216 \u5b57\u7b26\u4e32 'static'<\/code><\/td>\ntrue<\/td>\nI\u6307\u5b9a\u4e00\u4e2a\u9759\u6001\u7684\u80cc\u666f\uff0c\u5f53\u7528\u6237\u70b9\u51fb\u6a21\u6001\u6846\u5916\u90e8\u65f6\u4e0d\u4f1a\u5173\u95ed\u6a21\u6001\u6846\u3002<\/td>\n<\/tr>\n
keyboard<\/td>\nboolean<\/td>\ntrue<\/td>\n\u952e\u76d8\u4e0a\u7684 esc \u952e\u88ab\u6309\u4e0b\u65f6\u5173\u95ed\u6a21\u6001\u6846\u3002<\/td>\n<\/tr>\n
show<\/td>\nboolean<\/td>\ntrue<\/td>\n\u6a21\u6001\u6846\u521d\u59cb\u5316\u4e4b\u540e\u5c31\u7acb\u5373\u663e\u793a\u51fa\u6765\u3002<\/td>\n<\/tr>\n
remote<\/td>\npath<\/td>\nfalse<\/td>\nThis option is deprecated since v3.3.0 and has been removed in v4.<\/strong> We recommend instead using client-side templating or a data binding framework, or calling jQuery.load<\/a>yourself.\u5982\u679c\u63d0\u4f9b\u7684\u662f URL\uff0c\u5c06\u5229\u7528 jQuery \u7684 load<\/code> \u65b9\u6cd5\u4ece\u6b64 URL \u5730\u5740\u52a0\u8f7d\u8981\u5c55\u793a\u7684\u5185\u5bb9\uff08\u53ea\u52a0\u8f7d\u4e00\u6b21\uff09<\/strong>\u5e76\u63d2\u5165 .modal-content<\/code> \u5185\u3002\u5982\u679c\u4f7f\u7528\u7684\u662f data \u5c5e\u6027 API\uff0c\u8fd8\u53ef\u4ee5\u5229\u7528 href<\/code> \u5c5e\u6027\u6307\u5b9a\u5185\u5bb9\u6765\u6e90\u5730\u5740\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u5b9e\u4f8b\uff1a<a data-toggle="modal" href="remote.html" data-target="#modal">Click me<\/a><\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u65b9\u6cd5<\/h4>\n
.modal(options)<\/code><\/strong><\/p>\n
\u5c06\u9875\u9762\u4e2d\u7684\u67d0\u5757\u5185\u5bb9\u4f5c\u4e3a\u6a21\u6001\u6846\u6fc0\u6d3b\u3002\u63a5\u53d7\u53ef\u9009\u53c2\u6570 object<\/code>\u3002<\/p>\n
$('#myModal').modal({\n  keyboard: false\n})\n<\/code><\/pre>\n
.modal('toggle')<\/code><\/strong><\/p>\n
\u624b\u52a8\u6253\u5f00\u6216\u5173\u95ed\u6a21\u6001\u6846\u3002\u5728\u6a21\u6001\u6846\u663e\u793a\u6216\u9690\u85cf\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d<\/strong>\uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 shown.bs.modal<\/code> \u6216 hidden.bs.modal<\/code> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n
$('#myModal').modal('toggle')\n<\/code><\/pre>\n
.modal('show')<\/code><\/strong><\/p>\n
\u624b\u52a8\u6253\u5f00\u6a21\u6001\u6846\u3002\u5728\u6a21\u6001\u6846\u663e\u793a\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d<\/strong> \uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 shown.bs.modal<\/code> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n
$('#myModal').modal('show')<\/code><\/pre>\n
.modal('hide')<\/code><\/strong><\/p>\n
\u624b\u52a8\u9690\u85cf\u6a21\u6001\u6846\u3002\u5728\u6a21\u6001\u6846\u9690\u85cf\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d<\/strong> \uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 hidden.bs.modal<\/code> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n
$('#myModal').modal('hide')<\/code><\/pre>\n
.modal('handleUpdate')<\/code><\/strong><\/p>\n
\u6574\u6a21\u6001\u7684\u5b9a\u4f4d\uff0c\u4ee5\u5bf9\u6297\u6eda\u52a8\u6761\uff0c\u4ee5\u9632\u51fa\u73b0\u4e00\u4e2a\u6a21\u5f0f\uff0c\u8fd9\u4f1a\u4f7f\u6a21\u6001\u5411\u5de6\u8df3<\/p>\n
\u53ea\u9700\u8981\u5f53\u6a21\u6001\u7684\u9ad8\u5ea6\u5728\u6253\u5f00\u65f6\u6539\u53d8\u3002<\/p>\n
$('#myModal').modal('handleUpdate')<\/code><\/pre>\n
\u4e8b\u4ef6<\/h4>\n
Bootstrap \u7684\u6a21\u6001\u6846\u7c7b\u63d0\u4f9b\u4e86\u4e00\u4e9b\u4e8b\u4ef6\u7528\u4e8e\u76d1\u542c\u5e76\u6267\u884c\u4f60\u81ea\u5df1\u7684\u4ee3\u7801\u3002<\/p>\n\n\n\n\n\n\n\n\n\n
\u4e8b\u4ef6\u7c7b\u578b<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
show.bs.modal<\/td>\nshow<\/code> \u65b9\u6cd5\u8c03\u7528\u4e4b\u540e\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002\u5982\u679c\u662f\u901a\u8fc7\u70b9\u51fb\u67d0\u4e2a\u4f5c\u4e3a\u89e6\u53d1\u5668\u7684\u5143\u7d20\uff0c\u5219\u6b64\u5143\u7d20\u53ef\u4ee5\u901a\u8fc7\u4e8b\u4ef6\u7684 relatedTarget<\/code> \u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u3002<\/td>\n<\/tr>\n
shown.bs.modal<\/td>\n\u6b64\u4e8b\u4ef6\u5728\u6a21\u6001\u6846\u5df2\u7ecf\u663e\u793a\u51fa\u6765\uff08\u5e76\u4e14\u540c\u65f6\u5728 CSS \u8fc7\u6e21\u6548\u679c\u5b8c\u6210\uff09\u4e4b\u540e\u88ab\u89e6\u53d1\u3002\u5982\u679c\u662f\u901a\u8fc7\u70b9\u51fb\u67d0\u4e2a\u4f5c\u4e3a\u89e6\u53d1\u5668\u7684\u5143\u7d20\uff0c\u5219\u6b64\u5143\u7d20\u53ef\u4ee5\u901a\u8fc7\u4e8b\u4ef6\u7684 relatedTarget<\/code> \u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u3002<\/td>\n<\/tr>\n
hide.bs.modal<\/td>\nhide<\/code> \u65b9\u6cd5\u8c03\u7528\u4e4b\u540e\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n
hidden.bs.modal<\/td>\n\u6b64\u4e8b\u4ef6\u5728\u6a21\u6001\u6846\u88ab\u9690\u85cf\uff08\u5e76\u4e14\u540c\u65f6\u5728 CSS \u8fc7\u6e21\u6548\u679c\u5b8c\u6210\uff09\u4e4b\u540e\u88ab\u89e6\u53d1\u3002<\/td>\n<\/tr>\n
loaded.bs.modal<\/td>\n\u4ece\u8fdc\u7aef\u7684\u6570\u636e\u6e90<\/code>\u52a0\u8f7d\u5b8c\u6570\u636e\u4e4b\u540e\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('#myModal').on('hidden.bs.modal', function (e) {\n  \/\/ do something...\n})<\/code><\/pre>\n
4 \u4e0b\u62c9\u83dc\u5355 dropdown.js<\/h2>\n
4.1 JavaScript\u8c03\u7528<\/h3>\n
$('.dropdown-toggle').dropdown()<\/code><\/pre>\n
\u65b9\u6cd5<\/h4>\n
$().dropdown('toggle')<\/code><\/strong><\/p>\n
Toggles the dropdown menu of a given navbar or tabbed navigation.<\/p>\n
\u4e8b\u4ef6<\/h4>\n\n\n\n\n\n\n\n\n
Event Type<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
show.bs.dropdown<\/td>\nThis event fires immediately when the show instance method is called.<\/td>\n<\/tr>\n
shown.bs.dropdown<\/td>\nThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).<\/td>\n<\/tr>\n
hide.bs.dropdown<\/td>\nThis event is fired immediately when the hide instance method has been called.<\/td>\n<\/tr>\n
hidden.bs.dropdown<\/td>\nThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('#myDropdown').on('show.bs.dropdown', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n
5 \u6eda\u52a8\u76d1\u542c scrollspy.js<\/h2>\n
\u6eda\u52a8\u76d1\u542c\u63d2\u4ef6\u662f\u7528\u6765\u6839\u636e\u6eda\u52a8\u6761\u6240\u5904\u7684\u4f4d\u7f6e\u6765\u81ea\u52a8\u66f4\u65b0\u5bfc\u822a\u9879\u7684\u3002\u6eda\u52a8\u5bfc\u822a\u6761\u4e0b\u9762\u7684\u533a\u57df\u5e76\u5173\u6ce8\u5bfc\u822a\u9879\u7684\u53d8\u5316\u3002\u4e0b\u62c9\u83dc\u5355\u4e2d\u7684\u6761\u76ee\u4e5f\u4f1a\u81ea\u52a8\u9ad8\u4eae\u663e\u793a\u3002<\/p>\n
\n
\u4f9d\u8d56 Bootstrap \u7684\u5bfc\u822a\u7ec4\u4ef6<\/p>\n
\u6eda\u52a8\u76d1\u542c\u63d2\u4ef6\u4f9d\u8d56 Bootstrap \u7684\u5bfc\u822a\u7ec4\u4ef6\u7528\u4e8e\u9ad8\u4eae\u663e\u793a\u5f53\u524d\u6fc0\u6d3b\u7684\u94fe\u63a5\u3002<\/p>\n
\u65e0\u8bba\u4f55\u79cd\u5b9e\u73b0\u65b9\u5f0f\uff0c\u6eda\u52a8\u76d1\u542c\u90fd\u9700\u8981\u88ab\u76d1\u542c\u7684\u7ec4\u4ef6\u662f\u00a0position: relative;<\/code>\u00a0\u5373\u76f8\u5bf9\u5b9a\u4f4d\u65b9\u5f0f\u3002\u5927\u591a\u6570\u65f6\u5019\u662f\u76d1\u542c\u00a0<body><\/code>\u00a0\u5143\u7d20<\/p>\n<\/blockquote>\n
5.1 \u57fa\u672c\u8c03\u7528<\/h3>\n
body {\n  position: relative;\n}<\/code><\/pre>\n
<body data-spy="scroll" data-target="#navbar-example">\n  ...\n  <div id="navbar-example">\n    <ul class="nav nav-tabs" role="tablist">\n      ...\n    <\/ul>\n  <\/div>\n  ...\n<\/body><\/code><\/pre>\n
5.2 JavaScript\u8c03\u7528<\/h3>\n
$('body').scrollspy({ target: '#navbar-example' })<\/code><\/pre>\n
\u65b9\u6cd5<\/h4>\n
.scrollspy('refresh')<\/code><\/strong><\/p>\n
\u5f53\u4f7f\u7528\u6eda\u52a8\u76d1\u542c\u63d2\u4ef6\u7684\u540c\u65f6\u5728 DOM \u4e2d\u6dfb\u52a0\u6216\u5220\u9664\u5143\u7d20\u540e\uff0c\u4f60\u9700\u8981\u50cf\u4e0b\u9762\u8fd9\u6837\u8c03\u7528\u6b64\u5237\u65b0\uff08 refresh\uff09 \u65b9\u6cd5\uff1a<\/p>\n
$('[data-spy="scroll"]').each(function () {\n  var $spy = $(this).scrollspy('refresh')\n})<\/code><\/pre>\n
\u53c2\u6570<\/h4>\n
\u53ef\u4ee5\u901a\u8fc7 data \u5c5e\u6027\u6216 JavaScript \u4f20\u9012\u53c2\u6570\u3002\u5bf9\u4e8e data \u5c5e\u6027\uff0c\u5176\u540d\u79f0\u662f\u5c06\u53c2\u6570\u540d\u9644\u7740\u5230 data-<\/code> \u540e\u9762\u7ec4\u6210\uff0c\u4f8b\u5982 data-offset=""<\/code>\u3002<\/p>\n\n\n\n\n\n
\u540d\u79f0<\/th>\n\u7c7b\u578b<\/th>\n\u9ed8\u8ba4\u503c<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
offset<\/td>\nnumber<\/td>\n10<\/td>\n\u8ba1\u7b97\u6eda\u52a8\u4f4d\u7f6e\u65f6\u76f8\u5bf9\u4e8e\u9876\u90e8\u7684\u504f\u79fb\u91cf\uff08\u50cf\u7d20\u6570\uff09\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4e8b\u4ef6<\/h4>\n\n\n\n\n\n
\u4e8b\u4ef6\u7c7b\u578b<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
activate.bs.scrollspy<\/td>\n\u6bcf\u5f53\u4e00\u4e2a\u65b0\u6761\u76ee\u88ab\u6fc0\u6d3b\u540e\u90fd\u5c06\u7531\u6eda\u52a8\u76d1\u542c\u63d2\u4ef6\u89e6\u53d1\u6b64\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('#myScrollspy').on('activate.bs.scrollspy', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n
6 \u6807\u7b7e\u9875  tab.js<\/h2>\n
6.1 \u57fa\u672c\u4f7f\u7528<\/h3>\n
<div>\n\n  <!-- Nav tabs -->\n  <ul class="nav nav-tabs" role="tablist">\n    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home<\/a><\/li>\n    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile<\/a><\/li>\n    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages<\/a><\/li>\n    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings<\/a><\/li>\n  <\/ul>\n\n  <!-- Tab panes -->\n  <div class="tab-content">\n    <div role="tabpanel" class="tab-pane active" id="home">...<\/div>\n    <div role="tabpanel" class="tab-pane" id="profile">...<\/div>\n    <div role="tabpanel" class="tab-pane" id="messages">...<\/div>\n    <div role="tabpanel" class="tab-pane" id="settings">...<\/div>\n  <\/div>\n\n<\/div><\/code><\/pre>\n
6.2 Fade\u7279\u6548<\/h3>\n
<div class="tab-content">\n  <div role="tabpanel" class="tab-pane fade in active" id="home">...<\/div>\n  <div role="tabpanel" class="tab-pane fade" id="profile">...<\/div>\n  <div role="tabpanel" class="tab-pane fade" id="messages">...<\/div>\n  <div role="tabpanel" class="tab-pane fade" id="settings">...<\/div>\n<\/div><\/code><\/pre>\n
6.3 JavaScript\u8c03\u7528<\/h3>\n
$('#myTabs a').click(function (e) {\n  e.preventDefault()\n  $(this).tab('show')\n})<\/code><\/pre>\n
$('#myTabs a[href="#profile"]').tab('show') \/\/ Select tab by name\n$('#myTabs a:first').tab('show') \/\/ Select first tab\n$('#myTabs a:last').tab('show') \/\/ Select last tab\n$('#myTabs li:eq(2) a').tab('show') \/\/ Select third tab (0-indexed)<\/code><\/pre>\n
\u65b9\u6cd5<\/h4>\n
$().tab<\/code><\/strong><\/p>\n
\u8be5\u65b9\u6cd5\u53ef\u4ee5\u6fc0\u6d3b\u6807\u7b7e\u9875\u5143\u7d20\u548c\u5185\u5bb9\u5bb9\u5668\u3002\u6807\u7b7e\u9875\u9700\u8981\u7528\u4e00\u4e2a\u00a0data-target<\/strong>\u00a0\u6216\u8005\u4e00\u4e2a\u6307\u5411 DOM \u4e2d\u5bb9\u5668\u8282\u70b9\u7684\u00a0href<\/strong>\u3002<\/p>\n
.tab('show')<\/code><\/strong><\/p>\n
Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. Returns to the caller before the tab pane has actually been shown<\/strong> (i.e. before the shown.bs.tab<\/code>event occurs).<\/p>\n
$('#someTab').tab('show')<\/code><\/pre>\n
\u4e8b\u4ef6<\/h4>\n\n\n\n\n\n\n
\u4e8b\u4ef6<\/th>\n\u63cf\u8ff0<\/th>\n\u5b9e\u4f8b<\/th>\n<\/tr>\n<\/thead>\n
show.bs.tab<\/td>\n\u8be5\u4e8b\u4ef6\u5728\u6807\u7b7e\u9875\u663e\u793a\u65f6\u89e6\u53d1\uff0c\u4f46\u662f\u5fc5\u987b\u5728\u65b0\u6807\u7b7e\u9875\u88ab\u663e\u793a\u4e4b\u524d\u3002\u5206\u522b\u4f7f\u7528 event.target<\/strong> \u548c event.relatedTarget<\/strong> \u6765\u5b9a\u4f4d\u5230\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u548c\u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u3002<\/td>\n$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {   e.target \/\/ \u6fc0\u6d3b\u7684\u6807\u7b7e\u9875   e.relatedTarget \/\/ \u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875 })<\/code><\/td>\n<\/tr>\n
shown.bs.tab<\/td>\n\u8be5\u4e8b\u4ef6\u5728\u6807\u7b7e\u9875\u663e\u793a\u65f6\u89e6\u53d1\uff0c\u4f46\u662f\u5fc5\u987b\u5728\u67d0\u4e2a\u6807\u7b7e\u9875\u5df2\u7ecf\u663e\u793a\u4e4b\u540e\u3002\u5206\u522b\u4f7f\u7528 event.target<\/strong> \u548c event.relatedTarget<\/strong> \u6765\u5b9a\u4f4d\u5230\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u548c\u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u3002<\/td>\n$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   e.target \/\/ \u6fc0\u6d3b\u7684\u6807\u7b7e\u9875   e.relatedTarget \/\/ \u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875 })<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {\n  e.target \/\/ newly activated tab\n  e.relatedTarget \/\/ previous active tab\n})<\/code><\/pre>\n
7 \u5de5\u5177\u63d0\u793a tooltips.js<\/h2>\n
7.1 \u57fa\u672c\u4f7f\u7528<\/h3>\n
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left<\/button>\n\n<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top<\/button>\n\n<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom<\/button>\n\n<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right<\/button><\/code><\/pre>\n
7.2 JavaScript\u8c03\u7528<\/h3>\n
$('#example').tooltip(options)<\/code><\/pre>\n
\u53c2\u6570<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n
\u9009\u9879\u540d\u79f0<\/th>\n\u7c7b\u578b\/\u9ed8\u8ba4\u503c<\/th>\nData \u5c5e\u6027\u540d\u79f0<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
animation<\/td>\nboolean \u9ed8\u8ba4\u503c\uff1atrue<\/em><\/td>\ndata-animation<\/td>\n\u63d0\u793a\u5de5\u5177\u4f7f\u7528 CSS \u6e10\u53d8\u6ee4\u955c\u6548\u679c\u3002<\/td>\n<\/tr>\n
html<\/td>\nboolean \u9ed8\u8ba4\u503c\uff1afalse<\/em><\/td>\ndata-html<\/td>\n\u5411\u63d0\u793a\u5de5\u5177\u63d2\u5165 HTML\u3002\u5982\u679c\u4e3a false\uff0cjQuery \u7684 text \u65b9\u6cd5\u5c06\u88ab\u7528\u4e8e\u5411 dom \u63d2\u5165\u5185\u5bb9\u3002\u5982\u679c\u60a8\u62c5\u5fc3 XSS \u653b\u51fb\uff0c\u8bf7\u4f7f\u7528 text\u3002<\/td>\n<\/tr>\n
placement<\/td>\nstring|function \u9ed8\u8ba4\u503c\uff1atop<\/em><\/td>\ndata-placement<\/td>\n\u89c4\u5b9a\u5982\u4f55\u5b9a\u4f4d\u63d0\u793a\u5de5\u5177\uff08\u5373 top|bottom|left|right|auto\uff09\u3002 \u5f53\u6307\u5b9a\u4e3a auto<\/em> \u65f6\uff0c\u4f1a\u52a8\u6001\u8c03\u6574\u63d0\u793a\u5de5\u5177\u3002\u4f8b\u5982\uff0c\u5982\u679c placement \u662f "auto left"\uff0c\u63d0\u793a\u5de5\u5177\u5c06\u4f1a\u5c3d\u53ef\u80fd\u663e\u793a\u5728\u5de6\u8fb9\uff0c\u5728\u60c5\u51b5\u4e0d\u5141\u8bb8\u7684\u60c5\u51b5\u4e0b\u5b83\u624d\u4f1a\u663e\u793a\u5728\u53f3\u8fb9\u3002<\/td>\n<\/tr>\n
selector<\/td>\nstring \u9ed8\u8ba4\u503c\uff1afalse<\/em><\/td>\ndata-selector<\/td>\n\u5982\u679c\u63d0\u4f9b\u4e86\u4e00\u4e2a\u9009\u62e9\u5668\uff0c\u63d0\u793a\u5de5\u5177\u5bf9\u8c61\u5c06\u88ab\u59d4\u6d3e\u5230\u6307\u5b9a\u7684\u76ee\u6807\u3002<\/td>\n<\/tr>\n
title<\/td>\nstring | function \u9ed8\u8ba4\u503c\uff1a”<\/em><\/td>\ndata-title<\/td>\n\u5982\u679c\u672a\u6307\u5b9a title<\/em> \u5c5e\u6027\uff0c\u5219 title \u9009\u9879\u662f\u9ed8\u8ba4\u7684 title \u503c\u3002<\/td>\n<\/tr>\n
trigger<\/td>\nstring \u9ed8\u8ba4\u503c\uff1a’hover focus’<\/em><\/td>\ndata-trigger<\/td>\n\u5b9a\u4e49\u5982\u4f55\u89e6\u53d1\u63d0\u793a\u5de5\u5177\uff1a click| hover | focus | manual<\/strong>\u3002\u60a8\u53ef\u4ee5\u4f20\u9012\u591a\u4e2a\u89e6\u53d1\u5668\uff0c\u6bcf\u4e2a\u89e6\u53d1\u5668\u4e4b\u95f4\u7528\u7a7a\u683c\u5206\u9694\u3002<\/td>\n<\/tr>\n
delay<\/td>\nnumber | object \u9ed8\u8ba4\u503c\uff1a0<\/em><\/td>\ndata-delay<\/td>\n\u5ef6\u8fdf\u663e\u793a\u548c\u9690\u85cf\u63d0\u793a\u5de5\u5177\u7684\u6beb\u79d2\u6570 – \u5bf9 manual \u624b\u52a8\u89e6\u53d1\u7c7b\u578b\u4e0d\u9002\u7528\u3002\u5982\u679c\u63d0\u4f9b\u7684\u662f\u4e00\u4e2a\u6570\u5b57\uff0c\u90a3\u4e48\u5ef6\u8fdf\u5c06\u4f1a\u5e94\u7528\u4e8e\u663e\u793a\u548c\u9690\u85cf\u3002\u5982\u679c\u63d0\u4f9b\u7684\u662f\u5bf9\u8c61\uff0c\u7ed3\u6784\u5982\u4e0b\u6240\u793a\uff1adelay: { show: 500, hide: 100 }<\/code><\/td>\n<\/tr>\n
container<\/td>\nstring | false \u9ed8\u8ba4\u503c\uff1afalse<\/em><\/td>\ndata-container<\/td>\n\u5411\u6307\u5b9a\u5143\u7d20\u8ffd\u52a0\u63d0\u793a\u5de5\u5177\u3002 \u5b9e\u4f8b\uff1a container: ‘body’<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u65b9\u6cd5<\/h4>\n\n\n\n\n\n\n\n\n\n
\u65b9\u6cd5<\/th>\n\u63cf\u8ff0<\/th>\n\u5b9e\u4f8b<\/th>\n<\/tr>\n<\/thead>\n
Options:<\/strong> .tooltip(options)<\/td>\n\u5411\u5143\u7d20\u96c6\u5408\u9644\u52a0\u63d0\u793a\u5de5\u5177\u53e5\u67c4\u3002<\/td>\n$().tooltip(options)<\/code><\/td>\n<\/tr>\n
Toggle:<\/strong> .tooltip(‘toggle’)<\/td>\n\u5207\u6362\u663e\u793a\/\u9690\u85cf\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n$('#element').tooltip('toggle')<\/code><\/td>\n<\/tr>\n
Show:<\/strong> .tooltip(‘show’)<\/td>\n\u663e\u793a\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n$('#element').tooltip('show')<\/code><\/td>\n<\/tr>\n
Hide:<\/strong> .tooltip(‘hide’)<\/td>\n\u9690\u85cf\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n$('#element').tooltip('hide')<\/code><\/td>\n<\/tr>\n
Destroy:<\/strong> .tooltip(‘destroy’)<\/td>\n\u9690\u85cf\u5e76\u9500\u6bc1\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n$('#element').tooltip('destroy')<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('#element').tooltip('destroy')<\/code><\/pre>\n
\u4e8b\u4ef6<\/h4>\n\n\n\n\n\n\n\n\n
\u4e8b\u4ef6<\/th>\n\u63cf\u8ff0<\/th>\n\u5b9e\u4f8b<\/th>\n<\/tr>\n<\/thead>\n
show.bs.tooltip<\/td>\n\u5f53\u8c03\u7528 show \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n$('#myTooltip').on('show.bs.tooltip', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/code><\/td>\n<\/tr>\n
shown.bs.tooltip<\/td>\n\u5f53\u63d0\u793a\u5de5\u5177\u5bf9\u7528\u6237\u53ef\u89c1\u65f6\u89e6\u53d1\u8be5\u4e8b\u4ef6\uff08\u5c06\u7b49\u5f85 CSS \u8fc7\u6e21\u6548\u679c\u5b8c\u6210\uff09\u3002<\/td>\n$('#myTooltip').on('shown.bs.tooltip', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/code><\/td>\n<\/tr>\n
hide.bs.tooltip<\/td>\n\u5f53\u8c03\u7528 hide \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n$('#myTooltip').on('hide.bs.tooltip', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/code><\/td>\n<\/tr>\n
hidden.bs.tooltip<\/td>\n\u5f53\u63d0\u793a\u5de5\u5177\u5bf9\u7528\u6237\u9690\u85cf\u65f6\u89e6\u53d1\u8be5\u4e8b\u4ef6\uff08\u5c06\u7b49\u5f85 CSS \u8fc7\u6e21\u6548\u679c\u5b8c\u6210\uff09\u3002<\/td>\n$('#myTooltip').on('hidden.bs.tooltip', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
$('#myTooltip').on('hidden.bs.tooltip', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n
8 \u5f39\u51fa\u6846 popover.js<\/h2>\n
<\/div>
\u67e5\u770b\u66f4\u591a<\/h2>
\u8054\u7cfb\u7ba1\u7406\u5458\u5fae\u4fe1tutu19192010\uff0c\u6ce8\u518c\u8d26\u53f7<\/p>\n<\/div>
<\/div>
<\/td><\/tr>
<\/td><\/tr><\/tbody><\/table>
<\/td><\/tr><\/tbody><\/table><\/form>
Register<\/a><\/div>
Forgotten username or password?<\/a><\/div>
<\/div><\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
Bootstrap\u63d2\u4ef6 1 BootStrap\u63d2\u4ef6\u4f7f\u7528\u89c4\u5219 1.1 \u5355\u4e2a\u5f15\u5165 JavaScript \u63d2\u4ef6\u53ef\u4ee5\u5355 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[361,363],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4741"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4741"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4741\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}