{"id":12853,"date":"2024-12-28T17:15:03","date_gmt":"2024-12-28T08:15:03","guid":{"rendered":"https:\/\/colors-themes.com\/clock\/?p=12853"},"modified":"2025-04-06T04:35:18","modified_gmt":"2025-04-05T19:35:18","slug":"bootstrap5","status":"publish","type":"post","link":"https:\/\/colors-themes.com\/clock\/bootstrap5\/","title":{"rendered":"Bootstrap v4\u304b\u3089v5\u3078\u306e\u79fb\u884c"},"content":{"rendered":"\n<h1 class=\"wp-block-clock-blocks-block-08 heading-bg title-theme title-style3 title-bg-left\"><span class=\"clock-blocks-align-none\">Bootstrap v5\u306e\u4e3b\u306a\u5909\u66f4\u70b9<\/span><\/h1>\n\n\n\n<p><a href=\"https:\/\/getbootstrap.jp\/docs\/5.3\/migration\/\">v5\u3067\u5909\u66f4\u3055\u308c\u305f\u5185\u5bb9<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8131jQuery<\/li>\n\n\n\n<li>IE\u975e\u5bfe\u5fdc<\/li>\n\n\n\n<li>CSS\u5909\u6570<\/li>\n\n\n\n<li>\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8xxl<\/li>\n\n\n\n<li>Bootstrap Icons<\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-clock-blocks-block-08 heading-bg title-theme title-style3 title-bg-left\"><span class=\"clock-blocks-align-none\">HTML\u30b5\u30a4\u30c8\u306e\u5834\u5408<\/span><\/h1>\n\n\n\n<p>Bootstrap v4.1.1\u304b\u3089Bootstrap v5.3.0\u3078\u306e\u79fb\u884c\u65b9\u6cd5\u306e\u30e1\u30e2\u3067\u3059\u3002<br>\u81ea\u4f5c\u306eHTML5\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f8b\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u8aad\u307f\u8fbc\u307f\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>v4<\/strong>\nbootstrap.min.css\u3000\u3000\nbootstrap.min.js\npopper.min.js\u3000\u3000\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3068\u30dd\u30c3\u30d7\u30aa\u30fc\u30d0\u30fc\u306b\u5fc5\u8981\u3002\n\n<strong>v5<\/strong>\nbootstrap.min.css\u3000\u3000\nbootstrap.bundle.min.js\u3000\u3000Popper.js\u3092\u30a4\u30f3\u30af\u30eb\u30fc\u30c9\u3057\u3066\u3044\u308b\u3002<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u4e3b\u306aCSS\u30af\u30e9\u30b9\u540d\u306e\u5909\u66f4<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>v4\uff1a\u3000text-left\nv5\uff1a\u3000text-start\n\nv4\uff1a\u3000text-right\nv5\uff1a\u3000text-end\n\nv4\uff1acustom-select\nv5\uff1aform-select\n\nv4\uff1a\u3000embed-responsive embed-responsive-16by9\nv5\uff1a\u3000ratio ratio-16x9<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u30e1\u30cb\u30e5\u30fc<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML\u306e\u300cdata-\u300d\u3092\u300cdata-bs-\u300d\u3078\u5909\u66f4<\/strong>\nv4\uff1a\u3000data-toggle=\"\"\nv5\uff1a\u3000data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>toggle=\"\"\n\nv4\uff1a\u3000data-target=\"\"\nv5\uff1a\u3000data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>target=\"\"<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML\u306e\u300cdata-\u300d\u3092\u300cdata-bs-\u300d\u3078\u5909\u66f4<\/strong>\nv4\uff1a\u3000data-toggle=\"\" data-placement=\"\"\nv5\uff1a\u3000data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>toggle=\"\" data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>placement=\"\"\n\n<strong>v5<\/strong> <strong>JS\u30b3\u30fc\u30c9\u8ffd\u52a0<\/strong>\nconst tooltipTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"tooltip\"]')\nconst tooltipList = &#91;...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u30dd\u30c3\u30d7\u30aa\u30fc\u30d0\u30fc<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML\u306e\u300cdata-\u300d\u3092\u300cdata-bs-\u300d\u3078\u5909\u66f4<\/strong>\nv4\uff1a\u3000data-container=\"\" data-toggle=\"\" data-placement=\"\" data-content=\"\"\nv5\uff1a\u3000data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>container=\"\" data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>toggle=\"\" data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>placement=\"\" data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>content=\"\"\n\n<strong>v5<\/strong> <strong>JS\u30b3\u30fc\u30c9\u8ffd\u52a0<\/strong>\nconst popoverTriggerList = document.querySelectorAll('&#91;data-bs-toggle=\"popover\"]')\nconst popoverList = &#91;...popoverTriggerList].map(popoverTriggerEl =&gt; new bootstrap.Popover(popoverTriggerEl))<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u30a2\u30e9\u30fc\u30c8<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>v4\u306eHTML<\/strong>\n&lt;div class=\"alert alert-white alert-dismissible fade show\" role=\"alert\"&gt; alert-white\n  &lt;button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"&gt;\n    <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;span aria-hidden=\"true\"&gt;&amp;times;&lt;\/span&gt;<\/mark>\n  &lt;\/button&gt;\n&lt;\/div&gt;\n \n<strong>v5\u306eHTML<\/strong>\n&lt;div class=\"alert alert-white alert-dismissible fade show\" role=\"alert\"&gt; alert-white\n  &lt;button type=\"button\" class=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">btn-close<\/mark>\" data<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">-bs-<\/mark>dismiss=\"alert\" aria-label=\"Close\"&gt;\n  &lt;\/button&gt;\n&lt;\/div&gt;\n\n<strong>CSS\u306e\u5909\u66f4<\/strong>\nv4\uff1a\u3000.alert-dismissible .close { padding: 0.75rem 1.25rem; }\nv5\uff1a\u3000.alert-dismissible .btn-close { padding: 0.5rem; }<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u6642\u306b\u767d\u304f\u306a\u308b<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u8a73\u7d30\u5ea6\u304c\u9ad8\u3044\u306e\u3067\u512a\u5148\u3055\u308c\u307e\u3059\u3002\nv4: .btn:active\nv5\uff1a .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-clock-blocks-block-08 heading-bg title-theme title-style3 title-bg-left\"><span class=\"clock-blocks-align-none\">WordPress\u30c6\u30fc\u30de\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u5834\u5408<\/span><\/h1>\n\n\n\n<p>\u672c\u30c6\u30fc\u30de\u306e\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u7406\u7531\u304b\u3089Bootstrap v5\u3078\u306e\u79fb\u884c\u306f\u898b\u9001\u308a\u3068\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u2460. Bootstrap v5.3.0\uff08bootstrap.bundle.min.js\uff09\u306f\u8907\u6570\u8aad\u307f\u8fbc\u307f\u6642\u306b\u554f\u984c\u304c\u767a\u751f\u3059\u308b<\/strong><br>WordPress\u30c6\u30fc\u30de\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u305d\u308c\u305e\u308cbootstrap.bundle.min.js\uff08Tooltip\u7b49\u30d0\u30f3\u30c9\u30eb\uff09\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3001Bootstrap\u306e\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u30842nd\u30ec\u30d9\u30eb\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u7b49\u304c\u6a5f\u80fd\u3057\u307e\u305b\u3093\u3002<br>\u203bbootstrap.min.js\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u554f\u984c\u306a\u3044\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u2461. <a href=\"https:\/\/github.com\/wp-bootstrap\/wp-bootstrap-navwalker\">WP Bootstrap Navwalker v4.3.0<\/a><\/strong><br>Bootstrap v5\u3078\u624b\u52d5\u3067\u306e\u5bfe\u5fdc\u65b9\u6cd5\u306f\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u6b63\u5f0f\u306a\u5bfe\u5fdc\u306f\u307e\u3060\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * Use namespaced data attribute for Bootstrap's dropdown toggles.\n *\n * @param array    $atts HTML attributes applied to the item's `&lt;a&gt;` element.\n * @param WP_Post  $item The current menu item.\n * @param stdClass $args An object of wp_nav_menu() arguments.\n * @return array\n *\/\nfunction prefix_bs5_dropdown_data_attribute( $atts, $item, $args ) {\n    if ( is_a( $args-&gt;walker, 'WP_Bootstrap_Navwalker' ) ) {\n        if ( array_key_exists( 'data-toggle', $atts ) ) {\n            unset( $atts&#91;'data-toggle'] );\n            $atts&#91;'data-bs-toggle'] = 'dropdown';\n        }\n    }\n    return $atts;\n}\nadd_filter( 'nav_menu_link_attributes', 'prefix_bs5_dropdown_data_attribute', 20, 3 );<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>v5\u3067\u5909\u66f4\u3055\u308c\u305f\u5185\u5bb9 Bootstrap v4.1.1\u304b\u3089Bootstrap v5.3.0\u3078\u306e\u79fb\u884c\u65b9\u6cd5\u306e\u30e1\u30e2\u3067\u3059\u3002\u81ea\u4f5c\u306eHTML5\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f8b\u306b\u3057\u3066\u3044\u307e\u3059\u3002 \u8aad\u307f\u8fbc\u307f\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4 \u4e3b\u306aCSS\u30af\u30e9\u30b9\u540d\u306e\u5909\u66f4 \u30e1\u30cb\u30e5\u30fc...<\/p>\n","protected":false},"author":1,"featured_media":12849,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-12853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-create-theme"],"_links":{"self":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/12853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/comments?post=12853"}],"version-history":[{"count":189,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/12853\/revisions"}],"predecessor-version":[{"id":13076,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/12853\/revisions\/13076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/media\/12849"}],"wp:attachment":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/media?parent=12853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/categories?post=12853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/tags?post=12853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}