Funkcje Bootstrapa

W tym drugim artykule z serii zajmijmy się funkcjami Bootstrapa. Jest to kompletna biblioteka zasobów do projektowania stron internetowych i aplikacji, zawierająca między innymi szablony i elementy formularzy, czcionek i menu.

W Poprzedni artykuł argumentowaliśmy, że czasami menedżery treści nie są najlepszą opcją i że pisanie od podstaw kodu dla strony internetowej jest właściwą alternatywą. Nie oznacza to jednak, że musimy wymyślać koło na nowo. Korzystanie z frameworków, takich jak Bootstrap, znacznie skraca czas projektowania i ułatwia uzyskanie wyników.

Funkcje Bootstrapa

Aby zrozumieć cechy Bootstrapa, musimy zrozumieć zmiana paradygmatu w projektowaniu stron internetowych.

kiedy się pojawili strony internetowe musiały po prostu dostosować się do różnych rozmiarów monitorów. Jednak z biegiem czasu telefony komórkowe i tablety stają się coraz częściej preferowanym środkiem dostępu dla użytkowników. wyzwaniem było dostosowanie stron do różnych ekranów bez konieczności powiększania, zmniejszania lub przesuwania treści, aby móc ją zobaczyć.

W zasadzie przyjęto następujące podejścia:

• Elastyczny projekt: Projekt jest taki sam, ale automatycznie dopasowuje się do rozmiaru ekranu. Takie podejście wiąże się z pewnymi problemami, na przykład użytkownik może być zmuszony do powiększenia niektórych sekcji strony, aby je zobaczyć.
• Postęp progresywny: Rozpoczyna się od zaprojektowania witryny dla urządzenia o mniejszych zasobach (na ogół telefon komórkowy, ponieważ ma mniejszy ekran, przeglądarkę o mniejszej kompatybilności z zaawansowanymi funkcjami i często wymaga korzystania z planu transmisji danych do połączenia). Po zakończeniu, w oparciu o ten projekt, dodawane są funkcje, aby uzyskać wersję na tablety, notebooki i komputery stacjonarne.
• Stopniowa degradacja: To jest droga odwrotna. Witryna komputerowa jest tworzona jako pierwsza, a funkcje są usuwane do momentu uzyskania wersji dostosowanej do urządzeń mobilnych.

Ponieważ zawsze łatwiej jest dodawać niż usuwać, postępujący postęp jest trendem, który zdołał zwyciężyć. B.na przykład ootstrap przyjmuje podejście „najpierw mobilność”, to znaczy, że podstawą projektu jest zawsze wersja, która będzie wyświetlana na najmniejszym ekranie, a następnie ustalane są modyfikacje, które zostaną wprowadzone podczas przekazywania do kolejnych rozmiarów.

Dodatkową zaletą korzystania z Bootstrapa jest fakt, że Google w swoich wyszukiwaniach traktuje priorytetowo witryny przyjazne dla urządzeń mobilnych.

Kolejną koncepcją, którą musimy wziąć pod uwagę, jest różnica między projektowaniem frontendu i backendu. Projekt front-endu dba o wszystko, co widzi użytkownik i wszystko, z czym wchodzi w interakcję. Backend grupuje to, co jest robione na serwerze. Przykładem tego pierwszego jest formularz internetowy. Pokazanie szeregu opcji jest pokazane jako rozwijane menu to projekt frontendu, że wybrana opcja jest wysyłana pocztą lub dodawana do bazy danych to projekt backendu.

Bootstrap to framework, który łączy elementy stylu CSS i programowania JavaScript, aby kontrolować renderowanie i zapewniać interaktywność wszystkim komponentom strony opracowanej w HTML5.

Wśród rzeczy, które możemy kontrolować za pomocą Bootstrapa, są:

• Dostępność: Komponenty, takie jak menu lub okna dialogowe, są zgodne z czytnikami ekranu lub nadają się do użytku przez osoby o ograniczonej sprawności ruchowej.
• Guziki: W tym miary, style, stany i grupowanie.
• Formularze:  W tym renderowanie, typy kontrolek i walidacja danych wejściowych.
• Obrazowość: Kontroluje pochodzenie, wyrównanie i rozmiar ekranu wstawianych obrazów.
• Elementy nawigacyjne: Na przykład, chowane paski boczne lub pionowe lub poziome menu w zależności od urządzenia.
• Typografia: Kontroluj sposób wyświetlania różnych części tekstu.
• Układ: Dostosowywanie renderowania treści w zależności od urządzenia

W następnym artykule zobaczymy kilka praktycznych przykładów jego zastosowania.