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


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

\n

Bootstrap \u9762\u677f<\/h1>\n<\/p><\/div>\n

Bootstrap \u9762\u677f<\/h2>\n
\n \u5728Bootstrap\u4e2d\uff0c\u9762\u677f\u662f\u5e26\u8fb9\u6846\u7684\u6846\uff0c\u5176\u5143\u7d20\u5468\u56f4\u6709\u4e00\u4e9b\u586b\u5145\u3002\u5f53\u60a8\u8981\u5c06DOM\u7ec4\u4ef6\u653e\u5728\u4e00\u4e2a\u76d2\u5b50\u4e2d\u65f6\uff0c\u4f7f\u7528\u9762\u677f\u7ec4\u4ef6\u3002\n <\/div>\n
\n \u5728\u5143\u7d20\u4e2d\u4f7f\u7528 class .panel \u6765\u521b\u5efaBootstrap\u9762\u677f\u3002\u9762\u677f\u5185\u7684\u5185\u5bb9\u5177\u6709 .panel-body\u7c7b\u3002\n <\/div>\n
\n \u901a\u5e38\uff0c\u9762\u677f\u5305\u542b\u4e09\u4e2a\u90e8\u5206:\n <\/div>\n

\u9762\u677f\u6807\u9898<\/span>
\n \u9762\u677f\u5185\u5bb9<\/span>
\n \u9762\u677f\u9875\u811a<\/span> <\/p>\n

\n

Bootstrap \u9762\u677f\u793a\u4f8b<\/h2>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\"<\/span>>\r\n  <head>\r\n     <title>Panel<\/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<div class=\"container\"<\/span>>\r\n  <h1>Panel Example<\/h1>\r\n<div class=\"panel panel-primary\"<\/span>>\r\n  <div class=\"panel-heading\"<\/span>>\r\n    <h3 class=\"panel-title\"<\/span>><strong>Panel title<\/strong><\/h3>\r\n  <\/div>\r\n  <div class=\"panel-body\"<\/span>>\r\n    Panel content\r\n  <\/div>\r\n  <div class=\"panel-footer\"<\/span>>\r\n    <strong>Panel footer<\/strong>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\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
Bootstrap \u9762\u677f\u7ec4<\/h3>\n
\n    \u9762\u677f\u7ec4\u7528\u4e8e\u5c06\u591a\u4e2a\u9762\u677f\u7ec4\u5408\u5728\u4e00\u8d77\u3002\n  <\/div>\n
\n    \u5bf9\u4e8e\u9762\u677f\u7ec4\uff0c\u60a8\u5fc5\u987b\u5c06\u548c class .panel-group \u5305\u88f9\u5728\u5b83\u4eec\u5468\u56f4\u3002\n  <\/div>\n
\n    .panel-\u7ec4\u7c7b\u6e05\u9664\u6bcf\u4e2a\u9762\u677f\u7684\u5e95\u8fb9\u3002\n  <\/div>\n
\n    \u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n  <\/div>\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  <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 \r\n<div class=\"container\"<\/span>>\r\n  <h2>Panel Group<\/h2>\r\n  <p>The panel-group class <\/span>clears the bottom-margin. try <\/span>to remove the class <\/span>and see what happens.<\/p>\r\n  <div class=\"panel-group\"<\/span>>\r\n    <div class=\"panel panel-default\"<\/span><\/span><\/span>>\r\n      <div class=\"panel-heading\"<\/span><\/span><\/span>>Panel Header<\/div>\r\n      <div class=\"panel-body\"<\/span><\/span><\/span>>Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-default\">\r\n      <div class=\"panel-heading\">Panel Header<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-default\">\r\n      <div class=\"panel-heading\">Panel Header<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/code>\n  <\/div>\n
\n
\u5177\u6709\u4e0a\u4e0b\u6587\u7c7b\u7684Bootstrap \u9762\u677f<\/h3>\n
\n    \u4e0a\u4e0b\u6587\u7c7b(.panel-default\uff0c.panel-primary\uff0c.panel-success\uff0c.panel-info \u3001.\u9762\u677f\u8b66\u544a\u6216.panel-danger)\u7528\u4e8e\u4e3a\u9762\u677f\u7740\u8272\u3002\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 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  <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 \r\n<div class=\"container\"<\/span>>\r\n  <h2>Panels with Contextual Classes<\/h2>\r\n  <div class=\"panel-group\"<\/span>>\r\n    <div class=\"panel panel-default\"<\/span>>\r\n      <div class=\"panel-heading\"<\/span><\/span><\/span><\/span><\/span><\/span>>Panel with panel-default <\/span>class<\/div>\r\n      <div class=\"panel-body\"<\/span><\/span><\/span><\/span><\/span><\/span>>Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-primary\"<\/span>>\r\n      <div class=\"panel-heading\">Panel with panel-primary class<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-success\"<\/span>>\r\n      <div class=\"panel-heading\">Panel with panel-success class<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-info\"<\/span>>\r\n      <div class=\"panel-heading\">Panel with panel-info class<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-warning\"<\/span>>\r\n      <div class=\"panel-heading\">Panel with panel-warning class<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n    <div class=\"panel panel-danger\"<\/span>>\r\n      <div class=\"panel-heading\">Panel with panel-danger class<\/div>\r\n      <div class=\"panel-body\">Panel Content<\/div>\r\n    <\/div>\r\n  <\/div>\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 \u9762\u677fzh-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-1988","post","type-post","status-publish","format-standard","hentry","category-bootstrapjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1988"}],"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=1988"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1988\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}