TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Безкоштовні віджети Bootstrap для вашого сайту

14

Bootstrap-це фронтенд-фреймворк для створення веб-сайтів, зручних для мобільних пристроїв, без проблем. Основна частина Bootstrap обробляється за допомогою CSS, а також є деякі плагіни, яким потрібен JavaScript. Коли ви використовуєте фреймворк на своєму сайті, легко вставляти окремі вбудовані компоненти, такі як кнопки, каруселі, значки, сповіщення тощо. Однак ви також можете створити власні віджети Bootstrap, змінивши код. Ось колекція деяких із найпопулярніших безкоштовних віджетів Bootstrap для вашого веб -сайту.

  • Це спеціальні віджети, створені з фреймворком Bootstrap 4 та 5.
  • Ви можете скопіювати та вставити ці віджети на свій сайт або протестувати разом із шаблоном початківця.
  • Ми пояснили кожен віджет з кодом та демонстрацією, так що ви можете просто скопіювати та вставити.
  • Ви можете додатково налаштувати віджет за допомогою власного коду.

Щоб пояснити використання віджета як незалежного компонента, ми показали, як працювати з деякими віджетами на веб -сайті Weebly. Хоча Weebly – це звичайна платформа HTML і CSS, можливо, вам доведеться налаштувати деякі параметри для використання на своєму веб -сайті. Найкращий приклад-це властивість розміру вікна в CSS. Можливо, вам доведеться змінити це на поле вмісту або рамку-поле для певних елементів віджета, якщо ви помітили проблеми з заповненням.

1 Віджет завантаженої картки з нахилом

Перший віджет у списку – це проста картка, яка відображатиметься у викривленому форматі. Це елегантно виглядатиме на вашому сайті, використовуючи стандартний компонент картки та мінімальну настройку CSS. Нижче наведено деякі приклади перекошеної картки.

Безкоштовні віджети Bootstrap для вашого сайту

Перекошена карта з простим текстом

Безкоштовні віджети Bootstrap для вашого сайту

+8 градусів по осі Х

Безкоштовні віджети Bootstrap для вашого сайту

Перекошена карта з -8 градусів по осі X

2 Віджет картки профілю користувача

Наступний віджет – це барвистий віджет профілю користувача. Ви можете налаштувати зображення профілю, соціальні посилання та короткий опис відповідно до ваших потреб. Це хороший спосіб продемонструвати користувачів на вашому сайті.

Безкоштовні віджети Bootstrap для вашого сайту

Картка користувача з зображенням лівого профілю

Безкоштовні віджети Bootstrap для вашого сайту

Картка профілю користувача Bootstrap

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

Фліп -картка – це корисний спосіб відображення текстового вмісту за зображенням. Користувачі можуть навести курсор на зображення, щоб прочитати текст. Ви можете вставити одну картку або кілька фліп -карт, щоб зробити її схожою на галерею. Віджет покаже, як перевернути компонент картки в Bootstrap у горизонтальному та вертикальному напрямку.

Безкоштовні віджети Bootstrap для вашого сайту

Завантажувальний горизонтальний віджет для карт

Безкоштовні віджети Bootstrap для вашого сайту

Завантажувальний вертикальний віджет для карт

4 Член команди Bootstrap з фоном Parallax

Якщо ви керуєте агентством або бізнесом, має сенс представити всіх членів вашої команди на своєму веб -сайті. На щастя, вам не потрібно витрачати занадто багато часу, і ось вам віджет команди для копіювання та вставки. Віджет буде красиво виглядати з фоном паралаксу та соціальними іконками.

Безкоштовні віджети Bootstrap для вашого сайту

Віджет учасника команди Bootstrap з фоном Parallax

5 Таблиця цін CSS з Bootstrap

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

Безкоштовні віджети Bootstrap для вашого сайту

Віджет таблиці цін CSS

6 Повзунок відгуку

Якщо у вас багато відгуків користувачів, ось вам віджет -слайдер. Продемонструйте всі відгуки ваших клієнтів у автоматично обертається слайдері із зображенням та текстовим вмістом.

Безкоштовні віджети Bootstrap для вашого сайту

Дві рівні колонки Свідоцтво про повзунок

7 Котирування блоків Bootstrap

Блокові цитати корисні для демонстрації цитат, цитат та довідкового вмісту. Bootstrap не має компонента лапки за замовчуванням. Тим не менш, ви можете легко створити різні стилі цитат блоків, виконавши незначну настройку коду CSS.

Безкоштовні віджети Bootstrap для вашого сайту

Стилі блочних цитат початкового завантаження

8 Сторінка паралаксу CSS

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

Безкоштовні віджети Bootstrap для вашого сайту

Bootstrap Parallax Page з Jumbotron

9 Віджет слайдера

Bootstrap 5 представив окремий компонент баяна, який можна створити за допомогою згортання з попередніми версіями. Ось віджет -слайдер, який можна використовувати для вставлення будь -яких елементів у стильному стилі акордеона.

Безкоштовні віджети Bootstrap для вашого сайту

Bootstrap Accordion Content Slider

10 Віджет вертикальної часової шкали Bootstrap

Вертикальна шкала часу – це спосіб продемонструвати події, що відбулися в послідовності. Ви також можете використовувати цю шкалу часу для показу майбутніх випусків продуктів або подій. Нижче показано, як буде виглядати віджет вертикальної шкали часу:

Безкоштовні віджети Bootstrap для вашого сайту

11 Розширена таблиця даних з Bootstrap

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

Безкоштовні віджети Bootstrap для вашого сайту

Розширена таблиця даних

Резюме

Сподіваємось, що вищезазначені віджети стануть у нагоді для вашого веб -сайту та заощадять ваш час. Можливості безмежні з Bootstrap 5, і ви можете створювати нові віджети або налаштовувати наявні компоненти відповідно до ваших потреб.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі