{"id":1044,"date":"2022-04-08T12:35:23","date_gmt":"2022-04-08T04:35:23","guid":{"rendered":"http:\/\/blog.yyhcw.com\/?p=1044"},"modified":"2022-04-08T12:35:23","modified_gmt":"2022-04-08T04:35:23","slug":"bootstrap4%e4%b8%adcard%e5%9b%be%e7%89%87%e5%88%97%e8%a1%a8%e5%ae%8c%e7%be%8e%e6%98%be%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/blog.yyhcw.com\/post\/1044.html","title":{"rendered":"bootstrap4\u4e2dcard\u56fe\u7247\u5217\u8868\u5b8c\u7f8e\u663e\u793a"},"content":{"rendered":"

\u4f7f\u7528thinkcmf<\/a>\u641e\u7ad9\uff0c\u7cfb\u7edf\u4e2d\u81ea\u5e26\u4e00\u4e2a\u8d44\u6e90\u7ba1\u7406\uff0c\u5c31\u662f\u4f60\u6240\u4e0a\u4f20\u7684\u56fe\u7247\u3001\u6587\u4ef6\u7b49\u90fd\u7edf\u4e00\u5217\u8868\u5f62\u5f0f\u5c55\u793a\u51fa\u6765\uff0c\u90a3\u4e9b\u6587\u4ef6\u56fe\u7247\u5728\u4f7f\u7528\u6216\u8005\u5df2\u7ecf\u88ab\u5220\u9664\u4e86\uff0c\u90fd\u53ef\u4ee5\u6e05\u695a\u7684\u5c55\u793a\u51fa\u6765\uff0c\u4f46\u662f\u4e2a\u4eba\u611f\u89c9\u6587\u4ef6\u5217\u8868\u5f62\u5f0f\u5c55\u793a\u7684\u5f88\u662f\u4e0d\u5b8c\u7f8e\uff0c\u60f3\u770b\u5177\u4f53\u7684\u56fe\u7247\u8fd8\u9700\u8981\u70b9\u51fb\u67e5\u770b\uff0c\u6240\u6709\u60f3\u5230\u5c06\u8fd9\u4e2a\u9875\u9762\u6539\u6210\u76f4\u63a5\u663e\u793a\u56fe\u7247\u7684\u5f62\u5f0f\uff0c\u8fd9\u6837\u53ef\u4ee5\u4e00\u76ee\u4e86\u7136\u7684\u770b\u5230\u56fe\u7247\u4fe1\u606f\uff0c\u6700\u7ec8\u6548\u679c\u5982\u4e0b\uff1a\"\"<\/p>\n

\u6211\u4eec\u5e73\u65f6\u4e0a\u4f20\u7684\u56fe\u7247\u5927\u5c0f\u662f\u4e0d\u786e\u5b9a\u7684\uff0c\u90a3\u4e48\u600e\u4e48\u624d\u80fd\u8ba9\u56fe\u7247\u5b8c\u7f8e\u7684\u5c55\u73b0\u51fa\u6765\u5462\uff1f\u7ecf\u8fc7\u67e5\u8be2\u8d44\u6599\u5f97\u77e5bootstrap<\/a>4\u4e2d\u6709\u4e00\u4e2aembed<\/a>\u5b9e\u7528\u7a0b\u5e8f\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u4f7f\u7528\u5b83\u3002\u5b83\u670916x9\u548c4x3\u7684\u5bbd\u9ad8\u6bd4\uff0c\u4f46\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u6dfb\u52a0\u4f60\u81ea\u5df1\u7684\u3002<\/p>\n

\u5728\u8fd9\u4e2a\u6f14\u793a\u4e2d\uff0c\u63d0\u4f9b\u4e86\u4e24\u4e2a\u56fe\u50cf\uff0c\u4e00\u4e2a\u662f\u7231\u5947\u827a<\/a>\u56fe\u7247\uff0c\u53e6\u4e00\u4e2a\u662f\u652f\u4ed8\u5b9d\u9886\u7ea2\u5305\u7684\uff0c\u8fd9\u4e24\u4e2a\u56fe\u50cf\u770b\u8d77\u6765\u662f\u4e00\u6837\u7684\uff0c\u5e76\u4e14\u586b\u5145\u4e86\u53ef\u7528\u7684\u7eb5\u6a2a\u6bd4\u3002<\/p>\n

<link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/>\r\n\r\n<div class=\"container\">\r\n  <div class=\"row\">\r\n    <div class=\"col-6\">\r\n      <div class=\"card h-100 border-0 shadow\">\r\n        <div class=\"card-img-top\">\r\n          <div class=\"embed-responsive embed-responsive-4by3\">\r\n            <div class=\"embed-responsive-item\">\r\n              <img src=\"https:\/\/iot.21863.cn\/upload\/default\/20220107\/e8b32f81ad2403ca95deb9b0432718c9.jpeg\" alt=\"\" class=\"img-fluid w-100\" \/>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <p>Card content goes here<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"col-6\">\r\n      <div class=\"card h-100 border-0 shadow\">\r\n        <div class=\"card-img-top\">\r\n          <div class=\"embed-responsive embed-responsive-4by3\">\r\n            <div class=\"embed-responsive-item\">\r\n              <img src=\"https:\/\/iot.21863.cn\/upload\/default\/20211012\/6c24f5b0f055afdeef5c416a83e881d2.jpg\" alt=\"\" class=\"img-fluid w-100\" \/>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <p>Card content goes here<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n
\u53ef\u4ee5\u5f88\u5b8c\u7f8e\u7684\u89e3\u51b3\u56fe\u7247\u5927\u5c0f\u4e0d\u540c\u7684\u7f29\u653e\u95ee\u9898\u4e86\uff0c\u4e0b\u9762\u6211\u5c06thinkcmf<\/a>\u4e2d\u7684\u8d44\u6e90\u7ba1\u7406\u7684\u6a21\u677f\u4e00\u5e76\u653e\u4e0a\uff0c\u7ed9\u6709\u9700\u8981\u7684\u4eba\uff1a<\/p>\n
<php>$status=['\u4e0d\u53ef\u7528', '\u53ef\u7528'];\r\n             $asset_img_suffixes=['bmp','jpg','jpeg','png','gif','tiff'];\r\n             $asset_ile_suffixes=['csv','xls','doc','docx'];\r\n        <\/php>\r\n        <div class=\"row\">\r\n            <foreach name=\"assets\" item=\"vo\">\r\n                <div class=\"col-lg-3 col-xl-2 col-md-3 col-6\">\r\n                    <div class=\"card mb-3\">\r\n                        <div class=\"card-img-top\">\r\n                            <div class=\"embed-responsive embed-responsive-4by3\">\r\n                                <div class=\"embed-responsive-item\">\r\n                                  <if condition=\"in_array(strtolower($vo['suffix']),$asset_img_suffixes)\">\r\n                                        <img src=\"{:cmf_get_image_preview_url($vo['file_path'])}\" title=\"{$vo.file_path}\" alt=\"{$vo.filename}\" class=\"img-fluid w-100\">\r\n                                  <elseif condition=\"in_array(strtolower($vo['suffix']),$asset_ile_suffixes)\">\r\n                                        <i class=\"fa fa-file-word-o fa-fw\"><\/i>\r\n                                  <\/if>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                        <\/div>\r\n                      <div class=\"card-body\">\r\n                        <h6 class=\"card-subtitle mb-2 text-muted\">\u7528\u6237ID:{$vo.user_id} {$vo.user_login} {$vo.user_nickname}<\/h6>\r\n                        <a class=\"card-link\">{$vo.file_size\/1024|round}KB<\/a>\r\n                        <a class=\"card-link\"><if condition=\"!file_exists('upload\/'.$vo['file_path'])\"><span class=\"text-danger\">\u6587\u4ef6\u4e22\u5931<\/span><else \/>{$status[$vo['status']]}<\/if><\/a>\r\n                        <a href=\"{:url('AdminAsset\/delete',array('id'=>$vo['id']))}\" class=\"card-link btn btn-sm btn-danger js-ajax-delete float-right mb-0\">{:lang('DELETE')}<\/a>\r\n                      <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/foreach>\r\n        <\/div>\r\n        <div class=\"pagination\">{$page|default=''}<\/div><\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"\u4f7f\u7528thinkcmf\u641e\u7ad9\uff0c\u7cfb\u7edf\u4e2d\u81ea\u5e26\u4e00\u4e2a\u8d44\u6e90\u7ba1\u7406\uff0c\u5c31\u662f\u4f60\u6240\u4e0a\u4f20\u7684\u56fe\u7247\u3001\u6587\u4ef6\u7b49\u90fd\u7edf\u4e00\u5217\u8868\u5f62\u5f0f\u5c55\u793a\u51fa\u6765\uff0c\u90a3\u4e9b\u6587\u4ef6\u56fe \u00b7\u00b7\u00b7","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[288,58],"views":65329,"_links":{"self":[{"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/posts\/1044"}],"collection":[{"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/comments?post=1044"}],"version-history":[{"count":0,"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/posts\/1044\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/media?parent=1044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/categories?post=1044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.yyhcw.com\/api\/wp\/v2\/tags?post=1044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}