System siatki Bootstrap pozwala na utworzenie do 12 kolumn na całej stronie.
Jeśli nie chcesz używać wszystkich 12 kolumn osobno, możesz zgrupować kolumny, aby utworzyć szersze kolumny:
| rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 |
| rozpiętość 4 | rozpiętość 4 | rozpiętość 4 | |||||||||
| rozpiętość 4 | rozpiętość 8 | ||||||||||
| rozpiętość 6 | rozpiętość 6 | ||||||||||
| rozpiętość 12 | |||||||||||
System siatki Bootstrap jest responsywny, a kolejność kolumn zostanie zmieniona w zależności od rozmiaru ekranu: na dużym ekranie może wyglądać lepiej z treścią zorganizowaną w trzech kolumnach, ale na małym ekranie byłoby lepiej, gdyby elementy treści były ułożone na górze e inni.
Wskazówka: Pamiętaj, że kolumny siatki muszą składać się z maksymalnie dwunastu wierszy. Co więcej, kolumny będą się układać niezależnie od rzutni.
Klasy siatkiSystem Grid Bootstrap ma cztery klasy:
Powyższe klasy można łączyć, tworząc bardziej dynamiczne i elastyczne układy.
Wskazówka: każda klasa skaluje się w górę, więc jeśli chcesz ustawić tę samą szerokość dla XS i SM, wystarczy określić XS.
Zasady systemu siatkiNiektóre reguły siatki Bootstrap:
Poniżej znajduje się podstawowa struktura siatki Bootstrap:
...
Dlatego, aby utworzyć układ, musisz utworzyć kontener (). Następnie utwórz string(). Następnie dodaj tyle kolumn ile potrzebujesz (tagi z odpowiednimi klasami .col-*-*). Pamiętaj, że liczby w .col-*-* muszą zawsze sumować się do 12 w każdym wierszu.
Opcje siatkiPoniższa tabela podsumowuje działanie systemu Grid Bootstrap na wielu urządzeniach.
| przedrostek klasy | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| nadaje się do | Telefony | tabletki | Małe laptopy | Laptopy i komputery stacjonarne |
| Zachowanie siatki | Zawsze poziomo | Zwinięty na początek, poziomo nad punktami przerwania | Zwinięty na początek, poziomo nad punktami przerwania | |
| Szerokość kontenera | Brak (automatycznie) | 750 pikseli | 970 pikseli | 1170 pikseli |
| # kolumn | 12 | 12 | 12 | 12 |
| Szerokość kolumny | Automatyczny | ~62 piks | ~81 pikseli | ~97 pikseli |
| Szerokość rynny | 30 pikseli (15 pikseli po każdej stronie kolumny) | 30 pikseli (15 pikseli po każdej stronie kolumny) | 30 pikseli (15 pikseli po każdej stronie kolumny) | |
| Zagnieżdżane | Tak | Tak | Tak | Tak |
| offsety | Tak | Tak | Tak | Tak |
| kolejność kolumn | Tak | Tak | Tak | Tak |
W poniższych rozdziałach przedstawiono przykłady systemów Grid dla różnych urządzeń.
01.06.2016
Cześć wszystkim!
Kontynuujemy naukę podstaw „bootstrap 3”. Pora zapoznać się w „bootstrapie 3” z takim pojęciem jak grid.
Za pomocą siatki będziesz mógł stworzyć swój pierwszy szkielet witryny adaptacyjnej (stronę internetową).
Zatem siatka Bootstrap składa się z wierszy i kolumn.
Przed utworzeniem kolumn musisz napisać linię. Aby to zrobić wystarczy wpisać znacznik div z klasą „row”.
...będą kolumny...
Najpierw zapisana jest linia, a kolumny są już zbudowane w linii.
1. Utwórz ciąg:
...będą kolumny... ...będą kolumny...
2. Utwórz kolumny (siatkę):
Siatka Bootstrap składa się z 12 kolumn o równej szerokości.
W razie potrzeby kolumny można połączyć i ustawić w żądanej pozycji.
Aby utworzyć kolumny, musisz napisać klasę w „wierszu”
„kol-(*1)-(*2)”.
Gdzie (*1 ) wskazujemy dla jakich grup urządzeń należy wykonać ( patrz tabela 1
).
Gdzie (*2 ) podajemy liczbę (liczbę kolumn)
(patrz tabela 2
).
(patka. 1) Tabela znaczników Bootstrap dla różnych grup urządzeń
Spójrzmy na ten punkt na przykładzie.
Patrząc na tabelę możemy stworzyć kolumny (zbudować siatkę) dla różnych grup urządzeń (telefony komórkowe, tablety, komputery PC itp.).
Na przykład:
witryna bloga
W ten sposób określamy dla jakich urządzeń chcemy stworzyć głośniki.
Teraz zastanówmy się, co to jest (*2 ). Ponieważ wspomniałem już o tym powyżej, jest to liczba wskazująca liczbę kolumn
(patrz tabela 2
).
(patka. 2) Układ siatki Bootstrap3
W tabeli widać, że siatka Bootstrap składa się z 12 kolumn o równej szerokości.
Aby określić 12 identycznych kolumn dla wszystkich urządzeń, zamiast ( * 2 ), musisz podać pasującą liczbę. Pamiętaj jednak, że suma powinna wynosić 12.
Zobaczmy przykład:
witryna blogu Tabela znaczników Bootstrap
Abyście zrozumieli, co powiedziałem o tym, że łączna kwota powinna wynosić 12, dokonamy obliczeń arytmetycznych.
Spójrz na linie #2 i #3.
○ col-lg-12 i col-lg-12 . (rozmiar ekranu ≥1200px).
Wynik:
○ col-md-8 i col-md-4 . (rozmiar ekranu ≥992px).
Na ekranie pojawią się dwie kolumny, ponieważ 8 + 4 = 12 (tyle samo, z czego składa się siatka).
Lewa strona połączy 8 kolumn, a prawa 4.
Wynik:
○ col-sm-6 i col-sm-6 (rozmiar ekranu ≥768px).
Na ekranie pojawią się dwie kolumny, ponieważ 6 + 6 = 12 (tyle samo, z czego składa się siatka).
Lewa strona połączy 6 kolumn, a prawa 6.
Wynik:
○ col-xs-12 i col-xs-12 (rozmiar ekranu .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( obramowanie:1px solid #ccc; wysokość:60px; ) Blok 1 Blok 2 Blok 3 Blok 4 Zawartość menu
Możesz zobaczyć wynik, a jednocześnie sprawdzić na swoim telefonie, tablecie lub komputerze, jak otworzy się utworzony układ.
Witam, drodzy czytelnicy bloga. W pierwszej części artykułu zapoznaliśmy się z możliwościami tego frameworka, dowiedzieliśmy się czym jest projektowanie responsywne i dlaczego jest tak ważne w dobie szalejącego wzrostu popularności różnorodnych gadżetów mobilnych. Tam szczegółowo omówiliśmy także kwestie połączenia Bootstrapa ze stroną HTML (podłączenie plików stylów, skryptów i biblioteki jQuery).
Dzisiejszy artykuł dotyczy systemu grid zastosowanego w Bootstrap 3. Dowiesz się jakie rozmiary gridów można zastosować, jak będą się zachowywać na urządzeniach o różnych rozmiarach ekranów oraz jak samodzielnie tworzyć wiersze i komórki w oparciu o jedną lub więcej gridów. Wszystko to zostanie wyjaśnione na przykładach, które, mam nadzieję, poprawią percepcję.
Jak działa system siatki w Bootstrap 3Bootstrap 3 zawiera 12-kolumnowy system siatki przeznaczony głównie dla urządzeń mobilnych. Te. jest zaprojektowany z myślą przede wszystkim o małych wyświetlaczach, w drugiej kolejności - o szerokich ekranach. Nowa wersja tego frameworka ma cztery rozmiary siatki. Wszystkie te informacje można szczegółowo przestudiować na oficjalnej stronie GetBootstrap.com, przechodząc do zakładki „CSS” z górnego menu i wybierając pozycję „System siatki” po prawej stronie.
Otrzymasz tam pełne wyjaśnienie działania systemu, powiązane zapytania o media i tak dalej. Wiersz elementów HTML (np. zapowiedzi artykułów na stronie głównej), który chcesz umieścić w siatce, będzie musiał zostać otoczony kontenerem (np. ujętym w znaczniki Div) i musi być przypisana klasa .row do niego (w tym przypadku tag otwierający będzie wyglądał jak ).
Cóż, możesz rozdzielić elementy wewnątrz wiersza na jeden lub kilka typów siatek jednocześnie, ustawiając atrybut class o wartości, na przykład .col-xs-number (w tym przypadku używana jest tylko bardzo mała siatka ).
Na przykład, jeśli chcesz otrzymać w rezultacie trzy kolumny o jednakowej wielkości, musisz podzielić 12 (wymiar siatki w Bootstrap 3) przez 3 (wymagana liczba kolumn). Oznacza to, że dla każdego elementu HTML w wierszu (znowu mogą to być kontenery Div) będziesz musiał zarejestrować te same klasy - . Jeśli potrzebujesz kolumn o nierównej szerokości, wystarczy spełnić warunek, że liczby po col-xs- we wszystkich trzech klasach muszą sumować się do 12 (na przykład 2-4-6). Ale najpierw przyjrzyjmy się, co oznacza „xs” w tym wpisie i co ono oznacza?
Nieco niżej w obszarze „Opcje siatki” znajdziesz wyjaśnienie czterech rozmiarów nowoczesnej siatki Bootstrap wspomnianej powyżej.
Ostatnie trzy siatki będą poziome tylko wtedy, gdy rozmiar ekranu będzie większy niż punkt, w którym następuje załamanie. Na przykład w przypadku dużej siatki na ekranach mniejszych niż 1200 pikseli nie będzie ona już pozioma i stanie się pionowa. Na stronie oficjalnej strony GetBootstrap.com, którą obecnie sprawdzamy, znajdują się przykłady i wyjaśnienia na ten temat. Jednak moim zdaniem wszystko jest nieco zagmatwane i skomplikowane.
Przykład systemu siatki Bootstrap 3 dla różnych szerokości ekranuPostaram się to wszystko wyjaśnić na gotowym przykładzie. Wystarczy, że skopiujesz plik setka.html (w tym celu wybierz z menu kontekstowego opcję „Zapisz link jako…”). Jeśli bezpośrednio otworzysz ten plik w przeglądarce (klikając w dany link lewym przyciskiem myszy), to nic nie zadziała, bo framework Bootstrap nie będzie się łączyć.
Umieść pobrany plik setka.html w folderze Bootstrap, o którym mówiliśmy w . Powinien znajdować się na tym samym poziomie, co utworzony wcześniej plik Index.html.
Teraz otwórz ten plik setka.html w dowolnej wybranej przeglądarce i poeksperymentuj z rozmiarem okna przeglądarki, aby zobaczyć Bootstrap 3 w akcji i zrozumieć, jak działa system grid. Które? Wyjaśnię teraz.
Rozdzielczość ekranu mojego monitora wynosi 1280 pikseli, czyli więcej niż punkt przerwania wynoszący 1200 pikseli ustawiony dla dużej siatki. Co w rezultacie widzimy? Coś jak na tym obrazku:
Oto pięć przykładów układu strony internetowej zbudowanej na różnych typach siatek:
W ten sposób możemy zobaczyć i porównać, jak te siatki z arsenału Bootstrap 3 współpracują ze sobą i jak działają osobno (przy użyciu tylko jednego typu). Ponieważ Ponieważ podczas wykonywania poprzedniego zrzutu ekranu moja przeglądarka została rozszerzona do trybu pełnoekranowego (szerokość większa niż 1200 pikseli), wszystkie pięć przykładów układu witryny jest rozwiniętych w poziomie (kolumny znajdują się obok siebie na całej szerokości ekranu).
Zawęźmy teraz nieco rozmiar okna przeglądarki, abyśmy mogli zobaczyć zapadnięcie się.
Zmienił się tekst nad górnym wierszem oraz przedrostki klas w jego komórkach (wykorzystano do tego klasy widoczności, o czym porozmawiamy później). Środkowa siatka jest teraz używana i nadal jest wyświetlana poziomo. Jednocześnie dolny rząd (co ilustruje zastosowanie wyłącznie grubej siatki) składany w pionie, tj. sąsiednie bloki są teraz wyświetlane nie obok siebie na szerokość, ale pod sobą (na wysokość).
Okazuje się, że w ten sposób zachowuje się duża siatka przy braku jakichkolwiek wpływów zewnętrznych - jest składana w pionie na wszystkich urządzeniach, których szerokość ekranu jest mniejsza niż 1200 pikseli. W tym przypadku wszystkie pozostałe użyte w przykładzie siatki są wyświetlane poziomo. Pierwszy rząd wykorzystuje kombinację siatek, więc teraz jest kontrolowany przez średni system siatek (duży system nie ma już żadnego efektu).
Zmniejszmy ponownie rozmiar okna przeglądarki na szerokość, aby było. Będzie kolejna awaria:
Teraz (w oparciu o rozmiar ekranu) pracujemy z małą siatką. W związku z tym nie tylko duża, ale także średnia siatka rozwinęła się również w pionie. Cóż, w pierwszym rzędzie, gdzie używana jest kombinacja siatek, wszystko jest teraz kontrolowane przez system małej siatki Bootstrap. Jednocześnie w pliku setka.html zmienia się również rozkład kolumn w tym pierwszym wierszu, co wcale nie jest konieczne, ale całkiem możliwe jest, aby to zrobić, aby zaspokoić niektóre swoje potrzeby pod względem układu (zresztą , przez „jeden lub dwa”, bez żadnych problemów).
Kontynuujemy zmniejszanie szerokości okna przeglądarki do wartości. Następuje kolejna awaria:
W rezultacie nie tylko duże i średnie siatki biegną pionowo po stronie, ale dołączyła do nich również mała. Jedyną pozostałą poziomą siatką jest bardzo mała siatka, która pozostaje taka (jak właśnie widzieliśmy) w każdych okolicznościach. Nawet jeśli zawęzisz stronę do bardzo małej szerokości, bardzo mała siatka nie zamieni się w siatkę pionową (nawet jeśli treść nie zmieści się w komórkach).
Ten przykład (plik setka.html) jest wykonany dokładnie. O tym, jak wszystko jest tam zorganizowane, porozmawiamy szczegółowo później. Na razie jednak chcę zwrócić Waszą uwagę jedynie na niektóre niuanse, jakie można zauważyć w kodzie źródłowym pliku setka.html.
Objaśnienia do kodu źródłowego naszego przykładuStyle wizualnego projektowania układów (wcięcia, kolory siatki itp.) są dodawane na górze za pomocą pomocy, która nie niesie ze sobą specjalnego obciążenia semantycznego. Jeśli przewiniesz kod źródłowy w dół, zauważysz ten blok:
lg Zgrubna siatka jest używana w przypadku ekranów o szerokości większej niż 1200 pikseli. md Używa średniej siatki dla ekranów mniejszych niż 1200, ale większych niż 992 pikseli. sm Używa małej siatki dla ekranów mniejszych niż 992, ale większych niż 768 pikseli. xs Używa bardzo małej siatki dla ekranów mniejszych niż 768 pikseli, która zawsze pozostaje pozioma.
Istnieją cztery kontenery, do których przypisane są różne klasy (przeczytaj o). Umożliwiają wyświetlanie określonej treści w oparciu o zapytania o media odpowiadające różnym rozmiarom siatki. Jak to działa? Wszystkie cztery tytuły ładują się w przeglądarce (jeśli spojrzysz na kod źródłowy), ale wyświetlany jest tylko jeden tytuł w zależności od aktualnej rozdzielczości ekranu lub rozmiaru okna przeglądarki.
.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col -lg-4 .col-md-6 .col-sm-6 .col-xs-1
To jest główna siatka, w której połączone są wszystkie cztery systemy siatek (można to zobaczyć po atrybutach komórki, takich jak class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , który zawiera listę klas poprzedza wszystkie cztery siatki). Sam wiersz, jak wspomniano powyżej, definiuje się poprzez umieszczenie wszystkich jego elementów w kontenerze z class="row" (w naszym przykładzie jest to kontener oparty na elementach div).
Należy pamiętać, że nasza główna siatka składa się z trzech komórek (kolumn) i jeśli zsumujesz wszystkie liczby przypisane do każdej z kolumn, na przykład dla bardzo małych przedrostków siatki Bootstrap (col-xs), otrzymasz łącznie 12. To samo będzie prawdziwe dla liczb po przedrostkach we wszystkich innych systemach. Jest to zrozumiałe, ponieważ framework ten, jak wspomniano powyżej, ma strukturę 12-kolumnową, tj. w poziomie cała przestrzeń dostępna dla układu jest podzielona na dwanaście kolumn o jednakowej szerokości (niewidoczne na stronie - przypominają komórki w zeszytach szkolnych).
Cóż, za pomocą liczb po przedrostkach klas po prostu ustawiasz proporcje każdej komórki (rzeczywistych kolumn) układu. Te. proporcje mogą być np.:
Ogólnie rzecz biorąc, w jednym układzie (linii) można zastosować jeden lub dwa, trzy lub wszystkie cztery systemy siatek. Wszystko zależy od Twoich preferencji projektowych i tego, co chcesz osiągnąć na swojej stronie internetowej (jak powinna ona wyglądać przy różnych rozmiarach ekranów). Oficjalna strona internetowa podaje przykład:
Tworzenie wierszy (wierszy) i komórek za pomocą klas Bootstrap
Dla lepszego zrozumienia utwórzmy teraz stronę HTML przypominającą nieco prawdziwą stronę internetową (z nagłówkiem, treścią tekstową i graficzną oraz stopką) i ułóżmy ją przy użyciu systemu siatki Bootstrap 3.
Dokładniej, sam utworzę blankiet i zasugeruję jedynie, abyś analogicznie do poprzedniego przykładu pobrał plik sait.html (w tym celu wybierz z menu kontekstowego opcję „Zapisz jako…”) , aby później móc dodać niezbędne klasy ładowania początkowego. Należy go również umieścić w folderze Bootstrap na tym samym poziomie, co plik Index.html, który utworzyliśmy w pierwszym artykule (oraz plik setka.html, z którym pracowaliśmy tuż powyżej).
Jeśli spojrzysz na kod źródłowy pliku sait.html, zobaczysz, że Bootstrap i jquery są już w nim zawarte, a treść została dodana w celu naśladowania wyglądu i stylu przeciętnej strony internetowej. Tak, będziesz także potrzebować folderu z obrazami użytymi na tej stronie. Można go pobrać stąd - img.zip. Po prostu rozpakuj archiwum i umieść folder img (upewnij się, że zawiera pliki obrazów, a nie inny folder img) w folderze Bootstrap, na tym samym poziomie co plik sait.html. Struktura będzie wyglądać następująco:
Teraz (z folderu Bootstrap) w przeglądarce zobaczysz stronę internetową, której użyłem jako przykładu. Uderzające jest to, że wszystkie bloki na stronie znajdują się jeden pod drugim, co znacznie zakłóca prawidłowe wizualne postrzeganie informacji. Logiczne byłoby umieszczenie ich w kolumnach, aby w przypadku zmniejszenia rozmiaru ekranu „projekt” zareagował na to, zmieniając liczbę kolumn, aby zapewnić łatwość przeglądania na urządzeniach o różnej szerokości widocznego obszaru.
W źródłowym kodzie HTML pliku sait.html pokazywałem granice wierszy (linii), które zamierzam, dla których będziemy dostosowywać wyświetlanie kolumn za pomocą pewnego rodzaju systemów gridowych Bootstrap. Są tylko cztery rzędy (są ponumerowane na powyższym zrzucie ekranu) - nagłówek (nagłówek z nazwą serwisu i logo), tytuł i opis strony, część merytoryczna (główna treść składająca się z zapowiedzi czterech artykułów) i stopkę.
Teraz będziemy musieli dodać znaczniki Bootstrap do pliku sait.html, który. Aby utworzyć wiersze, jak pamiętasz, wystarczy zamknąć całą jego zawartość w kontenerze (najczęściej są to znaczniki Div, chociaż mogą być inne) i napisać w nim klasę class="row". Dla pierwszego wiersza będzie to wyglądać następująco:
strona internetowa 
To samo należy zrobić dla wszystkich pozostałych wierszy (linii) - umieść znacznik otwierający na początku przyszłego wiersza, a znacznik na jego końcu. Nie będę pokazywać całego kodu pliku sait.html z dokonanymi zmianami, gdyż jest on zbyt obszerny.
Używanie różnych siatek do tworzenia kolumn z treścią o różnych szerokościach ekranuTeraz zacznijmy tworzyć komórki w tych wierszach, w których ma to sens. Całkiem logiczne byłoby umieszczenie zapowiedzi artykułów (z trzeciego rzędu) w czterech kolumnach, a gdy szerokość ekranu się zmniejszy, niech te cztery kolumny zamienią się na dwie. Jak to zrobić? Przyjrzyjmy się.
Tak więc w Bootstrap 3 istnieje siatka 12 kolumn, o której mówiliśmy powyżej. Ponieważ postanowiliśmy zrobić cztery kolumny z ogłoszeniami, logiczne byłoby, aby były one jednakowej szerokości, co oznacza, że każda z kolumn będzie miała trzy komórki (komórki) szerokości naszego niewidzialnego układu siatki (niezależnie od tego, którą siatkę wybierzemy - ultra -mały, mały, średni lub duży).
Jaką sieć wybrać do pracy? Przyjmijmy na początek średnią, jako kompromis. W takim przypadku w kontenerach wszystkich czterech komórek będziesz musiał dodać klasę „col-md-3” - . Aby nie zaśmiecać artykułu, pokażę przykładowy kod jednej komórki:
Po zapisaniu dokonanych zmian zauważysz, że nasza strona internetowa zyskała już dużo bardziej użyteczny wygląd:
Co prawda, gdy okno przeglądarki zmniejszy się do szerokości mniejszego punktu przerwania (w przypadku średniej siatki, którą stosujemy, będzie to 992 piksele), wszystkie zapowiedzi znów będą układać się w kolumnę, co nie jest dobre, bo użyteczność w tym przypadku maleje (rozdzielczość prawie 1000 pikseli pozwala na gęstsze układanie informacji). Aby naprawić tę sytuację, możesz dodać kolejną siatkę z arsenału Bootstrap dla tych samych komórek z ogłoszeniami. Jak to zrobić? Przyjrzyjmy się.
Użyjmy przedrostków „col-xs-6” do nazwy klasy w każdej komórce z ogłoszeniem (wynikiem będzie klasa złożona class="col-md-3 col-sm-6"). Będzie to wyglądać tak (na przykładzie jednej komórki):
Tekst ogłoszenia.
Jak widać, złamaliśmy tu niedawno ogłoszoną zasadę, że liczby po przedrostkach jednej siatki we wszystkich komórkach powinny sumować się do 12. Otrzymaliśmy 24 (cztery razy sześć). Ale zrobiliśmy to celowo, żeby osiągnąć zamierzony efekt - zamiast czterech, po przejściu punktu przerwania dostajemy dwie kolumny dla przeciętnego układu siatki Bootstrap (to 992 piksele). Te. komórki będą umieszczone w dwóch rzędach, po dwie w każdym:
Ponieważ Jeśli wybierzemy system o ultramałej siatce, to przy dalszym zmniejszaniu szerokości okna przeglądarki nie dojdzie do pionowego ułożenia bloków z ogłoszeniami pod sobą (umieszczenie w jednej kolumnie), ponieważ układ ten zawsze pozostaje poziomy.
Jeśli chcesz, aby cztery kolumny zamieniły się w dwie, gdy szerokość ekranu się zmniejszy, a następnie w jedną kolumnę, powinieneś użyć systemu małej siatki zamiast „col-xs-6” za pomocą „col-sm-6”:
Następnie, gdy szerokość okna przeglądarki zmniejszy się poniżej 768 pikseli, zobaczysz wycinek, w którym dwie kolumny z ogłoszeniami zostaną zamienione w jedną. Po prostu poeksperymentuj i poczuj różnicę.
Dostosowywanie nagłówka strony internetowej za pomocą Bootstrap 3Poeksperymentujmy i spróbujmy ponownie, w którym zasadniczo znajdują się dwie potencjalne komórki - nazwa strony z opisem, a także logo. Właściwie to my je umieścimy. Użyjmy tym razem większej siatki z „col-lg-6”, aby utworzyć dwie równe kolumny.
strona internetowa
Wszystko o tworzeniu stron internetowych, blogów, forów, sklepów internetowych, ich promocji w wyszukiwarkach i zarabianiu na serwisie
To prawda, że w przypadku korzystania z dużej siatki złomowanie odbywa się przy dość dużych rozdzielczościach ekranu (w naszym przypadku okien przeglądarki, ponieważ symulujemy tam urządzenia o różnych szerokościach ekranu). Następnie komórki są składane pionowo. Aby tego uniknąć, dodamy kolejną siatkę Bootstrap 3 dla pierwszego wiersza. Myślę, że wystarczy mały system siatki (przedrostek klasy col-sm). Wtedy kod będzie wyglądał mniej więcej tak:
strona internetowa
Wszystko o tworzeniu stron internetowych, blogów, forów, sklepów internetowych, ich promocji w wyszukiwarkach i zarabianiu na serwisie
Nie zrobiłem jednak takich samych komórek z nazwą witryny i logo dla małej siatki, ponieważ logo jest zasadniczo węższe (w sensie wąskie) od nazwy z opisem. Przy mniejszej szerokości ekranu nielogiczne byłoby przydzielanie im równych komórek. Dlatego pierwszą kolumnę utworzyłem z nazwą i opisem strony, gdy aktywowany jest system małej siatki Bootstrap, dwukrotnie większy od kolumny z logo.
W rezultacie, gdy okno przeglądarki zostanie zmniejszone, komórki te będą zbiegać się aż do momentu przerwania dla małego układu siatki Bootstrap, co nastąpi przy szerokości mniejszej niż 768 pikseli, po czym obie komórki znajdą się pod sobą.
Być może zauważyłeś, że tekst na stronie uderza w lewą krawędź ekranu, co powoduje. Możesz dodać, aby naprawić tę sytuację w tagu treści, co pozwoli. Wszystko możesz rozwiązać za pomocą standardowych narzędzi Bootstrap 3.
Aby to zrobić, będziesz musiał zawinąć całą zawartość strony internetowej (wszystko, co jest zawarte w tagach Body) w kontenerze Div z klasą o tej samej nazwie - . Te. umieść ten znacznik bezpośrednio po otwierającym tagu Body i zamknij go przed wywołaniem skryptów znajdujących się bezpośrednio przed zamykającym tagiem Body. Następnie tekst nie będzie już opierał się o okno przeglądarki.
Można również zauważyć, że obrazy podglądu nakładają się na siebie w miarę zmniejszania się szerokości ekranu. Faktem jest, że nadal „nie odpowiadają”, ale zrobimy to w kolejnych artykułach tej rubryki. Będziemy także nadal analizować pracę z systemem gridowym Bootstrap 3, uczyć się projektowania przycisków, tabel, formularzy HTML, tworzenia rozwijanych menu, nawigacji i wielu innych. Dlatego nie zmieniaj się i bądź na bieżąco z nowymi publikacjami.
Ciąg dalszy >>> (Możesz zapisać się do newslettera, żeby go nie przegapić)
A oto kontynuacja: (ale nadal subskrybujesz - będzie o wiele więcej ciekawych i przydatnych rzeczy).
W tym artykule zapoznamy się z klasami frameworka Bootstrap 3, mającymi na celu stworzenie adaptacyjnego „szkieletu” (układu) strony.
Bootstrap „Budowanie” elementów siatki 3Siatka Bootstrap składa się z elementów „budowlanych”. Najważniejsze z nich to opakowania, wiersze, bloki adaptacyjne i responsywne klasy narzędziowe.
Zasadniczo siatka to po prostu lista predefiniowanych klas, za pomocą których można ustawić niezbędne zachowanie bloków (elementów HTML) i za ich pomocą zbudować określony adaptacyjny układ witryny.
OpakowaniaKontener wrapperowy to element „budujący” grid, od którego rozpoczyna się układ całej strony lub jej części (np. nagłówka, menu głównego, obszaru głównego, stopki) w zależności od strategii rozwoju.
Kontener w Bootstrap może być responsywny – stały lub responsywny – płynny.
Pierwszy z nich (kontener adaptatywno-stały) charakteryzuje się tym, że ma stałą szerokość w pewnym zakresie szerokości rzutni (obszaru widoku).
Poniższa tabela pokazuje, jak szeroki jest stały, responsywny kontener przy danej szerokości rzutni przeglądarki:
= 768px i = 992px i...  Podczas projektowania układu witryny zwykle nie stosuje się zagnieżdżania jednego kontenera opakowania Bootstrap w innym. Zatem pierwszym elementem „budowlanym” siatki Bootstrap jest kontener opakowania. Określa szerokość układu w różnych rzutniach, a także centruje go (tylko kontener ze stałym adaptacją) względem lewej i prawej krawędzi obszaru klienta karty lub okna przeglądarki. Kolejnym elementem budującym jest wiersz (blok div z klasą wiersza). Rzęd to specjalny blok, który służy wyłącznie do owijania innych elementów budynku (bloki adaptacyjne). Jego głównym celem jest zneutralizowanie dodatniego wypełnienia (15 pikseli po lewej i prawej stronie) kontenera opakowania lub bloku responsywnego.  Przykład tworzenia wcięć: Kontener (+15px) -> wiersz (-15px) -> col (+15px) -> kontener zawartości (+15px) -> wiersz (-15px) -> col (+15px) -> wiersz (-15px) -> col (+15px) -> treść *col to blok responsywny Przykład pokazuje, że niezależnie od tego, w jakim bloku responsywnym znajduje się treść, zawsze będzie ona miała prawidłowy margines (tj. 15 pikseli po lewej i prawej stronie). Kolejnym elementem „budowlanym” siatki Bootstrap jest blok responsywny (div z klasą col-?-?).  Responsywne pola to elementy siatki Bootstrap, które mają jedną lub więcej kolumn-?-? . Bloki te są głównymi cegłami „budowlanymi”, tworzą niezbędną konstrukcję. Szerokość bloku adaptacyjnego ustalana jest w zależności od typu urządzenia. Oznacza to, że blok responsywny może mieć różną szerokość na różnych urządzeniach. Z tego powodu ten blok nazywa się adaptacyjnym. Jak ustawiona jest szerokość bloku responsywnego? Ustawienie szerokości responsywnego pudełka, które powinno mieć na konkretnym urządzeniu, jest domyślnie ustawione na liczbę z zakresu od 1 do 12 (liczba kolumn Bootstrap). Ta liczba jest wskazywana zamiast drugiego znaku? w klasie kol-?-? . Ta liczba (domyślnie od 1 do 12) określa, jaki procent szerokości elementu nadrzędnego powinien mieć blok responsywny. Na przykład liczba 1 ustawia szerokość ramki responsywnej na 8,3% (1/12) szerokości ramki nadrzędnej. Liczba 12 to szerokość równa 100% (12/12) szerokości bloku nadrzędnego.  Oprócz określenia szerokości bloku adaptacyjnego należy również określić typ urządzenia (zamiast 1 pytania). Klasa urządzenia określi, do którego rzutni będzie miała zastosowanie ta szerokość. Bootstrap 3 wyróżnia 4 główne klasy. Są to xs (szerokość rzutni > 0), sm (szerokość rzutni >= 768 pikseli), md (szerokość rzutni >= 992 pikseli) i lg (szerokość rzutni przeglądarki >= 1200 pikseli). Na przykład blok adaptacyjny z klasą col-xs-12 col-sm-6 col-md-4 col-lg-3 będzie miał szerokość 100% (12/12) na xs i 50% (6/12 ) na sm , na md - 33,3% (4/12), na lg - 25% (3/12). Ponadto należy zwrócić uwagę na to, że bloki adaptacyjne nie ograniczają ich zasięgu. Te. jeśli określisz xs w atrybucie class bloku adaptacyjnego, ale nie określisz sm , wówczas jego działanie rozszerzy się na zakres tego zakresu. Przykładowo blok adaptacyjny z klasą col-xs-6 col-lg-3 będzie miał szerokość 50% (6/12) na urządzeniach xs, sm i md oraz 25% (3/12) na lg . Blok adaptacyjny, podobnie jak kontener, ustawia dodatnie marginesy po 15 pikseli po lewej i prawej stronie dla treści, która zostanie w nim umieszczona. W prawidłowym układzie siatki Bootstrap responsywny blok powinien zawsze mieć wiersz jako swojego rodzica. Przykładowo podzielmy blok na 3 równe kolumny, które będą wyświetlane pionowo na xs i poziomo na sm i powyżej: ... ... ... Na przykład obliczmy dostępną szerokość treści dla pierwszego i drugiego bloku: 1 blok... 2 bloki...
Bloki responsywne umieszczane są w elemencie nadrzędnym jeden po drugim w liniach. W jednym wierszu znajdują się bloki adaptacyjne o łącznej liczbie kolumn nie większej niż 12 (domyślnie). Te. bloki, które nie mieszczą się w pierwszej linii, są umieszczane w następnej linii i tak dalej. Jak rozmieszczone są bloki adaptacyjne? W Bootstrap 3 responsywne bloki są pływające (float:left). Należy to wziąć pod uwagę podczas tworzenia układu strony internetowej. Przed blokiem, który musi zaczynać się od nowej linii, należy umieścić pusty element div z klasą clearfix. Musisz także ukryć go dla urządzeń, na których nie trzeba wykonywać tej akcji. Blok jest ukryty przy użyciu odpowiednich klas podanych poniżej. Pływające klocki mają też jedną cechę. Na przykład, jeśli w powyższym przykładzie wysokość 1 bloku będzie większa niż 2 bloki. Wtedy blok 3 nie będzie umiejscowiony na nowej linii, lecz „przyklei się” do prawej strony bloku 1.  Aby temu zapobiec, musisz dodać blok z klasą clearfix i udostępnić go niezbędnym urządzeniom (na przykład na md i lg): 1 blok... 2 blok... 3 blok... Podstawowa zasada tworzenia układuPodstawową zasadą tworzenia układu jest zagnieżdżanie niektórych bloków adaptacyjnych w innych. Jednocześnie ich szerokość jest zawsze parametrem względnym, który jest ustalany jako procent (według liczby kolumn) szerokości bloku nadrzędnego. Te. na przykład na dowolnym poziomie zagnieżdżenia 6-kolumnowy blok responsywny ma zawsze 50% (6/12*100%) szerokości elementu nadrzędnego. Na przykład podzielmy jakiś blok (główny) na 4 bloki (2 w pierwszej linii i 2 w drugiej). Dla uproszczenia stworzymy układ, który nie jest adaptacyjny: 1 blok... 2 blok... 3 blok... 4 blok... Stwórzmy układ z 3 bloków (3 x 2): 1 blok... 2 bloki... 3-1 bloki... 3-2 bloki... 3-3 bloki... 3-4 bloki... 3-5 bloki... 3-6 bloki. .. 4 bloki... Łatwo zauważyć, że układ zagnieżdżonego bloku adaptacyjnego odbywa się w taki sam sposób, jak głównego. Oznacza to, że niezależnie od stopnia zagnieżdżenia bloku, jego układ tworzony jest według tych samych zasad. Klasy adaptacyjnego przesunięcia blokuBootstrap ma responsywne klasy (col-?-offset-?), których możesz użyć do przesunięcia bloku o określoną liczbę kolumn w prawo. Pierwszy? należy zastąpić typem urządzenia (xs, sm, md lub lg). Drugi? dla liczby kolumn. Na przykład ustawmy blok na urządzeniach md na 8 kolumn i umieśćmy go w wierszu pośrodku (tj. przesuńmy go o 2 kolumny w prawo): 1 blok... Oprócz narzędzi do adaptacyjnego przesunięcia bloków, Bootstrap 3 posiada także specjalne klasy, za pomocą których można zmieniać kolejność elementów w obrębie pojedynczej linii. Bootstrap 3 responsywne klasy narzędzioweBootstrap 3 zawiera klasy adaptacyjne (narzędziowe), które pozwalają kontrolować widoczność wyświetlania elementów w zależności od typu urządzenia. Oprócz określenia urządzenia (xs, sm, md, lg) na którym blok będzie widoczny należy także określić jak ma on być wyświetlany na tym urządzeniu. Dostępne opcje to inline, block i inline-block.
Zamiast znaku? należy określić block , inline lub inline-block. Te. określ sposób wyświetlania elementu. Przykładowo dodanie do elementu klasy widoczny-md-block spowoduje, że będzie on wyświetlany tylko na urządzeniach posiadających rzutnię md (szerokość rzutni >=992px oraz .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, . col-md -10, .col-md-11, .col-md-12 ( obramowanie:1px solid #ccc; margines-dół:30px; wysokość:60px; ) Witaj, świecie! .col-md-1 .col -md- 1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md -1 .col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col- md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12 Jeśli nadal nic nie rozumiesz, to spróbuję wyjaśnić to w ten sposób. Zatem jeśli chodzi o treść, klasa „col-md-” wyglądałaby tak: „col-md-8” zawartość w bloku zawartość w bloku Bootstrap ma możliwość pisania różnych stylów CSS lub odmiennego podziału komórek dla grup urządzeń. Na przykład chcę, aby nagłówek mojej witryny na dużych monitorach był podzielony na jedną komórkę, ale w przypadku telefonów zdecydowałem się utworzyć dwie komórki i zastosować do nich inny styl CSS. Masz pomysł? Tabela układu Bootstrap dla różnych grup urządzeń
|
