PHPackages tdkomplekt/laravel-bootstrap-components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. tdkomplekt/laravel-bootstrap-components ActiveLibrary[Templating & Views](/categories/templating) tdkomplekt/laravel-bootstrap-components ======================================= Laravel Bootstrap Blade Components 1.2.3(2y ago)03.4k↓28.9%[1 issues](https://github.com/tdkomplekt/laravel-bootstrap-components/issues)MITBlade Since Oct 5Pushed 2y ago1 watchersCompare [ Source](https://github.com/tdkomplekt/laravel-bootstrap-components)[ Packagist](https://packagist.org/packages/tdkomplekt/laravel-bootstrap-components)[ Docs](https://github.com/tdkomplekt/laravel-bootstrap-components)[ RSS](/packages/tdkomplekt-laravel-bootstrap-components/feed)WikiDiscussions master Synced yesterday READMEChangelog (10)Dependencies (1)Versions (20)Used By (0) Laravel Bootstrap Components ============================ [](#laravel-bootstrap-components) Этот пакет содержит набор полезных [компонентов Bootstrap](https://getbootstrap.com/docs/5.0/components) Laravel Blade. Он продвигает принципы DRY и позволяет вам сохранять ваш HTML красивым и чистым. Компоненты включают оповещения, значки, кнопки, формы ввода (с автоматической обратной связью об ошибках), раскрывающиеся списки, навигацию, нумерацию страниц (адаптивную) и многое другое. Компоненты поставляются со встроенной интеграцией [Laravel Livewire](https://laravel-livewire.com/), поэтому вы можете использовать их с Livewire или без него. Документация ------------ [](#документация) - [Требования](#%D0%A2%D1%80%D0%B5%D0%B1%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) - [Установка](#%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0) - [Примеры использования](#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B) - [Компоненты](#%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B) - [Alert](#Alert) - [Badge](#Badge) - [Button](#Button) - [Card](#Card) - [Check](#Check) - [Close](#Close) - [Datalist](#Datalist) - [Desc](#Desc) - [Dropdown](#Dropdown) - [Form](#Form) - [Icon](#Icon) - [Img](#Img) - [Input](#Input) - [Input-addon](#Input-addon) - [Input-group](#Input-group) - [Input-floating](#Input-floating) - [Link](#Link) - [Nav-dropdown](#Nav-dropdown) - [Nav-link](#Nav-link) - [Pagination](#Pagination) - [Progress](#Progress) - [Radio](#Radio) - [Select](#Select) - [Spinner](#Spinner) - [SVG](#Svg) - [Textarea](#Textarea) Требования ---------- [](#требования) - php 8 - Laravel 10 - Сначала необходимо установить Bootstrap 5 через [веб-пакет laravel/ui](https://github.com/laravel/ui) - Для использования значков должен быть установлен [Font Awesome v6](https://fontawesome.com/start) или ниже. Установка --------- [](#установка) ``` composer require tdkomplekt/laravel-bootstrap-components ``` Примеры ------- [](#примеры) Ссылка с изображением: ``` ``` «Спиннер» стандартного черного цвета (для смены цвета используем аттрибут color): ``` ``` Компоненты ---------- [](#компоненты) ### Alert [](#alert) Оповещение: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка для отображения, также можно поместить в `slot` - `color`: Bootstrap цвет `primary`, `danger`, `success` - `dismissible`: добавить кнопку закрытия --- ### Badge [](#badge) Бейдж / Значок: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-1) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка для отображения, также можно поместить в `slot` - `color`: Bootstrap цвет `primary`, `danger`, `success` - `rounded`: круглый стиль --- ### Button [](#button) Кнопка: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-2) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка для отображения, также можно поместить в `slot` - `color`: Bootstrap цвет `primary`, `danger`, `success` - `size`: размер `sm`, `lg` - `type`: тип `button`, `submit` - `route`: устанавливает в `href` путь - `url`: устанавливает в `href` ссылку - `href`: устанавливает в `href` что-то свое (#) - `dismiss`: аттр. `data-bs-dismiss` значение `alert`, `modal` - `toggle`: аттр. `data-bs-toggle` значение `collapse`, `dropdown` - `click`: Livewire действие на клик - `confirm`: запрашивает у пользователя подтверждение при нажатии --- ### Card [](#card) Карточка: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-3) - `label`: метка для отображения, также можно поместить в `slot` - `border`: цвет обводки `primary`, `danger`, `success` - `title`: заголовок - `subtitle`: подзаголовок - `image`: ссылка на изображение --- ### Check [](#check) Чекбокс: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-4) - `label`: метка для отображения над вводом - `checkLabel`: метка для отображения рядом с вводом - `help`: вспомогательная метка для отображения под вводом - `is_checked`: устанавливает статус переключателя - `switch`: оформить как переключатель - `model`: Livewire model key - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Close [](#close) Кнопка закрытия: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-5) - `color`: Bootstrap цвет иконки `white` - `dismiss`: аттр. `data-bs-dismiss` значение `alert`, `modal` --- ### Color [](#color) Выбор цвета: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-6) - `label`: метка для отображения над вводом - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `prepend`: аддон для отображения перед вводом, можно использовать через именованный слот - `append`: аддон для отображения после ввода, можно использовать через именованный слот - `size`: размер `sm`, `lg` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Datalist [](#datalist) Список данных: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-7) - `label`: метка для отображения над вводом - `options`: массив опций ввода, например. `['Red', 'Blue']` - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `prepend`: аддон для отображения перед вводом, можно использовать через именованный слот - `append`: аддон для отображения после ввода, можно использовать через именованный слот - `size`: размер `sm`, `lg` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `debounce`: время в мс для привязки данных Livewire к клавиатуре, например. `500` - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Desc [](#desc) Список описания: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-8) - `tern`: термин списка описаний - `details`: детали списка описаний также можно поместить в `slot` - `date`: дата для использования вместо подробностей (для использования с [Laravel Timezone](https://github.com/jamesmills/laravel-timezone)) --- ### Dropdown [](#dropdown) Выпадающий список: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-9) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка раскрывающегося списка для отображения, может использоваться через именованный слот - `items`: выпадающие элементы, также можно поместить в `slot` - `color`: цвет `primary`, `danger`, `success` - `size`: размер `sm`, `lg` - `dropdown_class`: классы для родительского dropdown - `dropdown_menu_class`: классы для меню dropdown - `icon_toggle`: показывать стрелочку --- ### Dropdown Item [](#dropdown-item) Элемент выпадающего списка: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-10) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка раскрывающегося списка для отображения, может использоваться через именованный слот - `route`: устанавливает в `href` путь - `url`: устанавливает в `href` ссылку - `href`: устанавливает в `href` что-то свое (#) --- ### Form [](#form) Форма (с полями): ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-11) - `route`: устанавливает в `href` путь - `url`: устанавливает в `href` ссылку - `href`: устанавливает в `href` что-то свое (#) - `submit`: Действие Livewire при отправке --- ### Icon [](#icon) Font Awesome иконка: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-12) - `name`: Font Awesome название иконки `cog`, `rocket` и т.д. - `style`: Font Awesome стиль иконки `solid`, `regular`, `brands` - `size`: Font Awesome размер иконки `sm`, `lg`, `3x`, `5x` - `color`: Bootstrap цвет `primary`, `danger`, `success` - `spin`: устанавливает для иконки анимацию вращения - `pulse`: устанавливает для иконки анимацию пульсации - `beat`: устанавливает для иконки анимацию бита - `flip`: устанавливает для иконки анимацию переворота - `shake`: устанавливает для иконки анимацию тряски - `rotate_90`: поворачивает иконку на 90° (по часовой) - `rotate_180`: поворачивает иконку на 180° (по часовой) - `rotate_270`: поворачивает иконку на 270° (по часовой) --- ### Img [](#img) Изображение: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-13) - `asset`: устанавливает в `src` ссылку/содержимое - `src`: устанавливает в `src` - `fluid`: устанавливает изображение [полной ширины](https://getbootstrap.com/docs/5.0/content/images/#responsive-images) - `thumbnail`: устанавливает для изображения [стиль миниатюр](https://getbootstrap.com/docs/5.0/content/images/#image-thumbnails) - `rounded`: устанавливает изображение с [закругленными углами](https://getbootstrap.com/docs/5.0/content/images/#aligning-images) --- ### Input [](#input) Поле ввода: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-14) - `label`: метка для отображения над вводом - `type`: тип поля `text`, `email` - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `prepend`: аддон для отображения перед вводом, можно использовать через именованный слот - `append`: аддон для отображения после ввода, можно использовать через именованный слот - `size`: размер `sm`, `lg` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `debounce`: время в мс для привязки данных Livewire к клавиатуре, например. `500` - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Input-floating [](#input-floating) Поле ввода: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-15) - `label`: метка для отображения над вводом - `type`: тип поля `text`, `email` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `debounce`: время в мс для привязки данных Livewire к клавиатуре, например. `500` - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Link [](#link) Ссылка: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-16) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка для отображения, также можно поместить в `slot` - `route`: устанавливает в `href` путь - `url`: устанавливает в `href` ссылку - `href`: устанавливает в `href` что-то свое (#) --- ### Nav Dropdown [](#nav-dropdown) Выпадающий список в навигации: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-17) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метка раскрывающегося списка для отображения, может использоваться через именованный слот - `items`: выпадающие элементы, также можно поместить в `slot` --- ### Nav Link [](#nav-link) Ссылка в навигации: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-18) - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `label`: метку для отображения, также можно поместить в `slot` - `route`: устанавливает в `href` путь - `url`: устанавливает в `href` ссылку - `href`: устанавливает в `href` что-то свое (#) --- ### Pagination [](#pagination) Адаптивные ссылки страниц: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-19) - `links`: модели Laravel с постраничной разбивкой - `justify`: Bootstrap положение на странице `start`, `end` --- ### Progress [](#progress) Полоса прогресса: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-20) - `label`: метка для отображения внутри индикатора выполнения - `percent`: процент индикатора выполнения - `color`: Bootstrap цвет `primary`, `danger`, `success` - `height`: высота индикатора выполнения в пикселях - `animated`: анимировать индикатор выполнения - `striped`: используйте полосатый стиль для индикатора выполнения --- ### Radio [](#radio) Радио выбор: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-21) - `label`: метка для отображения над вводом - `options`: массив выбора `['Red', 'Blue']` - `help`: вспомогательная метка для отображения под вводом - `switch`: устанавливает ввод для использования стиля переключения - `model`: Livewire model key - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Select [](#select) Выпадающий список: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-22) - `label`: метка для отображения над вводом - `placeholder`: заполнитель для пустого первого варианта - `options`: массив выбора `['Red', 'Blue']` - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `prepend`: аддон для отображения перед вводом, можно использовать через именованный слот - `append`: аддон для отображения после ввода, можно использовать через именованный слот - `size`: размер `sm`, `lg` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `lazy`: привязать данные Livewire при изменении - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- ### Spinner [](#spinner) Спиннер (индикатор загрузки): ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-23) - `spinner`: тип иконки `border`, `grow` - `color`: Bootstrap цвет `primary`, `danger`, `success` - `text`: текст - `size`: размер `sm`, `lg` --- ### SVG [](#svg) Импорт SVG изображений (в код): ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-24) - `icon`: название картинки/файла, которое находится по пути config('laravel-bootstrap-components.svg\_icons\_public\_path') - `path`: дополнительный путь к файлу (относительно пути в конфиге) --- ### Textarea [](#textarea) Текстовая область: ``` ``` #### Доступные аттрибуты и слоты [](#доступные-аттрибуты-и-слоты-25) - `label`: метка для отображения над вводом - `icon`: Font Awesome название иконки `cog`, `envelope` и т.д. - `prepend`: аддон для отображения перед вводом, можно использовать через именованный слот - `append`: аддон для отображения после ввода, можно использовать через именованный слот - `size`: размер `sm`, `lg` - `help`: вспомогательная метка для отображения под вводом - `model`: Livewire model key - `lazy`: привязать данные Livewire при изменении - `debounce`: время в мс для привязки данных Livewire к клавиатуре, например. `500` - `helper_title`: добавить иконку помощника (tooltip при наведении) - `helper_icon`: иконка помощника - `helper_placement`: направление tooltip --- Пользовательские изменения -------------------------- [](#пользовательские-изменения) ### View [](#view) Используйте свои собственные представления, опубликовав представления пакета: ``` php artisan vendor:publish --tag=laravel-bootstrap-components:views ``` Теперь можете отредактировать файлы внутри `resources/views/vendor/bs`. Пакет будет использовать эти файлы для рендеринга компонентов. ### Icons [](#icons) Используйте свои собственные значки шрифтов, опубликовав конфигурацию пакета: ``` php artisan vendor:publish --tag=laravel-bootstrap-components:config ``` Теперь можете отредактировать значение `icon_class_prefix`внутри `config/laravel-bootstrap-components.php`. Пакет будет использовать этот класс для рендеринга значков. ### Health Score 28 — LowBetter than 52% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community10 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 87% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~15 days Recently: every ~35 days Total 17 Last Release 758d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/82440605?v=4)[tdkomplekt](/maintainers/tdkomplekt)[@tdkomplekt](https://github.com/tdkomplekt) --- Top Contributors [![dizmanaga](https://avatars.githubusercontent.com/u/96566949?v=4)](https://github.com/dizmanaga "dizmanaga (20 commits)")[![tdkomplekt](https://avatars.githubusercontent.com/u/82440605?v=4)](https://github.com/tdkomplekt "tdkomplekt (2 commits)")[![dl-andron](https://avatars.githubusercontent.com/u/43088618?v=4)](https://github.com/dl-andron "dl-andron (1 commits)") ### Embed Badge ![Health badge](/badges/tdkomplekt-laravel-bootstrap-components/health.svg) ``` [![Health](https://phpackages.com/badges/tdkomplekt-laravel-bootstrap-components/health.svg)](https://phpackages.com/packages/tdkomplekt-laravel-bootstrap-components) ``` ### Alternatives [statamic-rad-pack/runway Eloquently manage your database models in Statamic. 135224.7k7](/packages/statamic-rad-pack-runway)[api-platform/laravel API Platform support for Laravel 58171.4k14](/packages/api-platform-laravel)[ecotone/laravel Ecotone for Laravel — CQRS, Event Sourcing, Sagas, Durable Workflows, and Outbox on top of Laravel Queue, via PHP attributes. 21318.6k3](/packages/ecotone-laravel)[duncanmcclean/statamic-cargo Comprehensive e-commerce addon for Statamic. Build bespoke e-commerce sites without the complexity. 3416.7k](/packages/duncanmcclean-statamic-cargo) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)