Foundation - 按钮组大小调整
说明
可以使用标准按钮(例如 .tiny、small 和 large)调整按钮组大小。
示例
以下示例演示了如何在 Foundation 中调整按钮组大小。
<html> <head> <title>Button Group Sizing</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> </head> <body> <div class = "small button-group"> <a class = "button">Small Button</a> <a class = "button">Small Button</a> <a class = "button">Small Button</a> </div> <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
保存上述 html 代码 button_group_sizing.html 文件。
在浏览器中打开此 HTML 文件,将显示如下所示的输出。
foundation_basic_controls.html