Персонализиране на тенденциите, инструментите и рамките на оформлението на Bootstrap
за първоначално зареждане в момента е номер едно предна рамка и лесно най-бързият начин за изграждане на оформления. Той е бил от години и разработчиците от трети страни дори са публикували свои собствени ресурси онлайн. Тези ресурси варират от безплатни теми да се подробни приставки и рамки.
В тази статия бих искал да споделя няколко от тях ресурси и добри практики за разработчици, които искат да продължат с Bootstrap.
Всички ресурси в тази публикация са безплатни, така че можете да ги използвате, колкото ви е удобно. Дори ако никога не сте използвали Bootstrap, със сигурност ще намерите нещо, което ще ви помогне да започнете.
Рестартиране с Bootstrap
Библиотеката по подразбиране Bootstrap идва с нейната собствен уникален дизайн Това изглежда фантастично. Той е широко известен в мрежата и лесно можете да разберете кога даден уебсайт е използване на традиционни елементи на Bootstrap.
Но също така можете рестайлирайте тези елементи сами да използвате кода на Bootstrap като основа за оформлението.
Има няколко различни начина можете да направите това:
- Добавете своя собствена таблица за стилове, за да презапишете по подразбиране.
- Персонализирайте изхода на BootStrap, така че получавате само елементите, които искате.
- Комбинирайте с добавки и приставки / теми.
Тази последна опция е най-често срещаната и това е една от причините Bootstrap да е нараснал толкова бързо.
Разбира се, че съм и голям фен на техните персонализирайте инструмента защото е напълно безплатна и ви дава толкова много контрол кои функции искате да използвате.
Има много ресурси за BootStrap 3/4, създадени от други разработчици, така че е по-лесно от всякога създайте свои уникални оформления на BootStrap без да пише много код.
Приставки и добавки
Тъй като Bootstrap идва с масивна JavaScript библиотека, това е достатъчно лесно разширяване на функциите на JavaScript. И разработчиците със сигурност са направили това с техните собствени плъгини, много освободени за безплатно онлайн.
Това са всичките ми любими поддръжка Bootstrap роден. Много от тях тичам на jQuery, така че те също са лесни за персонализиране, ако знаете пътя си до библиотеката jQuery.
Валидатор на формуляри
Първо е любимата ми плъгин за проверка на формуляри, валидатор на формуляри. Той работи на jQuery и поддържа цял куп фронтенд рамки: Bootstrap, Foundation, Pure, UIKit и други.
Можеш ръчно добавете произволен брой валидатори към всяка форма на сайта Ви. Това означава, че посетителите ще трябва да отговарят на тези изисквания за проверка преди да могат да изпратят съдържанието.
Много форми за контакт използват тези валидатори изискват работещи имейл адреси. Но можете също да ги използвате за качване на изображения или пароли, почти всичко, което желаете от Bootstrap-сърцето.
Избор на дата
Селектори за дата също са огромна болка да се кодираме. Много форми просто използват падащите менюта за настройките ден / месец / година, но можете да използвате и това Приставка за избор на дата за стартиране за да си спестите неприятностите.
Това е напълно отворен код работи в библиотеката Bootstrap 3.x.. Вие също ще го забележите поддържа двете дати и време с помощта на друг плъгин jQuery, Moment.js.
Като цяло, тази библиотека е фантастична, за да получите активен работен избор на дата. Има много зависимости но, за щастие, няма да ви се наложи да пишете много код, за да го използвате.
Оценки със звезди
Ето още една страхотна функция за звезди в мрежата. Можеш добавете оценка "един към пет" навсякъде в сайта Ви, като използвате библиотеката Bootstrap за поведение на JavaScript.
Когато потребителят се движи над тези звезди, дисплеят се променя в зависимост от позицията на курсора. След това, с едно кликване, потребителят ще гласува и ще определи рейтинг, включително рейтинги на полу-звезди.
Този плъгин определено е сложно да се създаде защото можеш промените много от настройките по подразбиране за по-напреднали техники. Но, можете да видите проста демонстрация на живо, за да прецените дали този плъгин за оценка на звезди се вписва в сайта ви.
WATable
Bootstrap идва с неговия собствен стил на оформление на таблицата за показване на таблични данни в интерфейса. Но, с Плаващ плъгин, можете да добавите цял куп допълнителни функции към таблиците на Bootstrap.
Това е един от най-детайлните jQuery плъгини там и това са само някои от функциите, които можете да добавите:
- Персонализиране на страниците.
- Сортиране по колони.
- Филтриране на данни.
- Ефекти за анимация на таблици.
- Поставете отметка за избиране на цели редове.
WATable е описан като a Швейцарски армейски нож за приставки за маса и трябва да се съглася с това описание. Фактът, че той поддържа Bootstrap е само черешката на тортата.
Това бяха някои от любимите ми плъгини, но има толкова много други. Можете да прегледате още повече на тази страница, ако сте любопитни.
Рамки на Bootstrap
Bootstrap всъщност е голяма рамка, защото позволява на потребителите персонализирайте стандартните HTML и CSS стилове по подразбиране с няколко класа.
Но разработчиците са взели по подразбиране библиотеката BootStrap и са добавили свои собствени стилове, за да създадат още по-големи рамки работи като теми, така че не е нужно да презареждате Bootstrap от нулата.
За щастие, всички те са безплатни и всички те работят по подразбиращите се класове BootStrap.
Bootflat
Може би най-известната рамка на BootStrap е Потребителски интерфейс на Bootflat че следва тенденцията на плосък дизайн.
Тя работи с всички функции на Bootstrap по подразбиране, включително всички JavaScript компоненти. Основните разлики са повече в дизайн и структура където елементите на страницата използват плоски цветови схеми, за да се отдалечат от стиловете на градиента на Bootstrap.
Bootflat не е използван прекалено много, така че можете да добавите тази рамка на всяка целева страница или начална страница, за да създадете уникален облик на сайта си.
Това е 100% безплатно и дори идва с средство за избиране на цвят, така че можете да намерите плоски цветови схеми, които да съответстват на оформлението ви.
Вземи лайна
Това учудващо тъп UI комплект също се основава на библиотеката Bootstrap 3 и е пусната безплатно в GitHub.
Get Shit Done идва от екипа на Creative Tim, където продават няколко премиум ресурса. Този специфичен UI комплект има професионална версия, но изобщо не е необходима.
Версията с отворен код има повече от достатъчно за всички и можете да проверите демо на живо за да видите как изглежда в браузъра.
Дизайн на материала на 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 редактор на живо е един от най-добрите инструменти за нетехнически дизайнери. Ако не знаете как да кодирате, можете да разчитате на този Bootstrap builder, за да създадете цялото оформление от нулата.
То работи точно в браузъра ви можете дори да изберете от предварително направени шаблони, за да започнете.
Опциите в страничната лента ви позволяват добавяте някои CSS стойности ако знаете кодиране на интерфейса. Но можете също да използвате графичния интерфейс, за да промените цветовете, шрифтовете, размерите и почти всичко друго, което ви харесва.
След като свършите, кликване “Вземи тема” и можете да копирате / поставите актуализираните CSS стилове във вашия собствен проект. Супер лесен начин за презареждане на Bootstrap без да е необходимо да се прекодира всичко от нулата.
Формиране на формуляр
Това безплатно Създател на формуляри за стартиране е инструмент за изтегляне и пускане което ви позволява да създавате Bootstrap форми от нулата.
Отново изисква нулево кодиране и имате пълен достъп до всички елементи на Bootstrap 3. Просто изберете елемента, който искате, и го плъзнете право в лявата кутия. Оттук можете да промените всичко от текста на контейнера до CSS класа.
Безплатни \ tБез най-готините форма строител съм виждал и е 100% безплатно!
BootSwatchr
Друг безплатен инструмент, който наистина харесвам, е BootSwatchr. Тя разчита на рамката на Bootstrap и ви позволява актуализирайте цветовете, стиловете на темите, и цялостно оформление на страницата.
Това, което ми харесва в това приложение е как идва с a безплатна галерия от предварително проектирани стилове.
Така че, можете да изтеглите дизайн, който някой вече е направил или можете да го използвате като отправна точка за персонализиране на собствената си тема.
Движа се напред
Bootstrap става все по-популярна, така че сега е най-подходящото време да се потопите в тази рамка. За щастие има десетки плъгини, рамки и безплатни инструменти, които можете да използвате, за да ускорите процеса.
В тази статия току-що показах върха на айсберга, така че ако не виждате нищо тук, това е полезно, излезте в Google и вижте какво още можете да намерите.
