Bootstrap

Rusztowanie

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.

Globalne style resetowania CSS, typografii i linków

Wymaga typu dokumentu HTML5

Bootstrap korzysta z elementów HTML i właściwości CSS, które wymagają użycia doctype HTML5. Pamiętaj, aby umieścić go na początku każdej strony Bootstrapped w swoim projekcie.

  1. <!DOCTYPE html>
  2. <html lang = "pl" > 
  3.   ...
  4. </html>

Typografia i linki

W pliku scaffolding.less ustawiamy podstawowe globalne style wyświetlania, typografii i linków. W szczególności:

  • Usuń margines na ciele
  • Ustaw background-color: white;nabody
  • Użyj @baseFontFamily, @baseFontSize, i @baseLineHeightatrybutów jako naszej bazy typograficznej
  • Ustaw globalny kolor linku za pomocą @linkColori zastosuj podkreślenia linków tylko na:hover

Resetuj przez normalizację

Począwszy od Bootstrap 2, tradycyjny reset CSS ewoluował, aby wykorzystać elementy z Normalize.css , projektu Nicolasa Gallaghera , który obsługuje również HTML5 Boilerplate .

Nowy reset nadal można znaleźć w reset.less , ale z wieloma elementami usuniętymi dla zwięzłości i dokładności.

Domyślny system siatki 12 kolumn z responsywnym skrętem

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Domyślny system siatki dostępny w Bootstrap wykorzystuje 12 kolumn , które renderują się w szerokościach 724px, 940px (domyślnie bez responsywnego CSS) i 1170px. Poniżej okien widocznych 767 pikseli kolumny stają się płynne i układają się pionowo.

  1. <div class = "wiersz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.


Przesunięcie kolumn

4
4 przesunięcie 4
3 przesunięcie 3
3 przesunięcie 3
8 przesunięcie 4 
  1. <div class = "wiersz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Zagnieżdżanie kolumn

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

Zagnieżdżone wiersze powinny zawierać zestaw kolumn, które sumują się do liczby kolumn jego rodzica. Na przykład dwie zagnieżdżone .span3kolumny powinny być umieszczone w .span6.

Poziom 1 kolumny
Poziom 2
Poziom 2 
  1. <div class = "wiersz" > 
  2.   <div class = "span6" > 
  3.     Kolumna poziomu 1
  4.     <div class = "wiersz" > 
  5.       <div class = "span3" > Poziom 2 </div> 
  6.       <div class = "span3" > Poziom 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

System siatki płynów 12 responsywnych kolumn procentowych

Kolumny z płynem

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Procenty, nie piksele

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

Płynne rzędy

Spraw, aby dowolny wiersz był płynny, po prostu zmieniając .rowna .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.

Narzut

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Zagnieżdżanie płynów

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.

Płyn 12
Płyn 6
Płyn 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Poziom 1 kolumny
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Poziom 2 </div> 
  6.       <div class = "span6" > Poziom 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Dostosowanie siatki

Zmienny Domyślna wartość Opis
@gridColumns 12 Liczba kolumn
@gridColumnWidth 60px Szerokość każdej kolumny
@gridGutterWidth 20px Ujemna przestrzeń między kolumnami

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.

Layouts Podstawowe szablony do tworzenia stron internetowych

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

  1. <ciało>
  2.   <div class = "kontener" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "pojemnik-płyn" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Zawartość paska bocznego-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Zawartość treści-->
  8.     </div>
  9.   </div>
  10. </div>

Responsywny design Zapytania o media dla różnych urządzeń i rozdzielczości

Responsywne urządzenia

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ń

Korzystaj z zapytań o media w sposób odpowiedzialny i tylko jako początek dla odbiorców mobilnych. W przypadku większych projektów należy rozważyć dedykowane bazy kodu, a nie warstwy zapytań o media.

Wspierane urządzenia

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
Smartfony na tablety 767 pikseli i mniej Kolumny płynne, bez stałych szerokości
Tablety portretowe 768px i więcej 42px 20px
Domyślna 980 pikseli i więcej 60px 20px
Duży wyświetlacz 1200px i więcej 70px 30px

Wymaga metatagu

Aby upewnić się, że urządzenia prawidłowo wyświetlają strony responsywne, dołącz metatag viewport.

  1. <meta name = „viewport” content = „width=szerokość-urządzenia, początkowa skala=1.0” >

Korzystanie z zapytań medialnych

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

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

  1.   /* Telefony poziome i dół */
  2.   @media ( max - szerokość : 480px ) { ... }     
  3.  
  4.   /* Z telefonu w orientacji poziomej do tabletu w orientacji pionowej */
  5.   @media ( max - szerokość : 767px ) { ... }     
  6.  
  7.   /* Z tabletu w orientacji pionowej na poziomą i na komputer */
  8.   @media ( min - szerokość : 768px ) i ( max - szerokość : 979px ) { ... }        
  9.  
  10.   /* Duży pulpit */
  11.   @media ( min - szerokość : 1200px ) { ... }

Responsywne klasy użyteczności

Czym oni są

Aby przyspieszyć programowanie przyjazne dla urządzeń mobilnych, użyj tych podstawowych klas narzędzi do wyświetlania i ukrywania treści według urządzenia.

Kiedy użyć

Używaj w ograniczonym zakresie i unikaj tworzenia zupełnie różnych wersji tej samej witryny. Zamiast tego użyj ich do uzupełnienia prezentacji każdego urządzenia.

Na przykład możesz wyświetlić <select>element nawigacji w układach mobilnych, ale nie na tabletach lub komputerach stacjonarnych.

Klasy wsparcia

Pokazano tutaj tabelę obsługiwanych przez nas klas i ich wpływ na dany układ zapytań o media (oznaczony według urządzenia). Można je znaleźć w responsive.less.

Klasa Telefony480px i mniej Tablety767 pikseli i mniej Komputery stacjonarne768px i więcej
.visible-phone Widoczny
.visible-tablet Widoczny
.visible-desktop Widoczny
.hidden-phone Widoczny Widoczny
.hidden-tablet Widoczny Widoczny
.hidden-desktop Widoczny Widoczny

Przypadek testowy

Zmień rozmiar przeglądarki lub załaduj na różnych urządzeniach, aby przetestować powyższe klasy.

Widoczne na...

Zielone znaczniki wyboru wskazują, że klasa jest widoczna w bieżącym oknie roboczym.

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Pulpit✔ Pulpit

Ukryty na...

W tym przypadku zielone znaczniki wyboru wskazują, że klasa jest ukryta w bieżącym oknie roboczym.

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Pulpit✔ Pulpit