Задать вопрос
a13xsus

automatik

Lazy developer
Ответы пользователя по тегу Bootstrap

  • Как совместить меню и табы?

    a13xsus
    @a13xsus
    Lazy developer
    Конфликтуют классы. В custom.js:64 есть скрипт, который закрывает меню после клика, соответственно из-за неточного указания классов он и слушает клики по табам.

    $('.nav a').on('click', function () {
        if ($('.navbar-toggle').css('display') != 'none') {
            $(".navbar-toggle").click()
        }
});

    меняем на 
    $('.navbar .nav li a').on('click', function () {
        if ($('.navbar-toggle').css('display') != 'none') {
            $(".navbar-toggle").click()
        }
});
    Ответ написан
    9 комментариев
    9 комментариев

  • Как лучше разделять блоки при верстке Landing Page?

    a13xsus
    @a13xsus
    Lazy developer
    section>container>row
    Ответ написан
    Комментировать
    Комментировать

  • Адаптивное меню bootstrap для лендинг?

    a13xsus
    @a13xsus
    Lazy developer
    Решение не совсем чистое. В вашем случае меню на больших экранах может плющить после того, как пощелкаете по адаптивной версии и развернете экран, т.к. у него останется событие $('.navbar-toggle').click() от адаптивной версии. Поэтому лучше добавить проверку на размер экрана и отвязывать событие, если размер экрана стал больше.

    $(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {            
            $('.nav a').on('click.toggle-nav', function(){
                $('.navbar-toggle').click()
            });
        }
        else {
            $('.nav a').off('click.toggle-nav')
        }
    }).resize();
});
    Ответ написан
    Комментировать
    Комментировать

  • Как перевести проект использующий Bootstrap 3 на 4?

    a13xsus
    @a13xsus
    Lazy developer
    Да там нет ещё и половины от третьего, так что грозит головной болью и в итоге откатыванием назад. Альфа же.
    Ответ написан
    Комментировать
    Комментировать

  • Как пролистывать бутстрап слайдер "тапом" на мобильных устройствах?

    a13xsus
    @a13xsus
    Lazy developer
    Вот шаблон https://dcrazed.com/html/bent-demo/ в секции SCREENS есть слайдер с айфонами, сделанный на jQuery OwlCarousel v1.3.3 (owl.carousel.js) , он свободно пролистывается свайпом на мобильном и на пк. Также там в scripts.js инициализация этой карусели есть:

    $(document).ready(function() {

    "use strict";
    
    $("#owl-demo").owlCarousel({
        autoPlay: 3000,
        items: 4, //10 items above 1000px browser width
        itemsDesktop: [1370, 3], //5 items between 1000px and 901px
        itemsDesktopSmall: [900, 2], // betweem 900px and 601px
        itemsTablet: [600, 1], //2 items between 600 and 0
    });
});


    Тут всё просто, подключаете скрипты, задаёте необходимые id (owl-demo) и классы дивам (owl-carousel, owl-theme, owl-wrapper, owl-item) и всё. В общем в сексии SCREENS там всё есть и очень понятно сверстано.
    Ответ написан
    Комментировать
    Комментировать