通过PatternFly超越Bootstrap

最新推荐文章于 2024-05-14 10:05:38 发布
最新推荐文章于 2024-05-14 10:05:38 发布
阅读量833 收藏
点赞数
文章标签： python java 编程语言 设计模式 css
原文链接：https://opensource.com/business/15/6/go-beyond-bootstrap-patternfly
版权

设计和用户体验（UX）通常是开源项目的事后想法。 但这正在改变。 PatternFly是一个项目，有助于弥合开发人员和设计师之间的鸿沟。

PatternFly是一个开源项目，可促进设计通用性和改善的用户体验。 在这里，开源开发人员和设计人员可以协作，创建和共享用户界面（UI）组件和小部件。 PatternFly基于Bootstrap（引导移动的前端框架，用于创建网站和应用程序）。

我有幸赶上了一些PatternFly团队，包括Red Hat的交互设计师Leslie Hinson和Red Hat的UXD团队的前端开发人员Robb Hamilton。 我想在幕后了解有关PatternFly的更多信息，它的发展方式以及开发人员为什么应该了解该项目。

Interview banner

PatternFly解决什么问题？

最低0.47元/天 解锁文章
cumj63710
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 中使用变量_patternfly元素使用组件中的css变量主题挂钩
weixin_26749889的博客
08-19 336
css 中使用变量PatternFly Element components have a standard way of stacking variables and fallback values to provide default colors, but additionally we include “theming hooks”, or places for developers wh...
patternfly-elements：PatternFly元素。 一组基于PatternFly设计的社区创建的Web组件
02-19
PatternFly元素 目录 是基于统一设计套件的灵活轻量级Web组件的在制品集合。 该回购还包括一个生成新组件的生成器。 PatternFly元素是： 轻量级：小文件大小，最小化样板，没有“类似框架”的功能。 通用：只需编写一次，即可在任何地方使用。 PatternFly Elements可以在React，Vue，Angular，香草JS中使用任何HTML元素。 Themable ：根据需要通过属性或CSS变量进行覆盖 这些原则的结果是，您可以将一组组件插入各种应用程序中。 使UX一致性和开发人员熟悉任何Web项目。 包含一个Yeoman生成器，用于创建满足这些目标的Web组件。 快速开始 git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install
patternfly-design-kit:PatternFly设计工具包是一个素描库，用于创建PatternFly准确的设计模型
05-19
Patternfly设计套件 PatternFly设计工具包是资产的集合，使设计人员可以轻松创建可精确表示组件和布局的高保真设计模型。 这包括： 一个草图符号库，其中包括组件，图标，调色板和其他PatternFly元素。 在托管在Sketch Cloud上 一个模板文件，提供了几种入门版式，这将使构建普通的PatternFly屏幕更加容易。 在托管在Sketch Cloud上 更新套件 Sketch将在打开的Sketch文件的右上角自动接收库更新。 您将需要更新PatternFly库并更新文件中的符号（两个单独的通知）。 您必须更新所有使用PatternFly符号的文件-不幸的是，这不是一个完整的过程。 要更新您的PatternFly模板文件，请从本地存储库中打开更新的模板，然后选择“文件”>“另存为模板...”。这将使用更新的版本替换当前模板，并使用“从模板中新建...”功能提供最新
探索未来设计：PatternFly开源项目深度解析
最新发布
gitblog_00076的博客
05-14 308
探索未来设计：PatternFly开源项目深度解析 项目地址:https://gitcode.com/patternfly/patternfly-3 PatternFly是一个基于Bootstrap的开源UI框架，它提供了定制化组件和额外的设计模式，以满足现代企业级应用的需求。这个项目不仅包含了前端开发的全部工具，还有一套完整的样式指南，帮助开发者构建出一致且用户友好的界面。 1. 项目简介 Pa...
patternfly-code-guide:PatternFly代码指南记录了用于为PatternFly开发灵活，持久和可持续HTML和CSS的标准
05-18
PatternFly代码指南 从派生，PatternFly代码指南记录了用于为PatternFly开发灵活，持久和可持续HTML和CSS的标准。 致谢，并感谢的另一项很棒的开源贡献。 执照 @mdo在麻省理工学院发行，并拥有版权2015。
patternfly-react:一组用于PatternFly项目的React组件
03-16
PatternFly React 该项目为提供了一组React组件。 社区： | | 目录 使用PatternFly 3？ 看一下。 PatternFly React软件包 套餐链接 描述 :blue_heart: 核心套餐 核心组件集 表组件 图表组件 图标组件 PatternFly CSS样式 PatternFly CSS变量令牌 拓扑组件 :open_file_folder: 配套包 Gatsby文档站点，有关组件 赛普拉斯集成测试 :family: 扩展程序包社区支持 目录视图扩展 表和列表行虚拟化扩展 :cross_mark: 不推荐使用的软件包 表内联编辑扩展名 设置 在开始之前，请查看此以熟悉设计系统的基本元素。 安装程序包管理器 在使用PatternFly库之前，请安装程序包管理器。 从PatternFly React种子开始 如果要开始现有项目，请跳至 。 是一个开源构建脚手架实用程序。 在创建将使用PatternFly的新项目时
vue组件 .vue_Vue 2的PatternFly组件
cuk5340的博客
07-28 264
vue组件 .vue Vue PatternFly (Vue PatternFly) PatternFly components for Vue 2. Vue 2的PatternFly组件。 Vue PatternFly implements a set of reusable Vue components following the PatternFly design patterns an...
patternfly-bootstrap-treeview-master_javaapi_namev77_tree_
10-03
Bootstrap Treeview是Patternfly中的一个组件，用于在Bootstrap框架内展示层次结构数据，如目录、组织结构或者文件系统等。这个"patternfly-bootstrap-treeview-master"压缩包包含了Java API实现的Bootstrap ...
bootstrap-4.6.2
06-13
5. 自定义Bootstrap，通过修改SCSS或LESS源码，调整颜色、间距等设计细节，然后重新编译生成自己的CSS文件。 总的来说，Bootstrap 4.6.2是一个强大而灵活的工具，为开发者提供了构建高质量网站所需的一切，无论是在...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap旅游网站
02-09
开发者通过灵活运用Bootstrap的栅格系统、组件和插件，能够快速构建出具有专业水准的旅游网站，同时通过合理的文件组织，保证了项目的可维护性和扩展性。对于想要学习或改进旅游网站设计的人来说，这是一个很好的...
前端项目-patternfly.zip
09-02
前端项目-patternfly,PatternFly的引用实现基于[bootstrap v3]（http://getbootstrap.com/）。把patternFly想象成一个带有附加组件和定制的引导程序的“剥皮”版本。
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
使用PatternFly解决用户体验问题
cumj63710的博客
06-19 606
迈克尔Dyrynda是一名Web开发Hostworks ，一个自由开发人员和博客。 他的工作对他的第一个开源项目Confomo与马特斯托弗和播客的旅程briefs.fm 。 他还撰写了有关Web开发和解决日常问题的书，没有可用的解决方案。 Michael的Web开发技能扩展到Web开发的前端方面，包括JavaScript，LESS / Sass / CSS，设计数据库以及构建可扩展的应用程序。...
探索PatternFly：构建响应式UI的利器
gitblog_00045的博客
04-14 418
探索PatternFly：构建响应式UI的利器 项目地址:https://gitcode.com/patternfly/patternfly PatternFly是一个开源的设计系统，专为开发人员和设计师提供一套完整的、一致的用户界面（UI）组件，用于构建响应式、无障碍且易于使用的Web应用。这个项目由Red Hat支持，并被广泛应用于企业级应用的开发中。 技术分析 PatternFly基于现代W...
是什么让PatternFly与Bootstrap脱颖而出？
cumj63710的博客
06-18 594
去年6月，Opensource.com 向读者提供了PatternFly的幕后外观 ，它的外观以及开发人员为什么应该了解该项目。 这次，我认为从实际使用PatternFly的人员那里听到消息很重要。 本系列旨在通过开发人员的眼光来了解有关PatternFly的更多信息。 作为本系列的开始，我与AndrésGalante坐下来，他是HTML和CSS专家，在Less，Sass，Bootstra...
太漂亮了！有了这9款前端CSS开源框架，经理不再说我做得丑了！
Github导航站
12-25 3225
  提起web开发，大多数人通常会想到HTML或者JavaScript，但常常会忘记一项，对访问网络能力有着非常深远影响的技术，它就是css。css是任何网页中最重要的，根据维基百科的记录，它甚至可以被称为万维网三大基础技术之一，但它也最容易被人遗忘的部分之一。 本文将与你探讨9款流行的、功能强大且开源的框架，让你的css开发得以轻松构建精致的网络前端。 1、Bootstrap   Bootstrap无疑是最受欢迎的css框架，它是最早的web前端框架之一。由Twitter开发，Bootstrap兼具实用性
oVirt开发环境搭建
li_jiejun的专栏
01-04 1928
oVirt Engine Development Environment
怎么通过js获取bootstrap活动的tab
11-16
要通过 JavaScript 来获取 Bootstrap 活动的 tab，可以使用 Bootstrap 的 JavaScript 插件来实现。以下是一种方法： 1. 在页面中引入 Bootstrap 的 JavaScript 文件：可以在 HTML 中的 `<head>` 标签中添加以下代码来引入 Bootstrap 的 JavaScript 文件。 ```html <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> ``` 2. 使用 JavaScript 来获取活动的 tab：可以通过以下代码来获取当前活动的 tab。 ```javascript var activeTab = document.querySelector('.nav-tabs .active'); ``` 上述代码使用 `document.querySelector` 方法来选择具有 `.nav-tabs` 类及其子元素中具有 `.active` 类的元素，即当前活动的 tab。 3. 获取活动 tab 的详细信息：如果需要获取活动 tab 的详细信息，可以使用以下代码来获取。 ```javascript var activeTabID = activeTab.getAttribute('id'); var activeTabContentID = activeTab.getAttribute('aria-controls'); ``` 上述代码使用 `getAttribute` 方法来获取活动 tab 的 `id` 和 `aria-controls` 属性的值。 4. 对获取到的 tab 进行操作：可以根据需要对获取到的活动 tab 进行进一步操作，例如修改它的样式或添加事件监听器等。 ```javascript // 修改活动 tab 的样式 activeTab.style.backgroundColor = 'red'; // 添加事件监听器 activeTab.addEventListener('click', function() { // 在点击活动 tab 时执行的操作 }); ``` 以上是通过 JavaScript 获取 Bootstrap 活动的 tab 的一个简单示例。根据实际需求，可能需要根据页面的结构和 Bootstrap 的用法进行适当调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值