$\"\"$ <\/div><\/p>\n
BootStrap \u7531Twitter\u7684\u8bbe\u8ba1\u5e08Mark Otto\u548cJacob Thornton\u5408\u4f5c\u5f00\u53d1\uff0c\u662f\u4e00\u4e2a\u7b80\u6d01\u3001\u76f4\u89c2\u3001\u5f3a\u608d\u7684CSS\/HTML\u524d\u7aef\u5f00\u53d1\u6846\u67b6\uff0c\u8ba9web\u5f00\u53d1\u66f4\u8fc5\u901f\u3001\u7b80\u5355\u3002<\/p>\n
\u4f7f\u7528BootStrap \u53ef\u4ee5\u5c06\u5b83\u9884\u5148\u4e0b\u8f7d\u5230\u7535\u8111\u4e0a\u5e76\u653e\u5165\u9759\u6001\u6587\u4ef6\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u76f4\u63a5\u5728HTML\u6587\u4ef6\u91cc\u5bfc\u5165cdn\u94fe\u63a5\u8fdb\u884c\u4f7f\u7528\uff0ccdn\u94fe\u63a5\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u5404\u79cd\u641c\u7d20\u54e6\u5f15\u64ce\u8f7b\u677e\u83b7\u5f97\u3002<\/p>\n
\u4e00\u3001Bootstrap\u5e03\u5c40<\/h2>\n

1\u3001\u6982\u89c8<\/h3>\n

1.\u79fb\u52a8\u8bbe\u5907\u4f18\u5148<\/h4>\n
\u4e3a\u4e86\u786e\u4fdd\u9002\u5f53\u7684\u7ed8\u5236\u548c\u89e6\u5c4f\u7f29\u653e\uff0c\u9700\u8981\u5728 \u4e4b\u4e2d*\u6dfb\u52a0 viewport \u5143\u6570\u636e\u6807\u7b7e*<\/em><\/strong>\u3002<\/p>\n
<meta name="viewport" content="width=device-width, initial-scale=1"><\/code><\/pre>\n\u5728\u79fb\u52a8\u8bbe\u5907\u6d4f\u89c8\u5668\u4e0a\uff0c\u901a\u8fc7\u4e3a\u89c6\u53e3\uff08viewport\uff09\u8bbe\u7f6e meta \u5c5e\u6027\u4e3a user-scalable=no \u53ef\u4ee5\u7981\u7528\u5176\u7f29\u653e\uff08zooming\uff09\u529f\u80fd\u3002\u8fd9\u6837\u7981\u7528\u7f29\u653e\u529f\u80fd\u540e\uff0c\u7528\u6237\u53ea\u80fd\u6eda\u52a8\u5c4f\u5e55\uff0c\u5c31\u80fd\u8ba9\u4f60\u7684\u7f51\u7ad9\u770b\u4e0a\u53bb\u66f4\u50cf\u539f\u751f\u5e94\u7528\u7684\u611f\u89c9\u3002\u6ce8\u610f\uff0c\u8fd9\u79cd\u65b9\u5f0f\u6211\u4eec\u5e76\u4e0d\u63a8\u8350\u6240\u6709\u7f51\u7ad9\u4f7f\u7528\uff0c\u8fd8\u662f\u8981\u770b\u4f60\u81ea\u5df1\u7684\u60c5\u51b5\u800c\u5b9a\uff01<\/p>\n
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><\/code><\/pre>\n2.Normalize.css<\/h4>\nBootStrap\u5185\u7f6e\u4e86Normalize.css<\/p>\n
3.\u5e03\u5c40\u5bb9\u5668<\/h4>\nBootstrap \u9700\u8981\u4e3a\u9875\u9762\u5185\u5bb9\u548c\u6805\u683c\u7cfb\u7edf\u5305\u88f9\u4e00\u4e2a .container \u5bb9\u5668\u3002\u6211\u4eec\u63d0\u4f9b\u4e86\u4e24\u4e2a\u4f5c\u6b64\u7528\u5904\u7684\u7c7b\u3002\u6ce8\u610f\uff0c\u7531\u4e8e padding \u7b49\u5c5e\u6027\u7684\u539f\u56e0\uff0c\u8fd9\u4e24\u79cd \u5bb9\u5668\u7c7b\u4e0d\u80fd\u4e92\u76f8\u5d4c\u5957\u3002<\/p>\n
.container \u7c7b\u7528\u4e8e\u56fa\u5b9a\u5bbd\u5ea6\u5e76\u652f\u6301\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u5bb9\u5668\u3002<\/p>\n
<div class="container">\n...\n<\/div><\/code><\/pre>\n.container-fluid \u7c7b\u7528\u4e8e 100% \u5bbd\u5ea6\uff0c\u5360\u636e\u5168\u90e8\u89c6\u53e3\uff08viewport\uff09\u7684\u5bb9\u5668\u3002<\/p>\n
<div class="container-fluid">\n...\n<\/div><\/code><\/pre>\n2\u3001\u6805\u683c\u7cfb\u7edf<\/h3>\nBootstrap \u63d0\u4f9b\u4e86\u4e00\u5957\u54cd\u5e94\u5f0f\u3001\u79fb\u52a8\u8bbe\u5907\u4f18\u5148\u7684\u6d41\u5f0f\u6805\u683c\u7cfb\u7edf\uff0c\u968f\u7740\u5c4f\u5e55\u6216\u89c6\u53e3\uff08viewport\uff09\u5c3a\u5bf8\u7684\u589e\u52a0\uff0c\u7cfb\u7edf\u4f1a\u81ea\u52a8\u5206\u4e3a\u6700\u591a12\u5217<\/p>\n
1. \u6805\u683c\u7cfb\u7edf\u7b80\u4ecb<\/h4>\n\u6805\u683c\u7cfb\u7edf\u7528\u4e8e\u901a\u8fc7\u4e00\u7cfb\u5217\u7684\u884c\uff08row\uff09\u4e0e\u5217\uff08column\uff09\u7684\u7ec4\u5408\u6765\u521b\u5efa\u9875\u9762\u5e03\u5c40\uff0c\u4f60\u7684\u5185\u5bb9\u5c31\u53ef\u4ee5\u653e\u5165\u8fd9\u4e9b\u521b\u5efa\u597d\u7684\u5e03\u5c40\u4e2d\u3002\u4e0b\u9762\u5c31\u4ecb\u7ecd\u4e00\u4e0b Bootstrap \u6805\u683c\u7cfb\u7edf\u7684\u5de5\u4f5c\u539f\u7406\uff1a<\/p>\n
\u00b7 \u201c\u884c\uff08row\uff09\u201d\u5fc5\u987b\u5305\u542b\u5728 .container \uff08\u56fa\u5b9a\u5bbd\u5ea6\uff09\u6216 .container-fluid \uff08100% \u5bbd\u5ea6\uff09\u4e2d\uff0c\u4ee5\u4fbf\u4e3a\u5176\u8d4b\u4e88\u5408\u9002\u7684\u6392\u5217\uff08aligment\uff09\u548c\u5185\u8865\uff08padding\uff09\u3002<\/p>\n
\u00b7 \u901a\u8fc7\u201c\u884c\uff08row\uff09\u201d\u5728\u6c34\u5e73\u65b9\u5411\u521b\u5efa\u4e00\u7ec4\u201c\u5217\uff08column\uff09\u201d\u3002<\/p>\n
\u00b7 \u4f60\u7684\u5185\u5bb9\u5e94\u5f53\u653e\u7f6e\u4e8e\u201c\u5217\uff08column\uff09\u201d\u5185\uff0c\u5e76\u4e14\uff0c\u53ea\u6709\u201c\u5217\uff08column\uff09\u201d\u53ef\u4ee5\u4f5c\u4e3a\u884c\uff08row\uff09\u201d\u7684\u76f4\u63a5\u5b50\u5143\u7d20\u3002<\/p>\n
\u00b7 \u7c7b\u4f3c .row \u548c .col-xs-4 \u8fd9\u79cd\u9884\u5b9a\u4e49\u7684\u7c7b\uff0c\u53ef\u4ee5\u7528\u6765\u5feb\u901f\u521b\u5efa\u6805\u683c\u5e03\u5c40\u3002Bootstrap \u6e90\u7801\u4e2d\u5b9a\u4e49\u7684 mixin \u4e5f\u53ef\u4ee5\u7528\u6765\u521b\u5efa\u8bed\u4e49\u5316\u7684\u5e03\u5c40\u3002<\/p>\n
\u00b7 \u901a\u8fc7\u4e3a\u201c\u5217\uff08column\uff09\u201d\u8bbe\u7f6e padding \u5c5e\u6027\uff0c\u4ece\u800c\u521b\u5efa\u5217\u4e0e\u5217\u4e4b\u95f4\u7684\u95f4\u9694\uff08gutter\uff09\u3002\u901a\u8fc7\u4e3a .row \u5143\u7d20\u8bbe\u7f6e\u8d1f\u503c margin \u4ece\u800c\u62b5\u6d88\u6389\u4e3a .container \u5143\u7d20\u8bbe\u7f6e\u7684 padding\uff0c\u4e5f\u5c31\u95f4\u63a5\u4e3a\u201c\u884c\uff08row\uff09\u201d\u6240\u5305\u542b\u7684\u201c\u5217\uff08column\uff09\u201d\u62b5\u6d88\u6389\u4e86padding\u3002<\/p>\n
\u00b7 \u8d1f\u503c\u7684 margin\u5c31\u662f\u4e0b\u9762\u7684\u793a\u4f8b\u4e3a\u4ec0\u4e48\u662f\u5411\u5916\u7a81\u51fa\u7684\u539f\u56e0\u3002\u5728\u6805\u683c\u5217\u4e2d\u7684\u5185\u5bb9\u6392\u6210\u4e00\u884c\u3002<\/p>\n
\u00b7 \u6805\u683c\u7cfb\u7edf\u4e2d\u7684\u5217\u662f\u901a\u8fc7\u6307\u5b9a1\u523012\u7684\u503c\u6765\u8868\u793a\u5176\u8de8\u8d8a\u7684\u8303\u56f4\u3002\u4f8b\u5982\uff0c\u4e09\u4e2a\u7b49\u5bbd\u7684\u5217\u53ef\u4ee5\u4f7f\u7528\u4e09\u4e2a .col-xs-4 \u6765\u521b\u5efa\u3002<\/p>\n
\u00b7 \u5982\u679c\u4e00\u201c\u884c\uff08row\uff09\u201d\u4e2d\u5305\u542b\u4e86\u7684\u201c\u5217\uff08column\uff09\u201d\u5927\u4e8e 12\uff0c\u591a\u4f59\u7684\u201c\u5217\uff08column\uff09\u201d\u6240\u5728\u7684\u5143\u7d20\u5c06\u88ab\u4f5c\u4e3a\u4e00\u4e2a\u6574\u4f53\u53e6\u8d77\u4e00\u884c\u6392\u5217\u3002<\/p>\n\n\n\n\n\n\n\n<\/th>\n *\u8d85\u5c0f\u5c4f\u5e55 \u624b\u673a (<768px)*<\/em><\/strong><\/th>\n *\u5c0f\u5c4f\u5e55 \u5e73\u677f (\u2265768px)*<\/em><\/strong><\/th>\n *\u4e2d\u7b49\u5c4f\u5e55 \u684c\u9762\u663e\u793a\u5668 (\u2265992px)*<\/em><\/strong><\/th>\n *\u5927\u5c4f\u5e55 \u5927\u684c\u9762\u663e\u793a\u5668 (\u22651200px)*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n
.container \u6700\u5927\u5bbd\u5ea6<\/td>\n None \uff08\u81ea\u52a8\uff09<\/td>\n 750px<\/td>\n 970px<\/td>\n 1170px<\/td>\n<\/tr>\n
\u7c7b\u524d\u7f00<\/td>\n .col-xs-<\/td>\n .col-sm-<\/td>\n .col-md-<\/td>\n .col-lg-<\/td>\n<\/tr>\n
\u6700\u5927\u5217\uff08column\uff09\u5bbd<\/td>\n \u81ea\u52a8<\/td>\n ~62px<\/td>\n ~81px<\/td>\n ~97px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\u00b7 \u6805\u683c\u7c7b\u9002\u7528\u4e8e\u4e0e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e\u5206\u754c\u70b9\u5927\u5c0f\u7684\u8bbe\u5907 \uff0c \u5e76\u4e14\u9488\u5bf9\u5c0f\u5c4f\u5e55\u8bbe\u5907\u8986\u76d6\u6805\u683c\u7c7b\u3002 \u56e0\u6b64\uff0c\u5728\u5143\u7d20\u4e0a\u5e94\u7528\u4efb\u4f55 .col-md-\u6805\u683c\u7c7b\u9002\u7528\u4e8e\u4e0e\u5c4f\u5e55\u5bbd\u5ea6\u5927\u4e8e\u6216\u7b49\u4e8e\u5206\u754c\u70b9\u5927\u5c0f\u7684\u8bbe\u5907 \uff0c \u5e76\u4e14\u9488\u5bf9\u5c0f\u5c4f\u5e55\u8bbe\u5907\u8986\u76d6\u6805\u683c\u7c7b\u3002 \u56e0\u6b64\uff0c\u5728\u5143\u7d20\u4e0a\u5e94\u7528\u4efb\u4f55 .col-lg-<\/em>\u4e0d\u5b58\u5728\uff0c \u4e5f\u5f71\u54cd\u5927\u5c4f\u5e55\u8bbe\u5907\u3002<\/p>\n
2.\u6805\u683c\u53c2\u6570<\/h4>\n3. \u6805\u683c\u7cfb\u7edf\u4f7f\u7528<\/h4>\n\u4f7f\u7528\u5355\u4e00\u7684\u4e00\u7ec4 .col-md-* \u6805\u683c\u7c7b\uff0c\u5c31\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u7684\u6805\u683c\u7cfb\u7edf\uff0c\u5728\u624b\u673a\u548c\u5e73\u677f\u8bbe\u5907\u4e0a\u4e00\u5f00\u59cb\u662f\u5806\u53e0\u5728\u4e00\u8d77\u7684\uff08\u8d85\u5c0f\u5c4f\u5e55\u5230\u5c0f\u5c4f\u5e55\u8fd9\u4e00\u8303\u56f4\uff09\uff0c\u5728\u684c\u9762\uff08\u4e2d\u7b49\uff09\u5c4f\u5e55\u8bbe\u5907\u4e0a\u53d8\u4e3a\u6c34\u5e73\u6392\u5217\u3002\u6240\u6709\u201c\u5217\uff08column\uff09\u5fc5\u987b\u653e\u5728 \u201d .row \u5185\u3002<\/p>\n
<div class="row">\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n\u00a0<div class="col-md-1">.col-md-1<\/div>\n<\/div>\n<div class="row">\n\u00a0<div class="col-md-8">.col-md-8<\/div>\n\u00a0<div class="col-md-4">.col-md-4<\/div>\n<\/div>\n<div class="row">\n\u00a0<div class="col-md-4">.col-md-4<\/div>\n\u00a0<div class="col-md-4">.col-md-4<\/div>\n\u00a0<div class="col-md-4">.col-md-4<\/div>\n<\/div>\n<div class="row">\n\u00a0<div class="col-md-6">.col-md-6<\/div>\n\u00a0<div class="col-md-6">.col-md-6<\/div>\n<\/div><\/code><\/pre>\n4.\u4e0d\u540c\u5c4f\u5e55\u8bbe\u7f6e\u4e0d\u540c\u5bbd\u5ea6<\/h4>\n\n\u00a0.col-xs-12 .col-sm-6 .col-md-8<\/div>\n\u00a0.col-xs-6 .col-md-4<\/div>\n<\/div>\n\n\u00a0.col-xs-6 .col-sm-4<\/div>\n\u00a0.col-xs-6 .col-sm-4<\/div>\n\u00a0\n\u00a0<\/div>\n\u00a0.col-xs-6 .col-sm-4<\/div>\n<\/div><\/code><\/pre>\n5.\u5217\u504f\u79fb<\/h4>\n\u4f7f\u7528 .col-md-offset- \u7c7b\u53ef\u4ee5\u5c06\u5217\u5411\u53f3\u4fa7\u504f\u79fb\u3002\u8fd9\u4e9b\u7c7b\u5b9e\u9645\u662f\u901a\u8fc7\u4f7f\u7528 <\/em> \u9009\u62e9\u5668\u4e3a\u5f53\u524d\u5143\u7d20\u589e\u52a0\u4e86\u5de6\u4fa7\u7684\u8fb9\u8ddd\uff08margin\uff09\u3002\u4f8b\u5982\uff0c.col-md-offset-4 \u7c7b\u5c06 .col-md-4 \u5143\u7d20\u5411\u53f3\u4fa7\u504f\u79fb\u4e864\u4e2a\u5217\uff08column\uff09\u7684\u5bbd\u5ea6\u3002<\/p>\n
<div class="row">\n\u00a0<div class="col-md-4">.col-md-4<\/div>\n\u00a0<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4<\/div>\n<\/div>\n<div class="row">\n\u00a0<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3<\/div>\n\u00a0<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3<\/div>\n<\/div>\n<div class="row">\n\u00a0<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3<\/div>\n<\/div><\/code><\/pre>\n6.\u5217\u4f4d\u7f6e\u79fb\u52a8<\/h4>\n\u901a\u8fc7\u4f7f\u7528 .col-md-push- \u548c .col-md-pull-<\/em> \u7c7b\u5c31\u53ef\u4ee5\u5f88\u5bb9\u6613\u7684\u6539\u53d8\u5217\uff08column\uff09\u7684\u987a\u5e8f\u3002<\/p>\n
<div class="row">\n\u00a0<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3<\/div>\n\u00a0<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9<\/div>\n<\/div><\/code><\/pre>\n3\u3001\u6392\u7248<\/h3>\n
1.\u6807\u9898<\/h4>\nHTML \u4e2d\u7684\u6240\u6709\u6807\u9898\u6807\u7b7e\uff0c<\/p>\n
 \u5230 <\/p>\n
 \u5747\u53ef\u4f7f\u7528\u3002\u53e6\u5916\uff0c\u8fd8\u63d0\u4f9b\u4e86 .h1 \u5230 .h6 \u7c7b\uff0c\u4e3a\u7684\u662f\u7ed9\u5185\u8054\uff08inline\uff09\u5c5e\u6027\u7684\u6587\u672c\u8d4b\u4e88\u6807\u9898\u7684\u6837\u5f0f\u3002<\/p>\n<h1>h1. Bootstrap heading<\/h1>\n<h2>h2. Bootstrap heading<\/h2>\n<h3>h3. Bootstrap heading<\/h3>\n<h4>h4. Bootstrap heading<\/h4>\n<h5>h5. Bootstrap heading<\/h5>\n<h6>h6. Bootstrap heading<\/h6><\/code><\/pre>\n\u5728\u6807\u9898\u5185\u8fd8\u53ef\u4ee5\u5305\u542b  \u6807\u7b7e\u6216\u8d4b\u4e88 .small \u7c7b\u7684\u5143\u7d20\uff0c\u53ef\u4ee5\u7528\u6765\u6807\u8bb0\u526f\u6807\u9898\u3002<\/p>\n
<h1>h1. Bootstrap heading <small>Secondary text<\/small><\/h1>\n<h2>h2. Bootstrap heading <small>Secondary text<\/small><\/h2>\n<h3>h3. Bootstrap heading <small>Secondary text<\/small><\/h3>\n<h4>h4. Bootstrap heading <small>Secondary text<\/small><\/h4>\n<h5>h5. Bootstrap heading <small>Secondary text<\/small><\/h5>\n<h6>h6. Bootstrap heading <small>Secondary text<\/small><\/h6><\/code><\/pre>\n2.\u7a81\u51fa\u663e\u793a<\/h4>\n\u901a\u8fc7\u6dfb\u52a0 .lead \u7c7b\u53ef\u4ee5\u8ba9\u6bb5\u843d\u7a81\u51fa\u663e\u793a\u3002<\/p>\n
<p class="lead">...<\/p><\/code><\/pre>\n3.\u5bf9\u9f50<\/h4>\n<p class="text-left">Left aligned text.<\/p>\n<p class="text-center">Center aligned text.<\/p>\n<p class="text-right">Right aligned text.<\/p>\n<p class="text-justify">Justified text.<\/p>\n<p class="text-nowrap">No wrap text.<\/p><\/code><\/pre>\n4.\u6539\u53d8\u5927\u5c0f\u5199<\/h4>\n<p class="text-lowercase">Lowercased text.<\/p>\n<p class="text-uppercase">Uppercased text.<\/p>\n<p class="text-capitalize">Capitalized text.<\/p><\/code><\/pre>\n5.\u5f15\u7528<\/h4>\n<blockquote>\n\u00a0<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n<\/blockquote>\n<blockquote>\n\u00a0<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<\/p>\n\u00a0<footer>Someone famous in <cite title="Source Title">Source Title<\/cite><\/footer>\n<\/blockquote><\/code><\/pre>\n<blockquote class="blockquote-reverse">\n...\n<\/blockquote><\/code><\/pre>\n6.\u5217\u8868<\/h4>\n\u65e0\u6837\u5f0f\u5217\u8868<\/p>\n
<ul class="list-unstyled">\n\u00a0<li>...<\/li>\n<\/ul><\/code><\/pre>\n\u5185\u8054\u5217\u8868<\/p>\n
<ul class="list-inline">\n\u00a0<li>...<\/li>\n<\/ul><\/code><\/pre>\n\u6c34\u5e73\u6392\u5217\u7684\u5185\u8054\u5217\u8868<\/p>\n
<dl class="dl-horizontal">\n\u00a0<dt>...<\/dt>\n\u00a0<dd>...<\/dd>\n<\/dl><\/code><\/pre>\n4\u3001\u4ee3\u7801<\/h3>\n
1.\u5185\u8054\u4ee3\u7801<\/h4>\n\u901a\u8fc7  \u6807\u7b7e\u5305\u88f9\u5185\u8054\u6837\u5f0f\u7684\u4ee3\u7801\u7247\u6bb5\u3002<\/p>\n
For example, <code><section><\/code> should be wrapped as inline.<\/code><\/pre>\n2.\u7528\u6237\u8f93\u5165<\/h4>\n\u901a\u8fc7  \u6807\u7b7e\u6807\u8bb0\u7528\u6237\u901a\u8fc7\u952e\u76d8\u8f93\u5165\u7684\u5185\u5bb9\u3002<\/p>\n
To switch directories, type <kbd>cd<\/kbd> followed by the name of the directory.<br>\nTo edit settings, press <kbd><kbd>ctrl<\/kbd> + <kbd>,<\/kbd><\/kbd><\/code><\/pre>\n3.\u4ee3\u7801\u5757<\/h4>\n\u591a\u884c\u4ee3\u7801\u53ef\u4ee5\u4f7f\u7528 <\/p>\n
 \u6807\u7b7e\u3002\u4e3a\u4e86\u6b63\u786e\u7684\u5c55\u793a\u4ee3\u7801\uff0c\u6ce8\u610f\u5c06\u5c16\u62ec\u53f7\u505a\u8f6c\u4e49\u5904\u7406\u3002<\/p>\n<pre><p>Sample text here...<\/p><\/pre><\/code><\/pre>\n\u8fd8\u53ef\u4ee5\u4f7f\u7528 .pre-scrollable \u7c7b\uff0c\u5176\u4f5c\u7528\u662f\u8bbe\u7f6e max-height \u4e3a 350px \uff0c\u5e76\u5728\u5782\u76f4\u65b9\u5411\u5c55\u793a\u6eda\u52a8\u6761\u3002<\/p>\n
4.\u53d8\u91cf<\/h4>\n\u901a\u8fc7  \u6807\u7b7e\u6807\u8bb0\u53d8\u91cf\u3002<\/p>\n
<var>y<\/var> = <var>m<\/var><var>x<\/var> + <var>b<\/var><\/code><\/pre>\n5.\u7a0b\u5e8f\u8f93\u51fa<\/h4>\n\u901a\u8fc7  \u6807\u7b7e\u6765\u6807\u8bb0\u7a0b\u5e8f\u8f93\u51fa\u7684\u5185\u5bb9\u3002<\/p>\n
<samp>This text is meant to be treated as sample output from a computer program.<\/samp><\/code><\/pre>\n5\u3001\u8868\u683c<\/h3>\n
1.\u57fa\u672c<\/h4>\n\u4e3a\u4efb\u610f <\/p>\n \u6807\u7b7e\u6dfb\u52a0 .table \u7c7b\u53ef\u4ee5\u4e3a\u5176\u8d4b\u4e88\u57fa\u672c\u7684\u6837\u5f0f<\/p>\n<table class="table">\n...\n<\/table><\/code><\/pre>\n2.\u6761\u7eb9\u72b6\u8868\u683c<\/h4>\n<table class="table table-striped">\n...\n<\/table><\/code><\/pre>\n3.\u5e26\u8fb9\u6846\u7684\u8868\u683c<\/h4>\n<table class="table table-bordered">\n...\n<\/table><\/code><\/pre>\n4.\u9f20\u6807\u60ac\u505c<\/h4>\n<table class="table table-hover">\n...\n<\/table><\/code><\/pre>\n5.\u7d27\u7f29\u8868\u683c<\/h4>\n<table class="table table-condensed">\n...\n<\/table><\/code><\/pre>\n6.\u72b6\u6001\u7c7b<\/h4>\n\u901a\u8fc7\u8fd9\u4e9b\u72b6\u6001\u7c7b\u53ef\u4ee5\u4e3a\u884c\u6216\u5355\u5143\u683c\u8bbe\u7f6e\u989c\u8272\u3002<\/p>\n
\n\n\n\n\n\n\n\n\n*Class*<\/em><\/strong><\/th>\n *\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n
.active<\/td>\n \u9f20\u6807\u60ac\u505c\u5728\u884c\u6216\u5355\u5143\u683c\u4e0a\u65f6\u6240\u8bbe\u7f6e\u7684\u989c\u8272<\/td>\n<\/tr>\n
.success<\/td>\n \u6807\u8bc6\u6210\u529f\u6216\u79ef\u6781\u7684\u52a8\u4f5c<\/td>\n<\/tr>\n
.info<\/td>\n \u6807\u8bc6\u666e\u901a\u7684\u63d0\u793a\u4fe1\u606f\u6216\u52a8\u4f5c<\/td>\n<\/tr>\n
.warning<\/td>\n \u6807\u8bc6\u8b66\u544a\u6216\u9700\u8981\u7528\u6237\u6ce8\u610f<\/td>\n<\/tr>\n
.danger<\/td>\n \u6807\u8bc6\u5371\u9669\u6216\u6f5c\u5728\u7684\u5e26\u6765\u8d1f\u9762\u5f71\u54cd\u7684\u52a8\u4f5c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n7.\u54cd\u5e94\u5f0f\u8868\u683c<\/h4>\n\u5c06\u4efb\u4f55 .table \u5143\u7d20\u5305\u88f9\u5728 .table-responsive \u5143\u7d20\u5185\uff0c\u5373\u53ef\u521b\u5efa\u54cd\u5e94\u5f0f\u8868\u683c\uff0c\u5176\u4f1a\u5728\u5c0f\u5c4f\u5e55\u8bbe\u5907\u4e0a\uff08\u5c0f\u4e8e768px\uff09\u6c34\u5e73\u6eda\u52a8\u3002\u5f53\u5c4f\u5e55\u5927\u4e8e 768px \u5bbd\u5ea6\u65f6\uff0c\u6c34\u5e73\u6eda\u52a8\u6761\u6d88\u5931\u3002<\/p>\n
6\u3001 \u8868\u5355<\/h3>\n
1.\u57fa\u672c\u5b9e\u4f8b<\/h4>\n\u5355\u72ec\u7684\u8868\u5355\u63a7\u4ef6\u4f1a\u88ab\u81ea\u52a8\u8d4b\u4e88\u4e00\u4e9b\u5168\u5c40\u6837\u5f0f\u3002\u6240\u6709\u8bbe\u7f6e\u4e86 .form-control \u7c7b\u7684 \u3001 \u548c <select> \u5143\u7d20\u90fd\u5c06\u88ab\u9ed8\u8ba4\u8bbe\u7f6e\u5bbd\u5ea6\u5c5e\u6027\u4e3a width: 100%;\u3002 \u5c06 label \u5143\u7d20\u548c\u524d\u9762\u63d0\u5230\u7684\u63a7\u4ef6\u5305\u88f9\u5728 .form-group \u4e2d\u53ef\u4ee5\u83b7\u5f97\u6700\u597d\u7684\u6392\u5217\u3002<\/p>\n<pre><code class=\"language-javascript\"><form>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="exampleInputEmail1">Email address<\/label>\n\u00a0 \u00a0<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="exampleInputPassword1">Password<\/label>\n\u00a0 \u00a0<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="exampleInputFile">File input<\/label>\n\u00a0 \u00a0<input type="file" id="exampleInputFile">\n\u00a0 \u00a0<p class="help-block">Example block-level help text here.<\/p>\n\u00a0<\/div>\n\u00a0<div class="checkbox">\n\u00a0 \u00a0<label>\n\u00a0 \u00a0 \u00a0<input type="checkbox"> Check me out\n\u00a0 \u00a0<\/label>\n\u00a0<\/div>\n\u00a0<button type="submit" class="btn btn-default">Submit<\/button>\n<\/form><\/code><\/pre>\n<h4>2.\u5185\u8054\u8868\u5355<\/h4>\n<p>\u4e3a <\/p>\n<form> \u5143\u7d20\u6dfb\u52a0 .form-inline \u7c7b\u53ef\u4f7f\u5176\u5185\u5bb9\u5de6\u5bf9\u9f50\u5e76\u4e14\u8868\u73b0\u4e3a inline-block \u7ea7\u522b\u7684\u63a7\u4ef6\u3002<strong><em>*\u53ea\u9002\u7528\u4e8e\u89c6\u53e3\uff08viewport\uff09\u81f3\u5c11\u5728 768px \u5bbd\u5ea6\u65f6\uff08\u89c6\u53e3\u5bbd\u5ea6\u518d\u5c0f\u7684\u8bdd\u5c31\u4f1a\u4f7f\u8868\u5355\u6298\u53e0\uff09*<\/em><\/strong><\/p>\n<h4>3.\u6c34\u5e73\u6392\u5217\u7684\u8868\u5355<\/h4>\n<p>\u901a\u8fc7\u4e3a\u8868\u5355\u6dfb\u52a0 .form-horizontal \u7c7b\uff0c\u5e76\u8054\u5408\u4f7f\u7528 Bootstrap \u9884\u7f6e\u7684\u6805\u683c\u7c7b\uff0c\u53ef\u4ee5\u5c06 label \u6807\u7b7e\u548c\u63a7\u4ef6\u7ec4\u6c34\u5e73\u5e76\u6392\u5e03\u5c40\u3002\u8fd9\u6837\u505a\u5c06\u6539\u53d8 .form-group \u7684\u884c\u4e3a\uff0c\u4f7f\u5176\u8868\u73b0\u4e3a\u6805\u683c\u7cfb\u7edf\u4e2d\u7684\u884c\uff08row\uff09\uff0c\u56e0\u6b64\u5c31\u65e0\u9700\u518d\u989d\u5916\u6dfb\u52a0 .row \u4e86<\/p>\n<pre><code class=\"language-javascript\"><form class="form-horizontal">\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="inputEmail3" class="col-sm-2 control-label">Email<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<input type="email" class="form-control" id="inputEmail3" placeholder="Email">\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="inputPassword3" class="col-sm-2 control-label">Password<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<input type="password" class="form-control" id="inputPassword3" placeholder="Password">\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<div class="col-sm-offset-2 col-sm-10">\n\u00a0 \u00a0 \u00a0<div class="checkbox">\n\u00a0 \u00a0 \u00a0 \u00a0<label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<input type="checkbox"> Remember me\n\u00a0 \u00a0 \u00a0 \u00a0<\/label>\n\u00a0 \u00a0 \u00a0<\/div>\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<div class="col-sm-offset-2 col-sm-10">\n\u00a0 \u00a0 \u00a0<button type="submit" class="btn btn-default">Sign in<\/button>\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n<\/form><\/code><\/pre>\n<h4>4.\u8868\u5355\u63a7\u4ef6<\/h4>\n<h5>\u8f93\u5165\u6846<\/h5>\n<p>\u5305\u62ec\u5927\u90e8\u5206\u8868\u5355\u63a7\u4ef6\u3001\u6587\u672c\u8f93\u5165\u57df\u63a7\u4ef6\uff0c\u8fd8\u652f\u6301\u6240\u6709 HTML5 \u7c7b\u578b\u7684\u8f93\u5165\u63a7\u4ef6\uff1a text\u3001password\u3001datetime\u3001datetime-local\u3001date\u3001month\u3001time\u3001week\u3001number\u3001email\u3001url\u3001search\u3001tel \u548c color\u3002<\/p>\n<p>\u53ea\u6709\u6b63\u786e\u8bbe\u7f6e\u4e86 type \u5c5e\u6027\u7684\u8f93\u5165\u63a7\u4ef6\u624d\u80fd\u88ab\u8d4b\u4e88\u6b63\u786e\u7684\u6837\u5f0f\u3002<\/p>\n<h5>\u6587\u672c\u57df<\/h5>\n<p>\u652f\u6301\u591a\u884c\u6587\u672c\u7684\u8868\u5355\u63a7\u4ef6\u3002\u53ef\u6839\u636e\u9700\u8981\u6539\u53d8 rows \u5c5e\u6027\u3002<\/p>\n<h5>\u591a\u9009\u548c\u5355\u9009\u6846<\/h5>\n<p>\u9ed8\u8ba4\u6837\u5f0f<\/p>\n<pre><code class=\"language-javascript\"><div class="checkbox">\n\u00a0<label>\n\u00a0 \u00a0<input type="checkbox" value="">\n\u00a0 Option one is this and that—be sure to include why it's great\n\u00a0<\/label>\n<\/div>\n<div class="checkbox disabled">\n\u00a0<label>\n\u00a0 \u00a0<input type="checkbox" value="" disabled>\n\u00a0 Option two is disabled\n\u00a0<\/label>\n<\/div>\n\u200b\n<div class="radio">\n\u00a0<label>\n\u00a0 \u00a0<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>\n\u00a0 Option one is this and that—be sure to include why it's great\n\u00a0<\/label>\n<\/div>\n<div class="radio">\n\u00a0<label>\n\u00a0 \u00a0<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">\n\u00a0 Option two can be something else and selecting it will deselect option one\n\u00a0<\/label>\n<\/div>\n<div class="radio disabled">\n\u00a0<label>\n\u00a0 \u00a0<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>\n\u00a0 Option three is disabled\n\u00a0<\/label>\n<\/div><\/code><\/pre>\n<p><strong><em>*\u5185\u8054\u5355\u9009\u548c\u591a\u9009\u6846*<\/em><\/strong><\/p>\n<pre><code class=\"language-javascript\"><label class="checkbox-inline">\n\u00a0<input type="checkbox" id="inlineCheckbox1" value="option1"> 1\n<\/label>\n<label class="checkbox-inline">\n\u00a0<input type="checkbox" id="inlineCheckbox2" value="option2"> 2\n<\/label>\n<label class="checkbox-inline">\n\u00a0<input type="checkbox" id="inlineCheckbox3" value="option3"> 3\n<\/label>\n\u200b\n<label class="radio-inline">\n\u00a0<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1\n<\/label>\n<label class="radio-inline">\n\u00a0<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2\n<\/label>\n<label class="radio-inline">\n\u00a0<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3\n<\/label><\/code><\/pre>\n<p><strong><em>*\u4e0d\u5e26\u6587\u672c\u7684Checkbox \u548c radio*<\/em><\/strong><\/p>\n<pre><code class=\"language-javascript\"><label>\n\u00a0 \u00a0<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">\n\u00a0<\/label>\n<\/div>\n<div class="radio">\n\u00a0<label>\n\u00a0 \u00a0<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">\n\u00a0<\/label>\n<\/div><\/code><\/pre>\n<h5>\u4e0b\u62c9\u5217\u8868<\/h5>\n<pre><code class=\"language-javascript\"><select class="form-control">\n\u00a0<option>1<\/option>\n\u00a0<option>2<\/option>\n\u00a0<option>3<\/option>\n\u00a0<option>4<\/option>\n\u00a0<option>5<\/option>\n<\/select><\/code><\/pre>\n<h5>\u9759\u6001\u5185\u5bb9<\/h5>\n<pre><code class=\"language-javascript\">\u5982\u679c\u9700\u8981\u5728\u8868\u5355\u4e2d\u5c06\u4e00\u884c\u7eaf\u6587\u672c\u548c\u00a0label\u00a0\u5143\u7d20\u653e\u7f6e\u4e8e\u540c\u4e00\u884c\uff0c\u4e3a\u00a0<p>\u00a0\u5143\u7d20\u6dfb\u52a0\u00a0.form-control-static\u00a0\u7c7b\u5373\u53ef<\/code><\/pre>\n<pre><code class=\"language-javascript\"><form class="form-horizontal">\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label class="col-sm-2 control-label">Email<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<p class="form-control-static">email@example.com<\/p>\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n\u00a0<div class="form-group">\n\u00a0 \u00a0<label for="inputPassword" class="col-sm-2 control-label">Password<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<input type="password" class="form-control" id="inputPassword" placeholder="Password">\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n<\/form><\/code><\/pre>\n<p>\u5e2e\u52a9\u6587\u5b57<\/p>\n<pre><code class=\"language-javascript\"><label class="sr-only" for="inputHelpBlock">Input with help text<\/label>\n<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">\n...\n<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.<\/span><\/code><\/pre>\n<h5>\u6821\u9a8c\u72b6\u6001<\/h5>\n<p>Bootstrap \u5bf9\u8868\u5355\u63a7\u4ef6\u7684\u6821\u9a8c\u72b6\u6001\uff0c\u5982 error\u3001warning \u548c success \u72b6\u6001\uff0c\u90fd\u5b9a\u4e49\u4e86\u6837\u5f0f\u3002\u4f7f\u7528\u65f6\uff0c\u6dfb\u52a0 .has-warning\u3001.has-error\u6216 .has-success \u7c7b\u5230\u8fd9\u4e9b\u63a7\u4ef6\u7684\u7236\u5143\u7d20\u5373\u53ef\u3002\u4efb\u4f55\u5305\u542b\u5728\u6b64\u5143\u7d20\u4e4b\u5185\u7684 .control-label\u3001.form-control \u548c .help-block \u5143\u7d20\u90fd\u5c06\u63a5\u53d7\u8fd9\u4e9b\u6821\u9a8c\u72b6\u6001\u7684\u6837\u5f0f\u3002<\/p>\n<pre><code class=\"language-javascript\"><div class="form-group has-success">\n\u00a0<label class="control-label" for="inputSuccess1">Input with success<\/label>\n\u00a0<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">\n\u00a0<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.<\/span>\n<\/div>\n<div class="form-group has-warning">\n\u00a0<label class="control-label" for="inputWarning1">Input with warning<\/label>\n\u00a0<input type="text" class="form-control" id="inputWarning1">\n<\/div>\n<div class="form-group has-error">\n\u00a0<label class="control-label" for="inputError1">Input with error<\/label>\n\u00a0<input type="text" class="form-control" id="inputError1">\n<\/div>\n<div class="has-success">\n\u00a0<div class="checkbox">\n\u00a0 \u00a0<label>\n\u00a0 \u00a0 \u00a0<input type="checkbox" id="checkboxSuccess" value="option1">\n\u00a0 \u00a0 Checkbox with success\n\u00a0 \u00a0<\/label>\n\u00a0<\/div>\n<\/div>\n<div class="has-warning">\n\u00a0<div class="checkbox">\n\u00a0 \u00a0<label>\n\u00a0 \u00a0 \u00a0<input type="checkbox" id="checkboxWarning" value="option1">\n\u00a0 \u00a0 Checkbox with warning\n\u00a0 \u00a0<\/label>\n\u00a0<\/div>\n<\/div>\n<div class="has-error">\n\u00a0<div class="checkbox">\n\u00a0 \u00a0<label>\n\u00a0 \u00a0 \u00a0<input type="checkbox" id="checkboxError" value="option1">\n\u00a0 \u00a0 Checkbox with error\n\u00a0 \u00a0<\/label>\n\u00a0<\/div>\n<\/div><\/code><\/pre>\n<h5>\u6dfb\u52a0\u989d\u5916\u7684\u56fe\u6807<\/h5>\n<p>\u4f60\u8fd8\u53ef\u4ee5\u9488\u5bf9\u6821\u9a8c\u72b6\u6001\u4e3a\u8f93\u5165\u6846\u6dfb\u52a0\u989d\u5916\u7684\u56fe\u6807\u3002\u53ea\u9700\u8bbe\u7f6e\u76f8\u5e94\u7684 .has-feedback \u7c7b\u5e76\u6dfb\u52a0\u6b63\u786e\u7684\u56fe\u6807\u5373\u53ef<\/p>\n<pre><code class=\"language-javascript\"><div class="form-group has-success has-feedback">\n\u00a0<label class="control-label" for="inputSuccess2">Input with success<\/label>\n\u00a0<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">\n\u00a0<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"><\/span>\n\u00a0<span id="inputSuccess2Status" class="sr-only">(success)<\/span>\n<\/div><\/code><\/pre>\n<h5>\u63a7\u4ef6\u5c3a\u5bf8<\/h5>\n<p>\u901a\u8fc7 .input-lg \u7c7b\u4f3c\u7684\u7c7b\u53ef\u4ee5\u4e3a\u63a7\u4ef6\u8bbe\u7f6e\u9ad8\u5ea6\uff0c\u901a\u8fc7 .col-lg-* \u7c7b\u4f3c\u7684\u7c7b\u53ef\u4ee5\u4e3a\u63a7\u4ef6\u8bbe\u7f6e\u5bbd\u5ea6\u3002<\/p>\n<p><strong><em>*\u9ad8\u5ea6\u5c3a\u5bf8*<\/em><\/strong><\/p>\n<p>\u521b\u5efa\u5927\u4e00\u4e9b\u6216\u5c0f\u4e00\u4e9b\u7684\u8868\u5355\u63a7\u4ef6\u4ee5\u5339\u914d\u6309\u94ae\u5c3a\u5bf8<\/p>\n<pre><code class=\"language-javascript\"><input class="form-control input-lg" type="text" placeholder=".input-lg">\n<input class="form-control" type="text" placeholder="Default input">\n<input class="form-control input-sm" type="text" placeholder=".input-sm">\n\u200b\n<select class="form-control input-lg">...<\/select>\n<select class="form-control">...<\/select>\n<select class="form-control input-sm">...<\/select><\/code><\/pre>\n<p><strong><em>*\u6c34\u5e73\u6392\u5217\u7684\u8868\u5355\u7ec4\u7684\u5c3a\u5bf8*<\/em><\/strong><\/p>\n<p>\u901a\u8fc7\u6dfb\u52a0 .form-group-lg \u6216 .form-group-sm \u7c7b\uff0c\u4e3a .form-horizontal \u5305\u88f9\u7684 label \u5143\u7d20\u548c\u8868\u5355\u63a7\u4ef6\u5feb\u901f\u8bbe\u7f6e\u5c3a\u5bf8\u3002<\/p>\n<pre><code class=\"language-javascript\"><form class="form-horizontal">\n\u00a0<div class="form-group form-group-lg">\n\u00a0 \u00a0<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n\u00a0<div class="form-group form-group-sm">\n\u00a0 \u00a0<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label<\/label>\n\u00a0 \u00a0<div class="col-sm-10">\n\u00a0 \u00a0 \u00a0<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">\n\u00a0 \u00a0<\/div>\n\u00a0<\/div>\n<\/form><\/code><\/pre>\n<h3>7\u3001\u6309\u94ae<\/h3>\n<h4>1.\u53ef\u4f5c\u4e3a\u6309\u94ae\u4f7f\u7528\u7684\u6807\u7b7e\u6216\u5143\u7d20<\/h4>\n<p>\u4e3a <a>\u3001<button> \u6216 <input> \u5143\u7d20\u6dfb\u52a0\u6309\u94ae\u7c7b\uff08button class\uff09\u5373\u53ef\u4f7f\u7528 Bootstrap \u63d0\u4f9b\u7684\u6837\u5f0f <\/p>\n<pre><code class=\"language-javascript\"><a class="btn btn-default" href="#" role="button">Link<\/a>\n<button class="btn btn-default" type="submit">Button<\/button>\n<input class="btn btn-default" type="button" value="Input">\n<input class="btn btn-default" type="submit" value="Submit"><\/code><\/pre>\n<h4>2.\u9884\u5b9a\u4e49\u6837\u5f0f<\/h4>\n<pre><code class=\"language-javascript\"><!-- Standard button -->\n<button type="button" class="btn btn-default">\uff08\u9ed8\u8ba4\u6837\u5f0f\uff09Default<\/button>\n\u200b\n<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->\n<button type="button" class="btn btn-primary">\uff08\u9996\u9009\u9879\uff09Primary<\/button>\n\u200b\n<!-- Indicates a successful or positive action -->\n<button type="button" class="btn btn-success">\uff08\u6210\u529f\uff09Success<\/button>\n\u200b\n<!-- Contextual button for informational alert messages -->\n<button type="button" class="btn btn-info">\uff08\u4e00\u822c\u4fe1\u606f\uff09Info<\/button>\n\u200b\n<!-- Indicates caution should be taken with this action -->\n<button type="button" class="btn btn-warning">\uff08\u8b66\u544a\uff09Warning<\/button>\n\u200b\n<!-- Indicates a dangerous or potentially negative action -->\n<button type="button" class="btn btn-danger">\uff08\u5371\u9669\uff09Danger<\/button>\n\u200b\n<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->\n<button type="button" class="btn btn-link">\uff08\u94fe\u63a5\uff09Link<\/button><\/code><\/pre>\n<h4>3.\u5c3a\u5bf8<\/h4>\n<p>\u9700\u8981\u8ba9\u6309\u94ae\u5177\u6709\u4e0d\u540c\u5c3a\u5bf8\u5417\uff1f\u4f7f\u7528 .btn-lg\u3001.btn-sm \u6216 .btn-xs \u5c31\u53ef\u4ee5\u83b7\u5f97\u4e0d\u540c\u5c3a\u5bf8\u7684\u6309\u94ae\u3002<\/p>\n<p>\u901a\u8fc7\u7ed9\u6309\u94ae\u6dfb\u52a0 .btn-block \u7c7b\u53ef\u4ee5\u5c06\u5176\u62c9\u4f38\u81f3\u7236\u5143\u7d20100%\u7684\u5bbd\u5ea6\uff0c\u800c\u4e14\u6309\u94ae\u4e5f\u53d8\u4e3a\u4e86\u5757\u7ea7\uff08block\uff09\u5143\u7d20\u3002<\/p>\n<h4>4.\u6fc0\u6d3b\u72b6\u6001<\/h4>\n<p>\u6dfb\u52a0 .active \u7c7b<\/p>\n<h4>5.\u7981\u7528\u72b6\u6001<\/h4>\n<p>\u4e3a <button> \u5143\u7d20\u6dfb\u52a0 disabled \u5c5e\u6027\uff0c\u4f7f\u5176\u8868\u73b0\u51fa\u7981\u7528\u72b6\u6001\u3002<\/p>\n<p>\u4e3a\u57fa\u4e8e <a> \u5143\u7d20\u521b\u5efa\u7684\u6309\u94ae\u6dfb\u52a0 .disabled \u7c7b\u3002<\/p>\n<h3>8\u3001\u56fe\u7247<\/h3>\n<h4>1.\u54cd\u5e94\u5f0f\u56fe\u7247<\/h4>\n<p>\u5728 Bootstrap \u7248\u672c 3 \u4e2d\uff0c\u901a\u8fc7\u4e3a\u56fe\u7247\u6dfb\u52a0 .img-responsive \u7c7b\u53ef\u4ee5\u8ba9\u56fe\u7247\u652f\u6301\u54cd\u5e94\u5f0f\u5e03\u5c40\u3002\u5176\u5b9e\u8d28\u662f\u4e3a\u56fe\u7247\u8bbe\u7f6e\u4e86 max-width: 100%;\u3001 height: auto; \u548c display: block; \u5c5e\u6027\uff0c\u4ece\u800c\u8ba9\u56fe\u7247\u5728\u5176\u7236\u5143\u7d20\u4e2d\u66f4\u597d\u7684\u7f29\u653e\u3002<\/p>\n<p>\u5982\u679c\u9700\u8981\u8ba9\u4f7f\u7528\u4e86 .img-responsive \u7c7b\u7684\u56fe\u7247\u6c34\u5e73\u5c45\u4e2d\uff0c\u8bf7\u4f7f\u7528 .center-block \u7c7b\uff0c\u4e0d\u8981\u7528 .text-center<\/p>\n<pre><code class=\"language-javascript\"><img src="..." class="img-responsive" alt="Responsive image"><\/code><\/pre>\n<h4>2.\u56fe\u7247\u5f62\u72b6<\/h4>\n<pre><code class=\"language-javascript\"><img src="..." alt="..." class="img-rounded">\n<img src="..." alt="..." class="img-circle">\n<img src="..." alt="..." class="img-thumbnail"><\/code><\/pre>\n<h3>9\u3001\u8f85\u52a9\u7c7b<\/h3>\n<h4>1.\u6587\u672c\u989c\u8272<\/h4>\n<pre><code class=\"language-javascript\"><p class="text-muted">...<\/p>\n<p class="text-primary">...<\/p>\n<p class="text-success">...<\/p>\n<p class="text-info">...<\/p>\n<p class="text-warning">...<\/p>\n<p class="text-danger">...<\/p><\/code><\/pre>\n<h4>2.\u80cc\u666f\u8272<\/h4>\n<pre><code class=\"language-javascript\"><p class="bg-primary">...<\/p>\n<p class="bg-success">...<\/p>\n<p class="bg-info">...<\/p>\n<p class="bg-warning">...<\/p>\n<p class="bg-danger">...<\/p><\/code><\/pre>\n<h4>3.\u4e09\u89d2\u7b26\u53f7<\/h4>\n<pre><code class=\"language-javascript\"><span class="caret"><\/span><\/code><\/pre>\n<h4>4.\u6d6e\u52a8<\/h4>\n<pre><code class=\"language-javascript\"><div class="pull-left">...<\/div>\n<div class="pull-right">...<\/div><\/code><\/pre>\n<h4>5.\u8ba9\u5185\u5bb9\u5757\u5c45\u4e2d<\/h4>\n<pre><code class=\"language-javascript\"><div class="center-block">...<\/div><\/code><\/pre>\n<h4>6.\u6e05\u9664\u6d6e\u52a8<\/h4>\n<p><strong><em>*\u901a\u8fc7\u4e3a\u7236\u5143\u7d20*<\/em><\/strong>\u6dfb\u52a0 .clearfix \u7c7b\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u6e05\u9664\u6d6e\u52a8\uff08float\uff09<\/p>\n<pre><code class=\"language-javascript\"><!-- Usage as a class -->\n<div class="clearfix">...<\/div><\/code><\/pre>\n<h4>7.\u663e\u793a\u6216\u9690\u85cf\u5185\u5bb9<\/h4>\n<pre><code class=\"language-javascript\"><div class="show">...<\/div>\n<div class="hidden">...<\/div><\/code><\/pre>\n<h4>8.\u56fe\u7247\u66ff\u6362<\/h4>\n<p>\u4f7f\u7528 .text-hide \u7c7b\u6216\u5bf9\u5e94\u7684 mixin \u53ef\u4ee5\u7528\u6765\u5c06\u5143\u7d20\u7684\u6587\u672c\u5185\u5bb9\u66ff\u6362\u4e3a\u4e00\u5f20\u80cc\u666f\u56fe\u3002<\/p>\n<pre><code class=\"language-javascript\"><h1 class="text-hide">Custom heading<\/h1><\/code><\/pre>\n<h3>10\u3001\u54cd\u5e94\u5f0f\u5de5\u5177<\/h3>\n<h4>1.\u4e0d\u540c\u89c6\u53e3\u4e0b\u9690\u85cf\u663e\u793a<\/h4>\n<pre><code class=\"language-javascript\">.visible-xs-* \n.visible-sm-* \n.visible-md-* \n.visible-lg-* \n.hidden-xs \n.hidden-sm \n.hidden-md \n.hidden-lg\n.visible-*-block \n.visible-*-inline \n.visible-*-inline-block<\/code><\/pre>\n<h4>2.\u6253\u5370\u7c7b<\/h4>\n<pre><code class=\"language-javascript\">.visible-print-block\n.visible-print-inline\n.visible-print-inline-block\n\n.hidden-print \u6253\u5370\u673a\u4e0b\u9690\u85cf<\/code><\/pre>\n<h2>\u4e8c\u3001Bootstrap\u63d2\u4ef6<\/h2>\n<h3>1\u3001BootStrap\u63d2\u4ef6\u4f7f\u7528\u89c4\u5219<\/h3>\n<h4>1. \u5355\u4e2a\u5f15\u5165<\/h4>\n<p>JavaScript \u63d2\u4ef6\u53ef\u4ee5\u5355\u4e2a\u5f15\u5165\uff08\u4f7f\u7528 Bootstrap \u63d0\u4f9b\u7684\u5355\u4e2a *<em>.js<\/em> \u6587\u4ef6\uff09\uff0c\u6216\u8005\u4e00\u6b21\u6027\u5168\u90e8\u5f15\u5165\uff08\u4f7f\u7528 <em>bootstrap.js<\/em> \u6216\u538b\u7f29\u7248\u7684 <em>bootstrap.min.js<\/em>\uff09\u3002 <\/p>\n<p>\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<strong><em>*\u4e4b\u524d*<\/em><\/strong>\u5f15\u5165\u9875\u9762\uff09\u3002 <a href=\"https:\/\/github.com\/twbs\/bootstrap\/blob\/v3.3.7\/bower.json\"><em>bower.json<\/em><\/a> \u6587\u4ef6\u4e2d\u5217\u51fa\u4e86 Bootstrap \u6240\u652f\u6301\u7684 jQuery \u7248\u672c\u3002<\/p>\n<h4>2.data\u5c5e\u6027<\/h4>\n<p>\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<p>\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 <em>data-api<\/em> \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<p>$(document).off('.data-api')<\/p>\n<p>\u53e6\u5916\uff0c\u5982\u679c\u662f\u9488\u5bf9\u67d0\u4e2a\u7279\u5b9a\u7684\u63d2\u4ef6\uff0c\u53ea\u9700\u5728 <em>data-api<\/em> \u524d\u9762\u6dfb\u52a0\u90a3\u4e2a\u63d2\u4ef6\u7684\u540d\u79f0\u4f5c\u4e3a\u547d\u540d\u7a7a\u95f4\uff0c\u5982\u4e0b\uff1a<\/p>\n<p>$(document).off('.alert.data-api')<\/p>\n<h4>3. \u7f16\u7a0b\u65b9\u5f0f\u7684 API<\/h4>\n<p>\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<pre><code class=\"language-javascript\">$('.btn.danger').button('toggle').addClass('fat')<\/code><\/pre>\n<p>\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<pre><code class=\"language-javascript\">$('#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<p>\u6bcf\u4e2a\u63d2\u4ef6\u8fd8\u901a\u8fc7 <em>Constructor<\/em> \u5c5e\u6027\u66b4\u9732\u4e86\u5176\u539f\u59cb\u7684\u6784\u9020\u51fd\u6570\uff1a<em>$.fn.popover.Constructor<\/em>\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<em>$('[rel="popover"]').data('popover')<\/em>\u3002<\/p>\n<p><strong><em>*\u9ed8\u8ba4\u8bbe\u7f6e*<\/em><\/strong><\/p>\n<p>\u6bcf\u4e2a\u63d2\u4ef6\u90fd\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\u5176\u81ea\u8eab\u7684 <em>Constructor.DEFAULTS<\/em> \u5bf9\u8c61\u4ece\u800c\u6539\u53d8\u63d2\u4ef6\u7684\u9ed8\u8ba4\u8bbe\u7f6e\uff1a<\/p>\n<p>$.fn.modal.Constructor.DEFAULTS.keyboard = <strong>false<\/strong> <em>\/\/ \u5c06\u6a21\u6001\u6846\u63d2\u4ef6\u7684 <code>keyboard<\/code> \u9ed8\u8ba4\u9009\u53c2\u6570\u7f6e\u4e3a false<\/em><\/p>\n<h4>4.\u907f\u514d\u547d\u540d\u7a7a\u95f4\u51b2\u7a81<\/h4>\n<p>\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 <em>.noConflict<\/em> \u65b9\u6cd5\u6062\u590d\u5176\u539f\u59cb\u503c\u3002<\/p>\n<pre><code class=\"language-javascript\">var bootstrapButton = $.fn.button.noConflict() \/\/ return $.fn.button to previously assigned value\n$.fn.bootstrapBtn = bootstrapButton       \/\/ give $().bootstrapBtn the Bootstrap functionality<\/code><\/pre>\n<h4>5. \u4e8b\u4ef6<\/h4>\n<p>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 <em>show<\/em>\uff09\u8868\u793a\u5176\u5728\u4e8b\u4ef6\u5f00\u59cb\u65f6\u88ab\u89e6\u53d1\uff1b\u800c\u8fc7\u53bb\u5f0f\u52a8\u8bcd\uff08\u4f8b\u5982 <em>shown<\/em> \uff09\u8868\u793a\u5728\u52a8\u4f5c\u6267\u884c\u5b8c\u6bd5\u4e4b\u540e\u88ab\u89e6\u53d1\u3002<\/p>\n<p>\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<p>\u6240\u6709\u4ee5\u4e0d\u5b9a\u5f0f\u5f62\u5f0f\u7684\u52a8\u8bcd\u547d\u540d\u7684\u4e8b\u4ef6\u90fd\u63d0\u4f9b\u4e86 <em>preventDefault<\/em> \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<pre><code class=\"language-javascript\">$('#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<h4>6.\u7248\u672c\u53f7<\/h4>\n<p>\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 <em>VERSION<\/em> \u5c5e\u6027\u83b7\u53d6\u5230\u3002\u4f8b\u5982\u5de5\u5177\u63d0\u793a\u6846\uff08tooltip\uff09\u63d2\u4ef6\uff1a<\/p>\n<pre><code class=\"language-javascript\">$.fn.tooltip.Constructor.VERSION \/\/ => "3.3.7"<\/code><\/pre>\n<h3>2\u3001\u8fc7\u5ea6\u6548\u679c transition.js<\/h3>\n<h4>1.\u5173\u4e8e\u8fc7\u6e21\u6548\u679c<\/h4>\n<p>\u5bf9\u4e8e\u7b80\u5355\u7684\u8fc7\u6e21\u6548\u679c\uff0c\u53ea\u9700\u5c06 <em>transition.js<\/em> \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 <em>bootstrap.js<\/em> \u6587\u4ef6\uff0c\u5c31\u65e0\u9700\u518d\u5355\u72ec\u5c06\u5176\u5f15\u5165\u4e86\u3002<\/p>\n<h4>2.\u5305\u542b\u7684\u5185\u5bb9<\/h4>\n<p>Transition.js \u662f\u9488\u5bf9 <em>transitionEnd<\/em> \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<h4>3.\u7981\u7528\u8fc7\u5ea6\u6548\u679c<\/h4>\n<p>\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 <em>transition.js<\/em> \uff08\u6216 <em>bootstrap.js<\/em> \u6216 <em>bootstrap.min.js<\/em>\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<p>$.support.transition = false<\/p>\n<h3>3\u3001\u6a21\u6001\u6846 modal.js<\/h3>\n<p>\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<h4>1.\u6a21\u6001\u6846\u5b9a\u4e49<\/h4>\n<pre><code class=\"language-javascript\"><!-- 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">×<\/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><\/code><\/pre>\n<h4>2.\u6309\u94ae<\/h4>\n<pre><code class=\"language-javascript\"><!-- 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><\/code><\/pre>\n<h4>3.\u6a21\u6001\u6846\u5c3a\u5bf8<\/h4>\n<pre><code class=\"language-javascript\"><!-- 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><\/code><\/pre>\n<h4>4.\u7981\u6b62\u52a8\u753b\u6548\u679c<\/h4>\n<p>\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 <em>.fade<\/em> \u7c7b\u5373\u53ef\u3002<\/p>\n<pre><code class=\"language-javascript\"><div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">\n  ...\n<\/div><\/code><\/pre>\n<h4>5.\u6a21\u6001\u6846\u4e2d\u4f7f\u7528\u6805\u683c\u7cfb\u7edf<\/h4>\n<pre><code class=\"language-javascript\"><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">×<\/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 --><\/code><\/pre>\n<h4>6.\u57fa\u4e8e\u89e6\u53d1\u5668\u6309\u94ae\u7684\u4e0d\u540c\u6a21\u6001\u5185\u5bb9<\/h4>\n<pre><code class=\"language-javascript\"><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">×<\/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$('#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})<\/code><\/pre>\n<h4>7.\u901a\u8fc7JavaScript\u5904\u7406\u6a21\u6001\u6846<\/h4>\n<h5>\u6253\u5f00<\/h5>\n<p>$('#myModal').modal(options)<\/p>\n<h5>\u53c2\u6570<\/h5>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u9ed8\u8ba4\u503c<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>backdrop<\/td>\n<td>boolean \u6216 \u5b57\u7b26\u4e32 <em>'static'<\/em><\/td>\n<td>true<\/td>\n<td>I\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<tr>\n<td>keyboard<\/td>\n<td>boolean<\/td>\n<td>true<\/td>\n<td>\u952e\u76d8\u4e0a\u7684 esc \u952e\u88ab\u6309\u4e0b\u65f6\u5173\u95ed\u6a21\u6001\u6846\u3002<\/td>\n<\/tr>\n<tr>\n<td>show<\/td>\n<td>boolean<\/td>\n<td>true<\/td>\n<td>\u6a21\u6001\u6846\u521d\u59cb\u5316\u4e4b\u540e\u5c31\u7acb\u5373\u663e\u793a\u51fa\u6765\u3002<\/td>\n<\/tr>\n<tr>\n<td>remote<\/td>\n<td>path<\/td>\n<td>false<\/td>\n<td><strong><em>\\<\/em>This option is deprecated since v3.3.0 and has been removed in v4.***<em> We recommend instead using client-side templating or a data binding framework, or calling <a href=\"http:\/\/api.jquery.com\/load\/\">jQuery.load<\/a>yourself.\u5982\u679c\u63d0\u4f9b\u7684\u662f URL\uff0c\u5c06\u5229\u7528 jQuery \u7684 <\/em>load<em> \u65b9\u6cd5<\/em><\/strong>*\u4ece\u6b64 URL \u5730\u5740\u52a0\u8f7d\u8981\u5c55\u793a\u7684\u5185\u5bb9\uff08\u53ea\u52a0\u8f7d\u4e00\u6b21\uff09***<em>\u5e76\u63d2\u5165 <\/em>.modal-content<em> \u5185\u3002\u5982\u679c\u4f7f\u7528\u7684\u662f data \u5c5e\u6027 API\uff0c\u8fd8\u53ef\u4ee5\u5229\u7528 <\/em>href<em> \u5c5e\u6027\u6307\u5b9a\u5185\u5bb9\u6765\u6e90\u5730\u5740\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u5b9e\u4f8b\uff1a<\/em><a data-toggle=\"modal\" href=\"remote.html\" data-target=\"#modal\">Click me<\/a>*<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u65b9\u6cd5<\/h5>\n<p><strong><em>*<\/em>.modal(options)*<em>\\<\/em><\/strong><\/p>\n<p>\u5c06\u9875\u9762\u4e2d\u7684\u67d0\u5757\u5185\u5bb9\u4f5c\u4e3a\u6a21\u6001\u6846\u6fc0\u6d3b\u3002\u63a5\u53d7\u53ef\u9009\u53c2\u6570 <em>object<\/em>\u3002<\/p>\n<p>$('#myModal').modal({<em><br \/>\n* keyboard: false<\/em><br \/>\n*})<\/p>\n<p><strong><em>*<\/em>.modal('toggle')*<em>\\<\/em><\/strong><\/p>\n<p>\u624b\u52a8\u6253\u5f00\u6216\u5173\u95ed\u6a21\u6001\u6846\u3002<strong><em>*\u5728\u6a21\u6001\u6846\u663e\u793a\u6216\u9690\u85cf\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d*<\/em><\/strong>\uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 <em>shown.bs.modal<\/em> \u6216 <em>hidden.bs.modal<\/em> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n<p>$('#myModal').modal('toggle')<\/p>\n<p><strong><em>*<\/em>.modal('show')*<em>\\<\/em><\/strong><\/p>\n<p>\u624b\u52a8\u6253\u5f00\u6a21\u6001\u6846\u3002<strong><em>*\u5728\u6a21\u6001\u6846\u663e\u793a\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d*<\/em><\/strong> \uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 <em>shown.bs.modal<\/em> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n<p>$('#myModal').modal('show')<\/p>\n<p><strong><em>*<\/em>.modal('hide')*<em>\\<\/em><\/strong><\/p>\n<p>\u624b\u52a8\u9690\u85cf\u6a21\u6001\u6846\u3002<strong><em>*\u5728\u6a21\u6001\u6846\u9690\u85cf\u4e4b\u524d\u8fd4\u56de\u5230\u4e3b\u8c03\u51fd\u6570\u4e2d*<\/em><\/strong> \uff08\u4e5f\u5c31\u662f\uff0c\u5728\u89e6\u53d1 <em>hidden.bs.modal<\/em> \u4e8b\u4ef6\u4e4b\u524d\uff09\u3002<\/p>\n<p>$('#myModal').modal('hide')<\/p>\n<p><strong><em>*<\/em>.modal('handleUpdate')*<em>\\<\/em><\/strong><\/p>\n<p>\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<p>\u53ea\u9700\u8981\u5f53\u6a21\u6001\u7684\u9ad8\u5ea6\u5728\u6253\u5f00\u65f6\u6539\u53d8\u3002<\/p>\n<p>$('#myModal').modal('handleUpdate')<\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<p>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<table>\n<thead>\n<tr>\n<th>\u4e8b\u4ef6\u7c7b\u578b<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.modal<\/td>\n<td><em>show<\/em> \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 <em>relatedTarget<\/em> \u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u3002<\/td>\n<\/tr>\n<tr>\n<td>shown.bs.modal<\/td>\n<td>\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 <em>relatedTarget<\/em> \u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u3002<\/td>\n<\/tr>\n<tr>\n<td>hide.bs.modal<\/td>\n<td><em>hide<\/em> \u65b9\u6cd5\u8c03\u7528\u4e4b\u540e\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.modal<\/td>\n<td>\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<tr>\n<td>loaded.bs.modal<\/td>\n<td>\u4ece<em>\u8fdc\u7aef\u7684\u6570\u636e\u6e90<\/em>\u52a0\u8f7d\u5b8c\u6570\u636e\u4e4b\u540e\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myModal').on('hidden.bs.modal', function (e) {\n  \/\/ do something...\n})<\/code><\/pre>\n<h3>4\u3001\u4e0b\u62c9\u83dc\u5355 dropdown.js<\/h3>\n<h4>1.JavaScript\u8c03\u7528<\/h4>\n<pre><code class=\"language-javascript\">$('.dropdown-toggle').dropdown()<\/code><\/pre>\n<p>\u65b9\u6cd5<\/p>\n<pre><code class=\"language-javascript\">$().dropdown('toggle')<\/code><\/pre>\n<p>Toggles the dropdown menu of a given navbar or tabbed navigation.<\/p>\n<h6>\u4e8b\u4ef6<\/h6>\n<table>\n<thead>\n<tr>\n<th>Event Type<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.dropdown<\/td>\n<td>This event fires immediately when the show instance method is called.<\/td>\n<\/tr>\n<tr>\n<td>shown.bs.dropdown<\/td>\n<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).<\/td>\n<\/tr>\n<tr>\n<td>hide.bs.dropdown<\/td>\n<td>This event is fired immediately when the hide instance method has been called.<\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.dropdown<\/td>\n<td>This 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<pre><code class=\"language-javascript\">$('#myDropdown').on('show.bs.dropdown', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>5\u3001\u6eda\u52a8\u76d1\u542c scrollspy.js<\/h3>\n<p>\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<p>\u4f9d\u8d56 Bootstrap \u7684\u5bfc\u822a\u7ec4\u4ef6<\/p>\n<p>\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<p>\u65e0\u8bba\u4f55\u79cd\u5b9e\u73b0\u65b9\u5f0f\uff0c\u6eda\u52a8\u76d1\u542c\u90fd\u9700\u8981\u88ab\u76d1\u542c\u7684\u7ec4\u4ef6\u662f <em>position: relative;<\/em> \u5373\u76f8\u5bf9\u5b9a\u4f4d\u65b9\u5f0f\u3002\u5927\u591a\u6570\u65f6\u5019\u662f\u76d1\u542c <em><body><\/em> \u5143\u7d20<\/p>\n<h4>1.\u57fa\u672c\u8c03\u7528<\/h4>\n<p>body {<br \/>\nposition: relative;<br \/>\n}<\/p>\n<pre><code class=\"language-javascript\"><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<h4>2.JavaScript\u8c03\u7528<\/h4>\n<p>$('body').scrollspy({ target: '#navbar-example' })<\/p>\n<h6>\u65b9\u6cd5<\/h6>\n<p>.scrollspy('refresh')<\/p>\n<p>\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<pre><code class=\"language-javascript\">$('[data-spy="scroll"]').each(function () {\n  var $spy = $(this).scrollspy('refresh')\n})<\/code><\/pre>\n<h6>\u53c2\u6570<\/h6>\n<p>\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 <em>data-<\/em> \u540e\u9762\u7ec4\u6210\uff0c\u4f8b\u5982 <em>data-offset=""<\/em>\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u9ed8\u8ba4\u503c<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>offset<\/td>\n<td>number<\/td>\n<td>10<\/td>\n<td>\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<h6>\u4e8b\u4ef6<\/h6>\n<table>\n<thead>\n<tr>\n<th>\u4e8b\u4ef6\u7c7b\u578b<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>activate.bs.scrollspy<\/td>\n<td>\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<p>$('#myScrollspy').on('activate.bs.scrollspy', <strong>function<\/strong> () {<br \/>\n\/\/ do something\u2026<br \/>\n})<\/p>\n<h3>6\u3001\u6807\u7b7e\u9875 tab.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<pre><code class=\"language-javascript\"><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<h4>2.Fade\u7279\u6548<\/h4>\n<pre><code class=\"language-javascript\"><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<h4>3.JavaScript\u8c03\u7528<\/h4>\n<pre><code class=\"language-javascript\">$('#myTabs a').click(function (e) {\n  e.preventDefault()\n  $(this).tab('show')\n})\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<h5>\u65b9\u6cd5<\/h5>\n<p><strong><em>*<\/em>$().tab*<em>\\<\/em><\/strong><\/p>\n<p>\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 <strong><em>*data-target*<\/em><\/strong> \u6216\u8005\u4e00\u4e2a\u6307\u5411 DOM \u4e2d\u5bb9\u5668\u8282\u70b9\u7684 href\u3002<\/p>\n<p>.tab('show')<\/p>\n<p>Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. <strong><em>*Returns to the caller before the tab pane has actually been shown*<\/em><\/strong> (i.e. before the <em>shown.bs.tab<\/em>event occurs).<\/p>\n<p>$('#someTab').tab('show')<\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.tab<\/td>\n<td>\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 <strong><em>\\<\/em>event.target***<em> \u548c <\/em><\/strong>*event.relatedTarget**** \u6765\u5b9a\u4f4d\u5230\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u548c\u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u3002<\/td>\n<td><em>$('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 })<\/em><\/td>\n<\/tr>\n<tr>\n<td>shown.bs.tab<\/td>\n<td>\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 <strong><em>\\<\/em>event.target***<em> \u548c <\/em><\/strong>*event.relatedTarget**** \u6765\u5b9a\u4f4d\u5230\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u548c\u524d\u4e00\u4e2a\u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u3002<\/td>\n<td><em>$('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 })<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('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<h3>7\u3001\u5de5\u5177\u63d0\u793a tooltips.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<pre><code class=\"language-javascript\"><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<h4>2.JavaScript\u8c03\u7528<\/h4>\n<p>$('#example').tooltip(options)<\/p>\n<h5>\u53c2\u6570<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u9009\u9879\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u7c7b\u578b\/\u9ed8\u8ba4\u503c*<\/em><\/strong><\/th>\n<th><strong><em>*Data \u5c5e\u6027\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>animation<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1atrue<\/strong><\/td>\n<td>data-animation<\/td>\n<td>\u63d0\u793a\u5de5\u5177\u4f7f\u7528 CSS \u6e10\u53d8\u6ee4\u955c\u6548\u679c\u3002<\/td>\n<\/tr>\n<tr>\n<td>html<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-html<\/td>\n<td>\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<tr>\n<td>placement<\/td>\n<td>string|function <strong>\u9ed8\u8ba4\u503c\uff1atop<\/strong><\/td>\n<td>data-placement<\/td>\n<td>\u89c4\u5b9a\u5982\u4f55\u5b9a\u4f4d\u63d0\u793a\u5de5\u5177\uff08\u5373 top|bottom|left|right|auto\uff09\u3002 \u5f53\u6307\u5b9a\u4e3a <strong>auto<\/strong> \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<tr>\n<td>selector<\/td>\n<td>string <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-selector<\/td>\n<td>\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<tr>\n<td>title<\/td>\n<td>string | function <strong>\u9ed8\u8ba4\u503c\uff1a''<\/strong><\/td>\n<td>data-title<\/td>\n<td>\u5982\u679c\u672a\u6307\u5b9a <strong>title<\/strong> \u5c5e\u6027\uff0c\u5219 title \u9009\u9879\u662f\u9ed8\u8ba4\u7684 title \u503c\u3002<\/td>\n<\/tr>\n<tr>\n<td>trigger<\/td>\n<td>string <strong>\u9ed8\u8ba4\u503c\uff1a'hover focus'<\/strong><\/td>\n<td>data-trigger<\/td>\n<td>\u5b9a\u4e49\u5982\u4f55\u89e6\u53d1\u63d0\u793a\u5de5\u5177\uff1a <strong><em>*click| hover | focus | manual*<\/em><\/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<tr>\n<td>delay<\/td>\n<td>number | object <strong>\u9ed8\u8ba4\u503c\uff1a0<\/strong><\/td>\n<td>data-delay<\/td>\n<td>\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\uff1a<em>delay: { show: 500, hide: 100 }<\/em><\/td>\n<\/tr>\n<tr>\n<td>container<\/td>\n<td>string | false <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-container<\/td>\n<td>\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<h5>\u65b9\u6cd5<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u65b9\u6cd5*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong><em>*Options:*<\/em><\/strong> .tooltip(options)<\/td>\n<td>\u5411\u5143\u7d20\u96c6\u5408\u9644\u52a0\u63d0\u793a\u5de5\u5177\u53e5\u67c4\u3002<\/td>\n<td><em>$().tooltip(options)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Toggle:*<\/em><\/strong> .tooltip('toggle')<\/td>\n<td>\u5207\u6362\u663e\u793a\/\u9690\u85cf\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n<td><em>$('#element').tooltip('toggle')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Show:*<\/em><\/strong> .tooltip('show')<\/td>\n<td>\u663e\u793a\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n<td><em>$('#element').tooltip('show')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Hide:*<\/em><\/strong> .tooltip('hide')<\/td>\n<td>\u9690\u85cf\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n<td><em>$('#element').tooltip('hide')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Destroy:*<\/em><\/strong> .tooltip('destroy')<\/td>\n<td>\u9690\u85cf\u5e76\u9500\u6bc1\u5143\u7d20\u7684\u63d0\u793a\u5de5\u5177\u3002<\/td>\n<td><em>$('#element').tooltip('destroy')<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>$('#element').tooltip('destroy')<\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.tooltip<\/td>\n<td>\u5f53\u8c03\u7528 show \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#myTooltip').on('show.bs.tooltip', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>shown.bs.tooltip<\/td>\n<td>\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<td><em>$('#myTooltip').on('shown.bs.tooltip', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hide.bs.tooltip<\/td>\n<td>\u5f53\u8c03\u7528 hide \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#myTooltip').on('hide.bs.tooltip', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.tooltip<\/td>\n<td>\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<td><em>$('#myTooltip').on('hidden.bs.tooltip', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myTooltip').on('hidden.bs.tooltip', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>8\u3001\u5f39\u51fa\u6846 popover.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<h5>\u57fa\u672c<\/h5>\n<pre><code class=\"language-javascript\"><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?">\u70b9\u6211\u5f39\u51fa\/\u9690\u85cf\u5f39\u51fa\u6846<\/button><\/code><\/pre>\n<h5>\u5f39\u51fa\u65b9\u5411<\/h5>\n<pre><code class=\"language-javascript\"><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.">\n  Popover on \u5de6\u4fa7\n<\/button>\n\n<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.">\n  Popover on \u9876\u90e8\n<\/button>\n\n<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus\nsagittis lacus vel augue laoreet rutrum faucibus.">\n  Popover on \u5e95\u90e8\n<\/button>\n\n<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.">\n  Popover on \u53f3\u4fa7\n<\/button><\/code><\/pre>\n<h5>\u70b9\u51fb\u5e76\u8ba9\u5f39\u51fa\u6846\u6d88\u5931<\/h5>\n<p>\u901a\u8fc7\u4f7f\u7528 <em>focus<\/em> \u89e6\u53d1\u5668\u53ef\u4ee5\u5728\u7528\u6237\u70b9\u51fb\u5f39\u51fa\u6846\u662f\u8ba9\u5176\u6d88\u5931\u3002<\/p>\n<p>\u5b9e\u73b0\u201c\u70b9\u51fb\u5e76\u8ba9\u5f39\u51fa\u6846\u6d88\u5931\u201d\u7684\u6548\u679c\u9700\u8981\u4e00\u4e9b\u989d\u5916\u7684\u4ee3\u7801<\/p>\n<p>\u4e3a\u4e86\u66f4\u597d\u7684\u8de8\u6d4f\u89c8\u5668\u548c\u8de8\u5e73\u53f0\u6548\u679c\uff0c\u4f60\u5fc5\u987b\u4f7f\u7528 <em><a><\/em> \u6807\u7b7e\uff0c<strong>\u4e0d\u80fd<\/strong>\u4f7f\u7528 <em><button><\/em> \u6807\u7b7e\uff0c\u5e76\u4e14\uff0c\u8fd8\u5fc5\u987b\u5305\u542b <em>role="button"<\/em> \u548c <a href=\"#tabindex\"><em>tabindex<\/em><\/a> \u5c5e\u6027\u3002<\/p>\n<pre><code class=\"language-javascript\"><a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">\u53ef\u6d88\u5931\u7684\u5f39\u51fa\u6846<\/a><\/code><\/pre>\n<h4>2. javaScript\u8c03\u7528<\/h4>\n<pre><code class=\"language-javascript\">$('#example').popover(options)<\/code><\/pre>\n<h5>\u53c2\u6570<\/h5>\n<p>\u53ef\u4ee5\u901a\u8fc7 data \u5c5e\u6027\u6216 JavaScript \u4f20\u9012\u53c2\u6570\u3002\u5bf9\u4e8e data \u5c5e\u6027\uff0c\u5c06\u53c2\u6570\u540d\u9644\u7740\u5230 <em>data-<\/em> \u540e\u9762\uff0c\u4f8b\u5982 <em>data-animation=""<\/em>\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u9009\u9879\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u7c7b\u578b\/\u9ed8\u8ba4\u503c*<\/em><\/strong><\/th>\n<th><strong><em>*Data \u5c5e\u6027\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>animation<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1atrue<\/strong><\/td>\n<td>data-animation<\/td>\n<td>\u5411\u5f39\u51fa\u6846\u5e94\u7528 CSS \u892a\u8272\u8fc7\u6e21\u6548\u679c\u3002<\/td>\n<\/tr>\n<tr>\n<td>html<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-html<\/td>\n<td>\u5411\u5f39\u51fa\u6846\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<tr>\n<td>placement<\/td>\n<td>string|function <strong>\u9ed8\u8ba4\u503c\uff1atop<\/strong><\/td>\n<td>data-placement<\/td>\n<td>\u89c4\u5b9a\u5982\u4f55\u5b9a\u4f4d\u5f39\u51fa\u6846\uff08\u5373 top|bottom|left|right|auto\uff09\u3002 \u5f53\u6307\u5b9a\u4e3a <strong>auto<\/strong> \u65f6\uff0c\u4f1a\u52a8\u6001\u8c03\u6574\u5f39\u51fa\u6846\u3002\u4f8b\u5982\uff0c\u5982\u679c placement \u662f "auto left"\uff0c\u5f39\u51fa\u6846\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<tr>\n<td>selector<\/td>\n<td>string <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-selector<\/td>\n<td>\u5982\u679c\u63d0\u4f9b\u4e86\u4e00\u4e2a\u9009\u62e9\u5668\uff0c\u5f39\u51fa\u6846\u5bf9\u8c61\u5c06\u88ab\u59d4\u6d3e\u5230\u6307\u5b9a\u7684\u76ee\u6807\u3002<\/td>\n<\/tr>\n<tr>\n<td>title<\/td>\n<td>string | function <strong>\u9ed8\u8ba4\u503c\uff1a''<\/strong><\/td>\n<td>data-title<\/td>\n<td>\u5982\u679c\u672a\u6307\u5b9a <strong>title<\/strong> \u5c5e\u6027\uff0c\u5219 title \u9009\u9879\u662f\u9ed8\u8ba4\u7684 title \u503c\u3002<\/td>\n<\/tr>\n<tr>\n<td>trigger<\/td>\n<td>string <strong>\u9ed8\u8ba4\u503c\uff1a'hover focus'<\/strong><\/td>\n<td>data-trigger<\/td>\n<td>\u5b9a\u4e49\u5982\u4f55\u89e6\u53d1\u5f39\u51fa\u6846\uff1a <strong><em>*click| hover | focus | manual*<\/em><\/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<tr>\n<td>delay<\/td>\n<td>number | object <strong>\u9ed8\u8ba4\u503c\uff1a0<\/strong><\/td>\n<td>data-delay<\/td>\n<td>\u5ef6\u8fdf\u663e\u793a\u548c\u9690\u85cf\u5f39\u51fa\u6846\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\uff1a<em>delay: { show: 500, hide: 100 }<\/em><\/td>\n<\/tr>\n<tr>\n<td>container<\/td>\n<td>string | false <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-container<\/td>\n<td>\u5411\u6307\u5b9a\u5143\u7d20\u8ffd\u52a0\u5f39\u51fa\u6846\u3002 \u5b9e\u4f8b\uff1a container: 'body'<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u65b9\u6cd5<\/h5>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5<\/th>\n<th>\u63cf\u8ff0<\/th>\n<th>\u5b9e\u4f8b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong><em>*Options:*<\/em><\/strong> .popover(options)<\/td>\n<td>\u5411\u5143\u7d20\u96c6\u5408\u9644\u52a0\u5f39\u51fa\u6846\u53e5\u67c4\u3002<\/td>\n<td><em>$().popover(options)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Toggle:*<\/em><\/strong> .popover('toggle')<\/td>\n<td>\u5207\u6362\u663e\u793a\/\u9690\u85cf\u5143\u7d20\u7684\u5f39\u51fa\u6846\u3002<\/td>\n<td><em>$('#element').popover('toggle')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Show:*<\/em><\/strong> .popover('show')<\/td>\n<td>\u663e\u793a\u5143\u7d20\u7684\u5f39\u51fa\u6846\u3002<\/td>\n<td><em>$('#element').popover('show')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Hide:*<\/em><\/strong> .popover('hide')<\/td>\n<td>\u9690\u85cf\u5143\u7d20\u7684\u5f39\u51fa\u6846\u3002<\/td>\n<td><em>$('#element').popover('hide')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Destroy:*<\/em><\/strong> .popover('destroy')<\/td>\n<td>\u9690\u85cf\u5e76\u9500\u6bc1\u5143\u7d20\u7684\u5f39\u51fa\u6846\u3002<\/td>\n<td><em>$('#element').popover('destroy')<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>$('#element').popover('destroy') <\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.popover<\/td>\n<td>\u5f53\u8c03\u7528 show \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#mypopover').on('show.bs.popover', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>shown.bs.popover<\/td>\n<td>\u5f53\u5f39\u51fa\u6846\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<td><em>$('#mypopover').on('shown.bs.popover', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hide.bs.popover<\/td>\n<td>\u5f53\u8c03\u7528 hide \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#mypopover').on('hide.bs.popover', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.popover<\/td>\n<td>\u5f53\u5de5\u5177\u63d0\u793a\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<td><em>$('#mypopover').on('hidden.bs.popover', function () {  \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myPopover').on('hidden.bs.popover', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>9\u3001\u8b66\u544a\u4fe1\u606f alert.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<p>\u5f53\u4f7f\u7528 <em>.close<\/em> \u6309\u94ae\u65f6\uff0c\u5b83\u5fc5\u987b\u662f <em>.alert-dismissible<\/em> \u7684\u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20\uff0c\u5e76\u4e14\u5728\u5b83\u4e4b\u524d\u4e0d\u80fd\u6709\u4efb\u4f55\u6587\u672c\u5185\u5bb9\u3002<\/p>\n<p>\u4e3a\u5173\u95ed\u6309\u94ae\u6dfb\u52a0 <em>data-dismiss="alert"<\/em> \u5c5e\u6027\u5c31\u53ef\u4ee5\u4f7f\u5176\u81ea\u52a8\u4e3a\u8b66\u544a\u6846\u8d4b\u4e88\u5173\u95ed\u529f\u80fd\u3002\u5173\u95ed\u8b66\u544a\u6846\u4e5f\u5c31\u662f\u5c06\u5176\u4ece DOM \u4e2d\u5220\u9664\u3002<\/p>\n<pre><code class=\"language-javascript\"><button type="button" class="close" data-dismiss="alert" aria-label="Close">\n  <span aria-hidden="true">×<\/span>\n<\/button><\/code><\/pre>\n<p>\u4e3a\u4e86\u8ba9\u8b66\u544a\u6846\u5728\u5173\u95ed\u65f6\u8868\u73b0\u51fa\u52a8\u753b\u6548\u679c\uff0c\u8bf7\u786e\u4fdd\u4e3a\u5176\u6dfb\u52a0\u4e86 <em>.fade<\/em> \u548c <em>.in<\/em> \u7c7b\u3002<\/p>\n<h4>2. JavaScript\u8c03\u7528<\/h4>\n<h5>\u65b9\u6cd5<\/h5>\n<p><strong><em>*<\/em>$().alert()*<em>\\<\/em><\/strong><\/p>\n<p>\u8ba9\u8b66\u544a\u6846\u76d1\u542c\u5177\u6709 <em>data-dismiss="alert"<\/em> \u5c5e\u6027\u7684\u540e\u88d4\u5143\u7d20\u7684\u70b9\u51fb\uff08click\uff09\u4e8b\u4ef6\u3002\uff08\u5982\u679c\u662f\u901a\u8fc7 data \u5c5e\u6027\u8fdb\u884c\u7684\u521d\u59cb\u5316\u5219\u65e0\u9700\u4f7f\u7528\uff09<\/p>\n<p><strong><em>*<\/em>$().alert('close')*<em>\\<\/em><\/strong><\/p>\n<p>\u5173\u95ed\u8b66\u544a\u6846\u5e76\u4ece DOM \u4e2d\u5c06\u5176\u5220\u9664\u3002\u5982\u679c\u8b66\u544a\u6846\u88ab\u8d4b\u4e88\u4e86 <em>.fade<\/em> \u548c <em>.in<\/em> \u7c7b\uff0c\u90a3\u4e48\uff0c\u8b66\u544a\u6846\u5728\u6de1\u51fa\u4e4b\u540e\u624d\u4f1a\u88ab\u5220\u9664\u3002<\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<p>Bootstrap \u7684\u8b66\u544a\u6846\u63d2\u4ef6\u5bf9\u5916\u66b4\u9732\u4e86\u4e00\u4e9b\u53ef\u4ee5\u88ab\u76d1\u542c\u7684\u4e8b\u4ef6\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6\u7c7b\u578b*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>close.bs.alert<\/td>\n<td>\u5f53 <em>close<\/em> \u65b9\u6cd5\u88ab\u8c03\u7528\u540e\u7acb\u5373\u89e6\u53d1\u6b64\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<tr>\n<td>closed.bs.alert<\/td>\n<td>\u5f53\u8b66\u544a\u6846\u88ab\u5173\u95ed\u540e\uff08\u4e5f\u5373 CSS \u8fc7\u6e21\u6548\u679c\u5b8c\u6bd5\u4e4b\u540e\uff09\u7acb\u5373\u89e6\u53d1\u6b64\u4e8b\u4ef6\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myAlert').on('closed.bs.alert', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>10\u3001\u6309\u94ae button.js<\/h3>\n<h4>1.\u52a0\u8f7d\u72b6\u6001<\/h4>\n<pre><code class=\"language-javascript\"><button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">\n  Loading state\n<\/button>\n\n<script>\n  $('#myButton').on('click', function () {\n    var $btn = $(this).button('loading')\n    \/\/ business logic...\n    $btn.button('reset')\n  })\n<\/script><\/code><\/pre>\n<h4>2.\u72ec\u7acb\u7684\u6309\u94ae\u5207\u6362\u72b6\u6001<\/h4>\n<pre><code class=\"language-javascript\"><button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">\n  Single toggle\n<\/button><\/code><\/pre>\n<h4>3.Checkbox\u548cRadio<\/h4>\n<pre><code class=\"language-javascript\"><div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)\n  <\/label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 2\n  <\/label>\n  <label class="btn btn-primary">\n    <input type="checkbox" autocomplete="off"> Checkbox 3\n  <\/label>\n<\/div>\n<div class="btn-group" data-toggle="buttons">\n  <label class="btn btn-primary active">\n    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)\n  <\/label>\n  <label class="btn btn-primary">\n    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2\n  <\/label>\n  <label class="btn btn-primary">\n    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3\n  <\/label>\n<\/div><\/code><\/pre>\n<h4>4.JavaScript\u65b9\u6cd5<\/h4>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u65b9\u6cd5*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>button('toggle')<\/td>\n<td>\u5207\u6362\u6309\u538b\u72b6\u6001\u3002\u8d4b\u4e88\u6309\u94ae\u88ab\u6fc0\u6d3b\u7684\u5916\u89c2\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 <strong><em>*data-toggle*<\/em><\/strong> \u5c5e\u6027\u542f\u7528\u6309\u94ae\u7684\u81ea\u52a8\u5207\u6362\u3002<\/td>\n<td><em>$().button('toggle')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.button('loading')<\/td>\n<td>\u5f53\u52a0\u8f7d\u65f6\uff0c\u6309\u94ae\u662f\u7981\u7528\u7684\uff0c\u4e14\u6587\u672c\u53d8\u4e3a button \u5143\u7d20\u7684 <strong><em>*data-loading-text*<\/em><\/strong> \u5c5e\u6027\u7684\u503c\u3002<\/td>\n<td><em>$().button('loading')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.button('reset')<\/td>\n<td>\u91cd\u7f6e\u6309\u94ae\u72b6\u6001\uff0c\u6587\u672c\u5185\u5bb9\u6062\u590d\u4e3a\u6700\u521d\u7684\u5185\u5bb9\u3002\u5f53\u60a8\u60f3\u8981\u628a\u6309\u94ae\u8fd4\u56de\u4e3a\u539f\u59cb\u7684\u72b6\u6001\u65f6\uff0c\u8be5\u65b9\u6cd5\u975e\u5e38\u6709\u7528\u3002<\/td>\n<td><em>$().button('reset')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.button(string)<\/td>\n<td>\u8be5\u65b9\u6cd5\u4e2d\u7684\u5b57\u7b26\u4e32\u662f\u6307\u7531\u7528\u6237\u58f0\u660e\u7684\u4efb\u4f55\u5b57\u7b26\u4e32\u3002\u4f7f\u7528\u8be5\u65b9\u6cd5\uff0c\u91cd\u7f6e\u6309\u94ae\u72b6\u6001\uff0c\u5e76\u6dfb\u52a0\u65b0\u7684\u5185\u5bb9\u3002<\/td>\n<td><em>$().button(string)<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong><button<\/strong> <strong>type<\/strong>="button" <strong>id<\/strong>="myStateButton" <strong>data-complete-text<\/strong>="finished!" <strong>class<\/strong>="btn btn-primary" <strong>autocomplete<\/strong>="off"<strong>>**<em><br \/>\n* ...<\/em><br \/>\n*<\/strong><\/button><strong>*<br \/>\n*<em><br \/>\n<\/em><\/strong><script><strong><em>\n\\<\/em> $('#myStateButton').on('click', <\/strong>function<strong> () {<em>\n\\<\/em>  $(<\/strong>this<strong>).button('complete') *\/\/ button text will be "finished!"*<em>\n* })<\/em>\n*<\/strong><\/script>**<\/p>\n<h3>11\u3001\u6298\u53e0collapse.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<pre><code class=\"language-javascript\"><a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">\n  Link with href\n<\/a>\n<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">\n  Button with data-target\n<\/button>\n<div class="collapse" id="collapseExample">\n  <div class="well">\n    ...\n  <\/div>\n<\/div><\/code><\/pre>\n<h4>2.\u624b\u98ce\u7434\u83dc\u5355<\/h4>\n<pre><code class=\"language-javascript\"><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">\n  <div class="panel panel-default">\n    <div class="panel-heading" role="tab" id="headingOne">\n      <h4 class="panel-title">\n        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">\n          Collapsible Group Item #1\n        <\/a>\n      <\/h4>\n    <\/div>\n    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">\n      <div class="panel-body">\n        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.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class="panel panel-default">\n    <div class="panel-heading" role="tab" id="headingTwo">\n      <h4 class="panel-title">\n        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">\n          Collapsible Group Item #2\n        <\/a>\n      <\/h4>\n    <\/div>\n    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">\n      <div class="panel-body">\n        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.\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class="panel panel-default">\n    <div class="panel-heading" role="tab" id="headingThree">\n      <h4 class="panel-title">\n        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">\n          Collapsible Group Item #3\n        <\/a>\n      <\/h4>\n    <\/div>\n    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">\n      <div class="panel-body">\n        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.\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n<p>It's also possible to swap out <em>.panel-body<\/em>s with <em>.list-group<\/em>s.<\/p>\n<h4>3.JavaScript\u8c03\u7528<\/h4>\n<pre><code class=\"language-javascript\">$('.collapse').collapse()<\/code><\/pre>\n<h5>\u9009\u9879<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u9009\u9879\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u7c7b\u578b\/\u9ed8\u8ba4\u503c*<\/em><\/strong><\/th>\n<th><strong><em>*Data \u5c5e\u6027\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>parent<\/td>\n<td>selector <strong>\u9ed8\u8ba4\u503c\uff1afalse<\/strong><\/td>\n<td>data-parent<\/td>\n<td>\u5982\u679c\u63d0\u4f9b\u4e86\u4e00\u4e2a\u9009\u62e9\u5668\uff0c\u5f53\u53ef\u6298\u53e0\u9879\u76ee\u663e\u793a\u65f6\uff0c\u6307\u5b9a\u7236\u5143\u7d20\u4e0b\u7684\u6240\u6709\u53ef\u6298\u53e0\u7684\u5143\u7d20\u5c06\u88ab\u5173\u95ed\u3002\u8fd9\u4e0e\u4f20\u7edf\u7684\u6298\u53e0\u9762\u677f\uff08accordion\uff09\u7684\u884c\u4e3a\u7c7b\u4f3c - \u8fd9\u4f9d\u8d56\u4e8e accordion-group \u7c7b\u3002<\/td>\n<\/tr>\n<tr>\n<td>toggle<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1atrue<\/strong><\/td>\n<td>data-toggle<\/td>\n<td>\u5207\u6362\u8c03\u7528\u53ef\u6298\u53e0\u5143\u7d20\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u65b9\u6cd5<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u65b9\u6cd5*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong><em>*Options:*<\/em><\/strong> .collapse(options)<\/td>\n<td>\u6fc0\u6d3b\u5185\u5bb9\u4e3a\u53ef\u6298\u53e0\u5143\u7d20\u3002\u63a5\u53d7\u4e00\u4e2a\u53ef\u9009\u7684 options \u5bf9\u8c61\u3002<\/td>\n<td><em>$('#identifier').collapse({   toggle: false })<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Toggle:*<\/em><\/strong> .collapse('toggle')<\/td>\n<td>\u5207\u6362\u663e\u793a\/\u9690\u85cf\u53ef\u6298\u53e0\u5143\u7d20\u3002<\/td>\n<td><em>$('#identifier').collapse('toggle')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Show:*<\/em><\/strong> .collapse('show')<\/td>\n<td>\u663e\u793a\u53ef\u6298\u53e0\u5143\u7d20\u3002<\/td>\n<td><em>$('#identifier').collapse('show')<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong><em>*Hide:*<\/em><\/strong> .collapse('hide')<\/td>\n<td>\u9690\u85cf\u53ef\u6298\u53e0\u5143\u7d20\u3002<\/td>\n<td><em>$('#identifier').collapse('hide')<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u4e8b\u4ef6<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>show.bs.collapse<\/td>\n<td>\u5728\u8c03\u7528 show \u65b9\u6cd5\u540e\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#identifier').on('show.bs.collapse', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>shown.bs.collapse<\/td>\n<td>\u5f53\u6298\u53e0\u5143\u7d20\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<td><em>$('#identifier').on('shown.bs.collapse', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hide.bs.collapse<\/td>\n<td>\u5f53\u8c03\u7528 hide \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#identifier').on('hide.bs.collapse', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>hidden.bs.collapse<\/td>\n<td>\u5f53\u6298\u53e0\u5143\u7d20\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<td><em>$('#identifier').on('hidden.bs.collapse', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myCollapsible').on('hidden.bs.collapse', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>12\u3001\u8f6e\u64ad carousel.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<pre><code class=\"language-javascript\"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">\n  <!-- Indicators -->\n  <ol class="carousel-indicators">\n    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><\/li>\n    <li data-target="#carousel-example-generic" data-slide-to="1"><\/li>\n    <li data-target="#carousel-example-generic" data-slide-to="2"><\/li>\n  <\/ol>\n\n  <!-- Wrapper for slides -->\n  <div class="carousel-inner" role="listbox">\n    <div class="item active">\n      <img src="..." alt="...">\n      <div class="carousel-caption">\n        ...\n      <\/div>\n    <\/div>\n    <div class="item">\n      <img src="..." alt="...">\n      <div class="carousel-caption">\n        ...\n      <\/div>\n    <\/div>\n    ...\n  <\/div>\n\n  <!-- Controls -->\n  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">\n    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"><\/span>\n    <span class="sr-only">Previous<\/span>\n  <\/a>\n  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">\n    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"><\/span>\n    <span class="sr-only">Next<\/span>\n  <\/a>\n<\/div><\/code><\/pre>\n<h4>2.\u6bcf\u4e2a\u9879\u76ee\u7684\u6807\u9898<\/h4>\n<pre><code class=\"language-javascript\"><div class="item">\n  <img src="..." alt="...">\n  <div class="carousel-caption">\n    <h3>...<\/h3>\n    <p>...<\/p>\n  <\/div>\n<\/div><\/code><\/pre>\n<h4>3.JavaScript \u8c03\u7528<\/h4>\n<pre><code class=\"language-javascript\">$('.carousel').carousel()<\/code><\/pre>\n<h5>\u9009\u9879<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u9009\u9879\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u7c7b\u578b\/\u9ed8\u8ba4\u503c*<\/em><\/strong><\/th>\n<th><strong><em>*Data \u5c5e\u6027\u540d\u79f0*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>interval<\/td>\n<td>number <strong>\u9ed8\u8ba4\u503c\uff1a5000<\/strong><\/td>\n<td>data-interval<\/td>\n<td>\u81ea\u52a8\u5faa\u73af\u6bcf\u4e2a\u9879\u76ee\u4e4b\u95f4\u5ef6\u8fdf\u7684\u65f6\u95f4\u91cf\u3002\u5982\u679c\u4e3a false\uff0c\u8f6e\u64ad\u5c06\u4e0d\u4f1a\u81ea\u52a8\u5faa\u73af\u3002<\/td>\n<\/tr>\n<tr>\n<td>pause<\/td>\n<td>string <strong>\u9ed8\u8ba4\u503c\uff1a"hover"<\/strong><\/td>\n<td>data-pause<\/td>\n<td>\u9f20\u6807\u8fdb\u5165\u65f6\u6682\u505c\u8f6e\u64ad\u5faa\u73af\uff0c\u9f20\u6807\u79bb\u5f00\u65f6\u6062\u590d\u8f6e\u64ad\u5faa\u73af\u3002<\/td>\n<\/tr>\n<tr>\n<td>wrap<\/td>\n<td>boolean <strong>\u9ed8\u8ba4\u503c\uff1atrue<\/strong><\/td>\n<td>data-wrap<\/td>\n<td>\u8f6e\u64ad\u662f\u5426\u8fde\u7eed\u5faa\u73af\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u65b9\u6cd5<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u65b9\u6cd5*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>.carousel(options)<\/td>\n<td>\u521d\u59cb\u5316\u8f6e\u64ad\u4e3a\u53ef\u9009\u7684 options \u5bf9\u8c61\uff0c\u5e76\u5f00\u59cb\u5faa\u73af\u9879\u76ee\u3002<\/td>\n<td><em>$('#identifier').carousel({   interval: 2000 })<\/em><\/td>\n<\/tr>\n<tr>\n<td>.carousel('cycle')<\/td>\n<td>\u4ece\u5de6\u5230\u53f3\u5faa\u73af\u8f6e\u64ad\u9879\u76ee\u3002<\/td>\n<td><em>$('#identifier').carousel('cycle')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.carousel('pause')<\/td>\n<td>\u505c\u6b62\u8f6e\u64ad\u5faa\u73af\u9879\u76ee\u3002<\/td>\n<td><em>$('#identifier').carousel('pause')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.carousel(number)<\/td>\n<td>\u5faa\u73af\u8f6e\u64ad\u5230\u67d0\u4e2a\u7279\u5b9a\u7684\u5e27\uff08\u4ece 0 \u5f00\u59cb\u8ba1\u6570\uff0c\u4e0e\u6570\u7ec4\u7c7b\u4f3c\uff09\u3002<\/td>\n<td><em>$('#identifier').carousel(number)<\/em><\/td>\n<\/tr>\n<tr>\n<td>.carousel('prev')<\/td>\n<td>\u5faa\u73af\u8f6e\u64ad\u5230\u4e0a\u4e00\u4e2a\u9879\u76ee\u3002<\/td>\n<td><em>$('#identifier').carousel('prev')<\/em><\/td>\n<\/tr>\n<tr>\n<td>.carousel('next')<\/td>\n<td>\u5faa\u73af\u8f6e\u64ad\u5230\u4e0b\u4e00\u4e2a\u9879\u76ee\u3002<\/td>\n<td><em>$('#identifier').carousel('next')<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u4e8b\u4ef6<\/h5>\n<table>\n<thead>\n<tr>\n<th><strong><em>*\u4e8b\u4ef6*<\/em><\/strong><\/th>\n<th><strong><em>*\u63cf\u8ff0*<\/em><\/strong><\/th>\n<th><strong><em>*\u5b9e\u4f8b*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>slide.bs.carousel<\/td>\n<td>\u5f53\u8c03\u7528 slide \u5b9e\u4f8b\u65b9\u6cd5\u65f6\u7acb\u5373\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#identifier').on('slide.bs.carousel', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<tr>\n<td>slid.bs.carousel<\/td>\n<td>\u5f53\u8f6e\u64ad\u5b8c\u6210\u5e7b\u706f\u7247\u8fc7\u6e21\u6548\u679c\u65f6\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002<\/td>\n<td><em>$('#identifier').on('slid.bs.carousel', function () {   \/\/ \u6267\u884c\u4e00\u4e9b\u52a8\u4f5c... })<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-javascript\">$('#myCarousel').on('slide.bs.carousel', function () {\n  \/\/ do something\u2026\n})<\/code><\/pre>\n<h3>13\u3001\u9644\u52a0 affix.js<\/h3>\n<h4>1.\u57fa\u672c\u4f7f\u7528<\/h4>\n<p>To easily add affix behavior to any element, just add <em>data-spy="affix"<\/em> to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.<\/p>\n<pre><code class=\"language-javascript\"><div data-spy="affix" data-offset-top="60" data-offset-bottom="200">\n  ...\n<\/div><\/code><\/pre>\n<h4>2.JavaScript\u8c03\u7528<\/h4>\n<p>Call the affix plugin via JavaScript:<\/p>\n<pre><code class=\"language-javascript\">$('#myAffix').affix({\n  offset: {\n    top: 100,\n    bottom: function () {\n      return (this.bottom = $('.footer').outerHeight(true))\n    }\n  }\n})<\/code><\/pre>\n<h5>\u9009\u9879<\/h5>\n<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <em>data-<\/em>, as in <em>data-offset-top="200"<\/em>.<\/p>\n<table>\n<thead>\n<tr>\n<th><strong><em>*Name*<\/em><\/strong><\/th>\n<th><strong><em>*type*<\/em><\/strong><\/th>\n<th><strong><em>*default*<\/em><\/strong><\/th>\n<th><strong><em>*description*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>offset<\/td>\n<td>number | function | object<\/td>\n<td>10<\/td>\n<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <em>offset: { top: 10 }<\/em> or <em>offset: { top: 10, bottom: 5 }<\/em>. Use a function when you need to dynamically calculate an offset.<\/td>\n<\/tr>\n<tr>\n<td>target<\/td>\n<td>selector | node | jQuery element<\/td>\n<td>the <em>window<\/em>object<\/td>\n<td>Specifies the target element of the affix.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5>\u65b9\u6cd5<\/h5>\n<p>$().affix(options)<\/p>\n<p>Activates your content as affixed content. Accepts an optional options <em>object<\/em>.<\/p>\n<pre><code class=\"language-javascript\">$('#myAffix').affix({\n  offset: 15\n})<\/code><\/pre>\n<p>$().affix('checkPosition')<\/p>\n<p>Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The <em>.affix<\/em>, <em>.affix-top<\/em>, and <em>.affix-bottom<\/em> classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.<\/p>\n<p>$('#myAffix').affix('checkPosition')<\/p>\n<h5>\u4e8b\u4ef6<\/h5>\n<p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.<\/p>\n<table>\n<thead>\n<tr>\n<th><strong><em>*Event Type*<\/em><\/strong><\/th>\n<th><strong><em>*Description*<\/em><\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>affix.bs.affix<\/td>\n<td>This event fires immediately before the element has been affixed.<\/td>\n<\/tr>\n<tr>\n<td>affixed.bs.affix<\/td>\n<td>This event is fired after the element has been affixed.<\/td>\n<\/tr>\n<tr>\n<td>affix-top.bs.affix<\/td>\n<td>This event fires immediately before the element has been affixed-top.<\/td>\n<\/tr>\n<tr>\n<td>affixed-top.bs.affix<\/td>\n<td>This event is fired after the element has been affixed-top.<\/td>\n<\/tr>\n<tr>\n<td>affix-bottom.bs.affix<\/td>\n<td>This event fires immediately before the element has been affixed-bottom.<\/td>\n<\/tr>\n<tr>\n<td>affixed-bottom.bs.affix<\/td>\n<td>This event is fired after the element has been affixed-bottom.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>BootStrap\u4e0a\u6709\u8bb8\u8bb8\u591a\u591a\u7684\u6837\u5f0f\uff0c\u7136\u800c\u4f5c\u4e3a\u4e00\u4e2a\u540e\u7aef\u5f00\u53d1\u4eba\u5458\uff0c\u6211\u4eec\u5e76\u4e0d\u9700\u8981\u4eb2\u81ea\u628a\u5b83\u4eec\u5168\u90e8\u5199\u51fa\u6765\uff0c\u6211\u4eec\u53ea\u8981\u80fd\u591f\u5bf9\u5927\u81f4\u6bcf\u4e2a\u6837\u5f0f\u6709\u4e2a\u5370\u8c61\uff0c\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u4eceBootStrap\u4e2d\u6587\u7f51\u4e0a\u83b7\u53d6\u6837\u5f0f\u5e76\u52a0\u5165\u6211\u4eec\u81ea\u5df1\u7684\u9879\u76ee\u4e2d\u5c31\u8db3\u4ee5\u5e94\u4ed8\u4e00\u822c\u7684\u9700\u6c42\u4e86\u3002<\/p>\n<p>\u5173\u4e8eJavaScript,Jquery\u548cBootstrap\u7684\u66f4\u591a\u77e5\u8bc6\u548c\u64cd\u4f5c,\u6211\u4eec\u5c06\u5728\u6700\u540e\u7684BBS\u9879\u76ee\u4e2d\u6d89\u53ca\u5230\u76f8\u5173\u77e5\u8bc6\u70b9\u7684\u65f6\u5019\u8fdb\u4e00\u6b65\u8bb2\u89e3<\/p>\n","protected":false},"excerpt":{"rendered":"<p>BootStrap BootStrap \u7531Twitter\u7684\u8bbe\u8ba1\u5e08Mark Otto\u548cJacob Thornto […]<\/p>\n","protected":false},"author":3,"featured_media":6081,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,404],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/6079"}],"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=6079"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/6079\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/media\/6081"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u4e00\u3001Bootstrap\u5e03\u5c40<\/h2>\n

1\u3001\u6982\u89c8<\/h3>\n

2.Normalize.css<\/h4>\n
BootStrap\u5185\u7f6e\u4e86Normalize.css<\/p>\n

3\u3001\u6392\u7248<\/h3>\n

1.\u6807\u9898<\/h4>\n
HTML \u4e2d\u7684\u6240\u6709\u6807\u9898\u6807\u7b7e\uff0c<\/p>\n

\u5230 <\/p>\n

4\u3001\u4ee3\u7801<\/h3>\n

5\u3001\u8868\u683c<\/h3>\n

5.\u7d27\u7f29\u8868\u683c<\/h4>\n
`<table class="table table-condensed">\n...\n<\/table><\/code><\/pre>\n6.\u72b6\u6001\u7c7b<\/h4>\n\u901a\u8fc7\u8fd9\u4e9b\u72b6\u6001\u7c7b\u53ef\u4ee5\u4e3a\u884c\u6216\u5355\u5143\u683c\u8bbe\u7f6e\u989c\u8272\u3002<\/p>\n`

6.\u72b6\u6001\u7c7b<\/h4>\n
\u901a\u8fc7\u8fd9\u4e9b\u72b6\u6001\u7c7b\u53ef\u4ee5\u4e3a\u884c\u6216\u5355\u5143\u683c\u8bbe\u7f6e\u989c\u8272\u3002<\/p>\n

6\u3001 \u8868\u5355<\/h3>\n
