Бесплатные виджеты Bootstrap для вашего сайта

Bootstrap — это интерфейсный фреймворк, позволяющий без проблем создавать мобильные сайты. Большая часть Bootstrap обрабатывается через CSS, хотя есть также некоторые плагины, которым нужен JavaScript. Когда вы используете фреймворк на своем сайте, легко вставлять отдельные встроенные компоненты, такие как кнопки, карусели, значки, предупреждения и т. Д. Однако вы также можете создавать собственные виджеты Bootstrap, изменяя код. Вот коллекция некоторых из самых популярных бесплатных виджетов Bootstrap для вашего сайта.

• Это настраиваемые виджеты, созданные с помощью фреймворка Bootstrap 4 и 5.
• Вы можете скопировать и вставить эти виджеты на свой сайт или протестировать их вместе со стартовым шаблоном.
• Мы объяснили каждый виджет с помощью кода и демонстрации, чтобы вы могли просто скопировать и вставить.
• Вы можете дополнительно настроить виджет с помощью собственного кода.

Чтобы объяснить использование виджета в качестве независимого компонента, мы показали, как работать с некоторыми виджетами на сайте Weebly. Хотя Weebly представляет собой простую платформу HTML и CSS, вам может потребоваться настроить некоторые параметры для использования на вашем веб-сайте. Лучшим примером является свойство box-sizing в CSS, вам может потребоваться изменить его на content-box или border-box для определенных элементов в виджете, если вы заметили проблемы с заполнением.

1. Виджет Bootstrap Skewed Card

Первый виджет в списке — это простая карточка, которая будет отображаться в искаженном формате. Это будет элегантно выглядеть на вашем сайте с использованием компонента карточки по умолчанию и минимальной настройки CSS. Ниже приведены некоторые примеры перекошенной карты.

2. Виджет карточки профиля пользователя

Следующий виджет — это красочный виджет профиля пользователя. Вы можете настроить изображение профиля, социальные ссылки и краткое описание в соответствии с вашими потребностями. Это хороший способ привлечь внимание пользователей к вашему сайту.

3. Виджет флип-карты

Флип-карта — это удобный способ показать текстовое содержимое за изображением. Пользователи могут навести на изображение, чтобы прочитать текст. Вы можете вставить одну карточку или несколько флип-карточек, чтобы сделать ее похожей на галерею. Виджет покажет вам, как перевернуть компонент карты в Bootstrap как по горизонтали, так и по вертикали.

4. Член команды Bootstrap с фоном Parallax

Если вы управляете агентством или бизнесом, имеет смысл продемонстрировать всех членов вашей команды на своем веб-сайте. К счастью, вам не нужно тратить слишком много времени, и вот виджет члена команды копирования и вставки для вас. Виджет будет красиво смотреться с параллаксным фоном и социальными иконками.

5. Таблица цен CSS с Bootstrap

Многие пользователи добавляют на свой сайт таблицу цен, используя собственный JavaScript. Хотя JavaScript отлично подходит для этой цели, вы можете использовать полный CSS для создания красивых таблиц цен с помощью Bootstrap. Ниже показано, как будут выглядеть таблицы, и вы можете настроить содержимое и количество столбцов в соответствии с вашими потребностями.

6. Слайдер отзывов

Если у вас много отзывов от пользователей, вот виджет-слайдер для вас. Продемонстрируйте все отзывы своих клиентов в автоматически вращающемся слайдере с изображением и текстом.

7. Цитаты о блоках начальной загрузки

Блочные цитаты полезны для демонстрации цитат, цитирования и справочного содержания. Bootstrap по умолчанию не имеет компонента кавычек. Однако вы можете легко создавать разные стили блочных кавычек, выполняя незначительную настройку кода CSS.

8. Страница CSS Parallax

Вы можете создать эффект параллакса с помощью полного CSS без какого-либо JavaScript. Компонент jumbotron является одним из наименее известных, и вы можете использовать настраиваемый jumbotron для создания страниц с параллаксом во всю ширину.

9. Виджет слайдера «Аккордеон»

Bootstrap 5 представил отдельный компонент аккордеона, который вы можете создать, используя свертывание с предыдущими версиями. Вот виджет слайдера «аккордеон», который можно использовать для вставки любых элементов в стильном стиле «аккордеон».

10. Виджет вертикальной временной шкалы Bootstrap

Вертикальная шкала времени — это способ продемонстрировать события, которые произошли в последовательности. Вы также можете использовать эту временную шкалу для отображения будущих запусков продуктов или мероприятий. Ниже показано, как будет выглядеть виджет вертикальной шкалы времени:

11. Расширенная таблица данных с Bootstrap

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

Резюме

Мы надеемся, что приведенные выше виджеты будут полезны для вашего сайта и сэкономят ваше время. Возможности безграничны с Bootstrap 5, и вы можете создавать новые виджеты или настраивать существующие компоненты в соответствии с вашими потребностями.