\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>Basic List Group Example<\/h2>\r\n <ul class=\"list-group\"<\/span>>\r\n <li class=\"list-group-item\"<\/span><\/span><\/span>>First item<\/li>\r\n <li class=\"list-group-item\">Second item<\/li>\r\n <li class=\"list-group-item\">Third item<\/li>\r\n <\/ul>\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
\u5e26\u6709\u5fbd\u7ae0\u7684Bootstrap \u5217\u8868\u7ec4<\/h3>\n\n \u4e5f\u53ef\u4ee5\u5c06\u5fbd\u7ae0\u6dfb\u52a0\u5230\u5217\u8868\u7ec4\u3002\u5b83\u4eec\u5c06\u81ea\u52a8\u5b9a\u4f4d\u5728\u53f3\u4fa7\u3002\n <\/div>\n\n \u60a8\u5fc5\u987b\u521b\u5efa\u4e00\u4e2a<span>\u5143\u7d20\uff0c\u5e76\u5728\u5217\u8868\u9879\u5185\u6dfb\u52a0 class\" .badge\" \u7c7b\u4ee5\u521b\u5efa\u5fbd\u7ae0\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>List Group With Badges<\/h2>\r\n <ul class=\"list-group\"<\/span>>\r\n <li class=\"list-group-item\"<\/span><\/span><\/span>><span class=\"badge\"<\/span><\/span><\/span>>12<\/span> New<\/li>\r\n <li class=\"list-group-item\"><span class=\"badge\">5<\/span> Deleted<\/li> \r\n <li class=\"list-group-item\"><span class=\"badge\">3<\/span> Warnings<\/li> \r\n <\/ul>\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
\u5177\u6709\u8d85\u94fe\u63a5\u7684Bootstrap \u5217\u8868\u7ec4<\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5c06\u9879\u76ee\u94fe\u63a5\u5230\u5217\u8868\u7ec4\u3002\u8fd9\u4f1a\u5728\u60ac\u505c\u65f6\u63d0\u4f9b\u7070\u8272\u80cc\u666f\u8272\u3002\u60a8\u5fc5\u987b\u4f7f\u7528<div>\u800c\u4e0d\u662f\u548c\u800c\u4e0d\u662f<li>\u5143\u7d20\u6765\u521b\u5efa\u5177\u6709\u94fe\u63a5\u9879\u7684\u5217\u8868\u7ec4\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>List Group With Linked Items<\/h2>\r\n <div class=\"list-group\"<\/span>>\r\n <a href=\"#\"<\/span><\/span><\/span> class=\"list-group-item\"<\/span><\/span><\/span>>First item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\">Second item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\">Third item<\/a><\/span>\r\n <\/div>\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
Bootstrap \u5217\u8868\u7ec4: \u663e\u793a\u6d3b\u52a8\u9879<\/h3>\n\n \u7c7b\" .active\" \u7528\u4e8e\u7a81\u51fa\u663e\u793a\u5f53\u524d\u9879\u3002\u5b83\u6307\u5b9a\u7279\u5b9a\u9879\u76ee\u5904\u4e8e\u6d3b\u52a8\u72b6\u6001\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>Active Item in a List Group<\/h2>\r\n <div class=\"list-group\"<\/span>>\r\n <a href=\"#\"<\/span><\/span><\/span> class=\"list-group-item active\"<\/span>>First item (this<\/span> is active item)<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\"<\/span><\/span>>Second item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\">Third item<\/a><\/span>\r\n <\/div>\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
Bootstrap \u5217\u8868\u7ec4: \u663e\u793a\u7981\u7528\u9879<\/h3>\n\n \u7c7b\" .disabled\" \u7528\u4e8e\u7981\u7528\u5217\u8868\u7ec4\u4e2d\u7684\u7279\u5b9a\u9879\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>List Group With a Disabled Item<\/h2>\r\n <div class=\"list-group\"<\/span>>\r\n <a href=\"#\"<\/span><\/span><\/span> class=\"list-group-item disabled\"<\/span>>First item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\"<\/span><\/span>>Second item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item\">Third item<\/a><\/span>\r\n <\/div>\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
Bootstrap \u5217\u8868\u7ec4: \u4e0a\u4e0b\u6587\u7c7b<\/h3>\n\n \u60a8\u53ef\u4ee5\u4f7f\u7528\u4e0a\u4e0b\u6587\u7c7b\u5c06\u989c\u8272\u6dfb\u52a0\u5230\u5217\u8868\u9879\u3002\n <\/div>\n\n \u4ee5\u4e0b\u7c7b\u7528\u4e8e\u7740\u8272\u5217\u8868\u9879\u76ee:\n <\/div>\n .list-group-item-success <\/span>
\n .list-group-item-info <\/span>
\n .list-group-item-warning <\/span>
\n .list-group-item-danger <\/span> <\/p>\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>List Group With Contextual Classes<\/h2>\r\n <ul class=\"list-group\"<\/span>>\r\n <li class=\"list-group-item list-group-item-success\"<\/span><\/span>>First item<\/li>\r\n <li class=\"list-group-item list-group-item-info\"<\/span><\/span>>Second item<\/li>\r\n <li class=\"list-group-item list-group-item-warning\"<\/span><\/span>>Third item<\/li>\r\n <li class=\"list-group-item list-group-item-danger\"<\/span><\/span>>Fourth item<\/li>\r\n <\/ul>\r\n \r\n <h2>Linked Items With Contextual Classes<\/h2>\r\n <a href=\"#\"<\/span><\/span><\/span><\/span> class=\"list-group-item list-group-item-success\">First item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-info\">Second item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-warning\">Third item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-danger\">Fourth item<\/a><\/span>\r\n <\/div>\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\u4f7f\u7528\u4e0a\u4e0b\u6587\u7c7b\u94fe\u63a5\u9879\u76ee<\/h3>\n\n \u5728Bootstrap 4\u4e2d\uff0c\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u4e0a\u4e0b\u6587\u7c7b\u94fe\u63a5\u9879\u76ee\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>Linked Items With Contextual Classes<\/h2>\r\n <p>Move the mouse over the linked items to see the hover effect:<\/p>\r\n <div class=\"list-group\"<\/span>>\r\n <a href=\"#\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"list-group-item list-group-item-action\"<\/span>>Action item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-success\"<\/span>>Success item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-secondary\"<\/span>>Secondary item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-info\"<\/span>>Info item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-warning\"<\/span>>Warning item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-danger\"<\/span>>Danger item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-primary\"<\/span>>Primary item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-dark\"<\/span>>Dark item<\/a><\/span>\r\n <a href=\"#\" class=\"list-group-item list-group-item-light\"<\/span>>Light item<\/a><\/span>\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 \u5217\u8868\u7ec4zh-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-1995","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1995"}],"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=1995"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1995\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}