Ответы пользователя по тегу Bootstrap
  • Как решить проблему с рывками при анимации?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    .collapse.in {
        display: block;
    }


    Этот стиль вызывает рывок. Дело в том, что вначале элементы скрыты, имеют нулевую высоту. При нажатии на триггер начинается анимация, а через полсекунды примерно к этому самому .multi-collapse... добавляется класс .collapse.in.
    Начать можно с того, чтобы нормально сверстать эту группу элементов, чтобы не было неблочных ссылок и картинок, которые флотятся поодиночке внутри одного контейнера. А там, глядишь, и решение само придет: например – не использовать встроенные функции появления элементов от бутстрапа и применять эффект появления к правильным узлам.
    Ответ написан
  • Как сделать индикаторы полоской?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    1. Заверстать такую полоску, в ней элемент с нулевой шириной и белой заливкой.
    2. Взять все слайды за 100% (допустим, их 4).
    3. Смотреть какой слайд в данный момент активен (допустим, третий) и считать ширину заливочного элемента:
    $('.заливочный_элемент').width(100 / все_слайды.length * (активный_слайд.index() + 1) + '%');

    4. Получаем 75% ширины.
    Ответ написан
    5 комментариев
  • Баг при отображении на мобильных устройствах?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    nav-link и nav-item
    При клике по этим элементам срабатывает триггер на закрытие всего меню. Можно попробовать запретить всплытие клика, дописав примерно следующее:

    $('.nav-link').click(function(e) {
    	e.stopPropagation();
    });
    Ответ написан
    2 комментария
  • Как сверстать этот адаптивный блок?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    Очень просто на флексах:

    Ответ написан
    Комментировать
  • На чем сделан этот таймер?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    Подойдет любой плагин с подобным функционалом. Запрос "countdown timer js" поможет. В некоторых даже встроен именно такой дизайн. У большинства хорошо расписан API, в котором как раз и вводятся данные типа: считай от сегодняшнего дня до старта продаж, который состоится через месяц... И он считает. Диапазоны дат и прочие гибкости обычно присутствуют.

    UPD: вот этот очень похож... точнее, именно он и есть...
    Ответ написан
    Комментировать
  • Как при смене класса у одного элемента менять класс у другого?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    У Bootstrap 4 карусели есть events, которые можно и нужно использовать. Чтобы лучше подстроить события под ваши нужды, читайте документацию, она в сети не прячется. Примерно так должно получиться:

    $('.carousel').on('slide.bs.carousel', function(event) {
    	var slideIndex = event.to, // индекс слайда, к которому переходим
    		activeSlide = $('.slide').eq(slideIndex), // активный слайд
    		myOuterElem = $('.my-outer-element'); // некий элемент вне карусели
    
    	if(activeSlide.hasClass('night-bg')) {
    		myOuterElem.addClass('my-new-class'); // добавляем класс к внешнему элементу если ночь
    	} else
    	if(activeSlide.hasClass('day-bg')) {
    		myOuterElem.removeClass('my-new-class'); // убираем класс у внешнего элемента если день
    	}
    });
    Ответ написан
    1 комментарий
  • Обязательно ли использование бутстрапа?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    Не стоит. Он излишен, потому что хочет угодить всем. И я еще не встречал в своей практике ни одного проекта, для которого бутстрап был бы достаточен. Как правило, переписывать приходится 80% его кода.
    Бутстрап был актуален, когда не было флекс и грид. Теперь я хочу свою навбар и футер.)
    Ответ написан
    Комментировать