{"id":12245,"date":"2021-05-06T00:00:00","date_gmt":"2021-05-05T16:00:00","guid":{"rendered":"https:\/\/fgchen.com\/wpedu2\/2021\/05\/06\/bootstrap-card%e7%af%84%e4%be%8b\/"},"modified":"2026-03-30T14:37:53","modified_gmt":"2026-03-30T06:37:53","slug":"bootstrap-card%e7%af%84%e4%be%8b","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2021\/05\/bootstrap-card%e7%af%84%e4%be%8b\/","title":{"rendered":"Bootstrap Card\u7bc4\u4f8b"},"content":{"rendered":"

\"\"<\/a><\/h1>\n\n

\u5728head\u88cf\u52a0\u4e0aBootstrap\u6240\u9700\u8981\u7684css\u8207js (\u9700\u8981jQuery)<\/h1>\n\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.0\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L\/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\" integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\" crossorigin=\"anonymous\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.0\/dist\/js\/bootstrap.min.js\"><\/script>\n<\/pre>\n\n \n\n\u5728\u770bBootstrap\u524d\uff0c\u5148\u4e86\u89e3html5 semantic tag (\u8a9e\u97f3\u6a19\u7c64) \u53ca \u4f48\u5c40\u3002\n\n \n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.0\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L\/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\" integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\" crossorigin=\"anonymous\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.0\/dist\/js\/bootstrap.min.js\"><\/script>\n    \n    <title>Document<\/title>\n    <style>\n        \/*\n        *\n        * ==========================================\n        * FOR DEMO PURPOSES\n        * ==========================================\n        *\n        *\/\n\n        body {\n            min-height: 100vh;\n            background: #fafafa;\n        }\n\n\n        .social-link {\n            width: 30px;\n            height: 30px;\n            border: 1px solid #ddd;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #666;\n            border-radius: 50%;\n            transition: all 0.3s;\n            font-size: 0.9rem;\n        }\n\n        .social-link:hover, .social-link:focus {\n            background: #ddd;\n            text-decoration: none;\n            color: #555;\n        }\n\n        .progress {\n            height: 10px;\n        }\n\n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"container py-5\">\n        <!-- For Demo Purpose-->\n        <header class=\"text-center mb-5\">\n            <h1 class=\"display-4 font-weight-bold\">Bootstrap Cards<\/h1>\n            <p class=\"font-italic text-muted mb-0\">An awesome Bootstrap 4 cards collection with variant content.<\/p>\n            <p class=\"font-italic text-muted\">Snippet By <a href=\"https:\/\/bootstrapious.com\" class=\"text-muted\">\n                <u>Bootstrapious<\/u><\/a>\n            <\/p>\n        <\/header>\n    \n        \n        <!-- First Row [Prosucts]-->\n        <h2 class=\"font-weight-bold mb-2\">From the Shop<\/h2>\n        <p class=\"font-italic text-muted mb-4\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.<\/p>\n        \n        <div class=\"row pb-5 mb-4\">\n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-4\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1556485076\/shoes-1_gthops.jpg\" alt=\"\" class=\"img-fluid d-block mx-auto mb-3\">\n                        <h5> <a href=\"#\" class=\"text-dark\">Awesome product<\/a><\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <ul class=\"list-inline small\">\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star-o text-success\"><\/i><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-4\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1556485077\/shoes-3_rk25rt.jpg\" alt=\"\" class=\"img-fluid d-block mx-auto mb-3\">\n                        <h5> <a href=\"#\" class=\"text-dark\">Awesome product<\/a><\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <ul class=\"list-inline small\">\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star-o text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star-o text-success\"><\/i><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-4\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1556485078\/shoes-2_g4qame.jpg\" alt=\"\" class=\"img-fluid d-block mx-auto mb-3\">\n                        <h5> <a href=\"#\" class=\"text-dark\">Awesome product<\/a><\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <ul class=\"list-inline small\">\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-4\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1556485078\/shoes-4_vgfjy9.jpg\" alt=\"\" class=\"img-fluid d-block mx-auto mb-3\">\n                        <h5> <a href=\"#\" class=\"text-dark\">Awesome product<\/a><\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <ul class=\"list-inline small\">\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star text-success\"><\/i><\/li>\n                            <li class=\"list-inline-item m-0\"><i class=\"fa fa-star-o text-success\"><\/i><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    \n        \n        <!-- Second Row [Team]-->\n        <h2 class=\"font-weight-bold mb-2\">Our Team<\/h2>\n        <p class=\"font-italic text-muted mb-4\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.<\/p>\n        \n        <div class=\"row pb-5 mb-4\">\n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card shadow-sm border-0 rounded\">\n                    <div class=\"card-body p-0\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1570799922\/profile-1_dewapk.jpg\" alt=\"\" class=\"w-100 card-img-top\">\n                        <div class=\"p-4\">\n                            <h5 class=\"mb-0\">Mark Rockwell<\/h5>\n                            <p class=\"small text-muted\">CEO - Consultant<\/p>\n                            <ul class=\"social mb-0 list-inline mt-3\">\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-facebook-f\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-twitter\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-instagram\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-linkedin\"><\/i><\/a><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card shadow-sm border-0 rounded\">\n                    <div class=\"card-body p-0\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1570799922\/profile-3_ybnq8v.jpg\" alt=\"\" class=\"w-100 card-img-top\">\n                        <div class=\"p-4\">\n                            <h5 class=\"mb-0\">Mark Rockwell<\/h5>\n                            <p class=\"small text-muted\">CEO - Consultant<\/p>\n                            <ul class=\"social mb-0 list-inline mt-3\">\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-facebook-f\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-twitter\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-instagram\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-linkedin\"><\/i><\/a><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card shadow-sm border-0 rounded\">\n                    <div class=\"card-body p-0\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1570799924\/profile-4_s3fort.jpg\" alt=\"\" class=\"w-100 card-img-top\">\n                        <div class=\"p-4\">\n                            <h5 class=\"mb-0\">Mark Rockwell<\/h5>\n                            <p class=\"small text-muted\">CEO - Consultant<\/p>\n                            <ul class=\"social mb-0 list-inline mt-3\">\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-facebook-f\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-twitter\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-instagram\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-linkedin\"><\/i><\/a><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card shadow-sm border-0 rounded\">\n                    <div class=\"card-body p-0\"><img src=\"https:\/\/res.cloudinary.com\/mhmd\/image\/upload\/v1570799922\/profile-2_ujssbj.jpg\" alt=\"\" class=\"w-100 card-img-top\">\n                        <div class=\"p-4\">\n                            <h5 class=\"mb-0\">Mark Rockwell<\/h5>\n                            <p class=\"small text-muted\">CEO - Consultant<\/p>\n                            <ul class=\"social mb-0 list-inline mt-3\">\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-facebook-f\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-twitter\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-instagram\"><\/i><\/a><\/li>\n                                <li class=\"list-inline-item m-0\"><a href=\"#\" class=\"social-link\"><i class=\"fa fa-linkedin\"><\/i><\/a><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Third Row [Profiles]-->\n        <h2 class=\"font-weight-bold mb-2\">Active Profiles<\/h2>\n        <p class=\"font-italic text-muted mb-4\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.<\/p>\n        \n        <div class=\"row pb-5 mb-4\">\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-0\">\n                        <div class=\"bg-primary px-5 py-4 text-center card-img-top\"><img src=\"https:\/\/d19m59y37dris4.cloudfront.net\/university\/1-1-1\/img\/teacher-4.jpg\" alt=\"...\" width=\"100\" class=\"rounded-circle mb-2 img-thumbnail d-block mx-auto\">\n                            <h5 class=\"text-white mb-0\">Emma Nevoresky<\/h5>\n                            <p class=\"small text-white mb-0\">Elite user<\/p>\n                        <\/div>\n                        <div class=\"p-4 d-flex justify-content-center\">\n                            <ul class=\"list-inline mb-0\">\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">241<\/h5><small class=\"text-muted\"><i class=\"fa fa-picture-o mr-1 text-primary\"><\/i>Photos<\/small>\n                                <\/li>\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">84K<\/h5><small class=\"text-muted\"><i class=\"fa fa-user-circle-o mr-1 text-primary\"><\/i>Followers<\/small>\n                                <\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-0\">\n                        <div class=\"bg-success px-5 py-4 text-center card-img-top\"><img src=\"https:\/\/d19m59y37dris4.cloudfront.net\/university\/1-1-1\/img\/teacher-2.jpg\" alt=\"...\" width=\"100\" class=\"rounded-circle mb-2 img-thumbnail d-block mx-auto\">\n                            <h5 class=\"text-white mb-0\">Samuel Hardy<\/h5>\n                            <p class=\"small text-white mb-0\">Elite user<\/p>\n                        <\/div>\n                        <div class=\"p-4 d-flex justify-content-center\">\n                            <ul class=\"list-inline mb-0\">\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">241<\/h5><small class=\"text-muted\"><i class=\"fa fa-picture-o mr-1 text-success\"><\/i>Photos<\/small>\n                                <\/li>\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">84K<\/h5><small class=\"text-muted\"><i class=\"fa fa-user-circle-o mr-1 text-success\"><\/i>Followers<\/small>\n                                <\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-0\">\n                        <div class=\"bg-info px-5 py-4 text-center card-img-top\"><img src=\"https:\/\/d19m59y37dris4.cloudfront.net\/university\/1-1-1\/img\/teacher-7.jpg\" alt=\"...\" width=\"100\" class=\"rounded-circle mb-2 img-thumbnail d-block mx-auto\">\n                            <h5 class=\"text-white mb-0\">Tom Sunderland<\/h5>\n                            <p class=\"small text-white mb-0\">Elite user<\/p>\n                        <\/div>\n                        <div class=\"p-4 d-flex justify-content-center\">\n                            <ul class=\"list-inline mb-0\">\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">241<\/h5><small class=\"text-muted\"><i class=\"fa fa-picture-o mr-1 text-info\"><\/i>Photos<\/small>\n                                <\/li>\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">84K<\/h5><small class=\"text-muted\"><i class=\"fa fa-user-circle-o mr-1 text-info\"><\/i>Followers<\/small>\n                                <\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-0\">\n                        <div class=\"bg-warning px-5 py-4 text-center card-img-top\"><img src=\"https:\/\/d19m59y37dris4.cloudfront.net\/university\/1-1-1\/img\/teacher-1.jpg\" alt=\"...\" width=\"100\" class=\"rounded-circle mb-2 img-thumbnail d-block mx-auto\">\n                            <h5 class=\"text-white mb-0\">John Tarly<\/h5>\n                            <p class=\"small text-white mb-0\">Elite user<\/p>\n                        <\/div>\n                        <div class=\"p-4 d-flex justify-content-center\">\n                            <ul class=\"list-inline mb-0\">\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">241<\/h5><small class=\"text-muted\"><i class=\"fa fa-picture-o mr-1 text-warning\"><\/i>Photos<\/small>\n                                <\/li>\n                                <li class=\"list-inline-item\">\n                                    <h5 class=\"font-weight-bold mb-0 d-block\">84K<\/h5><small class=\"text-muted\"><i class=\"fa fa-user-circle-o mr-1 text-warning\"><\/i>Followers<\/small>\n                                <\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    \n        \n        <!-- First Row [Statistics]-->\n        <h2 class=\"font-weight-bold mb-2\">Latest Statistics<\/h2>\n        <p class=\"font-italic text-muted mb-4\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.<\/p>\n        \n        <div class=\"row pb-5\">\n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card-->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-5\"><i class=\"fa fa-bar-chart fa-2x mb-3 text-primary\"><\/i>\n                        <h5>Products Sales<\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <div class=\"progress rounded-pill\">\n                            <div role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 70%;\" class=\"progress-bar rounded-pill\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card -->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-5\"><i class=\"fa fa-tasks fa-2x mb-3 text-success\"><\/i>\n                        <h5>Completed Tasks<\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <div class=\"progress rounded-pill\">\n                            <div role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 80%;\" class=\"progress-bar bg-success rounded-pill\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <!-- Card -->\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-5\"><i class=\"fa fa-user-circle-o fa-2x mb-3 text-info\"><\/i>\n                        <h5>New Users<\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <div class=\"progress rounded-pill\">\n                            <div role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 70%;\" class=\"progress-bar bg-info rounded-pill\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Card -->\n            <div class=\"col-lg-3 col-md-6 mb-4 mb-lg-0\">\n                <div class=\"card rounded shadow-sm border-0\">\n                    <div class=\"card-body p-5\"><i class=\"fa fa-shopping-bag fa-2x mb-3 text-warning\"><\/i>\n                        <h5>New Products<\/h5>\n                        <p class=\"small text-muted font-italic\">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<\/p>\n                        <div class=\"progress rounded-pill\">\n                            <div role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 70%;\" class=\"progress-bar bg-warning rounded-pill\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>    \n<\/body>\n<\/html><\/pre>\n\n ","protected":false},"excerpt":{"rendered":"
\u5728head\u88cf\u52a0\u4e0aBootstrap\u6240\u9700\u8981\u7684css\u8207js (\u9700\u8981jQuery) & … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12245","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12245"}],"version-history":[{"count":1,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12245\/revisions"}],"predecessor-version":[{"id":13601,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12245\/revisions\/13601"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}