Рубрика: bootstrap

  • Javascript. jQuery. Как остановить видео в iframe?

    В случае, когда видео, к примеру youtube, выводится в модальном окне или слайдере часта ситуация, когда пользователь скрыл окно, но при этом воспроизведение видео не остановилось и играет в фоне. Пример простого решения проблемы Вы найдете в этой статье. К примеру, у вас есть модальное окно с iframe, в котором играет видео с youtube: Посмотри […]

  • Bootstrap. Как отключить закрытие окна кликом за его пределами?

    В случае, когда модальное окно обязательно к прочтению или в нем, например, форма «Я соглашаюсь» — нельзя чтобы клиент имел возможность закрыть его без согласия. А это сделать ему очень просто — просто нажав за его пределами. В этой статье маленький пример, как отключить эту возможность. Для решения задачи у Вас есть два пути. Первый […]

  • Bootstrap. Как сделать боковое всплывающее окно (sidebar modal)?

    В различных дизайнах и интерфейсах иногда уместно сделать модальное окно на всю высоту и прижатым к одной стороне. В статье — пример реализации этой идеи. По большому счету всё достаточно просто: К обычной разметке модального окна следует добавить новые классы left или right соответственно. Html: × Левый сайдбар Контент × Правый сайдбар Контент Также нужно […]

  • Bootstrap. Как сделать вкладку активной после перезагрузки страницы?

    Порой бывает необходимым сохранить вкладку, на которой находится пользователь после перезагрузки страницы. Сделать это по большому счёту не сложно и в этой статье небольшой пример JS-кода, который решает проблему. Итак, ниже код решения проблемы с комментариями. // этот код сработает после загрузки страницы // с адресной строки забираем anchor (это будет href нашей вкладки) и […]

  • JavaScript. Как программно переключить вкладку (tab)?

    Сегодня появилась необходимость программного переключения вкладок на bootstrap tabs. Решение очевидное — но сразу пошел не верным путём — поэтому сейчас раскажу, как быстро и правильно переключить bootstrap вкладку. На самом деле — все сверх-просто, причем, конечно же, есть в Документации. Но, тем не менее — не будет лишним еще раз указать исковые методы. Итак: […]

  • Css. Bootstrap. Как установить жирность текста.

    У bootstrap есть множество классов-хелперов, позволяющих легко давать контенту определенные свойства — например, .text-center — выровняет содержимое по центру. Сегодня задался вопросом — есть ли соответствующий класс для жирности текста. Ответом сейчас и поделюсь. Ответ достаточно просто. Подобного класса — нет. : ) Точнее он есть — и называется — .font-weight-bold, но лишь в bootstrap […]

  • Bootstrap. Как скрывать popover при клике на любом месте?

    В коробке bootstrap есть отличный компонент — popover. Но при работе с ним возникает неприятность — он не закрывается при клике на любом месте страницы. О том, как это исправить я расскажу в этой статье. Скажу честно — этот вариант не претендует на изысканность или красоту — но он рабочий, выполняет свою функцию, при этом […]

  • Bootstrap. Как добавить иконку к кнопке?

    Немного, казалось бы, очевидный вопрос, — но, как оказалось, часто встречаемый в интернете. Посмотрим, как мы можем вставить иконку в кнопку на bootstrap. Для начала приведу линк на перечень доступных икoнок. Что касается самого кода — то он также очень прост: Sign in Здесь мы видим обычный button с bootstrap-классами btn btn-primary, внутри которого размещена […]

  • Bootstrap Switch. Событие onchange.

    При работе с bootstrap switch интуитивно мы пытаемся ловить callback на сам checkbox, при этом не получаем желаемого результата. Разгадка кроется в использовании события onSwitchChange для bootstrap switch. Например: $(‘#show-all’).bootstrapSwitch({ onText: ‘Да’, offText: ‘Нет’, onSwitchChange: function(event, state) { if( state ){ alert(‘Состояние включен!’); } else{ alert(‘Состояние выключен!’); } } }); Как видите, анонимная функция принимает […]