Bootstrap jest zbudowany na responsywnej 12-kolumnowej siatce. Zawarliśmy również układy o stałej i płynnej szerokości oparte na tym systemie.
Domyślny system siatki dostarczany w ramach Bootstrap to 12-kolumnowa siatka o szerokości 940 pikseli .
Ma również cztery responsywne warianty dla różnych urządzeń i rozdzielczości: telefon, tablet w orientacji pionowej, poziomą tabelę i małe komputery stacjonarne oraz duże, panoramiczne komputery stacjonarne.
- <div class = "wiersz" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Jak pokazano tutaj, podstawowy układ można utworzyć za pomocą dwóch „kolumn”, z których każda obejmuje liczbę z 12 kolumn fundamentowych, które zdefiniowaliśmy jako część naszego systemu siatki.
- <div class = "wiersz" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Dzięki statycznemu (nie płynnemu) systemowi siatki w Bootstrap, zagnieżdżanie jest łatwe. Aby zagnieździć treść, po prostu dodaj nową .row
i zestaw .span*
kolumn w istniejącej .span*
kolumnie.
Zagnieżdżone wiersze powinny zawierać zestaw kolumn, które sumują się do liczby kolumn jego rodzica. Na przykład dwie zagnieżdżone .span3
kolumny powinny być umieszczone w .span6
.
- <div class = "wiersz" >
- <div class = "span12" >
- Poziom 1 kolumny
- <div class = "wiersz" >
- <div class = "span6" > Poziom 2 </div>
- <div class = "span6" > Poziom 2 </div>
- </div>
- </div>
- </div>
System płynnej siatki używa wartości procentowych dla szerokości kolumn zamiast stałych pikseli. Ma również te same responsywne warianty, co nasz system stałej siatki, zapewniając odpowiednie proporcje dla kluczowych rozdzielczości ekranu i urządzeń.
Spraw, aby dowolny wiersz był płynny, po prostu zmieniając .row
na .row-fluid
. Kolumny pozostają dokładnie takie same, dzięki czemu przełączanie między układami stałymi i płynnymi jest bardzo proste.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Zagnieżdżanie za pomocą elastycznych siatek jest nieco inne: liczba zagnieżdżonych kolumn nie musi odpowiadać wartości nadrzędnej. Zamiast tego Twoje kolumny są resetowane na każdym poziomie, ponieważ każdy wiersz zajmuje 100% kolumny nadrzędnej.
- <div class = "row-fluid" >
- <div class = "span12" >
- Poziom 1 kolumny
- <div class = "row-fluid" >
- <div class = "span6" > Poziom 2 </div>
- <div class = "span6" > Poziom 2 </div>
- </div>
- </div>
- </div>
Zmienny | Domyślna wartość | Opis |
---|---|---|
@gridColumns |
12 | Liczba kolumn |
@gridColumnWidth |
60px | Szerokość każdej kolumny |
@gridGutterWidth |
20px | Ujemna przestrzeń między kolumnami |
@siteWidth |
Obliczona suma wszystkich kolumn i rynien | Zlicza liczbę kolumn i rynien, aby ustawić szerokość .container-fixed() mixin |
W Bootstrap wbudowana jest garść zmiennych do dostosowywania domyślnego systemu siatki 940px, udokumentowana powyżej. Wszystkie zmienne dla siatki są przechowywane w Variable.less.
Modyfikacja siatki oznacza zmianę trzech @grid*
zmiennych i ponowną kompilację Bootstrapa. Zmień zmienne siatki w Variable.less i użyj jednego z czterech udokumentowanych sposobów ponownej kompilacji . Jeśli dodajesz więcej kolumn, pamiętaj, aby dodać CSS dla tych w grid.less.
Dostosowywanie siatki działa tylko na domyślnym poziomie, siatce 940px. Aby zachować responsywne aspekty Bootstrap, musisz również dostosować siatki w responsive.less.
Domyślny i prosty układ o szerokości 940 pikseli, wyśrodkowany dla niemal każdej witryny lub strony dostarczonej przez pojedynczą witrynę <div class="container">
.
- <ciało>
- <div class = "kontener" >
- ...
- </div>
- </body>
<div class="container-fluid">
zapewnia elastyczną strukturę strony, minimalną i maksymalną szerokość oraz lewy pasek boczny. Świetnie nadaje się do aplikacji i dokumentów.
- <div class = "pojemnik-płyn" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Zawartość paska bocznego-->
- </div>
- <div class = "span10" >
- <!--Zawartość treści-->
- </div>
- </div>
- </div>
Bootstrap obsługuje kilka zapytań o media w jednym pliku, aby Twoje projekty były bardziej odpowiednie na różnych urządzeniach i rozdzielczościach ekranu. Oto, co zawiera:
Etykieta | Szerokość układu | Szerokość kolumny | Szerokość rynny |
---|---|---|---|
Smartfony | 480px i mniej | Kolumny płynne, bez stałych szerokości | |
Tablety portretowe | 480px do 768px | Kolumny płynne, bez stałych szerokości | |
Tablety w orientacji poziomej | 768px do 979px | 42px | 20px |
Domyślna | 980 pikseli i więcej | 60px | 20px |
Duży wyświetlacz | 1210px i więcej | 70px | 30px |
Aby upewnić się, że urządzenia prawidłowo wyświetlają strony responsywne, dołącz metatag viewport.
- <meta name = „viewport” content = „width=szerokość-urządzenia, początkowa skala=1.0” >
Zapytania o media pozwalają na niestandardowy CSS oparty na wielu warunkach – proporcjach, szerokościach, typie wyświetlania itp. – ale zwykle skupiają się wokół min-width
i max-width
.
Bootstrap nie uwzględnia automatycznie tych zapytań o media, ale ich zrozumienie i dodanie jest bardzo łatwe i wymaga minimalnej konfiguracji. Masz kilka opcji włączenia responsywnych funkcji Bootstrap:
Dlaczego po prostu tego nie uwzględnić? Prawdę mówiąc, nie wszystko musi być responsywne. Zamiast zachęcać programistów do usunięcia tej funkcji, uważamy, że najlepiej jest ją włączyć.
- // Telefony w orientacji poziomej i w dół
- @media ( max - szerokość : 480px ) { ... }
- // Poziomo z telefonu do pionowego tabletu
- @media ( max - szerokość : 768px ) { ... }
- // Z tabletu w orientacji pionowej na poziomą i na komputer
- @media ( min - szerokość : 768px ) i ( max - szerokość : 980px ) { ... }
- // Duży pulpit
- @media ( min - szerokość : 1200px ) { .. }