Nauka korzystania z siatki Bootstrap

Bootstrap zarządza strukturą opartą na siatce lub znanym również jako Krata, czyli nic innego jak układ na ekranie, który pomaga nam uporządkować nasze elementy, to tak, jakbyśmy podzielili ekran na wiersze i kolumny i potraktowali go jak dużą tabelę.
Ten rodzaj manipulacji skłania nas do myślenia o projektach w „wyjątkowy” sposób i w momencie, gdy mamy trochę więcej doświadczenia w używaniu Bootstrap Zaczniemy widzieć wszystko w ten sposób, dzięki czemu nabierzemy konsekwencji i szybkości w naszym sposobie pracy.
Pierwszą rzeczą, którą należy wiedzieć, jest to, że ten projekt Krata pozwala nam pracować w taki sposób, abyśmy mogli natywnie implementować widoki mobilne, oczywiście od wersji 3 Bootstrap, dzięki temu, że ta wersja została zbudowana z myślą o projektowaniu mobilnym.
W poprzednich wersjach frameworka klasy musiały być określane bezpośrednio, aby nasz projekt miał możliwość dostosowania się do rozdzielczości urządzeń mobilnych, teraz różne klasy Krata robią to automatycznie.
Aby skorzystać z tej funkcji, musimy myśleć od małych do dużych, to znaczy, że klasy, które stosujemy, muszą być zawsze traktowane jako najmniejsze, a następnie skalują się do innych rozdzielczości, czyli jeśli zdefiniujemy a klasa sm (mały lub mały), automatycznie Bootstrap zakłada, że ​​jest to wyrażenie minimalne i można je następnie przeskalować do md (mediana) lub do LG (duża).
Zanim przejdziemy do bardziej praktycznych przykładów, musimy zrozumieć, jakich klas możemy użyć w kolumnach a Krata I musimy też wiedzieć, w jakim przypadku każdy z nich ma zastosowanie, w ten sposób projektując naszą stronę możemy wziąć pod uwagę najmniejsze urządzenie, do którego chcemy dotrzeć.
Dzięki takiemu podejściu możemy budować witryny Przyjazny dla urządzeń mobilnych, jak ważne stają się one dzisiaj dla wyszukiwarek i ich wyników, pomagając nam, oprócz tworzenia dobrych witryn, zdobywać punkty w naszej reputacji SEO, oczywiście z tą samą pracą.
Ekrany telefonuJest to najmniejsze urządzenie, które teoretycznie może poruszać się w naszym projekcie, chociaż rozdzielczości telefonów zostały stopniowo przekonwertowane na Full HD, jest to generalnie dla najwyższej półki, podczas gdy średni zakres i zakres niski, który teoretycznie jest większość utrzymuje znacznie niższe rozdzielczości. Rodzaj Krata dotyczy to tego przypadku: col-xs- i dotyczy rozwiązań mniejszych niż szerokość 768 pikseli.
Ekrany tabletówSą teoretycznie drugim najmniejszym urządzeniem, dzięki większej proporcji rozmiaru tablet oferuje większą powierzchnię nawigacyjną, dzięki czemu możemy korzystać z nieco większej ilości treści niż z ekranu telefonu, dodatkowo na ogół na tabletach nawigacja odbywa się poziomo. Klasa, która dotyczy tego urządzenia to kol-sm- i dotyczy rozdzielczości o szerokości większej niż 768 pikseli i pod 992 piksele.
Sprzęt do małego ekranuSą to na ogół te należące do niskiej gamy komputerów stacjonarnych i laptopów, mogą to być urządzenia z ekranami mniejszymi niż 15 cali, lub mające więcej niż 10 lat życia, są to również laptopy przeznaczone dla studentów i sektora o niskim siła nabywcza, jest to sektor większościowy. Klasa, która ma zastosowanie w tym przypadku to col-md-, a rozdzielczości graniczne dla szerokości są większe niż 992 piksele i mniej niż 1200 pikseli.
Sprzęt wielkoekranowyTutaj możemy zaszufladkować najnowocześniejszy sprzęt, a także ekrany powyżej 15 cali, w tej kategorii wkraczają nowe urządzenia takie jak ultraprzenośne, o rozdzielczości 4K, czy QHD także tam, gdzie widzimy powierzchnie większe niż 1080p. Wykluczając szerokości, które będziemy tu obsługiwać, to te większe niż 1200 pikseli, tym razem kolejna wersja Bootstrap prawdopodobnie.
Ponieważ znamy teorię systemu, Krata z Bootstrap, Dobrze jest zacząć robić jego praktyczne zastosowanie, ale zanim zobaczymy kod musimy zrozumieć jeszcze kilka pojęć, zawsze musimy zgodnie z konwencją i najlepszymi praktykami używać elementu z klasą pojemnik, ponieważ spowoduje to utworzenie kontenera, jak wskazuje jego nazwa, aby zachować nasze różne kolumny. Inną koncepcją, o której musimy wiedzieć, jest to, że zawsze będzie 12 kolumn, więc różne kombinacje, które tworzymy, muszą uwzględniać tę liczbę.
W poniższym przykładzie stworzymy kod dla układu 3 dużych kolumn, użyjemy klasy kol-md- a ponieważ chcemy mieć 3 równe kolumny, dzieląc 12 przez 3 otrzymujemy liczbę 4, więc będzie to rozmiar każdej z naszych wynikowych kolumn.
Spójrzmy na kod bez dalszych ceregieli:

 Siatka Bootstrapa
Przykład jak używać kolumn w bootstrapie


Kolumna a
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.
Kolumna B
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.
Kolumna C
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.

Struktura jest bardzo prosta, stworzyliśmy div z klasą pojemnik, a wewnątrz div z klasą wiersz w końcu w ramach tej ostatniej utworzyliśmy 3 div z klasą col-md-4 Jest to klasa małych ekranów dla komputerów nieprzenośnych i widzimy, jak ukuliśmy liczbę 4, która wskazuje, że każdy div z nich odpowiada 4 kolumnom Krata. Zobaczmy, jak to wygląda, gdy uruchomimy w naszej przeglądarce:

POWIĘKSZAĆ

Jeśli zauważymy, mamy 3 duże kolumny, ale co się stanie, gdy zmniejszymy rozmiar do rozdzielczości niższej niż minimum zastosowanej klasy, ponieważ kolumny będą po prostu ułożone jedna na drugiej, jak widzimy w następujący obraz:

POWIĘKSZAĆ

Chociaż nie jest to zła rzecz, czasami nie jest to zachowanie, które chcemy, aby nasz projekt przyjął, w tym celu możemy uwzględnić zachowania bezpośrednio z klasami dla różnych rozdzielczości, zobaczmy w poniższym kodzie, jak zmieniamy klasy różne kolumny, aby osiągnąć inny wynik:

 Siatka Bootstrapa
Przykład jak używać kolumn w bootstrapie

Kolumna a
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.
Kolumna B
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.
Kolumna C
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.

Teraz, jeśli zauważymy w naszym kodzie, wszystko pozostaje takie samo, z wyjątkiem naszych klas, gdzie dla kolumn A i B dodaliśmy klasę kol-sm-6 a dla kolumny C klasa kol-sm-12, oznacza to, że gdy rozdzielczość zostanie zmniejszona, rządzą klasy sm, jak widać na poniższym obrazku:

POWIĘKSZAĆ

Widzimy, że w tym samym rozmiarze, co w pierwszym przykładzie, kolumny A i B zamiast być ułożone w stos, znajdują się w tym samym regionie, a kolumna C zajmuje jeden wiersz dla siebie. Tutaj widzimy wielką użyteczność Krata zwłaszcza w przypadku projektów, które koncentrują się na responsywności i mobilności.
Na tym kończymy ten samouczek, w którym dowiedzieliśmy się, jak działa system Krata z BootstrapOczywiście to tylko wierzchołek góry lodowej, jest znacznie więcej treści, które możemy zbadać w innych samouczkach, ale dzięki tej podstawowej wiedzy możemy zacząć widzieć, jak połączyć nasze projekty w bardziej logiczny sposób i przy mniejszym wysiłku dzięki ramy.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt