Налаштування Тенденцій макетів Bootstrap, інструментів і фреймів
Bootstrap в даний час номер один фронт-енд фреймворк і легко найшвидший спосіб побудови макетів. Вона існує вже багато років, а сторонні розробники навіть опублікували власні ресурси в Інтернеті. Ці ресурси варіюються від безкоштовні теми до докладні плагіни та рамки.
У цій статті я хотів би поділитися кількома з них ресурсів і кращих практик для розробників, які хочуть піти далі з Bootstrap.
Всі ресурси на цій посаді безкоштовні, щоб ви могли використовувати їх, як ви вважаєте за потрібне. Навіть якщо ви ніколи не користувалися Bootstrap, ви обов'язково знайдете тут щось, що допоможе вам розпочати роботу.
Рестайлінг за допомогою Bootstrap
Бібліотека Bootstrap за замовчуванням поставляється з її власний унікальний дизайн це виглядає фантастично. Це широко відоме в Інтернеті, і ви можете легко дізнатися, коли веб-сайт використовуючи традиційні елементи Bootstrap.
Але, ви також можете рестайлінг цих елементів самостійно використовувати код Bootstrap як основу для вашого макета.
Існує кілька різних способів Ви можете зробити це:
- Додайте власну таблицю стилів, щоб перезаписати значення за замовчуванням.
- Налаштуйте вихід BootStrap, щоб ви отримували лише потрібні елементи.
- Поєднуйте з додатками та додатками / темами.
Цей останній варіант є найбільш поширеним, і це одна з причин, чому Bootstrap настільки швидко зросла.
Звичайно я також є великим шанувальником їх налаштувати інструмент тому що це абсолютно безкоштовно і дає вам такий великий контроль які функції потрібно використовувати.
Існує безліч ресурсів для BootStrap 3/4, створених сторонніми розробниками, так що це легше, ніж будь-коли створити власні унікальні макети BootStrap без написання великого коду.
Додатки та доповнення
Оскільки Bootstrap поставляється з масивною бібліотекою JavaScript, це досить легко розширити функції JavaScript. І розробники, звичайно, зробили це своїми плагінами, багато випустили безкоштовно онлайн.
Це мої улюблені, що все підтримка Bootstrap нативним чином. Багато з них запустити на jQuery, тому вони також легко налаштовуються, якщо ви знаєте свій шлях у бібліотеці jQuery.
Форма валідатора
Спочатку це мій улюблений форма перевірки плагіна, Form Validator. Він працює на jQuery і підтримує цілу купу фронтендів: Bootstrap, Foundation, Pure, UIKit та інші.
Ти можеш вручну додати будь-яку кількість 51 валідаторів будь-якої форми на вашому сайті. Це означає, що відвідувачі повинні відповідати цим вимогам перевірки, перш ніж вони зможуть подати вміст.
Багато контактних форм використовують ці валідатори потрібні робочі адреси електронної пошти. Але ви також можете використовувати їх для завантаження зображень або паролів, майже все, що бажає ваш Bootstrap-heart.
Вибір дати
Збирачі дат також величезний біль, щоб кодувати себе. Багато форм просто використовують випадаючі меню для налаштування дня / місяця / року, але ви також можете використовувати це Додаток вибору дати завантаження щоб врятувати себе клопоту.
Це повністю відкритий код працює на бібліотеці Bootstrap 3.x. Ви також помітите це підтримує обидві дати і час за допомогою іншого додатка jQuery, Moment.js.
Загалом, ця бібліотека є фантастичною, щоб отримати активний вибору дату вибору. Це має багато залежностей але, на щастя, вам не потрібно буде писати багато коду, щоб його працювати.
Рейтинг зірочок
Ось ще одна цікава функція для рейтинги зірок в Інтернеті. Ти можеш додайте рейтинг "один-до-п'яти" будь-де на вашому сайті, використовуючи бібліотеку Bootstrap для поведінки JavaScript.
Коли користувач зависає над цими зірками, дисплей змінюється, незалежно від рейтингу, заснованого на позиції курсора. Потім, одним клацанням миші, користувач віддає свій голос і встановлює рейтинг зірки, включаючи рейтинги на пів-зірки.
Цей плагін визначено складно налаштувати тому що ви можете змінити багато налаштувань за промовчанням для більш просунутих методів. Але, ви можете побачити простий демо-показ, щоб оцінити, чи відповідає цей плагін зірочкою для вашого сайту.
Водонепроникний
Bootstrap поставляється з його власний стиль макета таблиці для відображення табличних даних на інтерфейсі. Але, з Плавний плагін, Ви можете додати цілу купу додаткових функцій до таблиць Bootstrap.
Це один з найдетальніших модулів jQuery, які є лише деякими функціями, які можна додати:
- Користувальницькі сторінки.
- Сортування стовпців.
- Фільтрація даних.
- Ефекти анімації таблиці.
- Позначте цілі рядки.
Водонепроникний описаний як a Швейцарський армійський ніж столу плагінів і я повинен погодитися з цим описом. Той факт, що він підтримує Bootstrap - це лише глазур на торті.
Це були деякі з моїх улюблених плагінів, але є багато інших. Ви можете переглядати ще більше на цій сторінці, якщо вам цікаво.
Рамки Bootstrap
Bootstrap фактично є великим фреймворком, оскільки дозволяє користувачам налаштуйте стилі HTML та CSS за замовчуванням з декількома класами.
Але, розробники взяли бібліотеку BootStrap за замовчуванням і додали свої власні стилі, щоб створити ще більші рамки працювати як теми, так що вам не потрібно рестайлінгу Bootstrap з нуля.
На щастя, всі вони вільні, і всі вони працюють на класах BootStrap за замовчуванням.
Bootflat
Можливо, найвідомішою структурою BootStrap є Інтерфейс користувача Bootflat що слідкує за тенденцією плоского дизайну.
Він працює з усі функції Bootstrap за замовчуванням, включаючи всі компоненти JavaScript. Основні відмінності більше в Росії дизайн і структура де елементи сторінки використовують плоскі кольорові схеми, щоб відійти від стилів градієнта Bootstrap.
Bootflat не використовувався дуже багато, тому ви можете додати цю рамку на будь-яку цільову сторінку або домашню сторінку, щоб створити унікальний вигляд вашого сайту.
Це на 100% безкоштовно і навіть поставляється з вибір кольору, так що ви можете знайти плоскі кольорові схеми, які відповідають вашому плануванню.
Отримайте Shit Done
Це напрочуд тупий комплект UI також створює поверх бібліотеки Bootstrap 3 і безкоштовно випускається на GitHub.
Get Shit Done приходить з команди Creative Tim, де вони продають кілька ресурсів преміум-класу. Цей конкретний набір користувальницького інтерфейсу має про-версію, але це не потрібно взагалі.
Версія з відкритим кодом має більше, ніж достатньо для всіх, і ви можете перевірити демо щоб побачити, як він виглядає у веб-переглядачі.
Дизайн матеріалу Bootstrap
Ще однією популярною тенденцією дизайну є Дизайн матеріалу Google. Це мова дизайну, спочатку створена для дизайнерів додатків Android, але з тих пір поширюється на павутину і отримав велику підтримку від дизайнерів UI / UX.
Цей неймовірний матеріал Bootstrap використовує особливості дизайну матеріалу створити власний стиль дизайну з бібліотеки Bootstrap.
За замовчуванням це підтримує все в BootStrap 3 і в даний час переробляється, щоб також підтримувати Bootstrap 4. Ви можете дізнатися більше на офіційній домашній сторінці, яка має документацію та демонстраційні версії.
Подібну бібліотеку можна спробувати MDBootstrap, хоча я вважаю, що це трохи важче працювати.
Bootplus
Google створив мову дизайну матеріалу, але вони також мають власний стиль для багатьох своїх інструментів і веб-додатків.
Bootplus імітує стиль інтерфейсу Google+, разом з багатьма довідковими документами Google, Диском Google і подібними веб-програмами. Він має всі ті ж функції, що й Bootstrap, включаючи сітки, стилі оформлення, стилі елементів і компонентів JavaScript.
Ви навіть можете переглядати демо на сайті, щоб побачити відмінності між Bootplus і оригінальним інтерфейсом Bootstrap. Для вільного ресурсу, Bootplus є великим, і він ідеально підходить для тих, хто любить методи дизайну Google.
Інструменти та ресурси
Нарешті, я хочу поринути у безліч безкоштовних інструментів налаштування та створення макетів Bootstrap.
Ці інструменти - це всі веб-програми, і багато з них навіть відкриті на GitHub. Вони зроблені, щоб заощадити ваш час і допомогти вам створити неймовірні макети Bootstrap без особливого коду.
Редактор у прямому ефірі
Безкоштовно Редактор завантажувального диска є одним з кращих інструментів для нетехнічних розробників. Якщо ви не знаєте, як кодувати, ви все ще можете розраховувати на цей конструктор Bootstrap, щоб створити весь макет з нуля.
Це працює у вашому веб-переглядачі і ви навіть можете вибрати з готових шаблонів, щоб розпочати роботу.
Параметри в бічній панелі дозволять вам додати певні значення CSS якщо ви знаєте деякі коди інтерфейсу. Але, ви також можете використовувати графічний інтерфейс для зміни кольорів, шрифтів, розмірів і майже все, що вам подобається.
Як тільки ви закінчите, натисніть “Отримати тему” і ви можете скопіювати / вставити оновлені стилі CSS у свій проект. Супер легкий спосіб перезавантаження Bootstrap без необхідності перекодувати все з нуля.
Формувач форм
Це безкоштовно Конструктор форм завантаження є інструмент перетягування і перетягування що дозволяє створювати форми Bootstrap з нуля.
Знову ж таки вимагає знання нульового кодування і ви маєте повний доступ до всіх елементів Bootstrap 3. Просто виберіть потрібний елемент і перетягніть його праворуч у вікно ліворуч. Тут ви можете змінити все, від тексту заповнювача до класу CSS.
На сьогоднішній день найкрутіший будівельник форм, який я коли-небудь бачив, і на 100% безкоштовний!
BootSwatchr
Інший безкоштовний інструмент, який мені дуже подобається BootSwatchr. Вона спирається на рамки Bootstrap і дозволяє вам оновлення кольорів, стилів тем, і загальний макет сторінки.
Що мені подобається в цьому додатку, це те, як він також поставляється з безкоштовна галерея попередньо розроблених стилів.
Таким чином, ви можете завантажити дизайн, який хтось вже зробив або ви можете використовувати це як відправну точку для налаштування власної теми.
Рухатися вперед
Bootstrap тільки зростає популярність, тому зараз найкращий час зануритися в ці рамки. На щастя, існують десятки плагінів, фреймворків і безкоштовних інструментів, які можна використовувати для прискорення процесу розробки.
У цій статті я просто показав вершину айсберга, так що якщо ви не бачите тут нічого корисного, вийдіть до Google і подивіться, що ще можна знайти.
