基础 CSS 厨房水槽按钮

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松布局令人惊叹的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来令人惊叹，并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。在本文中，我们将讨论 Foundation CSS 中的 Kitchen Sink Switch。

Kitchen Sink是 Foundation CSS 中的一个页面，其中列出了所有主要组件及其代码。它包含每个组件的所有基本模板及其代码。 Button代表一个可点击的按钮，可用于提交表单数据或执行具有标准按钮功能的特定操作。

基础 CSS 厨房水槽按钮类：

• button：此类用于向元素添加按钮功能。
• 成功：该类用于以绿色显示动作的成功完成。
• alert：此类用于以红色显示潜在危险或不成功的操作。
• 警告：此类用于通知需要执行的特定操作并使用黄色表示。
• tiny：此类用于使按钮的尺寸非常小。
• small：该类用于使按钮尺寸小，但仍比小按钮大。
• large：该类用于使按钮的尺寸更大。
• 扩展：该类用于使按钮扩展以覆盖查看网站的屏幕的整个宽度。
• button-group：这个类有助于制作一组按钮，并排排列成一排。
• 空心：这个类有助于创建空心样式（即它们具有不同颜色的边框和透明背景）按钮。
• disabled：此类用于禁用按钮功能。

语法：

 
Button 

示例 1：下面的示例描述了 Foundation CSS 中的厨房水槽按钮。在这里，我们使用元素的“ .hollow ”类创建了一个空心样式按钮，使用“.alert”、“.warning”、“.success”类包含不同的颜色。

HTML

  

    Foundation CSS Kitchen Sink Button
    
    
    
    
        Foundation CSS Kitchen Sink Button
    

  

    GeeksforGeeks
    Foundation CSS Kitchen Sink Buttons
    
        Success
    
    
        Warning
    
    
        Alert
    

输出：

基础 CSS 厨房水槽按钮

示例 2：下面的示例描述了 Foundation CSS 中的厨房水槽按钮。在这里，我们使用 Foundation CSS 中的“ .disabled ”类禁用了一个按钮。

HTML

  

    Foundation CSS Kitchen Sink Button
    
    
    
    
        Foundation CSS Kitchen Sink Button
    

  

    
        GeeksforGeeks
    
    Foundation CSS KitchenSink Buttons
    
      Button 1 
    
    
      Button 2 
    

输出：

基础 CSS 厨房水槽按钮

参考：https://get.foundation/sites/docs/kitchen-sink.html