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

Question

我一直在为如何在语义 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');
});

Answer 1

这只是一个JQuery版本问题：

• 这个小提琴有效。
• 这个没有。

所以检查你正在使用的 JQuery 版本，似乎版本应该高于 1.8。

Answer 2

当涉及到 Shapes 时，语义 UI 和 Bootstrap 不会很好地结合在一起。您必须在 Bootstrap 中手动删除以下 CSS 才能使其正常工作：

.hidden {
 display: none !important;
}

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