W tym poście zobaczymy układ strony Bootstrap aby zaprezentować niesamowite możliwości tego frameworka open source. W poprzednie artykuły zainstalowaliśmy środowisko programistyczne i niezbędne wtyczki ułatwiające nam pracę.
Pamiętaj o tym jako menedżer treści Linux Adictos Nie pozwala mi wstawić kodu przykładów, które przesłałem do GitHub. Aby je pobrać musisz zainstalować pakiet Git na swojej dystrybucji, a następnie wpisać następujące polecenia:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Będziesz musiał okresowo uruchamiać te dwa polecenia, aby pobrać nowe pliki.
Analizowanie kodu
Teraz w eksploratorze plików otwórz example2.html za pomocą VSCodium. (Otwórz prawym przyciskiem) Widzimy, co następuje:
- W pierwszym wierszu informujemy przeglądarkę o typie dokumentu, aby wiedziała, jak go wyrenderować.
- Wiersz 2 wskazuje język witryny, który wskazuje przeglądarce sposób przedstawiania określonych znaków, a wyszukiwarkom język treści ułatwiających pozycjonowanie. W naszym kodzie jest on zdefiniowany jako es, ale istnieją warianty regionalne, takie jak es_ES dla hiszpańskiego z Hiszpanii lub es_AR dla hiszpańskiego z Argentyny.
- Od linii 3 mamy kontener metadanych umieszczony pomiędzy tagami Tak . Metadane dostarczają informacji o dokumencie. W naszym przykładzie:
- Linia 4 wskazuje standard używany do kodowania znaków. Być może widziałeś czasami, że zamiast znaków akcentowanych lub specjalnych symboli, wyświetlany jest znak zapytania wewnątrz diamentu. Dzieje się tak, ponieważ przeglądarka używa niewłaściwego kodowania. Stwierdzenie w wierszu 8. unika tego, deklarując to wprost.
- W wierszu 5 mówimy przeglądarce, jak powinna dostosować się do różnych formatów ekranu.
- Tytuł, który ustawiliśmy w linii 6 będzie wyświetlany w górnym pasku przeglądarki oraz w wyszukiwarkach.
- W linii 7 mówimy przeglądarce, gdzie znaleźć elementy frameworka Bootstrap związane ze stylizacją.
- Od linii 10 zaczyna się kontener. Treść zawiera treść strony internetowej oraz link do skryptów Bootstrap, które nadadzą naszej witrynie interaktywność.
- Linia 13 wskazuje koniec dokumentu.
Układ strony Bootstrap
Kluczowe koncepcje dotyczące układu strony Bootstrap
Jak powiedzieliśmy w poprzednich artykułach, Bootstrap przyjmuje podejście mobile first. W przypadku takiego podejścia projekt jest wykonywany na urządzeniu z myślą o najmniejszym rozmiarze ekranu, a następnie dodawane są warstwy, aby dostosować je do kolejnych rozmiarów.
Tutaj musimy wziąć pod uwagę dwa kluczowe pojęcia:
- Punkty przerwania.
- Konsultacje medialne.
Punkty przerwania wskazują, z jakiej szerokości ekranu modyfikowany jest układ., Zapytania o media stosują parametry stylu na podstawie określonych cech przeglądarki i systemu operacyjnego. Innymi słowy, każdy punkt przerwania będzie miał odpowiedni styl.
Bootstrap zawiera sześć predefiniowanych punktów przerwania, które mogą być modyfikowane przez bardziej zaawansowanych programistów. Punkty domyślne to:
- Extra Small: Nie ma wstępnie ustawionego identyfikatora i dotyczy ekranów o szerokości mniejszej niż 576 pikseli.
- Mały: jest identyfikowany za pomocą sm i jest używany do ekranów od 576 pikseli.
- Medium: Jest identyfikowany przez md i jest używany do ekranów o rozdzielczości od 768 pikseli.
- Długość: Identyfikowana jako lg jest używana dla ekranów od 992 pikseli.
- Bardzo długi: ma identyfikator lg i stosuje style do ekranów od 1200 pikseli.
- Bardzo długi: Oznaczony identyfikatorem xxl, służy do nanoszenia wzoru na ekrany od 1400 pikseli.
Te rozmiary nie zostały wybrane przypadkowo, ponieważ każdy z punktów przerwania może zawierać kontenery, których szerokość jest wielokrotnością 12. Nie są również ukierunkowane na konkretne urządzenie, ale dostosowują się do różnych kategorii urządzeń i rozmiarów ekranu.
W ramach różnych rozmiarów ekranu znajdujemy pojemniki. Są one odpowiedzialne za hosting, wypełnienie i wyrównanie zawartości strony w określonym urządzeniu lub oknie graficznym.
;