Использование фигур в семантическом пользовательском интерфейсе (CSS Framework)

Некоторое время я пытался понять, как использовать фигуры в семантическом пользовательском интерфейсе. Я пытался использовать пример с их сайта 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>

ЯВАСКРИПТ:

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

javascript html css semantic-ui css-frameworks
person Ankur Goyal    schedule 12.03.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это просто проблема с версией JQuery:

Поэтому проверьте версию JQuery, которую вы используете. Похоже, она должна быть выше 1.8.

person Fractaliste    schedule 13.03.2014
comment
спасибо... Версия JQuery была в порядке... проблема заключалась в том, что я предполагаю, что связываю две структуры CSS (семантический и твиттерский Bootstrap) - person Ankur Goyal; 13.03.2014
comment
@AnkurGoyal Может быть, вам следует добавить к вашему вопросу Fiddle с вашей ошибкой. - person Fractaliste; 13.03.2014

arrow_upward
0
arrow_downward

Semantic UI и Bootstrap не будут хорошо работать вместе, когда дело доходит до Shapes. Вам придется вручную удалить следующий CSS в Bootstrap, чтобы заставить его работать:

.hidden {
 display: none !important;
}

Если наличие класса .hidden имеет решающее значение для вашей работы, переименуйте его, а не удаляйте. Хотя я недостаточно знаком с внутренней работой Boostrap, чтобы знать, есть ли какие-либо внутренние зависимости от этого класса.

person dearsina    schedule 18.10.2016