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.

Dzięki statycznemu (nie płynnemu) systemowi siatki w Bootstrap, zagnieżdżanie jest łatwe. Aby zagnieździć treść, po prostu dodaj nową .rowi zestaw .span*kolumn w istniejącej .span*kolumnie.

Przykład

<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>

Zmienne w LESS

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.

Jak dostosować

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.

Pozostanie responsywnym

Dostosowywanie siatki działa tylko na domyślnym poziomie, siatce 940px. Aby zachować responsywne aspekty Bootstrap, musisz również dostosować siatki w responsive.less.

Naprawiono układ

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>

Układ płynny

<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>

Wspierane urządzenia

Bootstrap obsługuje kilka zapytań o media, aby Twoje projekty były bardziej odpowiednie na różnych urządzeniach i rozdzielczościach ekranu. Oto, co zawiera:

Co oni robią

Zapytania o media pozwalają na niestandardowy CSS oparty na wielu warunkach – proporcjach, szerokościach, typie wyświetlania itp. – ale zwykle skupiają się wokół min-widthi max-width.

• Zmodyfikuj szerokość kolumny w naszej siatce
• Układaj elementy zamiast pływać tam, gdzie jest to konieczne
• Zmień rozmiar nagłówków i tekstu, aby były bardziej odpowiednie dla urządzeń

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:

1. Użyj skompilowanej wersji responsywnej, bootstrap-responsive.css
2. Dodaj @import "responsive.less" i ponownie skompiluj Bootstrap
3. Zmodyfikuj i ponownie skompiluj responsive.less jako oddzielną

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 poziome 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ść : 940px ) { ... }        
 
  // Duży pulpit
  @media ( min - szerokość : 1200px ) { .. }