常见的 Web UI 样式

2024-05-03

在接下来的几天里,我必须向我的一位客户展示一个 Web 应用程序的原型,问题是我不太擅长 CSS,最糟糕的是我几乎对得到的结果不满意。

编写业务逻辑对我来说没有任何挑战,但 UI 设计却占用了我 80% 以上的时间。我不需要什么令人惊叹的东西,只需要一个干净、漂亮、得体的环境,举个例子:

这是我一直遇到的一个反复出现的问题,我希望 Web UI 开发能够有一个少裸默认样式,类似于视觉工作室 or iPhone SDK对我来说非常有用。

上面的模型是用创建的Balsamiq 模型就是一个很好的例子,所有最常见的“组件”都可以使用,最重要的是:只有一种好看的样式可供选择。

网络上有类似的东西吗?一个中性但漂亮的 CSS 或 Javascript UI 框架?


到目前为止的选项:

  • 引导程序 http://getbootstrap.com/2.3.2/
  • Qooxdoo http://qooxdoo.org/
  • jQuery用户界面 http://jqueryui.com/
  • jQuery 工具 http://flowplayer.org/tools/
  • MochaUI http://mochaui.com/
  • Ext JS http://www.extjs.com/
  • 雅虎!用户界面库 http://developer.yahoo.com/yui/3/
  • BlueTrip http://bluetrip.org/
  • 蓝图 http://blueprintcss.org/
  • Uki http://ukijs.org/ (Demo http://ukijs.org/examples/wave/)
  • Napkee http://www.napkee.com/
  • YAML http://www.yaml.de/en/
  • Baseline http://baselinecss.com/
  • iPlotz http://iplotz.com/
  • 芽核 http://sproutcore.com/
  • ForeUI http://www.foreui.com/

我有兴趣知道是否有纯 CSS UI 框架。

I found 这个页面有一个非常好的 Web UI 库列表 http://woork.blogspot.com/2009/01/10-beautiful-web-ui-libraries.html,但其中大多数(至少是好的)似乎都是 Java 特有的,纯 CSS 或 JS 是否有同样好的替代品?

PS:我对 AJAX、效果、行为等等不感兴趣……我主要(唯一)关心的是风格。


感谢大家的所有建议!

在仔细考虑了所有建议的 UI 库之后,我得出的结论是 ExtJS 和 Qooxdoo 是最适合我的需求的。 jQuery UI 看起来很有前途,但只提供了少量的元素。

就纯 CSS 库而言,我发现 BlueTrip / BluePrint 和 tambler 建议的主题是最好的。除此之外,Flex 和 Napkee 似乎也值得探索。

现在是时候学习 ExtJS 了! =)


的组合960gs http://960.gs/用于布局和jQuery UI http://jqueryui.com/造型可能就是您所追求的。

您还可以考虑蓝图 http://www.blueprintcss.org/CSS框架而不是960gs。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

常见的 Web UI 样式 的相关文章

  • 如何像facebook和twitter一样显示帖子更新时间?

    我正在制作一个通知平台 而不是显示通知到来的时间 我想显示自通知到达以来经过的时间 就像在 Twitter 和 Facebook 上发生的那样 他们显示 32m 1 小时前等 我想用JavaScript Java来实现这段代码 任何帮助将非
  • 项目之间的点线

    我正在建立一个餐厅网站和菜单 我需要在菜单项和价格之间画一条 点线 我需要得到它 而不需要手动一一写点 此功能应该自动工作 是否可以使用 span 或 div 等背景来创建它 我拥有的 我想要的是 我想你正在寻找这样的东西 html div
  • 使用日期类型将输入字段中的日期居中

    我想将日期居中input not input inside div 如果我进行居中 它将把日期居中于input因为有一个右侧面板用于根据日历选择日期 该面板根据输入宽度调整大小 用于演示的小代码片段 center text align ce
  • primefaces 元素无法加载我的 css 文件的 url

    当我将样式 css 放在同一个 xhtml 页面中时 它可以与我的页面一起使用 例如
  • 在这个页面中,悬停不起作用,我不知道为什么,而且页脚也没有占用 100% 宽度,即使我已经给了它

    我的编码是否不正确 或者悬停和页脚有什么问题 我需要知道 php 邮件程序是正确的还是我有错误 我无法找到错误 因为邮件功能在本地服务器上不起作用
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • CSS:在 hsla 中使用 hsl 变量?

    假设我有一个 CSS 变量hsl定义如下 white 1 hsl 0deg 0 100 现在 我想使用相同的白色 但不透明度为 50 所以 像这样 white 2 hsla 0deg 0 100 50 有没有办法使用第一个变量 white
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • Sass 负变量值?

    我有几个 scss 选择器 其中我使用相同数量的正数和负数 如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量 但这不起作用 pad 15px padd
  • 在两个可拖动的 Flatlist 之间拖放 - React Native

    我正在努力为我的 React Native 应用程序创建一个要求 其中我有一个空白的保管箱 在放置平面列表项目时 它应该转换为可拖动的平面列表 和一个可拖动的平面列表 我必须从其中拖放到空白保管箱 反之亦然 两个平面列表中的项目应该有一个单
  • 确定使用 -webkit-line-clamp 表示多行省略号时是否显示省略号

    我们使用多行 CSS 省略号https css tricks com line clampin https css tricks com line clampin 我们想要检测省略号是否正在显示 并根据省略号是否正在显示来决定显示工具提示
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • 动态检测屏幕高度和屏幕宽度,以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2
  • 更改显示的 DPI 缩放大小使 Qt 应用程序的字体大小渲染得更大

    我使用 Qt 创建了一些 GUI 应用程序 我的 GUI 应用程序包含按钮和单选按钮等控件 当我运行应用程序时 按钮内的按钮和字体看起来正常 当我将显示器的 DPI 缩放大小从 100 更改为 150 或 200 时 无论分辨率如何 控件的

随机推荐

  • std::atomic 是否会阻止非原子变量对原子变量进行重新排序

    问题很简单 问 如果我有 settings N STNGS used by many threads std atomic
  • 浮动的垂直对齐方式:左div的

    我有大约 10 个宽度相等但高度不同的 div 我希望它们尽可能紧密地组合在一起 当设置为向左浮动时 它们不会垂直彼此对齐 而是与上面 行 的底部对齐 我在下面模拟了一个小例子 想要去掉空白 你有什么建议吗 我仅限于使用这种格式 因为内容是
  • Win7 runas命令:如何捕获运行命令的输出?

    我正在尝试 在 Windows 7 下 使用 runas 命令停止然后重新启动服务 Win7 需要管理员权限才能执行此操作 因此需要使用 runas 停止该服务工作正常 但启动它却不行 这是我用来停止服务的命令 runas user myD
  • C++ 中的静态虚函数

    我有一个基类和一个派生类 我想更改基函数 同时保持它们静态 因为它们应该作为静态传递给其他函数 我怎样才能做到这一点 ATL 框架通过将基类设为模板 然后让派生类将其类类型作为模板参数传递 从而绕过了无虚拟静态的限制 然后 基类可以在需要时
  • 对 Big O 表示法仍然有点困惑

    所以我一直在尽力理解 Big O 表示法 但仍然有一些事情我感到困惑 所以我一直读到如果某件事是 O n 那么它usually指的是算法的最坏情况 但它不一定要指最坏的情况 这就是为什么我们可以说插入排序的最佳情况是 O n 但是 我无法真
  • 如何存储生成的格式化 C 字符串

    这是一个新手问题 为了创建格式化的 C 字符串 我使用printf like int n 10 printf My number is i 10 但是 怎么样 int n 10 char msg My number is i 10 prin
  • JPA 的 commit() 方法是否使实体分离?

    我现在一直在搜索JPA实体生命周期 但现在 关于实体生命周期存在一些缺失的点 我在 stackoverflow 的一篇帖子中找到了下图 请记住该图已被投票 根据此图 当我们持久化实体时 它就变成了托管实体 好的 没问题 当我们提交时 数据会
  • 包装 C++ Qt 小部件以便在 Python 中与 PySide 一起使用

    在 Python 中使用自定义 Qt 显示小部件包装自定义 C 库以便在基于 PySide 的 QApplication 中使用的最佳方法是什么 C 库是否需要特殊处理才能使用 SWIG 进行包装 封装的 Qt 小部件能否与 PySide
  • nginx - 记录 SSL 握手失败

    我正在运行启用了 SSL 的 nginx 服务器 我的协议 密码设置相当安全 我已经在 ssllabs com 上检查过它们 但是 因为这是一个由我无法控制的 http 客户端调用的 Web 服务 所以我担心兼容性 重点是 有没有办法在我的
  • 将 size_t 变量添加到指针

    我想向指针添加 size t 类型 有些像这样 void function size t sizeA size t sizeB void pointer pointer malloc sizeA pointer pointer sizeB
  • Javascript 仅在 Chrome 中打开开发者工具后才起作用

    我和这里有同样的问题 为什么JavaScript只有在IE中打开开发者工具一次后才能工作 https stackoverflow com questions 7742781 why javascript only works after o
  • 从 Git 中的分支父级中提取更改

    如何从 Git 中的分支的父级中提取更改 特别是在 github 配置的项目中 例如 假设我分叉了http github com originaluser originalproject http github com originalus
  • 按分区“内”键进行高效分组

    我正在尝试调整一个流程来激发火花 基本上 该过程分析来自 JDBC 数据源的批量数据 每条记录都有一个batchId 还有一个更高级别的groupId 批次数量较大 提前未知 组数约为 100 RAM 中可以容纳每个批次的记录数 实际的分析
  • 如何对具有无效值的属性使用 JSON.net 的默认值

    我正在使用 Newtonsoft JSON 库来反序列化来自 Web 服务的响应 问题是某些字段包含无效值 例如 一条记录上的一个字段包含一个 T 表示该字段应该是数字 我想做的是将无效字段的值设置为 null 或其他默认值 我的所有属性都
  • 为什么文件传输完成后我的列表视图条目的内容没有更新?

    为什么将文件复制到目录后listview没有更新驻留在该目录中的较新内容 仅当我退出时listview重新进入视图会刷新吗 有人可以告诉我如何解决这个问题吗 文件功能java文件的复制 您应该将新复制的文件 VideoInfo对象 添加到您
  • 在 NoSQL 存储中存储图像

    我们的应用程序将通过 HTTP 提供大量缩略图大小的小图像 大小约为 6 12KB 我被要求调查使用 NoSQL 数据存储是否是一个可行的数据存储解决方案 理想情况下 我们希望我们的数据存储是容错且分布式的 在 NoSQL 存储中存储 bl
  • 如何打开相机然后切换到图像模式(反之亦然)

    就我而言 我想拍照或捕捉视频 实际上 如果我创建单独的意图 我可以做到这些 我的意思是我可以将相机打开为图像模式或视频模式 但无法在它们之间切换 这与我使用的意图过滤器有关吗 我应该怎么办 我如何在它们之间切换 我有同样的问题 在我想放置一
  • 使用 .NET Core Razor Pages 将文件下载到浏览器

    使用 ASP NET Razor Pages 我尝试将文件下载到浏览器 在页面 html 中 使用这样的链接效果很好 href DownloadableFiles testB csv download newname gt Download
  • 将 Matlab MEX 文件中的函数直接嵌入到 Python 中

    我正在使用专有的 Matlab MEX 文件在 Matlab 中导入一些仿真结果 当然没有可用的源代码 Matlab 的接口实际上非常简单 因为只有一个函数 返回一个 Matlab 结构体 我想知道是否有任何方法可以直接从Python调用M
  • 常见的 Web UI 样式

    在接下来的几天里 我必须向我的一位客户展示一个 Web 应用程序的原型 问题是我不太擅长 CSS 最糟糕的是我几乎对得到的结果不满意 编写业务逻辑对我来说没有任何挑战 但 UI 设计却占用了我 80 以上的时间 我不需要什么令人惊叹的东西