{"id":1981,"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 \u6309\u94ae","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/1981.html","title":{"rendered":"Bootstrap \u6309\u94ae"},"content":{"rendered":"


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

\n

Bootstrap \u6309\u94ae<\/h1>\n<\/p><\/div>\n

Bootstrap Buttons<\/h2>\n
\n \u67097\u79cd\u6837\u5f0f\u53ef\u4ee5\u5728Bootstrap\u4e2d\u6dfb\u52a0\u6309\u94ae\u3002\u4f7f\u7528\u4ee5\u4e0b\u7c7b\u6765\u5b9e\u73b0\u4e0d\u540c\u7684\u6309\u94ae\u6837\u5f0f:\n <\/div>\n

.btn-default <\/span>
\n .btn-primary <\/span>
\n .btn-success<\/span>
\n .btn-info <\/span>
\n .btn-warning <\/span>
\n .btn-danger <\/span>
\n .btn-link <\/span> <\/p>\n

\n

Bootstrap \u6309\u94ae\u793a\u4f8b: \u6307\u5b9a\u4e03\u4e2a\u6837\u5f0f<\/h2>\n
\n
  <!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n  <head>\r\n     <title>Job<\/title>\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    <h1>Button Example!<\/h1>\r\n<button class=\"btn btn-default\"<\/span>>default<\/button>\r\n<button class=\"btn btn-primary\"<\/span>>primary<\/button>\r\n<button class=\"btn btn-danger\"<\/span>>danger<\/button>\r\n<button class=\"btn btn-success\"<\/span>>success<\/button>\r\n<button class=\"btn btn-info\"<\/span>>info<\/button>\r\n<button class=\"btn btn-warning\"<\/span>>warning<\/button>\r\n<button class=\"btn btn-link\"<\/span>>Link<\/button>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"<\/span>><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"<\/span>><\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n   \u6ce8\u610f: <\/span>\u5728Bootstrap 4\u4e2d\u6dfb\u52a0\u4e863\u79cd\u65b0\u6309\u94ae\uff0c\u5728Bootstrap 3\u4e2d\u6dfb\u52a0\u4e867\u79cd\u6309\u94ae\u3002\n  <\/div>\n
\n    \u8fd93\u4e2a\u6309\u94ae\u662f:\n  <\/div>\n
  Secondary<\/span>
\n  Dark<\/span>
\n  Light<\/span> <\/p>\n
\n    \u4ee5\u4e0b\u7c7b\u5206\u522b\u7528\u4e8e\u6307\u5b9a\u5b83\u4eec:\n  <\/div>\n
\n
<button type=\"button\"<\/span><\/span><\/span> class=\"btn btn-secondary\"<\/span>>Secondary<\/button>\r\n<button type=\"button\" class=\"btn btn-dark\"<\/span>>Dark<\/button>\r\n<button type=\"button\" class=\"btn btn-light\"<\/span>>Light<\/button><\/pre>\n
<\/code>\n  <\/div>\n
\u793a\u4f8b: <\/h3>\n
\n    \u8ba9\u6211\u4eec\u770b\u770bBootstrap 4\u652f\u6301\u7684\u6240\u6709\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\/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>Button Styles<\/h2>\r\n  <button type=\"button\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"btn\"<\/span>>Basic<\/button>\r\n  <button type=\"button\" class=\"btn btn-primary\"<\/span>>Primary<\/button>\r\n  <button type=\"button\" class=\"btn btn-secondary\"<\/span>>Secondary<\/button>\r\n  <button type=\"button\" class=\"btn btn-success\"<\/span>>Success<\/button>\r\n  <button type=\"button\" class=\"btn btn-info\"<\/span>>Info<\/button>\r\n  <button type=\"button\" class=\"btn btn-warning\"<\/span>>Warning<\/button>\r\n  <button type=\"button\" class=\"btn btn-danger\"<\/span>>Danger<\/button>\r\n  <button type=\"button\" class=\"btn btn-dark\"<\/span>>Dark<\/button>\r\n  <button type=\"button\" class=\"btn btn-light\"<\/span>>Light<\/button>\r\n  <button type=\"button\" class=\"btn btn-link\"<\/span>>Link<\/button>      \r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
 Bootstrap\u6309\u94ae\u5927\u5c0f<\/h2>\n
\n    \u5728Bootstrap\u4e2d\uff0c\u60a8\u53ef\u4ee5\u6839\u636e\u9700\u8981\u9009\u62e9\u6309\u94ae\u3002\u5b83\u63d0\u4f9b\u4e86\u56db\u79cd\u6309\u94ae\u5927\u5c0f\u3002\n  <\/div>\n
\n    \u4ee5\u4e0b\u7c7b\u5b9a\u4e49\u4e86\u4e0d\u540c\u7684\u5927\u5c0f:\n  <\/div>\n
   .btn-lg <\/span>
\n   .btn-md <\/span>
\n   .btn-sm <\/span>
\n   .btn-xs <\/span> <\/p>\n
\n    \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\/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>Button Sizes<\/h2>\r\n  <button type=\"button\"<\/span><\/span><\/span><\/span> class=\"btn btn-primary btn-lg\"<\/span>>Large<\/button>\r\n  <button type=\"button\" class=\"btn btn-primary btn-md\"<\/span>>Medium<\/button>    \r\n  <button type=\"button\" class=\"btn btn-primary btn-sm\"<\/span>>Small<\/button>\r\n  <button type=\"button\" class=\"btn btn-primary btn-xs\"<\/span>>XSmall<\/button>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
Bootstrap \u542f\u7528\/\u7981\u7528\u6309\u94ae<\/h2>\n
\n    \u60a8\u53ef\u4ee5\u8bbe\u7f6e\u6309\u94ae\u7684\u7981\u7528\u6216\u4e0d\u53ef\u70b9\u51fb\u72b6\u6001\u3002\n  <\/div>\n
\n    .active\u7c7b\u7528\u4e8e\u4f7f\u6309\u94ae\u663e\u793a\u4e3a\u6309\u4e0b\u72b6\u6001\uff0c\u800c class .disabled \u4f7f\u6309\u94ae\u4e0d\u53ef\u5355\u51fb:\n  <\/div>\n
\n    \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\/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>Button States<\/h2>\r\n  <button type=\"button\"<\/span><\/span><\/span> class=\"btn btn-primary\"<\/span>>Primary Button<\/button>\r\n  <button type=\"button\" class=\"btn btn-primary active\"<\/span>>Active Primary<\/button>\r\n  <button type=\"button\" class=\"btn btn-primary disabled\"<\/span>>Disabled Primary<\/button>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
 Bootstrap\u5757\u7ea7\u6309\u94ae<\/h2>\n
\n    \u5757\u7ea7\u6309\u94ae\u8986\u76d6\u7236\u5143\u7d20\u7684\u6574\u4e2a\u5bbd\u5ea6\u3002\n  <\/div>\n
\n    .btn\u5757class \u7528\u4e8e\u521b\u5efa\u5757\u7ea7\u6309\u94ae:\n  <\/div>\n
\n    \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\/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>Block Level Buttons<\/h2>\r\n  <button type=\"button\"<\/span><\/span><\/span><\/span><\/span><\/span> class=\"btn btn-primary btn-block\"<\/span>>Button 1<\/button>\r\n  <button type=\"button\" class=\"btn btn-default <\/span>btn-block\"<\/span>>Button 2<\/button>\r\n  <h2>Large Block Level Buttons<\/h2>\r\n  <button type=\"button\" class=\"btn btn-primary btn-lg btn-block\"<\/span>>Button 1<\/button>\r\n  <button type=\"button\" class=\"btn btn-default <\/span>btn-lg btn-block\"<\/span>>Button 2<\/button>\r\n  <h2>Small Block Level Buttons<\/h2>\r\n  <button type=\"button\" class=\"btn btn-primary btn-sm btn-block\"<\/span>>Button 1<\/button>\r\n  <button type=\"button\" class=\"btn btn-default <\/span>btn-sm btn-block\"<\/span>>Button 2<\/button>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5177\u6709\u5176\u4ed6\u5143\u7d20\u7684\u6309\u94ae\u7c7b<\/h2>\n
\n    \u60a8\u53ef\u4ee5\u5c06\u6309\u94ae\u7c7b\u4e0e\u5176\u4ed6\u6807\u7b7e(\u4f8b\u5982\uff0c\uff0c<button>\u6216<input>\u5143\u7d20\u7b49)\u4e00\u8d77\u4f7f\u7528\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>Button Classes with other Elements<\/h2>\r\n  <a href=\"#\"<\/span> class=\"btn btn-info\"<\/span><\/span><\/span><\/span> role=\"button\"<\/span><\/span><\/span>>Link Button<\/a><\/span>\r\n  <button type=\"button\" class=\"btn btn-info\">Button<\/button>\r\n  <input type=\"button\" class=\"btn btn-info\" value=\"Input Button\"<\/span>>\r\n  <input type=\"submit\"<\/span> class=\"btn btn-info\" value=\"Submit Button\"<\/span>>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u6309\u94ae\u8f6e\u5ed3\/\u8fb9\u6846\u6309\u94ae<\/h2>\n
\n    Bootstrap 4\u63d0\u4f9b\u4e86\u516b\u4e2a\u8f6e\u5ed3\/\u8fb9\u6846\u6309\u94ae:\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>Button Outline\/ Bordered Buttons<\/h2>\r\n  <button type=\"button\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span> class=\"btn btn-outline-primary\"<\/span>>Primary<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-secondary\"<\/span>>Secondary<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-success\"<\/span>>Success<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-info\"<\/span>>Info<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-warning\"<\/span>>Warning<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-danger\"<\/span>>Danger<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-dark\"<\/span>>Dark<\/button>\r\n  <button type=\"button\" class=\"btn btn-outline-light text-dark\"<\/span>>Light<\/button>\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 \u6309\u94aezh-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-1981","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1981"}],"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=1981"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1981\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}