{"id":193,"date":"2025-11-25T09:15:11","date_gmt":"2025-11-25T01:15:11","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=193"},"modified":"2025-11-25T09:16:26","modified_gmt":"2025-11-25T01:16:26","slug":"bootstrapv4%e8%bd%ae%e6%92%ad%e5%9b%be%e5%8e%bb%e9%99%a4%e4%b8%a4%e4%be%a7%e9%98%b4%e5%bd%b1%e5%8f%8a%e7%ba%bf%e6%a1%86%e7%9a%84%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/bootstrapv4%e8%bd%ae%e6%92%ad%e5%9b%be%e5%8e%bb%e9%99%a4%e4%b8%a4%e4%be%a7%e9%98%b4%e5%bd%b1%e5%8f%8a%e7%ba%bf%e6%a1%86%e7%9a%84%e6%96%b9%e6%b3%95\/","title":{"rendered":"bootstrapv4\u8f6e\u64ad\u56fe\u53bb\u9664\u4e24\u4fa7\u9634\u5f71\u53ca\u7ebf\u6846\u7684\u65b9\u6cd5"},"content":{"rendered":"\n<p>\u963f\u6770\uff0c\u4f60\u60f3\u53bb\u6389 <strong>Bootstrap 4 \u8f6e\u64ad\u56fe\u4e24\u4fa7\u7684\u9634\u5f71\u548c\u9ed8\u8ba4\u7ebf\u6846<\/strong>\uff0c\u53ef\u4ee5\u901a\u8fc7 CSS \u8986\u76d6\u9ed8\u8ba4\u6837\u5f0f\u6765\u5b9e\u73b0\u3002\u4e0b\u9762\u7ed9\u4f60\u51e0\u79cd\u5b8c\u6574\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">1\ufe0f\u20e3 \u53bb\u6389\u8f6e\u64ad\u56fe\u4e24\u4fa7\u9634\u5f71<\/h1>\n\n\n\n<p>Bootstrap 4 \u7684\u8f6e\u64ad\u9ed8\u8ba4\u5de6\u53f3\u6309\u94ae\u6709 <strong>\u9634\u5f71\u548c\u6e10\u53d8\u80cc\u666f<\/strong>\uff0c\u4e3b\u8981\u662f <code>.carousel-control-prev<\/code> \u548c <code>.carousel-control-next<\/code> \u7684\u4f2a\u5143\u7d20 <code>::before<\/code> \u6216 <code>background-image<\/code>\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* \u53bb\u6389\u5de6\u53f3\u7bad\u5934\u80cc\u666f\u6e10\u53d8 *\/\n.carousel-control-prev,\n.carousel-control-next {\n  background: none;        \/* \u6e05\u9664\u80cc\u666f\u6e10\u53d8 *\/\n  width: 5%;               \/* \u53ef\u6309\u9700\u8c03\u6574\u7bad\u5934\u533a\u57df\u5bbd\u5ea6 *\/\n}\n\n\/* \u53bb\u6389\u4f2a\u5143\u7d20\u9634\u5f71\/\u7bad\u5934\u7684\u80cc\u666f\u56fe *\/\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  background-image: none;  \/* \u53bb\u6389\u9ed8\u8ba4\u7bad\u5934\u80cc\u666f\u56fe *\/\n}\n\n\/* \u53ef\u81ea\u5b9a\u4e49\u7bad\u5934\u989c\u8272\u6216\u56fe\u6807 *\/\n.carousel-control-prev-icon::after {\n  content: &#039;\u2039&#039;; \/* \u5de6\u7bad\u5934\u5b57\u7b26 *\/\n  font-size: 2rem;\n  color: #000;\n}\n.carousel-control-next-icon::after {\n  content: &#039;\u203a&#039;; \/* \u53f3\u7bad\u5934\u5b57\u7b26 *\/\n  font-size: 2rem;\n  color: #000;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2\ufe0f\u20e3 \u53bb\u6389\u8f6e\u64ad\u56fe\u7ebf\u6846\uff08\u8fb9\u6846\uff09<\/h1>\n\n\n\n<p>Bootstrap \u9ed8\u8ba4\u53ef\u80fd\u4f1a\u7ed9 <code>.carousel-item img<\/code> \u6dfb\u52a0 <code>border<\/code> \u6216\u8f6e\u5ed3\uff08outline\uff09\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.carousel-item img {\n  border: none;        \/* \u53bb\u6389\u8fb9\u6846 *\/\n  outline: none;       \/* \u53bb\u6389\u7126\u70b9\u8f6e\u5ed3 *\/\n  box-shadow: none;    \/* \u53bb\u6389\u9634\u5f71 *\/\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3\ufe0f\u20e3 \u5b8c\u6574\u793a\u4f8b<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div id=&quot;carouselExample&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;\n  &amp;lt;div class=&quot;carousel-inner&quot;&gt;\n    &amp;lt;div class=&quot;carousel-item active&quot;&gt;\n      &amp;lt;img src=&quot;img1.jpg&quot; class=&quot;d-block w-100&quot;&gt;\n    &amp;lt;\/div&gt;\n    &amp;lt;div class=&quot;carousel-item&quot;&gt;\n      &amp;lt;img src=&quot;img2.jpg&quot; class=&quot;d-block w-100&quot;&gt;\n    &amp;lt;\/div&gt;\n  &amp;lt;\/div&gt;\n\n  &amp;lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExample&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n  &amp;lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExample&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-next-icon&quot;&gt;&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;style&gt;\n\/* \u53bb\u6389\u7bad\u5934\u80cc\u666f\u9634\u5f71 *\/\n.carousel-control-prev,\n.carousel-control-next {\n  background: none;\n}\n\n\/* \u53bb\u6389\u9ed8\u8ba4\u7bad\u5934\u56fe\u6807 *\/\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  background-image: none;\n}\n\n\/* \u81ea\u5b9a\u4e49\u7bad\u5934 *\/\n.carousel-control-prev-icon::after {\n  content: &#039;\u2039&#039;;\n  font-size: 2rem;\n  color: #000;\n}\n.carousel-control-next-icon::after {\n  content: &#039;\u203a&#039;;\n  font-size: 2rem;\n  color: #000;\n}\n\n\/* \u53bb\u6389\u56fe\u7247\u8fb9\u6846\/\u9634\u5f71 *\/\n.carousel-item img {\n  border: none;\n  outline: none;\n  box-shadow: none;\n}\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u603b\u7ed3<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u9634\u5f71\u548c\u6e10\u53d8\u80cc\u666f \u2192 \u8986\u76d6 <code>.carousel-control-prev<\/code> \u548c <code>.carousel-control-next<\/code> \u7684 <code>background<\/code>\u3002<\/li>\n\n\n\n<li>\u7bad\u5934\u56fe\u6807 \u2192 \u8986\u76d6 <code>.carousel-control-prev-icon<\/code> \/ <code>.carousel-control-next-icon<\/code> \u7684 <code>background-image<\/code>\u3002<\/li>\n\n\n\n<li>\u56fe\u7247\u8fb9\u6846 \u2192 \u6e05\u9664 <code>.carousel-item img<\/code> \u7684 <code>border<\/code>\u3001<code>outline<\/code> \u548c <code>box-shadow<\/code>\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>\u5b8c\u6574 Bootstrap 4 \u8f6e\u64ad\u56fe Demo<\/strong>\uff0c\u53bb\u6389\u4e86\u5de6\u53f3\u7bad\u5934\u7684\u9ed8\u8ba4\u9634\u5f71\u3001\u6e10\u53d8\u80cc\u666f\u548c\u56fe\u7247\u8fb9\u6846\uff0c\u540c\u65f6\u81ea\u5b9a\u4e49\u4e86\u7bad\u5934\u6837\u5f0f\uff0c\u53ef\u76f4\u63a5\u590d\u5236\u4f7f\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;Bootstrap4 \u8f6e\u64ad\u56fe\u53bb\u9634\u5f71\u7ebf\u6846 Demo&amp;lt;\/title&gt;\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css&quot;&gt;\n\n&amp;lt;style&gt;\n\/* ---------------------------- *\/\n\/* \u53bb\u6389\u7bad\u5934\u80cc\u666f\u548c\u9634\u5f71 *\/\n.carousel-control-prev,\n.carousel-control-next {\n  background: none;       \/* \u6e05\u9664\u5de6\u53f3\u7bad\u5934\u80cc\u666f *\/\n  width: 5%;              \/* \u53ef\u8c03\u6574\u7bad\u5934\u70b9\u51fb\u533a\u57df\u5bbd\u5ea6 *\/\n}\n\n\/* \u53bb\u6389\u9ed8\u8ba4\u7bad\u5934\u56fe\u6807 *\/\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  background-image: none;\n}\n\n\/* \u81ea\u5b9a\u4e49\u7bad\u5934\u6837\u5f0f *\/\n.carousel-control-prev-icon::after {\n  content: &#039;\u2039&#039;;           \/* \u5de6\u7bad\u5934\u5b57\u7b26 *\/\n  font-size: 3rem;\n  color: #000;            \/* \u7bad\u5934\u989c\u8272\uff0c\u53ef\u6539 *\/\n}\n.carousel-control-next-icon::after {\n  content: &#039;\u203a&#039;;           \/* \u53f3\u7bad\u5934\u5b57\u7b26 *\/\n  font-size: 3rem;\n  color: #000;\n}\n\n\/* \u53bb\u6389\u56fe\u7247\u8fb9\u6846\u548c\u9634\u5f71 *\/\n.carousel-item img {\n  border: none;\n  outline: none;\n  box-shadow: none;\n}\n\n\/* \u53ef\u9009\uff1a\u8f6e\u64ad\u6307\u793a\u70b9\u6837\u5f0f *\/\n.carousel-indicators li {\n  background-color: #000;  \/* \u6307\u793a\u70b9\u989c\u8272 *\/\n}\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;div id=&quot;customCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;\n  &amp;lt;!-- \u6307\u793a\u70b9 --&gt;\n  &amp;lt;ol class=&quot;carousel-indicators&quot;&gt;\n    &amp;lt;li data-target=&quot;#customCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&amp;lt;\/li&gt;\n    &amp;lt;li data-target=&quot;#customCarousel&quot; data-slide-to=&quot;1&quot;&gt;&amp;lt;\/li&gt;\n    &amp;lt;li data-target=&quot;#customCarousel&quot; data-slide-to=&quot;2&quot;&gt;&amp;lt;\/li&gt;\n  &amp;lt;\/ol&gt;\n\n  &amp;lt;!-- \u8f6e\u64ad\u5185\u5bb9 --&gt;\n  &amp;lt;div class=&quot;carousel-inner&quot;&gt;\n    &amp;lt;div class=&quot;carousel-item active&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1050&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72471&quot;&gt;\n    &amp;lt;\/div&gt;\n    &amp;lt;div class=&quot;carousel-item&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1040&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72472&quot;&gt;\n    &amp;lt;\/div&gt;\n    &amp;lt;div class=&quot;carousel-item&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1030&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72473&quot;&gt;\n    &amp;lt;\/div&gt;\n  &amp;lt;\/div&gt;\n\n  &amp;lt;!-- \u5de6\u53f3\u63a7\u5236\u7bad\u5934 --&gt;\n  &amp;lt;a class=&quot;carousel-control-prev&quot; href=&quot;#customCarousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&amp;lt;\/span&gt;\n    &amp;lt;span class=&quot;sr-only&quot;&gt;\u4e0a\u4e00\u5f20&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n  &amp;lt;a class=&quot;carousel-control-next&quot; href=&quot;#customCarousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-next-icon&quot;&gt;&amp;lt;\/span&gt;\n    &amp;lt;span class=&quot;sr-only&quot;&gt;\u4e0b\u4e00\u5f20&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js&quot;&gt;&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u53bb\u9664\u9ed8\u8ba4\u9634\u5f71<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>.carousel-control-prev<\/code> \/ <code>.carousel-control-next<\/code> <code>background:none<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u53bb\u6389\u7bad\u5934\u7ebf\u6846<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>.carousel-item img<\/code> \u7684 <code>border:none; outline:none; box-shadow:none<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u81ea\u5b9a\u4e49\u7bad\u5934<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 CSS <code>::after<\/code> \u63d2\u5165\u6587\u5b57\u7bad\u5934<\/li>\n\n\n\n<li>\u53ef\u4fee\u6539 <code>font-size<\/code> \u548c <code>color<\/code> \u81ea\u5b9a\u4e49\u6837\u5f0f<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6307\u793a\u70b9\u989c\u8272<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u53ef\u81ea\u5b9a\u4e49 <code>.carousel-indicators li<\/code> \u7684 <code>background-color<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>\u79fb\u52a8\u7aef\u89e6\u6478\u4f18\u5316\u7248 Bootstrap 4 \u8f6e\u64ad\u56fe Demo<\/strong>\uff0c\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53bb\u6389\u5de6\u53f3\u7bad\u5934\u9634\u5f71\u548c\u7ebf\u6846<\/li>\n\n\n\n<li>\u652f\u6301 <strong>\u79fb\u52a8\u7aef\u624b\u6307\u5de6\u53f3\u6ed1\u52a8<\/strong> \u5207\u6362<\/li>\n\n\n\n<li>\u81ea\u5b9a\u4e49\u7bad\u5934\u6837\u5f0f<\/li>\n\n\n\n<li>\u56fe\u7247\u65e0\u8fb9\u6846\u3001\u65e0\u9634\u5f71<\/li>\n\n\n\n<li>\u517c\u5bb9\u684c\u9762\u7aef\u548c\u79fb\u52a8\u7aef<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;\u79fb\u52a8\u7aef\u4f18\u5316 Bootstrap4 \u8f6e\u64ad\u56fe&amp;lt;\/title&gt;\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css&quot;&gt;\n\n&amp;lt;style&gt;\n\/* ---------------------------- *\/\n\/* \u53bb\u6389\u7bad\u5934\u80cc\u666f\u548c\u9634\u5f71 *\/\n.carousel-control-prev,\n.carousel-control-next {\n  background: none;\n  width: 5%;\n}\n\n\/* \u53bb\u6389\u9ed8\u8ba4\u7bad\u5934\u56fe\u6807 *\/\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  background-image: none;\n}\n\n\/* \u81ea\u5b9a\u4e49\u7bad\u5934 *\/\n.carousel-control-prev-icon::after {\n  content: &#039;\u2039&#039;;\n  font-size: 3rem;\n  color: #000;\n}\n.carousel-control-next-icon::after {\n  content: &#039;\u203a&#039;;\n  font-size: 3rem;\n  color: #000;\n}\n\n\/* \u53bb\u6389\u56fe\u7247\u8fb9\u6846\u548c\u9634\u5f71 *\/\n.carousel-item img {\n  border: none;\n  outline: none;\n  box-shadow: none;\n}\n\n\/* \u6307\u793a\u70b9\u6837\u5f0f *\/\n.carousel-indicators li {\n  background-color: #000;\n}\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;div id=&quot;mobileCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-touch=&quot;true&quot;&gt;\n  &amp;lt;!-- \u6307\u793a\u70b9 --&gt;\n  &amp;lt;ol class=&quot;carousel-indicators&quot;&gt;\n    &amp;lt;li data-target=&quot;#mobileCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&amp;lt;\/li&gt;\n    &amp;lt;li data-target=&quot;#mobileCarousel&quot; data-slide-to=&quot;1&quot;&gt;&amp;lt;\/li&gt;\n    &amp;lt;li data-target=&quot;#mobileCarousel&quot; data-slide-to=&quot;2&quot;&gt;&amp;lt;\/li&gt;\n  &amp;lt;\/ol&gt;\n\n  &amp;lt;!-- \u8f6e\u64ad\u5185\u5bb9 --&gt;\n  &amp;lt;div class=&quot;carousel-inner&quot;&gt;\n    &amp;lt;div class=&quot;carousel-item active&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1050&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72471&quot;&gt;\n    &amp;lt;\/div&gt;\n    &amp;lt;div class=&quot;carousel-item&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1040&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72472&quot;&gt;\n    &amp;lt;\/div&gt;\n    &amp;lt;div class=&quot;carousel-item&quot;&gt;\n      &amp;lt;img src=&quot;https:\/\/picsum.photos\/800\/400?image=1030&quot; class=&quot;d-block w-100&quot; alt=&quot;\u56fe\u72473&quot;&gt;\n    &amp;lt;\/div&gt;\n  &amp;lt;\/div&gt;\n\n  &amp;lt;!-- \u5de6\u53f3\u63a7\u5236\u7bad\u5934 --&gt;\n  &amp;lt;a class=&quot;carousel-control-prev&quot; href=&quot;#mobileCarousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&amp;lt;\/span&gt;\n    &amp;lt;span class=&quot;sr-only&quot;&gt;\u4e0a\u4e00\u5f20&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n  &amp;lt;a class=&quot;carousel-control-next&quot; href=&quot;#mobileCarousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;\n    &amp;lt;span class=&quot;carousel-control-next-icon&quot;&gt;&amp;lt;\/span&gt;\n    &amp;lt;span class=&quot;sr-only&quot;&gt;\u4e0b\u4e00\u5f20&amp;lt;\/span&gt;\n  &amp;lt;\/a&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js&quot;&gt;&amp;lt;\/script&gt;\n\n&amp;lt;script&gt;\n\/\/ ----------------------------\n\/\/ \u79fb\u52a8\u7aef\u624b\u6307\u6ed1\u52a8\u652f\u6301\uff08\u4f18\u5316\u89e6\u6478\u4f53\u9a8c\uff09\nconst carousel = document.getElementById(&#039;mobileCarousel&#039;);\nlet startX = 0;\nlet endX = 0;\n\ncarousel.addEventListener(&#039;touchstart&#039;, (e) =&gt; {\n  startX = e.touches&#x5B;0].clientX;\n});\n\ncarousel.addEventListener(&#039;touchmove&#039;, (e) =&gt; {\n  endX = e.touches&#x5B;0].clientX;\n});\n\ncarousel.addEventListener(&#039;touchend&#039;, () =&gt; {\n  const diffX = endX - startX;\n  if(diffX &gt; 50) { \/\/ \u5411\u53f3\u6ed1\uff0c\u4e0a\u4e00\u5f20\n    $(&#039;#mobileCarousel&#039;).carousel(&#039;prev&#039;);\n  } else if(diffX &amp;lt; -50) { \/\/ \u5411\u5de6\u6ed1\uff0c\u4e0b\u4e00\u5f20\n    $(&#039;#mobileCarousel&#039;).carousel(&#039;next&#039;);\n  }\n});\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u81ea\u5b9a\u4e49\u7bad\u5934\u6837\u5f0f<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u53bb\u6389 Bootstrap \u9ed8\u8ba4\u9634\u5f71\u548c\u6e10\u53d8<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>::after<\/code> \u81ea\u5b9a\u4e49\u7bad\u5934\u5b57\u7b26<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u56fe\u7247\u65e0\u8fb9\u6846\u548c\u9634\u5f71<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>.carousel-item img<\/code> \u5168\u9762\u8986\u76d6<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u79fb\u52a8\u7aef\u89e6\u6478\u6ed1\u52a8\u652f\u6301<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u901a\u8fc7 <code>touchstart<\/code>\u3001<code>touchmove<\/code>\u3001<code>touchend<\/code> \u5b9e\u73b0\u5de6\u53f3\u6ed1\u52a8\u5207\u6362<\/li>\n\n\n\n<li>\u652f\u6301\u79fb\u52a8\u7aef\u81ea\u7136\u6ed1\u52a8\u4f53\u9a8c<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u517c\u5bb9\u684c\u9762\u7aef<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u9f20\u6807\u70b9\u51fb\u7bad\u5934\u548c\u6307\u793a\u70b9\u5207\u6362\u4f9d\u7136\u6709\u6548<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u963f\u6770\uff0c\u4f60\u60f3\u53bb\u6389 Bootstrap 4 \u8f6e\u64ad\u56fe\u4e24\u4fa7\u7684\u9634\u5f71\u548c\u9ed8\u8ba4\u7ebf\u6846\uff0c\u53ef\u4ee5\u901a\u8fc7 C&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/bootstrapv4%e8%bd%ae%e6%92%ad%e5%9b%be%e5%8e%bb%e9%99%a4%e4%b8%a4%e4%be%a7%e9%98%b4%e5%bd%b1%e5%8f%8a%e7%ba%bf%e6%a1%86%e7%9a%84%e6%96%b9%e6%b3%95\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-193","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":2,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/193\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}