UI组件前端【免费下载链接】flowbiteOpen-source UI component library and front-end development framework based on Tailwind CSS项目地址https://gitcode.com/gh_mirrors/fl/flowbite点击查看免费下载Device Mockups 是 Flowbite 组件库中面向营销场景的一类纯展示型组件它的用途是把你应用的截图装进手机、平板、笔记本、iMac 甚至智能手表的外框里让访问者一眼就看出你的产品在真实设备上的观感非常适合首页 Hero 区与 CTA 区。本文将基于仓库中的 content/components/device-mockups.md 文档完整讲解默认手机、iPhone 12iOS、Google PixelAndroid、平板、笔记本、桌面与智能手表共 7 类模型的 HTML 结构与定制方法并结合仓库源码剖析其背后的 CSS 变量与暗色模式实现原理读完你可以直接复制代码到自己的 Tailwind CSS 项目中落地使用。组件概述什么是 Device MockupsDevice Mockup 组件的作用是以假乱真地展示你的应用界面外层是使用 Tailwind CSS 工具类绘制的高保真设备边框内层是嵌入的应用截图。它的核心优势在于纯 CSS 绘制整个设备外壳只由border、rounded、bg等 Tailwind 工具类拼成不依赖任何图片资源与 JavaScript加载极快内建暗色模式每个示例都提供了dark:hidden与hidden dark:block成对出现的截图配合dark类自动切换明暗两套界面易定制边框宽度、圆角、颜色、尺寸全部可以通过修改工具类数值完成无需编写自定义 CSS多端覆盖文档提供了手机iOS 与 Android 两种观感、平板、笔记本、桌面 iMac、智能手表等不同模型可对应不同产品形态。快速开始在项目中引入 FlowbiteDevice Mockups 是纯静态组件但为了让暗色模式等机制正常工作你需要先按 content/getting-started/quickstart.md 的指引把 Flowbite 接入项目。最快捷的方式是通过 CDN 引入适用于快速原型或纯前端页面在head中加入样式link hrefhttps://cdn.jsdelivr.net/npm/flowbite4.0.2/dist/flowbite.min.css relstylesheet /在/body结束前引入脚本script srchttps://cdn.jsdelivr.net/npm/flowbite4.0.2/dist/flowbite.min.js/script如果使用 Tailwind v4 打包器Webpack、Vite 等的项目则在input.css中导入主题与插件/* input.css */ import tailwindcss; import flowbite/src/themes/default; plugin flowbite/plugin; source ../node_modules/flowbite;关于暗色模式的启用方式可参考 content/customize/dark-mode.md在html根元素上添加或移除dark类即可Tailwind 配置中对应darkMode: class见仓库根目录 tailwind.config.js。默认手机模型Default Mockup最基础的示例是一个标准手机外框可直接放入 Hero 区展示应用截图。完整代码如下div classrelative mx-auto border-default bg-base border-[14px] rounded-[2.5rem] h-[600px] w-[300px] div classh-[32px] w-[3px] bg-base absolute -start-[17px] top-[72px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[124px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[178px] rounded-s-lg/div div classh-[64px] w-[3px] bg-base absolute -end-[17px] top-[142px] rounded-e-lg/div div classrounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-neutral-primary img src./your-app-screenshot-light.png classdark:hidden w-[272px] h-[572px] alt应用截图浅色 img src./your-app-screenshot-dark.png classhidden dark:block w-[272px] h-[572px] alt应用截图暗色 /div /div结构拆解如下结构层关键类作用外层设备框border-[14px] rounded-[2.5rem] h-[600px] w-[300px]定义 14px 的机身边框、大圆角与手机尺寸机身底色bg-base border-default使用主题变量控制机身与边框颜色侧键四组h-[46px] w-[3px] ... -start-[17px]/-end-[17px]用绝对定位的小条模拟音量键、电源键-start/-end是 Tailwind 的 RTL 感知逻辑方向类屏幕区rounded-[2rem] overflow-hidden w-[272px] h-[572px]内部内容被裁切进屏幕圆角内截图dark:hidden/hidden dark:block两张img浅色与暗色截图二选一显示注意原文档示例中的截图 URL 指向 Flowbite 官方 S3 图床实际使用时请将src替换为你自己的截图路径推荐本地静态资源目录并保证两张图分别适配明暗主题。iPhone 12 模型iOS 观感如果希望明确传达应用运行在 iPhone 上可以使用带顶部刘海的 iPhone 12 模型。与默认模型相比它多了一个shadow-xl投影和一个居中的刘海元素div classrelative mx-auto border-default bg-base border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl div classw-[148px] h-[18px] bg-base top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[124px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[178px] rounded-s-lg/div div classh-[64px] w-[3px] bg-base absolute -end-[17px] top-[142px] rounded-e-lg/div div classrounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-neutral-primary img src./your-app-screenshot-light.png classdark:hidden w-[272px] h-[572px] alt应用截图浅色 img src./your-app-screenshot-dark.png classhidden dark:block w-[272px] h-[572px] alt应用截图暗色 /div /div关键差异点刘海元素w-[148px] h-[18px] rounded-b-[1rem] left-1/2 -translate-x-1/2通过left-1/2与-translate-x-1/2组合实现水平居中模拟 iPhone 的 Face ID 刘海区域少了一颗左侧按键对照默认模型的 3 颗侧键此处为 2 颗左键 1 颗右键更贴近 iPhone 的实际按键布局shadow-xl让机身从页面上浮起来观感更像真实渲染。Google Pixel 模型Android 观感当你的目标用户群体使用 Android 设备时可以使用 Google Pixel 模型。它与 iOS 模型的结构几乎一致主要区别是机身圆角更小rounded-xl而非rounded-[2.5rem]并且保留了完整的 3 颗左侧按键整体观感更方正div classrelative mx-auto border-default bg-base border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl div classw-[148px] h-[18px] bg-base top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute/div div classh-[32px] w-[3px] bg-base absolute -start-[17px] top-[72px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[124px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[178px] rounded-s-lg/div div classh-[64px] w-[3px] bg-base absolute -end-[17px] top-[142px] rounded-e-lg/div div classrounded-xl overflow-hidden w-[272px] h-[572px] bg-neutral-primary img src./your-app-screenshot-light.png classdark:hidden w-[272px] h-[572px] alt应用截图浅色 img src./your-app-screenshot-dark.png classhidden dark:block w-[272px] h-[572px] alt应用截图暗色 /div /div对比三款手机模型可以发现设备外框的身份感完全由圆角数值与按键数量/位置决定。如果只是想快速演示直接用默认模型即可需要强调平台归属时再选用 iOS 或 Android 模型。平板模型Tablet Mockup平板模型是一个响应式组件默认按竖屏窄尺寸渲染在md断点以上自动放大适合展示面向平板场景优化的应用界面div classrelative mx-auto border-default bg-base border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px] div classh-[32px] w-[3px] bg-base absolute -start-[17px] top-[72px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[124px] rounded-s-lg/div div classh-[46px] w-[3px] bg-base absolute -start-[17px] top-[178px] rounded-s-lg/div div classh-[64px] w-[3px] bg-base absolute -end-[17px] top-[142px] rounded-e-lg/div div classrounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-neutral-primary img src./your-tablet-screenshot-light.png classdark:hidden h-[426px] md:h-[654px] alt平板应用截图浅色 img src./your-tablet-screenshot-dark.png classhidden dark:block h-[426px] md:h-[654px] alt平板应用截图暗色 /div /div响应式尺寸对照断点机身含边框屏幕区域移动端默认h-[454px] max-w-[341px]h-[426px]md及以上md:h-[682px] md:max-w-[512px]md:h-[654px]与手机模型不同平板使用max-w而非固定w因此宽度会随可用空间自适应屏幕内的截图也相应使用h-[426px] md:h-[654px]的响应式高度配合overflow-hidden裁切保证任何断点下都不会变形溢出。笔记本模型Laptop Mockup笔记本模型由屏幕和底座两个独立元素上下拼接而成屏幕同样具备md断点的响应式放大div classrelative mx-auto border-default bg-base border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px] div classrounded-lg overflow-hidden h-[156px] md:h-[278px] bg-neutral-primary img src./your-app-screenshot-light.png classdark:hidden h-[156px] md:h-[278px] w-full rounded-lg alt应用截图浅色 img src./your-app-screenshot-dark.png classhidden dark:block h-[156px] md:h-[278px] w-full rounded-lg alt应用截图暗色 /div /div div classrelative mx-auto bg-base rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px] div classabsolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-base/div /div实现要点屏幕边框只有border-[8px]明显比手机14px更窄符合笔记本的视觉比例底座第二个div通过h-[17px] md:h-[21px]与比屏幕略宽的max-w模拟铰链下沿内部的居中细条w-[56px] h-[5px] md:w-[96px] md:h-[8px]则模拟笔记本转轴凹槽屏幕截图使用w-full横向铺满适合展示宽屏应用截图。桌面模型Desktop / iMac Mockup桌面模型在笔记本模型的基础上将外框边框加宽到border-[16px]并在机身下方叠加两个逐级缩窄的底座元素模拟 iMac 的支架造型div classrelative mx-auto border-default bg-base border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px] div classrounded-xl overflow-hidden h-[140px] md:h-[262px] img src./your-app-screenshot-light.png classdark:hidden h-[140px] md:h-[262px] w-full rounded-xl alt应用截图浅色 img src./your-app-screenshot-dark.png classhidden dark:block h-[140px] md:h-[262px] w-full rounded-xl alt应用截图暗色 /div /div div classrelative mx-auto bg-base rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]/div div classrelative mx-auto bg-base rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]/div三个元素共同构成 iMac 轮廓屏幕部分border-[16px]厚边框 内部rounded-xl overflow-hidden屏幕区支架颈部一个细长的h-[24px] md:h-[42px]连接条底座一个max-w-[83px] md:max-w-[142px]的圆角梯形宽度远小于机身形成明显的重心稳定感。注意桌面模型的内层截图容器没有显式bg-neutral-primary因为屏幕区域通常直接展示全幅截图。智能手表模型Smartwatch Mockup智能手表模型由表带上下两段、表身、表冠三个部分组成是目前文档中唯一采用三段式结构的模型div classrelative mx-auto bg-base rounded-t-[2.5rem] h-[63px] max-w-[133px]/div div classrelative mx-auto bg-base border-default border-[10px] rounded-[2.5rem] h-[213px] w-[208px] div classh-[41px] w-[6px] bg-base absolute -end-[16px] top-[40px] rounded-e-lg/div div classh-[32px] w-[6px] bg-base absolute -end-[16px] top-[88px] rounded-e-lg/div div classrounded-[2rem] overflow-hidden h-[193px] w-[188px] img src./your-watch-screenshot-light.png classdark:hidden h-[193px] w-[188px] alt手表应用截图浅色 img src./your-watch-screenshot-dark.png classhidden dark:block h-[193px] w-[188px] alt手表应用截图暗色 /div /div div classrelative mx-auto bg-base rounded-b-[2.5rem] h-[63px] max-w-[133px]/div结构说明上表带rounded-t-[2.5rem] h-[63px] max-w-[133px]与机身同宽的圆角矩形表身border-[10px] rounded-[2.5rem] h-[213px] w-[208px]正方形机身加圆角右侧两颗w-[6px]的按键模拟表冠与功能键下表带与上表带对称的rounded-b-[2.5rem]圆角矩形上下表带之间的机身因此呈蚕豆形上下收窄。定制模型颜色Mockup Colors所有设备模型的机身颜色统一由bg-base控制边框颜色由border-default控制。修改颜色只需替换这两个类例如换成品牌色div classrelative mx-auto border-default bg-brand border-[14px] rounded-[2.5rem] h-[600px] w-[300px] !-- 手机侧键与屏幕结构与默认模型相同此处省略重复部分 -- /div从源码来看base与border-default并不是 Tailwind 的内置颜色而是 Flowbite 在src/themes/default.css中通过theme定义的设计系统语义变量。浅色模式下default.css--color-neutral-primary: var(--color-white); --color-default: var(--color-gray-200);暗色模式在.dark选择器内整体覆盖default.css.dark { --color-neutral-primary: var(--color-gray-950); --color-default: var(--color-gray-800); }因此只要页面根元素启用了dark类bg-base、border-default、bg-neutral-primary会自动切换到深色系取值——这正是 Device Mockups 内建暗色模式的底层机制。同理屏幕容器的bg-neutral-primary负责在截图尚未加载或存在透明区域时提供背景色它同样跟随明暗主题切换。如果你希望整套组件跟随项目品牌色而非默认蓝色系可以参照 content/customize/theming.md 的做法在自己的input.css中用theme覆盖这些语义变量如把--color-base、--color-brand替换为自定义色值所有设备模型会同步生效无需改动任何 HTML。组合应用建议Hero 区首选默认手机模型mx-auto自动居中配合relative容器可以叠加浮动元素如功能标注、评分徽章制造层次感多设备展示将手机、平板、笔记本模型并排放入flex或网格容器配合gap间距即可快速搭建多端可用的产品卖点区明暗截图素材务必准备同一界面、同一构图的浅色与暗色两张截图保持dark:hidden与hidden dark:block的配对关系否则暗色模式下会出现截图与机身颜色不协调的情况性能组件零 JavaScript 依赖截图建议使用 WebP 格式并控制尺寸与文档所述加载非常快、与 Tailwind CSS 和 Flowbite 完美集成的特点保持一致。小结Device Mockups 是 Flowbite 中少见的纯工具类、零脚本组件核心价值在于用最少的代码成本呈现真实的设备语境。本篇文章完整覆盖了 content/components/device-mockups.md 中的全部 7 类模型与颜色定制章节默认手机、iPhone 12iOS、Google PixelAndroid、平板、笔记本、桌面 iMac、智能手表并深入到了src/themes/default.css的语义变量层解释了明暗双主题自动适配的原理。开发者可以直接复制上述任一代码块替换截图路径后即用于生产页面。赞分享UI组件前端【免费下载链接】flowbiteOpen-source UI component library and front-end development framework based on Tailwind CSS项目地址https://gitcode.com/gh_mirrors/fl/flowbite点击查看免费下载相关推荐使用 Qwik 与 Tailwind CSS 集成 Flowbite 组件库完整指南使用 Qwik 与 Tailwind CSS 集成 Flowbite 组件库完整指南 本指南围绕 Flowbite 官方文档中 Qwik 集成章节完整讲解如何UI组件前端Ingress NGINX Controller v1.11.7 版本解析ExternalName 负载均衡修复、可观测性默认值与依赖升级全览Ingress NGINX Controller v1.11.7 版本解析ExternalName 负载均衡修复、可观测性默认值与依赖升级全览 导读 本文以UI组件前端daisyUI Electron 桌面应用 UI 实践用 Tailwind CSS 打造原生感桌面界面daisyUI Electron 桌面应用 UI 实践用 Tailwind CSS 打造原生感桌面界面 本篇技术指南以 daisyUI 文档中 Elec前端UI组件上一篇Kimi K2安全最佳实践密钥、隐私与部署的实用加固指南下一篇Apache Dubbo-go多协议支持Triple、gRPC、Dubbo、JSONRPC终极对比指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考