{"id":1985,"date":"2023-03-25T14:33:59","date_gmt":"2023-03-25T06:33:59","guid":{"rendered":""},"modified":"2023-03-25T14:33:59","modified_gmt":"2023-03-25T06:33:59","slug":"Bootstrap \u63d0\u793a","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/1985.html","title":{"rendered":"Bootstrap \u63d0\u793a"},"content":{"rendered":"


\n <\/head>
\n <\/p>\n

\n

Bootstrap \u63d0\u793a<\/h1>\n<\/p><\/div>\n

Bootstrap Alerts<\/h2>\n
\n Bootstrap Alerts\u7528\u4e8e\u63d0\u4f9b\u521b\u5efa\u9884\u5b9a\u4e49\u63d0\u793a\u6d88\u606f\u7684\u7b80\u4fbf\u65b9\u6cd5\u3002 Alert\u4e3a\u60a8\u7684\u6d88\u606f\u6dfb\u52a0\u4e86\u4e00\u79cd\u6837\u5f0f\uff0c\u4ee5\u4f7f\u5176\u5bf9\u7528\u6237\u66f4\u5177\u5438\u5f15\u529b\u3002\n <\/div>\n
\n \u5728<div>\u5143\u7d20\u5185\u4f7f\u7528\u56db\u4e2a\u7c7b\u6765\u53d1\u51fa\u8b66\u62a5\u3002\n <\/div>\n

.alert-success <\/span>
\n .alert-info <\/span>
\n .alert-warning <\/span>
\n .alert-danger<\/span> <\/p>\n

\u542f\u52a8\u8b66\u62a5\u793a\u4f8b<\/h2>\n
\n
    <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\"<\/span>>\r\n  <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n  <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.0\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Alerts<\/h2>\r\n  <div class=\"alert alert-success\"<\/span>>\r\n    <strong>Success!<\/strong> this<\/span> alert box indicates a successful or positive action.\r\n  <\/div>\r\n  <div class=\"alert alert-info\"<\/span>>\r\n    <strong>Info!<\/strong> this<\/span> alert box indicates a neutral informative change or action.\r\n  <\/div>\r\n  <div class=\"alert alert-warning\"<\/span>>\r\n    <strong>Warning!<\/strong> this<\/span> alert box indicates a warning that might need attention.\r\n  <\/div>\r\n  <div class=\"alert alert-danger\"<\/span>>\r\n    <strong>Danger!<\/strong> this<\/span> alert box indicates a dangerous or potentially negative action.\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
 Bootstrap4 Alerts<\/h2>\n
\n    Bootstrap 4\u5728Bootstrap 3\u6559\u7a0b\u4e2d\u5b9a\u4e49\u7684Bootstrap Alert\u4e2d\u6dfb\u52a0\u4e864\u4e2a\u65b0Alerts\u3002\n  <\/div>\n
\n    \u8fd9\u4e9b\u662f:\n  <\/div>\n
   Primary: \u8be5\u8b66\u62a5\u6846\u8868\u793a\u91cd\u8981\u7684\u64cd\u4f5c\u3002<\/span>
\n   Secondary: \u6b64\u8b66\u62a5\u6846\u6307\u793a\u6b21\u8981\u64cd\u4f5c\u3002<\/span>
\n   Dark: \u6df1\u7070\u8272\u8b66\u62a5\u6846\u3002 <\/span>
\n   Light: \u6d45\u7070\u8272\u8b66\u62a5\u6846\u3002<\/span> <\/p>\n
\n    \u4f7f\u7528.alert\u7c7b\u521b\u5efa\u8b66\u62a5\uff0c\u7136\u540e\u521b\u5efa\u5176\u4e2d\u4e00\u4e2a\u4e0a\u4e0b\u6587\u7c7b\u3002\n  <\/div>\n
\n    \u6240\u6709\u4e0a\u4e0b\u6587\u7c7b\u7684\u5217\u8868:\n  <\/div>\n
   .alert-success <\/span>
\n   .alert-info <\/span>
\n  .alert-warning<\/span>
\n  .alert-danger<\/span>
\n   .alert-primary <\/span>
\n   .alert-secondary <\/span>
\n   .alert-light <\/span>
\n   .alert-dark <\/span> <\/p>\n
\u793a\u4f8b<\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\"<\/span>>\r\n  <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n  <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Alerts<\/h2>\r\n  <div class=\"alert alert-success\"<\/span>>\r\n    <strong>Success!<\/strong> Used to indicate successful or positive action.\r\n  <\/div>\r\n  <div class=\"alert alert-info\"<\/span>>\r\n    <strong>Info!<\/strong> Used to indicate a neutral informative change or action.\r\n  <\/div>\r\n  <div class=\"alert alert-warning\"<\/span>>\r\n    <strong>Warning!<\/strong> Used to indicate a warning that might need attention.\r\n  <\/div>\r\n  <div class=\"alert alert-danger\"<\/span>>\r\n    <strong>Danger!<\/strong> Used to indicate a dangerous or potentially negative action.\r\n  <\/div>\r\n  <div class=\"alert alert-primary\"<\/span>>\r\n    <strong>Primary!<\/strong> Used to indicate an important action.\r\n  <\/div>\r\n  <div class=\"alert alert-secondary\"<\/span>>\r\n    <strong>Secondary!<\/strong> Used to indicate a slightly less important action.\r\n  <\/div>\r\n  <div class=\"alert alert-dark\"<\/span>>\r\n    <strong>Dark!<\/strong> Dark grey alert.\r\n  <\/div>\r\n  <div class=\"alert alert-light\"<\/span>>\r\n    <strong>Light!<\/strong> Light grey alert.\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
Alerts\u94fe\u63a5<\/h2>\n
\n    \u60a8\u5fc5\u987b\u5c06\u8b66\u62a5\u94fe\u63a5\u7c7b\u6dfb\u52a0\u5230\u8b66\u62a5\u6846\u5185\u7684\u4efb\u4f55\u94fe\u63a5\uff0c\u4ee5\u521b\u5efa\"\u5339\u914d\u7684\u5f69\u8272\u94fe\u63a5\":\n  <\/div>\n
\u793a\u4f8b: <\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\"<\/span>>\r\n  <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n  <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Bootstrap Alert Links<\/h2>\r\n  <div class=\"alert alert-success\"<\/span>>\r\n    <strong>Success!<\/strong> You should <a href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"alert-link\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>read this<\/span> message<\/a>.<\/span>\r\n  <\/div>\r\n  <div class=\"alert alert-info\"<\/span>>\r\n    <strong>Info!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\r\n  <\/div>\r\n  <div class=\"alert alert-warning\"<\/span>>\r\n    <strong>Warning!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n  <div class=\"alert alert-danger\"<\/span>>\r\n    <strong>Danger!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n  <div class=\"alert alert-primary\"<\/span>>\r\n    <strong>Primary!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n  <div class=\"alert alert-secondary\"<\/span>>\r\n    <strong>Secondary!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n  <div class=\"alert alert-dark\"<\/span>>\r\n    <strong>Dark!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n  <div class=\"alert alert-light\"<\/span>>\r\n    <strong>Light!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this<\/span> message<\/a>.\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5173\u95edAlerts<\/h2>\n
\n    \u5982\u679c\u8981\u5173\u95ed\u8b66\u62a5\u6d88\u606f\uff0c\u5219\u5fc5\u987b\u5411\u8b66\u62a5\u5bb9\u5668\u6dfb\u52a0.alert-disableable\u7c7b\u3002\u7136\u540e\u5c06class=\"close\"\u548cdata-dismiss =\"alert\"\u6dfb\u52a0\u5230\u94fe\u63a5\u6216\u6309\u94ae\u5143\u7d20(\u5f53\u60a8\u5355\u51fb\u5173\u95ed\u7b26\u53f7\u65f6\uff0c\u8b66\u62a5\u6846\u5c06\u5173\u95ed\u3002)\n  <\/div>\n
\u793a\u4f8b: <\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\"<\/span>>\r\n  <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n  <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Alerts<\/h2>\r\n  <div class=\"alert alert-success alert-dismissable\"<\/span>>\r\n    <button type=\"button\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"close\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> data-dismiss=\"alert\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\u00d7<\/button>\r\n    <strong>Success!<\/strong> this<\/span> alert box could indicate a successful or positive action.\r\n  <\/div>\r\n  <div class=\"alert alert-info alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Info!<\/strong> this<\/span> alert box could indicate a neutral informative change or action.\r\n  <\/div>\r\n  <div class=\"alert alert-warning alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Warning!<\/strong> this<\/span> alert box could indicate a warning that might need attention.\r\n  <\/div>\r\n  <div class=\"alert alert-danger alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Danger!<\/strong> this<\/span> alert box could indicate a dangerous or potentially negative action.\r\n  <\/div>\r\n  <div class=\"alert alert-primary alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Primary!<\/strong> Indicates an important action.\r\n  <\/div>\r\n  <div class=\"alert alert-secondary alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Secondary!<\/strong> Indicates a slightly less important action.\r\n  <\/div>\r\n  <div class=\"alert alert-dark alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Dark!<\/strong> Dark grey alert.\r\n  <\/div>\r\n  <div class=\"alert alert-light alert-dismissable\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Light!<\/strong> Light grey alert.\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
Alerts\u52a8\u753b<\/h2>\n
\n    \u5728\u5173\u95ed\u8b66\u62a5\u6d88\u606f\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528.fade\u548c.show\u7c7b\u6dfb\u52a0\u6de1\u5165\u6de1\u51fa\u6548\u679c\u3002\u793a\u4f8b:\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\"<\/span>>\r\n  <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n  <link rel=\"stylesheet\"<\/span> href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\"<\/span>>\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.6\/umd\/popper.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n  <h2>Animated Alerts Example<\/h2>\r\n  <div class=\"alert alert-success alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"close\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> data-dismiss=\"alert\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>>\u00d7<\/button>\r\n    <strong>Success!<\/strong> this<\/span> alert box could indicate a successful or positive action.\r\n  <\/div>\r\n  <div class=\"alert alert-info alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Info!<\/strong> this<\/span> alert box could indicate a neutral informative change or action.\r\n  <\/div>\r\n  <div class=\"alert alert-warning alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Warning!<\/strong> this<\/span> alert box could indicate a warning that might need attention.\r\n  <\/div>\r\n  <div class=\"alert alert-danger alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Danger!<\/strong> this<\/span> alert box could indicate a dangerous or potentially negative action.\r\n  <\/div>\r\n  <div class=\"alert alert-primary alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Primary!<\/strong> Indicates an important action.\r\n  <\/div>\r\n  <div class=\"alert alert-secondary alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Secondary!<\/strong> Indicates a slightly less important action.\r\n  <\/div>\r\n  <div class=\"alert alert-dark alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Dark!<\/strong> Dark grey alert.\r\n  <\/div>\r\n  <div class=\"alert alert-light alert-dismissable fade show\"<\/span>>\r\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">\u00d7<\/button>\r\n    <strong>Light!<\/strong> Light grey alert.\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Bootstrap \u63d0\u793azh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-1985","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1985"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=1985"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}