基础 CSS 厨房水槽关闭按钮
Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架,它使设计美观的响应式网站、应用程序和电子邮件变得容易,这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI,因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具,用于在移动设备上更快地呈现。它被许多公司使用,例如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼。
Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Kitchen Sink Close Button是一个简单的组件,用于用户想要显示某些东西是可关闭的。关闭按钮是一个元素,它使用.close-button类。它与其他 Foundation CSS 组件(例如Toggler、Reveal、Off-canvas和其他包含打开/关闭操作的插件)一起使用。
基础 CSS 厨房水槽关闭按钮类:
- close-button:与按钮元素一起使用。通常以乘法图标(X;×)显示并具有悬停效果。此图标包含在 中,属性为 aria-hidden=”true”,因此屏幕阅读器不会读取 X 图标。为了阐明按钮的用途,它使用 aria-label 进行标记。
句法:
...
示例 1:
HTML
Foundation CSS Kitchen Sink Close Button
GeeksforGeeks
Foundation CSS Kitchen Sink Close Button
Look at this close button!
HTML
GeeksforGeeks
Foundation CSS Kitchen Sink Close Button
Close button being used with callout.
输出:
示例 2:此示例显示了使用关闭按钮的标注组件。
HTML
GeeksforGeeks
Foundation CSS Kitchen Sink Close Button
Close button being used with callout.
输出:
参考: https://get.foundation/sites/docs/kitchen-sink.html#close-button