Onfor

Метка: bootstrap

  • Laravel. Как вывести заглавную букву в Blade?

    Короткая статья с несколькими вариантами вывода заглавной буквы в laravel blade. Чистый php Выводим привычную нам функцию ucfirst обернутую в {{ … }} {{ ucfirst(trans(‘messages.welcome’)) }} {{ ucfirst(‘welcome’) }} Blade-директива Добавляем новую директиву в метод boot() в app/Providers/AppServiceProvider. public function boot() { Blade::directive(‘capitalize’, function ($s) { return «»; }); } Далее вызываем, как обычную директиву […]

  • 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, внутри которого размещена […]

  • Yii2. Tabs. Делаем табы при помощи виджета.

    Bootstrap-виджеты из коробки в любимом-родном Yii2 очень облегчают жизнь и решают множество проблем. Сегодня расскажу о виджете Tabs, который, как понятно из названия, позволяет вывести контент табами. Итак, все, как всегда, крайне просто. Добавляем секцию use: use yii\bootstrap\Tabs Далее, выводим сам виджет: echo Tabs::widget([ ‘items’ => [ [ ‘label’ => ‘Заголовок вкладки 1’, ‘content’ => […]