? 先搞懂：Bootstrap 中文网到底有啥 “宝贝”？
想快速搭网站，Bootstrap 中文网绝对是绕不开的宝藏站。说真的，它把 Bootstrap 这个全球流行的前端框架，做了超贴心的中文适配，新手看一眼就能明白大概。
核心资源就三类，得先理清楚。组件库是顶梁柱，从按钮、表单到导航栏、弹窗，你能想到的网站基础元素几乎都有现成的。这些组件不是死的，代码里标好了各种参数，改改颜色、尺寸、文字，就能变成你想要的样子。
然后是免费模板区，这部分对懒人太友好了。不管你想做企业官网、个人博客还是电商页面，都能找到对应的模板。关键是这些模板自带响应式设计 —— 就是说在手机、平板、电脑上看，排版都会自动调整，不用自己瞎折腾适配问题。
最后是教程中心，从最基础的 “怎么引入 Bootstrap 文件”，到复杂的 “组件嵌套逻辑”，都讲得很细。而且教程里的代码能直接复制，边看边练，上手速度能快一倍。
?️ 组件示例怎么用？三步就能 “抄作业”
很多人打开组件库就懵，那么多组件，到底从哪下手？其实很简单，记住 “定位需求→抄代码→微调整” 这三步就行。
先想清楚你要做什么。比如要做一个登录页面，那重点就看 “表单”“按钮”“卡片” 这几个组件。在 Bootstrap 中文网的组件页面，左边有分类导航，点 “表单” 就能看到各种输入框、下拉菜单的示例，甚至连 “密码可见切换” 这种细节功能都有现成代码。
看到合适的组件，别犹豫，直接点 “查看代码”。代码框里的 HTML、CSS 都给全了，复制下来粘贴到你的编辑器里。这里有个小技巧：先保留注释，比如代码里标着 “// 这里修改按钮颜色” 的地方，新手照着改不容易出错。
改的时候抓重点。比如按钮组件，默认是蓝色，想换成红色，就把 class 里的 “btn-primary” 改成 “btn-danger”；想让按钮变大，加个 “btn-lg”。这些基础修改不用懂复杂代码，教程里都有对照表，对着换就行。换完保存一下，用浏览器打开看看效果，不对再调，多试两次就熟了。
? 免费模板别乱选！这几个标准帮你避坑
免费模板虽好，但不是拿来就能用的。选不对，后期改起来比自己写还麻烦。分享几个我挑模板的标准，亲测好用。
先看适配场景。模板页面会标清楚 “企业官网”“个人简历”“电商列表” 这些标签，别贪多找那种 “万能模板”，功能越全代码越乱，新手 hold 不住。比如做个人博客，就选带 “文章列表”“侧边栏”“评论区” 的，基础结构对了，改内容就行。
再检查响应式效果。模板预览页一般有 “手机”“平板”“桌面” 三个按钮，点一下看看排版会不会乱。比如导航栏在手机上有没有变成汉堡菜单，图片会不会超出屏幕。要是在小屏幕上文字挤成一团，这种模板直接 pass，后期调响应式能把你逼疯。
还有个隐藏技巧：看代码整洁度。点 “下载模板” 后，先打开 HTML 文件看看，要是注释少、class 命名乱七八糟，就算设计再好看也别用。新手改代码全靠注释指路，干净的代码能省一半时间。Bootstrap 中文网官方推荐的几个模板，代码都很规范，优先从这里挑。
✏️ 拿到模板怎么改？从 “换皮” 到 “定制” 的小技巧
下载好模板，第一步不是改功能，是先把 “别人的东西” 换成自己的。这个过程很简单，哪怕你只会复制粘贴也能搞定。
先换静态内容。打开 HTML 文件，找到
</code>标签，把网站标题改了；看到<code><h1></code> <code><p></code>这些标签里的文字，直接替换成你的内容。图片的话，找到<code><img></code>标签里的 “src” 属性，把路径换成你自己图片的地址 —— 记得图片尺寸最好和原来的一致，不然容易变形。</div><br>
<div>然后调样式。想换整体色调？找 CSS 文件里的 “:root” 部分，这里定义了主色、辅助色，把 “--primary” 后面的颜色代码换成你想要的就行，比如 #FF5733 是橙色，改完整个网站的按钮、标题都会跟着变。字体大小、间距这些，在 CSS 里搜 “font-size”“margin”，数值改大一点或小一点，实时刷新看看效果。</div><br>
<div>如果想加功能，比如在博客模板里加个 “搜索框”，不用自己写代码。去组件库找 “输入框组” 组件，复制代码，粘贴到模板里合适的位置，再微调一下样式，和周围元素对齐就行。这种 “组件 + 模板” 的组合，比从零开始写快太多了。</div><br>
<h3>? 跟着教程学，从 “会用” 到 “会改” 的关键</h3><br>
<div>光靠抄组件和模板，只能做个 “样子货”。真想掌握 Bootstrap，还得花点时间看教程，重点学这几个点。</div><br>
<div><strong>基础语法必须懂</strong>。教程里的 “栅格系统” 一定要看明白，这是 Bootstrap 的核心。简单说，它把网页分成 12 列，你想让某个元素占一半宽度，就用 “col-6”；在手机上占满屏、电脑上占一半，就用 “col-12 col-md-6”。搞懂这个，布局再也不会乱。</div><br>
<div>然后学<strong>组件原理</strong>。比如导航栏组件，教程里会讲 “为什么点击汉堡菜单会展开”，其实是用了 JavaScript 的折叠功能。知道原理后，你就敢改了 —— 比如想让菜单在滚动时固定在顶部，加个 “sticky-top” 的 class 就行，不用自己写复杂的 JS。</div><br>
<div>最后多练 “实战案例”。教程里有 “从零做一个官网” 这种分步教程，跟着做一遍，比看十篇理论文都有用。每做完一步，试着自己加个小功能，比如在联系表单里加个 “验证码” 框，用学到的组件知识实现，慢慢就熟练了。</div><br>
<h3>⚠️ 新手常踩的坑，这几个一定要避开</h3><br>
<div>用 Bootstrap 搭网站，看着简单，实际操作起来坑不少。我总结了几个新手最容易犯的错，提前知道能少走很多弯路。</div><br>
<div><strong>别直接用默认样式不改</strong>。很多人觉得 “官方组件挺好看的”，直接用在自己网站上。结果就是，十个网站有八个长得差不多，毫无特色。哪怕只改改颜色、字体，也能让网站看起来更独特，这点时间千万别省。</div><br>
<div><strong>别忽视浏览器测试</strong>。Bootstrap 虽然兼容大部分浏览器，但有些老版本 IE 会出问题。特别是用了比较新的组件，比如 “弹出提示”，最好在 Chrome、Edge、Safari 里都测一遍，确保按钮能点、弹窗能正常显示。</div><br>
<div><strong>别过度依赖模板</strong>。有些人为了省时间，把模板里的代码全保留，只改文字图片。但模板里可能有很多你用不上的功能，比如 “分享到微博” 按钮，留着只会让代码变冗余，加载变慢。没用的代码一定要删掉，网站才会更轻快。</div><br>
<div>其实用 Bootstrap 中文网的资源搭网站，核心就是 “借力”—— 利用现成的组件和模板，少写重复代码，把精力放在内容和特色上。哪怕你是零基础，花两三天时间跟着教程练，也能做出一个像模像样的网站。记住，重点不是 “会不会写代码”，而是 “会不会用工具”，Bootstrap 就是最好的工具之一。</div><br>
<div>【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】</div><br>
</div> </div>
<!-- 标签和分享 -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center pt-8 mt-8 border-t border-gray-200 dark:border-gray-700">
<div class="mb-4 md:mb-0">
<span class="text-gray-700 dark:text-gray-300 mr-2">标签：</span>
<span class="news-tag bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full text-sm">AI资讯</span>
</div>
<div class="flex space-x-3">
<span class="text-gray-700 dark:text-gray-300">分享：</span>
<a href="javascript:void(0)" onclick="shareToWeChat()" class="social-share w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('如何利用 Bootstrap 中文网组件示例？免费模板 + 教程快速搭建网站！', window.location.href)" class="social-share w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="javascript:void(0)" onclick="shareToTwitter('如何利用 Bootstrap 中文网组件示例？免费模板 + 教程快速搭建网站！', window.location.href)" class="social-share w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="javascript:void(0)" onclick="copyLink()" class="social-share w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-400">
<i class="fa-solid fa-link"></i>
</a>
</div>
</div>
</div>
<!-- 上一篇/下一篇 -->
<div class="flex flex-col md:flex-row justify-between gap-6 mb-8">
<a href="/ai/ndu4xqruU3ZVhGLYs6lOsC98ShEL6IGP1VdZaPsN0De.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5">
<div class="flex items-center">
<i class="fa-solid fa-arrow-left text-gray-500 dark:text-gray-400 mr-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-1">上一篇</p>
<h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">跨境电商卖家必看！Dropispy 广告情报工具提升广告 ROI 的方法</h3>
</div>
</div>
</a>
<a href="/ai/vNOwZ1hB36fsjv5BDDqDxSIBn1u0H26AxzobZAVHCOI.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5">
<div class="flex items-center text-right flex-row-reverse">
<i class="fa-solid fa-arrow-right text-gray-500 dark:text-gray-400 ml-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-1">下一篇</p>
<h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">Dropispy 与传统工具对比：29.9 欧元解锁海量广告数据库优势</h3>
</div>
</div>
</a>
</div>
<!-- 评论区 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">用户评论 (0)</h3>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center">
<i class="fa-solid fa-pen mr-2"></i> 发表评论
</button>
</div>
<div class="space-y-6">
<!-- 暂无评论 -->
<div class="text-center py-8">
<i class="fa-regular fa-comments text-5xl text-gray-300 dark:text-gray-600 mb-4"></i>
<p class="text-gray-500 dark:text-gray-400">暂无评论，快来发表第一条评论吧！</p>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<div class="w-full lg:w-1/4">
<!-- 网站信息 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mr-4">
<i class="fa-solid fa-robot text-white text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 dark:text-white">AI导航</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">AI资源与工具导航</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm">
汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。关注前沿AI技术发展与实际应用案例。
</p>
<div class="flex space-x-3 mt-4">
<a href="javascript:void(0)" onclick="shareToTwitter('如何利用 Bootstrap 中文网组件示例？免费模板 + 教程快速搭建网站！', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('如何利用 Bootstrap 中文网组件示例？免费模板 + 教程快速搭建网站！', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-weibo"></i>
</a>
</div>
</div>
<!-- 热门资讯排行榜 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">热门资讯榜</h3>
<div class="space-y-4">
<!-- 排行项目 1 -->
<a href="/ai/yAeANHXxP4bv4vKVicA17fB0pKpaZbo4QiHpuH2nrIY.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
1 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
移动端 AI Office Bo </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 799次阅读
</p>
</div>
</a>
<!-- 排行项目 2 -->
<a href="/ai/BzSZEuueqshpJyW6wW7Xaaeju3Sy1ob7uQiAQO6vRXi.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
2 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
隐私新规下 Facebook 广 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 441次阅读
</p>
</div>
</a>
<!-- 排行项目 3 -->
<a href="/ai/2TOzaQOpJvYSR2algHPUcglcqa4k6vNnc5OmcCOWBtK.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-700 to-amber-800 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
3 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
极客修家电维修收费标准 2025 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 402次阅读
</p>
</div>
</a>
<!-- 排行项目 4 -->
<a href="/ai/7qM6xXdsmLVhCrz0ZYH1QOgTeZd73Oy3FElwO91TBoY.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
4 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
AI 识别高光靠谱吗？Frame </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 895次阅读
</p>
</div>
</a>
<!-- 排行项目 5 -->
<a href="/ai/fsPTmTVQiMy44EJAe2OJyRET75P58q3LUr5gg0p2yOQ.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
5 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
Panda 智能任务管理应用 2 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 385次阅读
</p>
</div>
</a>
<!-- 排行项目 6 -->
<a href="/ai/aborNm98C37K8apXiNPUSaumzibnwSewn9kJX69nCyI.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
6 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
设计师必备！Adobe Know </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 47次阅读
</p>
</div>
</a>
<!-- 排行项目 7 -->
<a href="/ai/cPEaFZlcO3apWL7ORZzpnnNohKJsdVd7M7r8OKGB3W.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
7 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
超星网 2025 在线教育平台： </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 487次阅读
</p>
</div>
</a>
<!-- 查看全部按钮 -->
<!-- <div class="pt-4">
<a href="news.php" class="text-blue-600 dark:text-blue-400 hover:underline text-sm flex items-center">
查看全部热门资讯 <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
</a>
</div> -->
</div>
</div>
<!-- 推荐资讯 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">推荐阅读</h3>
<div class="space-y-5">
<!-- 推荐项目 -->
<a href="/ai/fsPTmTVQiMy44EJAe2OJyRET75P58q3LUr5gg0p2yOQ.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/7ad936fdfdc0b8f1a14c73d729567f9e.jpg"
alt="Panda 智能任务管理应用 2025 新版：AI 规划日程 + 多平台同步，开启高效生活！"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
Panda 智能任务管理应用 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/aborNm98C37K8apXiNPUSaumzibnwSewn9kJX69nCyI.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/78c5bdac2f2253e46cbc2d79a5d8c8fb.jpg"
alt="设计师必备！Adobe KnowHow 内容凭证技术防止作品盗用指南"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
设计师必备！Adobe Kno </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/cPEaFZlcO3apWL7ORZzpnnNohKJsdVd7M7r8OKGB3W.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/06/e8723a507843a247275ab24975c6790c.jpg"
alt="超星网 2025 在线教育平台：整合百万资源 + AI 知识图谱助力教学"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
超星网 2025 在线教育平台 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/R1cOzHhluUQMHHOSZZRV3YzrrtHEHNQNv2fIK3KNG9a.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/b211de5971d6834db7dbc5d06513c35d.jpg"
alt="Evolup 行业专家资源整合：2025 最新实战课程开启职业进阶"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
Evolup 行业专家资源整合 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/32WbG8ITGqPbPluBqz6s7dFCA76TnZhrknRHyyIlFZm.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/037b6dc3978a983ec8bb5f34f671c2e5.jpg"
alt="机器学习赋能 MAIGON，企业如何通过自动化降低人工成本？"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
机器学习赋能 MAIGON，企 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-16 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<i class="fa-solid fa-robot text-white text-xl"></i>
</div>
<span class="text-xl font-bold text-gray-800 dark:text-white ml-2">AI导航</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm">
汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">快速链接</h3>
<ul class="space-y-2">
<li><a href="/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">首页</a></li>
<li><a href="/hotsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">热门工具</a></li>
<li><a href="/newsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">最新资源</a></li>
<li><a href="/ai/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">Ai资讯</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">热门分类</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">对话AI</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">图像生成</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">编程开发</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">视频处理</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">订阅更新</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
获取最新AI工具和资源推荐
</p>
<div class="flex">
<input
type="email"
placeholder="您的邮箱地址"
class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition">
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 dark:text-gray-500 text-sm">
© 2023 AI导航. 保留所有权利。
</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">
<a href="http://beian.miit.gov.cn/" rel="nofollow">ICP备案：豫B2-20110008-14</a>
</p>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="javascript:void(0)" onclick="shareToTwitter('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</div>
</div>
</footer>
<script src="/staticai/qrcode.min.js"></script>
<script>
// 分享功能
function shareToWeChat() {
// 获取当前页面URL
const url = window.location.href;
// 创建二维码容器
const qrModal = document.createElement('div');
qrModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
const qrContainer = document.createElement('div');
qrContainer.className = 'bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-sm w-full relative';
// 创建标题
const title = document.createElement('h3');
title.className = 'text-xl font-bold text-gray-800 dark:text-white mb-4 text-center';
title.textContent = '微信扫码分享';
// 创建关闭按钮
const closeBtn = document.createElement('button');
closeBtn.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200';
closeBtn.innerHTML = '<i class="fa-solid fa-times"></i>';
closeBtn.onclick = () => document.body.removeChild(qrModal);
// 创建QR码容器
const qrBox = document.createElement('div');
qrBox.className = 'flex justify-center items-center mb-4';
// 提示文字
const hint = document.createElement('p');
hint.className = 'text-center text-gray-600 dark:text-gray-400 text-sm';
hint.textContent = '请使用微信"扫一扫"扫描上方二维码';
// 组装DOM
qrContainer.appendChild(title);
qrContainer.appendChild(qrBox);
qrContainer.appendChild(hint);
qrContainer.appendChild(closeBtn);
qrModal.appendChild(qrContainer);
document.body.appendChild(qrModal);
// 检查QRCode库是否已加载
if (typeof QRCode === 'function') {
// 使用QRCode.js生成二维码
try {
new QRCode(qrBox, {
text: url,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
} catch (e) {
// 如果生成二维码失败，回退到使用图片形式
qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`;
}
} else {
// 如果QRCode库未加载，使用外部API生成二维码图片
qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`;
}
// 点击模态框背景关闭
qrModal.addEventListener('click', function(e) {
if (e.target === qrModal) {
document.body.removeChild(qrModal);
}
});
}
function shareToWeibo(title, url) {
const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
window.open(weiboUrl, '_blank', 'width=700,height=500');
}
function shareToTwitter(title, url) {
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;
window.open(twitterUrl, '_blank', 'width=700,height=500');
}
// 深色模式切换
const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// 初始化主题
if (localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && prefersDarkScheme.matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
themeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
// 移动端菜单切换
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileNav = document.getElementById('mobile-nav');
mobileMenuButton.addEventListener('click', () => {
mobileNav.classList.toggle('open');
});
// 处理系统主题变化
prefersDarkScheme.addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
</script>
</body>
</html> <script>
function copyLink() {
const url = window.location.href;
// 使用现代API复制到剪贴板
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url)
.then(() => {
showNotification('链接已复制到剪贴板');
})
.catch(err => {
console.error('无法复制链接: ', err);
fallbackCopyLink(url);
});
} else {
fallbackCopyLink(url);
}
}
function fallbackCopyLink(text) {
// 创建临时输入框
const input = document.createElement('input');
input.style.position = 'fixed';
input.style.opacity = 0;
input.value = text;
document.body.appendChild(input);
input.select();
// 尝试复制
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification('链接已复制到剪贴板');
} else {
showNotification('复制失败，请手动复制链接', 'error');
}
} catch (err) {
console.error('无法复制链接: ', err);
showNotification('复制失败，请手动复制链接', 'error');
}
// 移除临时元素
document.body.removeChild(input);
}
function showNotification(message, type = 'success') {
// 创建通知元素
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} transition-all duration-300 transform translate-y-full opacity-0`;
notification.textContent = message;
document.body.appendChild(notification);
// 显示通知
setTimeout(() => {
notification.style.transform = 'translateY(0)';
notification.style.opacity = '1';
}, 10);
// 3秒后隐藏通知
setTimeout(() => {
notification.style.transform = 'translateY(full)';
notification.style.opacity = '0';
// 动画结束后移除元素
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
</script>
</body>
</html>