{"id":688,"date":"2019-07-11T17:07:54","date_gmt":"2019-07-11T09:07:54","guid":{"rendered":"http:\/\/blog.nami.idv.tw\/?p=688"},"modified":"2019-07-12T14:16:52","modified_gmt":"2019-07-12T06:16:52","slug":"%e8%aa%bf%e6%95%b4-bootstrap-4-%e6%8c%89%e9%88%95%e7%9a%84%e9%a1%8f%e8%89%b2-change-bootstrap-4-button-color","status":"publish","type":"post","link":"https:\/\/blog.nami.idv.tw\/?p=688","title":{"rendered":"\u8abf\u6574 Bootstrap 4 \u6309\u9215\u7684\u984f\u8272 (Change Bootstrap 4 button color)"},"content":{"rendered":"\n<p>Bootstrap 4 \u7684\u6309\u9215\u914d\u8272\u500b\u4eba\u89ba\u5f97\u6bd4\u8f03\u786c\uff0c\u60f3\u6539\u56de Bootstrap 3 \u7684\u6309\u9215\u914d\u8272\u65bc\u662f\u5c31\u7528\u8986\u84cb\u6a23\u5f0f\u7684\u65b9\u5f0f\u4f9d\u7167 Boostrap 4 \u7684\u6a23\u5f0f\u8a2d\u5b9a\u8abf\u6574\u984f\u8272\u3002<\/p>\n\n\n\n<p>( LESS \u683c\u5f0f\uff0c\u56e0\u70ba WordPress bug \u628a &amp; \u7d66 escape \u4e86\uff0c\u8907\u88fd\u5f8c\u5f97\u628a &amp;amp; \u6539\u56de &amp; )<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; auto-links: false; title: ; notranslate\" title=\"\">\n#bundle() {\n\t.btnStyle {\n\t\tcolor: @color;\n\t\tbackground-color: @background-color;\n\t\tborder-color: @border-color;\n\t\t&amp;:hover {\n\t\t\tcolor: @color;\n\t\t\tbackground-color: @background-color-hover;\n\t\t\tborder-color: @border-color-hover;\n\t\t}\n\t\t&amp;.focus, &amp;:focus {\n\t\t\tbox-shadow: @box-shadow;\n\t\t}\n\t\t&amp;.disabled, &amp;:disabled {\n\t\t\tcolor: @color;\n\t\t\tbackground-color: @background-color;\n\t\t\tborder-color: @border-color;\n\t\t}\n\t\t&amp;:not(:disabled):not(.disabled).active\n\t\t, &amp;:not(:disabled):not(.disabled):active\n\t\t, .show &gt; &amp;.dropdown-toggle {\n\t\t\tcolor: @color;\n\t\t\tbackground-color: @background-color-hover;\n\t\t\tborder-color: @border-color-hover;\n\t\t}\n\t\t&amp;:not(:disabled):not(.disabled):active:focus\n\t\t, &amp;:not(:disabled):not(.disabled).active:focus\n\t\t, .show &gt; &amp;.dropdown-toggle:focus {\n\t\t\tbox-shadow: @box-shadow;\n\t\t}\n\t}\n}\n\n.btn-primary {\n\t@color: #fff;\n\t@background-color: #0275d8;\n\t@border-color: #0275d8;\n\t@background-color-hover: #025aa5;\n\t@border-color-hover: #01549b;\n\t@box-shadow: 0 0 0 .2rem rgba(2, 117, 216, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-secondary {\n\t@color: #292b2c;\n\t@background-color: #fff;\n\t@border-color: #ccc;\n\t@background-color-hover: #e6e6e6;\n\t@border-color-hover: #adadad;\n\t@box-shadow: 0 0 0 .2rem rgba(204, 204, 204, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-info {\n\t@color: #fff;\n\t@background-color: #5bc0de;\n\t@border-color: #5bc0de;\n\t@background-color-hover: #31b0d5;\n\t@border-color-hover: #2aabd2;\n\t@box-shadow: 0 0 0 .2rem rgba(91, 192, 222, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-success {\n\t@color: #fff;\n\t@background-color: #5cb85c;\n\t@border-color: #5cb85c;\n\t@background-color-hover: #449d44;\n\t@border-color-hover: #449d44;\n\t@box-shadow: 0 0 0 .2rem rgba(92, 184, 92, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-warning {\n\t@color: #fff;\n\t@background-color: #f0ad4e;\n\t@border-color: #f0ad4e;\n\t@background-color-hover: #ec971f;\n\t@border-color-hover: #eb9316;\n\t@box-shadow: 0 0 0 .2rem rgba(240, 173, 78, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-danger {\n\t@color: #fff;\n\t@background-color: #d9534f;\n\t@border-color: #d9534f;\n\t@background-color-hover: #c9302c;\n\t@border-color-hover: #c12e2a;\n\t@box-shadow: 0 0 0 .2rem rgba(217, 83, 79, .5);\n\t#bundle.btnStyle();\n}\n\n.btn-light {\n\t@color: #212529;\n\t@background-color: #eceeec;\n\t@border-color: #eceeec;\n\t@background-color-hover: #d8dcd8;\n\t@border-color-hover: #d1d6d1;\n\t@box-shadow: 0 0 0 .2rem rgba(206, 208, 207, 0.5);\n\t#bundle.btnStyle();\n}\n\n.btn-dark {\n\t@color: #fff;\n\t@background-color: #343a40;\n\t@border-color: #343a40;\n\t@background-color-hover: #23272b;\n\t@border-color-hover: #1d2124;\n\t@box-shadow: 0 0 0 .2rem rgba(82, 88, 93, 0.5);\n\t#bundle.btnStyle();\n}\n \n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Bootstrap 4 \u7684\u6309\u9215\u914d\u8272\u500b\u4eba\u89ba\u5f97\u6bd4\u8f03\u786c\uff0c\u60f3\u6539\u56de Bootstrap 3 &hellip; <a href=\"https:\/\/blog.nami.idv.tw\/?p=688\">\u95b1\u8b80\u5168\u6587 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-688","post","type-post","status-publish","format-standard","hentry","category-web-technology"],"_links":{"self":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=688"}],"version-history":[{"count":6,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/688\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/688\/revisions\/701"}],"wp:attachment":[{"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.nami.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}