Praca ze stronami internetowymi wymaga znacznie więcej niż tylko znajomości języków, których musimy używać, istnieje szereg kamieni milowych, które musimy spełnić, aby opracować produkt z wyjątkowym rezultatem. Jednym z tych kamieni milowych jest projekt i rozmieszczenie elementów, które będą wyświetlane na ekranie.
Wyobraźmy sobie, że musimy zaprojektować stronę internetową, jeśli zaczynamy od zera, musimy wziąć pod uwagę to, jak powinno wyglądać menu, tabele, przyciski, rzeczy tak proste jak ikony, które umieścimy na niektórych przyciskach akcji itp.
Jak widzimy, jest to ciężka praca, zwłaszcza jeśli chcemy, aby wyglądała optymalnie i była atrakcyjna, musimy również być szczegółowi, aby nadać witrynie osobisty charakter, a co jeśli nie jesteśmy projektantami? To jest wielkie pytanie, są programiści, którzy przymykają oko, jeśli chodzi o dobry gust i design, a tego typu profile są powstrzymywane, aby tworzyć wysokiej jakości wyglądy w sieci. A co jeśli mamy dobry gust, ale mało czasu na projektowanie?
Aby rozwiązać te dwa wielkie wymagania, mamy Bootstrap co jest niczym więcej niż Struktura CSS to pozwala nam uzyskać podstawowy aspekt naszej strony od razu bez cierpienia z powodu projektowania, ale oprócz tego pomaga nam również w podstawowych efektach i bardzo specjalnym sposobie strukturyzacji treści, które zamierzamy zaprezentować.
Zalety BootstrapaJuż to wiemy Bootstrap to jest Struktura CSS i to pomaga nam ustalić podstawowe aspekty naszej strony internetowej, ale oprócz tego ma pewne zalety w zakresie jej użytkowania, poniżej zobaczymy niektóre z pozytywnych rzeczy, które nam przynosi Bootstrap:
1. Ponowne użycieZ Bootstrap Domyślnie posiadamy wiele komponentów, dzięki czemu możemy używać ich bez modyfikacji w różnych częściach naszego serwisu, skracając w ten sposób czas i ilość używanego przez nas kodu. Sprzyja to również modułowemu rozwojowi naszych aplikacji.
2. SpójnośćDzięki temu, że mamy wiele komponentów wykonanych w sposób generyczny, kod jest spójny, czyli obsługuje bardzo podobne struktury, więc czytając go, czy utrzymując aplikację będziemy już wiedzieli jak to działa dużo prościej.
3. Elastyczny projektProjekt mobilny jest bardzo ważny i Bootstrap bierze to pod uwagę od samego początku, mamy elastyczność, że nasza strona automatycznie dostosowuje się do różnych rozdzielczości i układów ekranu, oszczędzając nam wiele pracy od konieczności projektowania widoków mobilnych od podstaw.
4. SpołecznośćInnym aspektem, który należy wziąć pod uwagę, jest dokumentacja, kiedy korzystamy z zewnętrznych ram, bardzo ważne jest, aby mieć gdzie się zwrócić, gdy mamy wątpliwości i w tym sensie Bootstrap Nie ma porównania, ponieważ bez większego wysiłku możemy uzyskać niemal każdą odpowiedź na nasze wątpliwości.
Wady BootstrapaChociaż prawie wszystko jest dobre, musimy też porozmawiać o wadach lub nie tak dobrych aspektach, z którymi mamy do czynienia, gdy z tego korzystamy Struktura CSSZobaczmy poniżej niektóre z jego słabości.
1. Mały oryginałJeśli nie poświęcimy trochę czasu na wykonanie naszego projektu, możemy pozostać tak mało oryginalni, jeśli użyjemy Bootstrap bez więcej, chociaż ten framework jest do tego przeznaczony, ze względu na świetne przyjęcie, jakie miał, musimy trochę więcej popracować, aby nie wyglądać jak kopia kopii.
2. Krzywa uczenia sięJak wszystko, musimy przejść krzywą uczenia się, jeśli chcemy uzyskać z tego jak najwięcej, problem polega na tym, że jeśli chcemy przejść od podstawowego do zaawansowanego, szok jest trochę silny.
3. Słaba kompatybilność między wersjamiGdy nastąpi zmiana wersji, poprzednia wersja traci dużo na ważności i jeśli będziemy chcieli zaktualizować będzie to nas kosztować, zwłaszcza jeśli dokonaliśmy ważnych zmian, aby nasza strona wyglądała inaczej.
InstalacjaKiedy już wiemy, co to jest Bootstrap, oraz zalety i wady używania go w naszych projektach, musimy przejść do praktycznej części samouczka, teraz dowiemy się skąd możemy wziąć ten framework i jak możemy go włączyć do naszego projektu.
Zdobywanie BootstrapaPierwszą rzeczą, którą musimy zrobić, to uzyskać niezbędne pliki do włączenia Bootstrap w naszym projekcie, dlatego musimy odwiedzić ich stronę getbootstrap.com i pobrać potrzebne pliki lub alternatywnie użyć CDN aby uniknąć hostingu plików na naszym serwerze i zmniejszyć wykorzystanie naszej przepustowości.
Niezależnie od opcji, musimy znajdować się na stronie podobnej do poniższej, jeśli klikniemy przycisk wstępnego pobierania podczas odwiedzania strony z frameworkiem:
POWIĘKSZAĆ
Aby ułatwić pracę, załóżmy, że pobraliśmy projekt, jest on w postaci skompresowanego pliku, który musimy rozpakować w lokalizacji, z której możemy skorzystać i który powinien wyglądać podobnie do poniższego:
Jak widać, w ramach naszego projektu muszą znajdować się trzy foldery, jeden na CSS, drugi dla używanych źródeł i wreszcie jeden dla JS niezbędny. Dzięki temu mamy już dostępne Bootstrap, czyli nic innego jak skopiowanie projektu do naszego folderu zasobów.
Zacznij korzystać z BootstrapaPonieważ posiadamy wszystkie zasoby, musimy uwzględnić je w naszym projekcie, w tym celu możemy stworzyć plik HTML i tam wykonaj niezbędne inkluzje, możemy to zobaczyć bardziej szczegółowo w poniższym kodzie:
Instalowanie BootstrapaJak widać, jedyne, co zrobiliśmy, to dołączenie trzech plików, a konkretnie dwóch .css i .js, to jest to, czego potrzebujemy, aby zacząć korzystać z całej struktury, jeśli teraz otworzymy nasz plik w przeglądarce, zobaczymy, jak czcionka liter różni się od tej, którą normalnie zobaczylibyśmy z etykietą H1:
Siatka BootstrapaAby osiągnąć organizację naszych projektów, Bootstrap użyj siatki lub krata, składa się z 12 kolumn, więc wszystko, co widzimy na naszym ekranie, musi być zorganizowane w ten sposób, dzięki czemu strona może być ustrukturyzowana w taki sposób, abyśmy mogli korzystać z oferowanych nam narzędzi w bardzo przejrzysty sposób.
Oczywiście jest to proces adaptacyjny, ale ważne jest to, że możemy tworzyć kolumny grupujące kilka, a także gdy pracujemy z tabelami HTML że możemy tworzyć kolumny z kilkoma połączeniami za pomocą właściwości span. Aby stworzyć stronę internetową wykorzystującą tę strukturę, musimy mieć tylko:
Div z klasą pojemnik, w tym div z klasą wiersz, a na koniec wewnątrz jednego lub więcej divów z klasą kapusta, zobaczmy w poniższym kodzie przykład strony z 3 kolumnami, w tym przypadku każda kolumna musi zgrupować 4, aby dodać w sumie 12, co wyjaśniliśmy, jest domyślną wartością Bootstrap.
Kolumny w BootstrapiePowoduje to powstanie strony, na której trzy wewnętrzne elementy div znajdują się w jednym rzędzie podzielonym na trzy równe kolumny, jak widać na poniższym obrazku:Przykład jak używać kolumn w bootstrapie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam ułatwia moje in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien siedzieć amet mauris aliquet mocm. Integer aliquet metus eget orci egestas varius. Fusce suscippit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tylko ex, prośba o efficitur vel, placerat sit amet purus. Cras id semper felis. Bądź ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam ułatwia moje in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien siedzieć amet mauris aliquet mocm. Integer aliquet metus eget orci egestas varius. Fusce suscippit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tylko ex, prośba o skuteczność, placerat sit amet purus. Cras id semper felis. Bądź ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam ułatwia moje in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien siedzieć amet mauris aliquet mocm. Integer aliquet metus eget orci egestas varius. Fusce suscippit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam tylko ex, prośba o skuteczność, placerat sit amet purus. Cras id semper felis. Bądź ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
POWIĘKSZAĆ
Ta struktura, mimo że wygląda nieco kwadratowo, jest bardzo elastyczna, ponieważ wystarczy zrobić coś w rodzaju gry z kontenerami i ich kolumnami, aby osiągnąć pożądane rezultaty. Na tym kończymy ten samouczek, skutecznie podjęliśmy pierwsze kroki z Bootstrap a teraz możemy zacząć korzystać z jego zalet bardziej bezpośrednio na naszych projektach lub aplikacjach internetowych.
