在语义 UI（CSS 框架）中使用形状

Posted 2023-03-06

【中文标题】在语义 UI（CSS 框架）中使用形状

【英文标题】：Using shapes in Semantic UI (CSS Framework)

【发布时间】：2014-04-17 01:40:57

【问题描述】：

我一直在为如何在语义 UI 中使用形状而苦苦挣扎。 我一直在尝试他们网站 http://semantic-ui.com/modules/shape.html#/definition 中的一个示例，但动画对我来说无法正常工作。

HTML 代码：

    <div class="ui cube shape">
        <div class="sides">
            <div class="active side">
                 <div class="content">
                    <div class="center">
                     1
                    </div>
                </div>
            </div>

            <div class="side">
                <div class="content">
                    <div class="center">
                    2
                    </div>
                </div>
            </div>
        </div>
    </div>

javascript：

$('#btn').click(function()
    $('.shape').shape('flip up');
);

【参考方案1】：

只是JQuery版本问题：

This fiddle works。 This one doesn't.

所以检查一下你使用的JQuery版本，好像版本应该高于1.8。

【讨论】：

谢谢...JQuery 版本还可以...问题是我猜想链接两个 CSS 框架（语义和 twitter 引导程序）

@AnkurGoyal 也许你应该在你的问题中添加一个 Fiddle with your bug。

【参考方案2】：

Semantic UI 和 Bootstrap 在 Shapes 方面不能很好地结合使用。您必须在 Bootstrap 中手动删除以下 CSS 才能使其正常工作：

.hidden 
 display: none !important;

如果 .hidden 类对您的操作至关重要，请重命名它而不是删除它。虽然我对 Boostrap 的内部工作方式不够熟悉，但不知道该类是否存在任何内部依赖关系。