Ответы пользователя по тегу Bootstrap
  • Как задать градиент кнопкам bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    background: linear/radial/и т.д.-gradient.
    Ответ написан
    Комментировать
  • Почему Sticky top в Bootstrap не прилипает к шапке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Дело не в бутстрапе, там перечислены те же свойства, если описывать прилипающий контент вручную. А ломает эту логику overflow-ы. Ищи, где в родителях обрезка видимости.
    Ответ написан
    1 комментарий
  • Как решить проблему с Bootstrap sticky-top class?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Можно. Убрать overflow.

    Проблема не в буте, а стилях. В качестве решения могу предложить вынести из родителя прилипшего ребенка и попробовать скомпоновать конструкцию иначе.
    Ответ написан
  • Как сверстать шапку если логотип посередине?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    Можно сделать грид сетку для шапки, где будет 3 колонки (auto [ширина лого] auto), где навигация будет занимать с первой по последнюю колонку первой строки. А лого будет занимать вторую колонку. Схему же навигации повторить, чтобы образовалось негативное пространство под лого, где оно должно быть.

    Скорее всего потребуется пошаманить с событиями мышки (это описывается на уровне CSS), снимая отлов событий с контейнеров элементов и присваивая их вложенным.
    Ответ написан
    Комментировать
  • Что не так с каруселью в бутстрап?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Все работает, а вот пути у тебя забиты неправильно.
    Ответ написан
  • Почему сьедается экран?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    1. Пункт 3.8. правил сервиса.
    2. Такое происходит, когда контент больше ширины экрана, поэтому он и увеличивает область видимости.
    Ответ написан
    Комментировать
  • Как покрасить элемент в Dropdown списке в hover?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Как запутаться в трех соснах.

    Решение →

    Вместо звездочки может быть конкретно класс и скорее всего это будет лучше, т.к. универсальные селекторы без опыта — зло.
    Ответ написан
    Комментировать
  • Как сделать такой эфект меню в bootstrap 4?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Дописать для этого стили.
    Ответ написан
    Комментировать
  • Верстка по сетке на Flex или без сетки?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Нус... WapSter правильно обратил внимание на корень вопроса, а зачем вообще нужна сетка. А нужна она для того, чтобы было легко набирать элементы и упорядочивать их структуре. Колонки, кстати, это не сетка, это колонки, сетка образовывается вместе со строками, формируя модули.

    Существует же их великое множество, для разворотных изданий (да, в вебе) мне например импонирует сетка 9 на 9 (сетка, да, не просто колонки), в наличии двух штук на экран (классика из печатной).

    И потому ты в любом случае будешь верстать по сетке, это сущность веба, колонки и строки, может быть тебе сейчас и кажется, что где-то без этого, это вовсе не так. Просто скорее всего ты не увидел это за абсолютным позиционированием, плавающими элементами и т.д.
    Ответ написан
    4 комментария
  • Как скрыть новости на странице кроме одной?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Дешево и сердито, использовать JS-фреймворк с роутами (Vue\React...). Можно и без роутов, на компоненте, тут не столь важно.

    Долго и скорее всего не будет смысла — на JS без фреймворка: получать event.target и все несовпадающее элементы убирать. А этому давать класс, который раскрое скрытую информацию, или на JS добавит откуда-то (объекта в памяти или по get-запросу в API)
    Ответ написан
    Комментировать
  • Как верстать страницу с боковым меню по bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега HTML
    CEO iAmStudio, предприниматель.
    1. Можно вкладывать строки (row) в колонки (col).
    2. По логике:

    2.1. Шапка это логотип (col) и остальная часть (col), внутри которой строка (или две) с основной навигацией и контактами.
    2.2. Основной контент сайта это тоже строка, внутри которой навигация (колонка), а рядом с ней содержимое страницы (тоже колонка), внутри которой строки с еще более вложенным содержимым.

    Короче говоря, на буте такое можно собрать очень быстро.
    Ответ написан
  • Максимальная ширина контейнера в сетке под мобильные разрешения?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Да, это расстояние между брейкпойнтами, дизайн для которого проектируется для минимального, а задаче верстальщик сделать его рабочим до следующего (большего).

    Конечно, если есть нюансы (а они есть, к примеру на пересечении десктопа и таблетки (горизонтальный формат)) их тоже неплохо бы прорабатывать на уровне дизайна.
    Ответ написан
    2 комментария
  • Как на Bootstrap сделать галерею с адаптацией под соотношение сторон изображений?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Ответ написан
    Комментировать
  • Почему элементы ведут себя так странно?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

    Поэтому решения 2:
    1. Убрать row из оберток, оставив только container*.
    2. Вложить между контентом и row один див с классом col-12*.

    * — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

    Но лучше пойти в документацию и посмотреть примеры, если не можешь в английский. Край → поискать русскоязычную документацию, она обычно отстает, но сетки это из базовых функций.
    Ответ написан
    Комментировать
  • Html/css + flexbox или bootstrap4 для заказчика?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    CEO iAmStudio, предприниматель.
    Все эти термины идут неразрывно друг от друга.

    Сам бутстрап, как фреймворк полностью построен на html+css+js, в том числе флексбоксах (сетка).
    Ответ написан
  • Как сделать плавный скролл к табу bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Bootstrap завязан на jQuery → а тот умеет делать так:
    $(".clickelem").click(function (){
        $('html, body').animate({
            scrollTop: $("#tabname").offset().top
        }, 2000);
    });


    Лично мне больше импонирует VanillaJS, но она кушается не всеми браузерами:
    window.scrollTo({
        top: [elem offset top],
        behavior: "smooth"
    });
    Ответ написан
    Комментировать
  • Как адаптивно сверстать такое меню средствами Bootstrap?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

    Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

    Структурно же у тебя все вписывается в сетку и логику:
    container-fluid
    →container (верхняя часть шапки)
    →container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

    А про адаптивность говорить нельзя пока у тебя не руках нет макета для мобилок. Но как результат тебе все равно придется описывать самостоятельно, чтобы вписаться в дизайн. Либо по макету, либо брать на себя ответственность за мобильное решение.

    PS: в идеале решение должно быть mobile-first (так проще).
    Ответ написан
    Комментировать
  • Как убрать горизонтальный скролл?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Тебе необходимо вписать видео в область, а не, чтобы видео задавало свои параметры. Поможет тебе в этом object-fit(сразу обрати внимание на поддержку) или просто 100%-ная ширина видео.

    И, парень, у тебя ни один блок не закончен. Мнения спрашивать стоит много позже и заранее готовится к тухлым помидорам.
    Ответ написан
    Комментировать
  • Ошибка gulp. Did you forget to signal async competition?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Когда ты создаешь таск, то в нем надо либо возвращать через return финал выполнения, либо через вызов передаваемой функции. У тебя в таске browserSync, к примеру, есть передаваемая функция done, но ты не возвращаешь ни ее, ни return результат выполнения.

    Это первое, что я увидел, может и еще есть такие ошибки. Чтобы их не было — читай документацию gulp.
    Ответ написан
  • Как добавить отступ к ссылке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    SVG, как и изображение требует фиксированных размеров в соответствии со своими исходными параметрами, в img это размер кратинки, в SVG это вьюпорт канвы, на которой он был создан.

    А потом этим размеры изменяются с помощью CSS, например max-width: 100%. Но так просто это сработает только с картинками, по идее с object тоже. Будет проще, если ты ресурс SVG вставишь в IMG, минус возможности, плюс к адаптации, как для новичка.

    К слову, данный вопрос не имеет никакого отношения к Bootstrap-у.
    Ответ написан
    Комментировать