\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 \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Badges<\/h2>\r\n <a href=\"#\"<\/span><\/span><\/span>>News <span class=\"badge\"<\/span><\/span><\/span>>5<\/span><\/a><br><\/span>\r\n <a href=\"#\">Comments <span class=\"badge\">10<\/span><\/a><br><\/span>\r\n <a href=\"#\">Updates <span class=\"badge\">2<\/span><\/a><\/span>\r\n<\/div>\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<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap\u5fbd\u7ae0\u793a\u4f8b2 <\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728\u5176\u4ed6\u5143\u7d20(\u4f8b\u5982\u6309\u94ae)\u4e2d\u4f7f\u7528\u5fbd\u7ae0\u3002\n <\/div>\n\n \u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\u770b\u770b\u5982\u4f55\u5c06\u5fbd\u7ae0\u6dfb\u52a0\u5230\u6309\u94ae\u3002\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\/3.3.6\/css\/bootstrap.min.css\"<\/span>>\r\n \r\n<\/head>\r\n<body>\r\n<div class=\"container\"<\/span>>\r\n <h2>Badges on Buttons<\/h2>\r\n <button type=\"button\"<\/span><\/span><\/span> class=\"btn btn-primary\"<\/span>>Primary <span class=\"badge\"<\/span><\/span><\/span>>7<\/span><\/button>\r\n <button type=\"button\" class=\"btn btn-success\"<\/span>>Success <span class=\"badge\">3<\/span><\/button> \r\n <button type=\"button\" class=\"btn btn-danger\"<\/span>>Danger <span class=\"badge\">5<\/span><\/button> \r\n<\/div>\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<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap\u6807\u7b7e<\/h2>\n\n Bootstrap\u6807\u7b7e\u7528\u4e8e\u6307\u5b9a\u6709\u5173\u5546\u54c1\u7684\u989d\u5916\u4fe1\u606f\uff0c\u4f8b\u5982\u9875\u9762\u7684\u6570\u91cf\uff0c\u6280\u5de7\u6216\u5176\u4ed6\u7ec4\u6210\u3002\n <\/div>\n\n class .label \u7528\u4e8e\u663e\u793a\u6807\u7b7e\u3002\n <\/div>\n
\nBootstrap \u6807\u7b7e\u793a\u4f8b<\/h3>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Label 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<\/head>\r\n<body> \r\n \r\n<div class=\"container\"<\/span>>\r\n <h2>Labels Example<\/h2>\r\n <h1>Update <span class=\"label label-default\"<\/span><\/span><\/span><\/span><\/span><\/span>>New<\/span><\/h1>\r\n <h2>Update<span class=\"label label-default\">New<\/span><\/h2>\r\n <h3>Update <span class=\"label label-default\">New<\/span><\/h3>\r\n <h4>Update<span class=\"label label-default\">New<\/span><\/h4>\r\n <h5>Update<span class=\"label label-default\">New<\/span><\/h5>\r\n <h6>Update<span class=\"label label-default\">New<\/span><\/h6>\r\n<\/div>\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<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nBootstrap \u6807\u7b7e\u793a\u4f8b2: \u66f4\u6539\u989c\u8272<\/h3>\n\n \u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4e0a\u4e0b\u6587\u6807\u7b7e\u7c7b\u6765\u66f4\u6539\u6807\u7b7e\u989c\u8272\u3002\n <\/div>\n\n <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Contextual Label<\/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 \r\n<\/head>\r\n<body> \r\n \r\n<div class=\"container\"<\/span>>\r\n <h2>Contextual Label Classes<\/h2> \r\n <span class=\"label label-default\"<\/span>>default <\/span>Label<\/span>\r\n <span class=\"label label-primary\"<\/span>>Primary Label<\/span>\r\n <span class=\"label label-success\"<\/span>>Success Label<\/span>\r\n <span class=\"label label-info\"<\/span>>Info Label<\/span>\r\n <span class=\"label label-warning\"<\/span>>Warning Label<\/span>\r\n <span class=\"label label-danger\"<\/span>>Danger Label<\/span>\r\n<\/div>\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<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\nBootstrap \u6807\u7b7e\u793a\u4f8b3 <\/h3>\n\n<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n<head>\r\n <title>Bootstrap Case<\/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 \r\n<\/head>\r\n<body> \r\n \r\n<div class=\"container\"<\/span>>\r\n <h2>Labels Example<\/h2>\r\n <h3>Update <span class=\"label label-default\"<\/span>>new<\/span>\r\n <h3>Update <span class=\"label label-primary\"<\/span>>new<\/span>\r\n <h3>Update <span class=\"label label-success\"<\/span>>new<\/span>\r\n <h3>Update <span class=\"label label-info\"<\/span>>new<\/span>\r\n <h3>Update <span class=\"label label-warning\"<\/span>>new<\/span>\r\n <h3>Update <span class=\"label label-danger\"<\/span>>new<\/span>\r\n<\/div>\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<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap 4\u5fbd\u7ae0<\/h2>\n\n \u5728Bootstrap 4\u4e2d\uff0c\u5fbd\u7ae0\u4e5f\u53ef\u4ee5\u4e0e\u6807\u9898\u6807\u7b7e( <\/p>\n ...... <\/h2>\n)\u4e00\u8d77\u4f7f\u7528\u3002\u5728\u5143\u7d20\u4e2d\u5c06.badge\u7c7b\u4e0e\u4e0a\u4e0b\u6587\u7c7b(\u4f8b\u5982.badge-secondary)\u4e00\u8d77\u4f7f\u7528\uff0c\u4ee5\u521b\u5efa\u77e9\u5f62\u6807\u8bb0\u3002 <\/span><\/h6>\n<\/p><\/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>Badges Example<\/h2>\r\n <h1>h1 heading <span class=\"badge badge-secondary\"<\/span><\/span><\/span><\/span><\/span><\/span>>New<\/span><\/h1>\r\n <h2>h2 heading <span class=\"badge badge-secondary\">New<\/span><\/h2>\r\n <h3>h3 heading <span class=\"badge badge-secondary\">New<\/span><\/h3>\r\n <h4>h4 heading <span class=\"badge badge-secondary\">New<\/span><\/h4>\r\n <h5>h5 heading <span class=\"badge badge-secondary\">New<\/span><\/h5>\r\n <h6>h6 heading <span class=\"badge badge-secondary\">New<\/span><\/h6>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n\u4e0a\u4e0b\u6587\u5fbd\u7ae0<\/h2>\n\n \u60a8\u53ef\u4ee5\u4f7f\u7528\u4e0a\u4e0b\u6587\u7c7b\u6765\u66f4\u6539\u5fbd\u7ae0\u7684\u989c\u8272\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>Contextual Badges Example<\/h2>\r\n <span class=\"badge badge-primary\"<\/span>>Primary Badge<\/span>\r\n <span class=\"badge badge-secondary\"<\/span>>Secondary Badge<\/span>\r\n <span class=\"badge badge-success\"<\/span>>Success Badge<\/span>\r\n <span class=\"badge badge-danger\"<\/span>>Danger Badge<\/span>\r\n <span class=\"badge badge-warning\"<\/span>>Warning Badge<\/span>\r\n <span class=\"badge badge-info\"<\/span>>Info Badge<\/span>\r\n <span class=\"badge badge-light\"<\/span>>Light Badge<\/span>\r\n <span class=\"badge badge-dark\"<\/span>>Dark Badge<\/span>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
\n Bootstrap 4 Pill Badges<\/h2>\n\n Pill Badges\u7528\u4e8e\u4f7f\u5fbd\u7ae0\u66f4\u5706\u3002\u4f7f\u7528class.badge-pill\u7c7b\u6dfb\u52a0Pill Badges\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>Pill Badges Example<\/h2>\r\n <span class=\"badge badge-pill badge-primary\"<\/span>>Primary<\/span>\r\n <span class=\"badge badge-pill badge-secondary\"<\/span>>Secondary<\/span>\r\n <span class=\"badge badge-pill badge-success\"<\/span>>Success<\/span>\r\n <span class=\"badge badge-pill badge-danger\"<\/span>>Danger<\/span>\r\n <span class=\"badge badge-pill badge-warning\"<\/span>>Warning<\/span>\r\n <span class=\"badge badge-pill badge-info\"<\/span>>Info<\/span>\r\n <span class=\"badge badge-pill badge-light\"<\/span>>Light<\/span>\r\n <span class=\"badge badge-pill badge-dark\"<\/span>>Dark<\/span>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/code>\n <\/div>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Bootstrap \u5fbd\u7ae0\u548c\u6807\u7b7ezh-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-1987","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1987"}],"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=1987"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1987\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}