技术笔记

编程 营销 外贸


夜间模式2-bootstrap实现

<p>导航条默认白底黑字,夜间是黑底白字,截屏为了演示刻意添加了个自定义背景色 <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e3e07374a58d8f68abcce40257c3b27f&amp;amp;file=file.png" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ebd8cce39b3e8d9b76f29fbc07d1f543&amp;amp;file=file.png" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=2aac40d93af45e2b2e09540890e253fe&amp;amp;file=file.png" alt="" /></p> <pre><code>&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot; /&amp;gt; &amp;lt;meta http-equiv=&amp;quot;X-UA-Compatible&amp;quot; content=&amp;quot;IE=edge&amp;quot; /&amp;gt; &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0&amp;quot; /&amp;gt; &amp;lt;title&amp;gt;Documentation&amp;lt;/title&amp;gt; &amp;lt;link href=&amp;quot;static/css/bootstrap.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&amp;gt; &amp;lt;link href=&amp;quot;static/css/bootstrap-icons.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&amp;gt; &amp;lt;link href=&amp;quot;static/css/swiper.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&amp;gt; &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;static/css/public.css&amp;quot; /&amp;gt; &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;static/css/style.css&amp;quot; /&amp;gt; &amp;lt;script src=&amp;quot;static/js/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&amp;quot;static/js/bootstrap.bundle.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&amp;quot;static/js/swiper.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&amp;quot;static/js/public.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;style&amp;gt; &amp;lt;/style&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;nav class=&amp;quot;navbar navbar-expand-lg bg-blues&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;container-fluid&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;navbar-brand&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;网站LOGO&amp;lt;/a&amp;gt; &amp;lt;!-- top button only display on small screen --&amp;gt; &amp;lt;button id=&amp;quot;nav-toggle&amp;quot; class=&amp;quot;navbar-toggler d-lg-none m-2&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;navbar-toggler-icon&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/button&amp;gt; &amp;lt;button class=&amp;quot;navbar-toggler d-none&amp;quot; type=&amp;quot;button&amp;quot; data-bs-toggle=&amp;quot;collapse&amp;quot; data-bs-target=&amp;quot;#navbarSupportedContent&amp;quot; aria-controls=&amp;quot;navbarSupportedContent&amp;quot; aria-expanded=&amp;quot;false&amp;quot; aria-label=&amp;quot;Toggle navigation&amp;quot;&amp;gt; &amp;lt;span class=&amp;quot;navbar-toggler-icon&amp;quot;&amp;gt;&amp;lt;/span&amp;gt; &amp;lt;/button&amp;gt; &amp;lt;div class=&amp;quot;collapse navbar-collapse&amp;quot; id=&amp;quot;navbarSupportedContent&amp;quot;&amp;gt; &amp;lt;ul class=&amp;quot;navbar-nav me-auto mb-2 mb-lg-0&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link active&amp;quot; aria-current=&amp;quot;page&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;blog&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item dropdown&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link dropdown-toggle&amp;quot; href=&amp;quot;#&amp;quot; id=&amp;quot;navbarDropdown&amp;quot; role=&amp;quot;button&amp;quot; data-bs-toggle=&amp;quot;dropdown&amp;quot; aria-expanded=&amp;quot;false&amp;quot;&amp;gt; Dropdown &amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;dropdown-menu&amp;quot; aria-labelledby=&amp;quot;navbarDropdown&amp;quot;&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Action&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Another action&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;hr class=&amp;quot;dropdown-divider&amp;quot;&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a class=&amp;quot;dropdown-item&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Something else here&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link disabled&amp;quot; href=&amp;quot;#&amp;quot; tabindex=&amp;quot;-1&amp;quot; aria-disabled=&amp;quot;true&amp;quot;&amp;gt;Disabled&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;form class=&amp;quot;d-flex&amp;quot;&amp;gt; &amp;lt;input class=&amp;quot;form-control me-2&amp;quot; type=&amp;quot;search&amp;quot; placeholder=&amp;quot;Search&amp;quot; aria-label=&amp;quot;Search&amp;quot;&amp;gt; &amp;lt;button class=&amp;quot;btn btn-outline-success&amp;quot; type=&amp;quot;submit&amp;quot;&amp;gt;Search&amp;lt;/button&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/nav&amp;gt; &amp;lt;hr /&amp;gt; &amp;lt;div class=&amp;quot;container-fluid mainbox&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;col-lg-3 d-none d-lg-block site_left&amp;quot;&amp;gt; &amp;lt;nav id=&amp;quot;sidebar&amp;quot;&amp;gt; &amp;lt;ul class=&amp;quot;nav flex-column&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Certification&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Release Notes&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Firmware&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;/ul&amp;gt;&amp;lt;!--nav first level ul--&amp;gt; &amp;lt;/nav&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!--site_left--&amp;gt; &amp;lt;!-- 内容区(示例) --&amp;gt; &amp;lt;div class=&amp;quot;col-lg-9 site_content&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;p-3&amp;quot;&amp;gt; &amp;lt;h2&amp;gt;页面内容区&amp;lt;/h2&amp;gt; &amp;lt;p&amp;gt;这里是页面其他内容……&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&amp;quot;col-lg-4&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;card mb-2&amp;quot;&amp;gt; &amp;lt;img src=&amp;quot;static/images/car.jpg&amp;quot; class=&amp;quot;card-img-top&amp;quot; /&amp;gt; &amp;lt;div class=&amp;quot;card-body&amp;quot;&amp;gt; &amp;lt;h3 class=&amp;quot;card-title&amp;quot;&amp;gt;VW ID3 Smart Car&amp;lt;/h3&amp;gt; &amp;lt;p class=&amp;quot;card-content&amp;quot;&amp;gt;VW Id.3 is an intelligent small ev, coming with 8 new versions, including 5 versions Id.3 2025 and 3 versions ID.3 2024, please feel free to consult us to learn more regarding Id. 3 ev.&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!-- inner row--&amp;gt; &amp;lt;P style=&amp;quot;height: 600PX;&amp;quot;&amp;gt;&amp;lt;/P&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;!--site_content--&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!--row--&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!--mainbox--&amp;gt; &amp;lt;!-- 小屏下的全屏导航 --&amp;gt; &amp;lt;!-- 注意:在小屏下,通过按钮触发,导航区域会脱离外层容器 --&amp;gt; &amp;lt;nav id=&amp;quot;sidebar&amp;quot; class=&amp;quot;d-lg-none&amp;quot; style=&amp;quot;width: 700px;&amp;quot;&amp;gt; &amp;lt;button id=&amp;quot;closenav&amp;quot; class=&amp;quot;btn btn-primary m-2&amp;quot;&amp;gt;Close&amp;lt;/button&amp;gt; &amp;lt;ul class=&amp;quot;nav flex-column&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;form class=&amp;quot;d-flex&amp;quot;&amp;gt; &amp;lt;input class=&amp;quot;form-control me-2&amp;quot; type=&amp;quot;search&amp;quot; placeholder=&amp;quot;Search&amp;quot; aria-label=&amp;quot;Search&amp;quot;&amp;gt; &amp;lt;button class=&amp;quot;btn btn-outline-success&amp;quot; type=&amp;quot;submit&amp;quot;&amp;gt;Search&amp;lt;/button&amp;gt; &amp;lt;/form&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Certification&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Release Notes&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Firmware&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;blog&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;Product Categories&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;Real IoT Solutions&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;5G&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Edge&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;WisGate Developer&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;nav-link toggle&amp;quot;&amp;gt;WisGate Connect&amp;lt;/a&amp;gt; &amp;lt;ul class=&amp;quot;submenu&amp;quot;&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 41&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li class=&amp;quot;nav-item&amp;quot;&amp;gt; &amp;lt;a class=&amp;quot;nav-link&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;cate 42&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/li&amp;gt;&amp;lt;!--first level end--&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/nav&amp;gt; &amp;lt;button id=&amp;quot;themeToggle&amp;quot; class=&amp;quot;btn btn-outline-secondary&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;bi&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;/button&amp;gt; &amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;scroll-top&amp;quot; class=&amp;quot;scroll-top d-flex align-items-center justify-content-center&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;bi bi-arrow-up-short&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt; &amp;lt;script&amp;gt; &amp;lt;/script&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;</code></pre> <pre><code>@charset &amp;quot;utf-8&amp;quot;; /* set html font size 10px as the base, 1rem=10px */ html{font-size:10px;} body{font-size:1.4rem;font-family:Arial, Helvetica, sans-serif; /*padding-top:7rem; background-color: var(--bg-color);color: var(--text-color);*/ transition: all 0.3s ease;} /* Customize daytime mode style */ [data-bs-theme=light] {     --bs-body-bg: #ffffff;  /* 自定义背景色 */     --bs-body-color: #212529;  /* 自定义文字颜色 */     --bg-color: #ffffff;     --text-color: #212529;     --sidebar-bg:#f8f9fa;     --card-bg: #f8f9fa;     --bg-blues: #0b7ff3;     } /* Customize the style of dark night mode */ [data-bs-theme=dark] {     --bs-body-bg: #1a1a1a;  /* 自定义背景色 */     --bs-body-color: #e0e0e0;  /* 自定义文字颜色 */     --bg-color: #1a1a1a;     --text-color: #f8f9fa;     --sidebar-bg:#2d2d2d;     --card-bg: #2d2d2d;     --bg-blues: #14e695; } .bg-blues{background-color: var(--bg-blues);} /*public tools*/ a{text-decoration:none;font-size:1.4rem;} ul,li{padding:0; margin:0; list-style:none;} .bg-gold{background-image: linear-gradient(100deg, #faeac6, #ab8a5f);} .bg-card{background:#121212;} /*gold btns used in home news distributors etc.*/ a.abtns{ display:block;width:18rem; height:4.5rem; line-height:4.5rem; margin:0 auto; border:1px solid #a1825a;  text-align:center; color:#e4cea4; font-weight:bold; position:relative; overflow:hidden; transition:all .5s;} a.abtns:hover{background:#a1825a;  color:#fff;} /* atbns sliding background effect, if no need, just removed the css below*/ a.abtns::before,a.abtns::after {content: &amp;quot;&amp;quot;;display: block;width:18rem;height: 100%;background: rgba(250, 234, 198, 0.5);opacity: 0.5;position: absolute;top: 0;left: 0;transform: skewX(-15deg) translateX(-300px);filter: blur(10px);overflow: hidden;} a.abtns::after {width: 40px;background: rgba(161, 130, 90, 0.3);left: 60px;opacity: 0.5;filter: blur(5px);} a.abtns:hover::before {transition: 1s;transform: translateX(320px);opacity: 0.7;} a.abtns:hover::after {transition:  1s;transform: translateX(320px);opacity: 1; } /* atbns end*/ a.nav-link{ color:var(--text-color);} /*main frame box layout*/ #sidebar {background:var(--sidebar-bg);height: 100vh;   overflow-y: auto; max-width: 300px;  transition: transform 0.3s ease;} #sidebar .submenu {list-style: none;padding-left: 15px;display: none;} /* add an arrow for a with submenu */ #sidebar .toggle::after {     content: &amp;quot;\25B6&amp;quot;; /* right arrow */     float: right;     transform: rotate(0deg);     transition: transform 0.3s; } /* when active,rotate the arrow */ #sidebar .toggle.active::after {     transform: rotate(90deg); }     /*pc and mobile header*/ /* breadcram navigation*/ .breadnavbg{height:5rem; background:#282828;} .breadnavbg nav li{color:#fff; line-height:5rem;} .breadnavbg nav li a{color:#fff; font-size:1.6rem;} .breadnavbg nav li a.active{color:#dcb878;} .breadnavbg .breadcrumb-item+.breadcrumb-item::before{color:#fff;} /*pagination for product list, news list */ .pagenav{ display:flex; justify-content:center; margin:4rem auto 1rem;} .pagenav .pagination {--bs-pagination-bg:#0b0b0b!important;} .pagenav .pagination li a{color:#fff;} .pagenav .pagination .page-link {border-color: #464646;} .pagenav .page-item .page-link:hover {background-color: inherit;} .pagenav .pagination .active a.page-link{background:none; color:#dbc395; font-weight:bold;} /*footer part*/ .footer-top{ background:#1b1b1b; padding-top:6rem; padding-bottom:7rem;} #themeToggle{position: fixed;right: 10px; bottom: 30px;} /*-------# Scroll Top Button-----------*/ .scroll-top {position: fixed;visibility: hidden;opacity: 0;right: 10px;bottom: 60px; z-index: 99999;background-color:#403d3d;width: 29px; height: 28px;border-radius: 4px;transition: all 0.4s;} .scroll-top i {font-size: 20px;color:#fff;line-height: 0;} .scroll-top:hover {background-color:#ff7302; color:#fff;} .scroll-top.active {visibility: visible!important;opacity: 1!important;} /*ipad  and mobile*/ @media (max-width: 992px) { .navbar-toggler-icon{ font-size:1.6rem;} #sidebar {position: fixed;top: 0;left: 0;transform: translateX(-100%); width: 100%; max-width: 100%;  height: 100%;z-index: 1050;} #sidebar.active {transform: translateX(0);}         } /*only mobile phone */ @media (max-width: 768px) {         } </code></pre> <pre><code>$(function(){     sidebar_toggle();//slide down or up the left side menu on pc; sidebarmc_toggle();//slide down or up the left side menu on mc/mobile; day_night_toggle();// day night switch; hoverdropdown();//slide down the dropdown menu on top navbar when mouse hover scrolltoTop();//right bottom btn click to scroll to top; //tabSwtichClick($(&amp;#039;.prodtabs ol li&amp;#039;),$(&amp;#039;.prodtabc .tabc&amp;#039;),&amp;#039;active&amp;#039;); }); //pc端展开收缩左侧导航slide down or up the left side menu on pc; function sidebar_toggle(){   // 点击含有下级菜单的链接时,切换显示/隐藏子菜单   $(&amp;#039;#sidebar .toggle&amp;#039;).click(function(e){     e.preventDefault();  // 阻止默认链接行为     $(this).toggleClass(&amp;#039;active&amp;#039;);  // 改变箭头方向     $(this).next(&amp;#039;.submenu&amp;#039;).slideToggle();   }); } //手机端显示隐藏左侧导航slide down or up the left side menu on mc/mobile; function sidebarmc_toggle(){       // 小屏下点击顶部按钮显示/隐藏全屏导航   $(&amp;#039;#nav-toggle&amp;#039;).click(function(){     $(&amp;#039;#sidebar.d-lg-none&amp;#039;).toggleClass(&amp;#039;active&amp;#039;);   });   //close nav on mobile   $(&amp;#039;#closenav&amp;#039;).click(function(){     $(&amp;#039;#sidebar.d-lg-none&amp;#039;).toggleClass(&amp;#039;active&amp;#039;);   });     // 可选:在小屏下点击导航外区域时自动关闭导航   $(document).click(function(e){     if($(window).width() &amp;lt; 992) {       if(!$(e.target).closest(&amp;#039;#sidebar, #nav-toggle&amp;#039;).length){         $(&amp;#039;#sidebar.d-lg-none&amp;#039;).removeClass(&amp;#039;active&amp;#039;);       }     }   });   } /*navigation*/ //when mouse is hover the nav, slidedown the dropdown menu function hoverdropdown(){     $(&amp;#039;.navbar .dropdown&amp;#039;).hover(function() {     $(this).find(&amp;#039;.dropdown-menu&amp;#039;).first().stop(true, true).delay(250).slideDown();         }, function() {     $(this).find(&amp;#039;.dropdown-menu&amp;#039;).first().stop(true, true).delay(100).slideUp();         });         $(&amp;#039;.navbar .dropdown &amp;gt; a&amp;#039;).click(function(){     location.href = this.href;     }); } //scroll to top function scrolltoTop(){     $(window).scroll(function () {         if ($(this).scrollTop() &amp;gt; 100) {             $(&amp;#039;.scroll-top&amp;#039;).addClass(&amp;#039;active&amp;#039;);         } else {             $(&amp;#039;.scroll-top&amp;#039;).removeClass(&amp;#039;active&amp;#039;);         }     }); } //tabs switch  when mouse hover, change the tabs function tabSwtich(m,c,a){     var change=function(i){             m.each(function(index){                 index==i?$(this).addClass(a):$(this).removeClass(a);             })               c.each(function(index){                 index==i?$(this).show():$(this).hide();             });         };     m.each(function(i){         $(this).mouseenter(function(){             change(i);         });     }) } //tabs switch when mouse click, change the tab function tabSwtichClick(m,c,a){     var change=function(i){             m.each(function(index){                 index==i?$(this).addClass(a):$(this).removeClass(a);             })               c.each(function(index){                 index==i?$(this).show():$(this).hide();             });         };     m.each(function(i){         $(this).click(function(){             change(i);         });     }) } //day night switch; function day_night_toggle() {     // Initialize theme (prioritize reading local storage)     const savedTheme = localStorage.getItem(&amp;#039;theme&amp;#039;) || &amp;#039;light&amp;#039;;     $(&amp;#039;html&amp;#039;).attr(&amp;#039;data-bs-theme&amp;#039;, savedTheme);     updateButtonIcon(savedTheme);       // Switch button click event     $(&amp;#039;#themeToggle&amp;#039;).on(&amp;#039;click&amp;#039;, function() {       const currentTheme = $(&amp;#039;html&amp;#039;).attr(&amp;#039;data-bs-theme&amp;#039;);       const newTheme = currentTheme === &amp;#039;light&amp;#039; ? &amp;#039;dark&amp;#039; : &amp;#039;light&amp;#039;;             // Update attributes and storage       $(&amp;#039;html&amp;#039;).attr(&amp;#039;data-bs-theme&amp;#039;, newTheme);       localStorage.setItem(&amp;#039;theme&amp;#039;, newTheme);       updateButtonIcon(newTheme);     });   }     // sun and moon icon switching   function updateButtonIcon(theme) {     $(&amp;#039;#themeToggle&amp;#039;)       .removeClass(&amp;#039;bi-sun-fill bi-moon-fill&amp;#039;)       .addClass(theme === &amp;#039;dark&amp;#039; ? &amp;#039;bi-moon-fill&amp;#039; : &amp;#039;bi-sun-fill&amp;#039;);   }   </code></pre>

页面列表

ITEM_HTML