Функции на Bootstrap

В тази втора статия от поредицата нека да разгледаме функциите на Bootstrap. Това е пълна библиотека от ресурси за проектиране на уеб сайтове и приложения, включително шаблони и елементи за формуляри, шрифтове и менюта, между другото.

В предишна статия спорихме, че има моменти, когато мениджърите на съдържание не са най-добрият вариант и това писането на код от нулата за уебсайт е правилната алтернатива. Това обаче не означава, че трябва да изобретяваме колелото. Използването на рамки като Bootstrap значително намалява времето за проектиране и улеснява получаването на резултати.

Функции на Bootstrap

За да разберем характеристиките на Bootstrap, трябва да разберем промяната на парадигмата в дизайна на уебсайтове.

когато се появиха уебсайтовете просто трябваше да се адаптират към различните размери на мониторите. Но с течение на времето мобилните телефони и таблети все повече се превръщат в предпочитано средство за достъп за потребителите. предизвикателството беше страниците да се адаптират към различните екрани, без потребителят да увеличава, свива или мести съдържанието, за да може да го види.

По принцип бяха възприети следните подходи:

• Адаптивен дизайн: Дизайнът е същият, но автоматично се адаптира към размера на екрана. Този подход има някои проблеми, като например потребителят може да бъде принуден да увеличи мащаба на определени секции от страницата, за да ги види.
• Прогресивен аванс: Започва с проектиране на сайта за устройство с по-малко ресурси (обикновено мобилния телефон, защото има по-малък екран, браузър с по-малко съвместимост за разширени функции и често изисква използването на план за данни за свързване). След завършване, въз основа на този дизайн, се добавят функции за получаване на версията за таблети, преносими компютри и настолни компютри.
• Постепенно разграждане: Това е обратният път. Първо се създава сайтът за настолни компютри и функциите се премахват, докато се получи удобна за мобилни устройства версия.

Тъй като винаги е по-лесно да добавите, отколкото да премахнете, прогресивният напредък е тенденцията, която успя да надделее. б.ootstrap например използва подхода „първо мобилните“., което означава, че основата на дизайна винаги е версията, която ще бъде показана на най-малкия размер на екрана и след това се установяват модификациите, които ще бъдат направени, докато се предава на следващите размери.

Допълнително предимство на използването на Bootstrap е свързано с факта, че Google дава приоритет на удобните за мобилни устройства сайтове в своите търсения.

Друга концепция, която трябва да вземем предвид, е разликата между фронтенд и бекенд дизайн. Предният дизайн се грижи за всичко, което потребителят вижда и всичко, с което взаимодейства. Backend групира това, което се прави на сървъра. Пример за първото е този на уеб формуляр. Показването на поредица от опции се показва като падащо меню е дизайн на интерфейса, че избраната опция се изпраща по пощата или се добавя към база данни е дизайн на бекенда.

Bootstrap е рамка, която комбинира елементи от CSS стил и Javascript програмиране, за да контролира изобразяването и да даде интерактивност на всички компоненти на страница, разработена в HTML5.

Сред нещата, които можем да контролираме с Bootstrap, са:

• достъпност: Компоненти като менюта или диалогови прозорци са съвместими с екранни четци или подходящи за използване от хора с намалена подвижност.
• Бутони: Включително мерки, стилове, състояния и групиране.
• Форми:  Включително изобразяване, типове контроли и проверка на входа.
• Образност: Управлява произхода, подравняването и размера на екрана на вмъкнатите изображения.
• Навигационни елементи: Например скриваеми странични ленти или вертикални или хоризонтални менюта в зависимост от устройството.
• типография: Контролирайте как се показват различните части от текста.
• оформление: Регулиране на изобразяването на съдържание в зависимост от устройството

В следващата статия ще видим някои практически примери за използването му.