{"id":5934,"date":"2022-03-09T16:10:31","date_gmt":"2022-03-09T08:10:31","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=5934"},"modified":"2022-03-14T15:33:18","modified_gmt":"2022-03-14T07:33:18","slug":"cssframe-bootstrap","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/09\/cssframe-bootstrap\/","title":{"rendered":"\u300aCSS Frame\u300b Bootstrap"},"content":{"rendered":"\n<p>Twitter\u51fa\u54c1\uff0c\u4ee5 HTML\u3001CSS \u548c JavaScript\u7d44\u6210\u7684\u524d\u7aef\u6846\u67b6\u3002<br>[<a href=\"https:\/\/monsterone.com\/?aff=Jilin\"><\/a> Bootstrap\u5b98\u7db2 ] \u21e2 <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/getbootstrap.com\/<\/a><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>\u2013 \u4e3b\u8981\u6a21\u7d44 \u2013<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns blog-cover is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Layout<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Breakpoints<\/li><li>Containers<\/li><li>Grid<\/li><li>Columns<\/li><li>Gutters<\/li><li>Utilities<\/li><li>Z-index<\/li><li>CSS Grid<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Content<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Reboot<\/li><li>Typography<\/li><li>Images<\/li><li>Tables<\/li><li>Figures<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Forms<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Overview<\/li><li>Form controls<\/li><li>Select<\/li><li>Checks and radios<\/li><li>Range<\/li><li>Input group<\/li><li>Floating labels<\/li><li>Layout<\/li><li>Validation<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Components<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Accordion<\/li><li>Alerts<\/li><li>Badge<\/li><li>Breadcrumb<\/li><li>Buttons<\/li><li>Button group<\/li><li>Card<\/li><li>Carousel<\/li><li>Close button<\/li><li>Collapse<\/li><li>Dropdowns<\/li><li>List group<\/li><li>Modal<\/li><li>Navs &amp; tabs<\/li><li>Navbar<\/li><li>Offcanvas<\/li><li>Pagination<\/li><li>Placeholders<\/li><li>Popovers<\/li><li>Progress<\/li><li>Scrollspy<\/li><li>Spinners<\/li><li>Toasts<\/li><li>Tooltips<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Bootstrap <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4e0b\u8f09<\/h3>\n\n\n\n<p> [ <strong>Bootstrap \u4e0b\u8f09<\/strong> ] \u21e2 <a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/download\/\" target=\"_blank\">https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/download\/<\/a><br> [ <strong>Bootstrap \u6559\u5b78<\/strong> ] \u21e2 <a rel=\"noreferrer noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/introduction\/\" target=\"_blank\">https:\/\/getbootstrap.com\/docs\/5.1\/getting-started\/introduction\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4f7f\u7528<\/h3>\n\n\n\n<p>\u5feb\u901f\u5b89\u88ddBootstrap<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- Required meta tags -->\n&lt;meta charset=\"utf-8\">\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n&lt;!-- Bootstrap CSS &lt;head>\u52a0\u5165&lt;\/head> -->\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n\n&lt;!-- Js &lt;body>\u52a0\u5728\u5e95\u90e8&lt;\/body>-->\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.10.2\/dist\/umd\/popper.min.js\" integrity=\"sha384-7+zCNj\/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB\" crossorigin=\"anonymous\">&lt;\/script>\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5\/YESvpZ13\" crossorigin=\"anonymous\">&lt;\/script>\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\">&lt;\/script>\n<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Bootstrap Icons<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4e0b\u8f09<a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/extend\/icons\/#bootstrap-icons\"><\/a><\/h3>\n\n\n\n<p> [ <strong>Bootstrap Icon \u4e0b\u8f09<\/strong> ] \u21e2 <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/twbs\/icons\" target=\"_blank\">https:\/\/github.com\/twbs\/icons<\/a><br> [ <strong>Bootstrap Icon \u76ee\u9304<\/strong> ] \u21e2 <a href=\"https:\/\/icons.getbootstrap.com\/\">https:\/\/icons.getbootstrap.com\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4f7f\u7528<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;i class=\"bi bi-house\">&lt;\/i>\n\n&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-house\" viewBox=\"0 0 16 16\">\n  &lt;path fill-rule=\"evenodd\" d=\"M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z\"\/>\n  &lt;path fill-rule=\"evenodd\" d=\"M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z\"\/>\n&lt;\/svg><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Bootstrap-select<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4e0b\u8f09<a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/extend\/icons\/#bootstrap-icons\"><\/a><\/h3>\n\n\n\n<p>[ <strong>Bootstrap-select \u4e0b\u8f09<\/strong> ] \u21e2 <a href=\"https:\/\/developer.snapappointments.com\/bootstrap-select\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.snapappointments.com\/bootstrap-select\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4f7f\u7528<\/h3>\n\n\n\n<p>\u4f7f\u7528Bootstrap\u5957\u4ef6\u4e0b\uff0c\u65b0\u589eBootstrap-select\u6a23\u5f0f\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- Latest compiled and minified CSS -->\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-select@1.13.14\/dist\/css\/bootstrap-select.min.css\">\n\n&lt;!-- Latest compiled and minified JavaScript -->\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-select@1.13.14\/dist\/js\/bootstrap-select.min.js\">&lt;\/script>\n\n&lt;!-- (Optional) Latest compiled and minified JavaScript translation files -->\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-select@1.13.14\/dist\/js\/i18n\/defaults-*.min.js\">&lt;\/script><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u7bc4\u4f8b<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/Javascript\n$('.my-select').selectpicker();\n\/\/or\n$('select').selectpicker();\n\/\/or\n$(function () {\n    $('select').selectpicker();\n});<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select class=\"selectpicker\">\n  &lt;option>Mustard&lt;\/option>\n  &lt;option>Ketchup&lt;\/option>\n  &lt;option>Barbecue&lt;\/option>\n&lt;\/select>\n<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Bootstrap datepicker&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4e0b\u8f09<a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/extend\/icons\/#bootstrap-icons\"><\/a><\/h3>\n\n\n\n<p>[ <strong>Bootstrap datepicker&nbsp; \u4e0b\u8f09<\/strong> ] \u21e2 <a rel=\"noreferrer noopener\" href=\"https:\/\/uxsolutions.github.io\/bootstrap-datepicker\" target=\"_blank\">https:\/\/uxsolutions.github.io\/bootstrap-datepicker<\/a><br>[ <strong>Bootstrap datepicker&nbsp; \u5b89\u88dd<\/strong> ] \u21e2 <a rel=\"noreferrer noopener\" href=\"https:\/\/uxsolutions.github.io\/bootstrap-datepicker\" target=\"_blank\"><\/a>$ lessc build\/build_standalone.less datepicker.css <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u261e \u4f7f\u7528<\/h3>\n\n\n\n<p>\u4f7f\u7528Bootstrap\u5957\u4ef6\u4e0b\uff0c\u65b0\u589ebootstrap-datepicker\u6a23\u5f0f\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- &lt;head> \u52a0\u5165 -->\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.9.0\/css\/bootstrap-datepicker.min.css\">\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-datepicker\/1.9.0\/css\/bootstrap-datepicker3.min.css\">\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u7bc4\u4f8b<\/h4>\n\n\n\n<p>\u57fa\u672c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/Javascript\n$('.datepicker').datepicker()<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--input-->\n&lt;input type=\"text\" class=\"form-control\">\n&lt;input type=\"date\" class=\"form-control\" id=\"date\" name=\"date\"><\/pre>\n\n\n\n<p>\u81ea\u8a02<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/Javascript\n$('.datepicker').datepicker({\n    format: 'mm\/dd\/yyyy',\n    startDate: '-3d'\n});\n\n\/\/Javascript\u9810\u8a2d\u503c\n$.fn.datepicker.defaults.format = \"mm\/dd\/yyyy\";\n$('.datepicker').datepicker({\n    startDate: '-3d'\n});<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--input-->\n&lt;input class=\"datepicker\" data-date-format=\"mm\/dd\/yyyy\"><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Twitter\u51fa\u54c1\uff0c\u4ee5 HTML\u3001CSS \u548c JavaScript\u7d44\u6210\u7684\u524d\u7aef\u6846\u67b6\u3002[ Bootstrap\u5b98\u7db2 &#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":6082,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,11],"tags":[],"class_list":["post-5934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-ui-frame"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/5934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=5934"}],"version-history":[{"count":96,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/5934\/revisions"}],"predecessor-version":[{"id":6097,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/5934\/revisions\/6097"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media\/6082"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=5934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=5934"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=5934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}