Bootstrap

Rusztowanie

Bootstrap jest zbudowany na responsywnych 12-kolumnowych siatkach, układach i komponentach.

Ustawienia ogólne

Wymaga typu dokumentu HTML5

Bootstrap korzysta z pewnych elementów HTML i właściwości CSS, które wymagają użycia doctype HTML5. Dołącz go na początku wszystkich swoich projektów.

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

Typografia i linki

Bootstrap ustawia podstawowe globalne style wyświetlania, typografii i łączy. W szczególności:

  • Usuń marginna 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

Te style można znaleźć w ramach scaffolding.less .

Resetuj przez normalizację

W Bootstrap 2 stary blok resetowania został porzucony na rzecz Normalize.css , projektu autorstwa Nicolasa Gallaghera i Jonathana Neala , który również zasila HTML5 Boilerplate . Chociaż w naszym reset.less używamy wielu elementów Normalize, usunęliśmy niektóre elementy specjalnie dla Bootstrapa.

Domyślny system siatki

Przykład siatki na żywo

Domyślny system siatki Bootstrap wykorzystuje 12 kolumn , co daje kontener o szerokości 940 pikseli bez włączonych funkcji responsywnych . Po dodaniu responsywnego pliku CSS siatka dostosowuje się do szerokości 724 i 1170 pikseli w zależności od widocznego obszaru. Poniżej okien widocznych 767 pikseli kolumny stają się płynne i układają się pionowo.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Podstawowa siatka HTML

Aby uzyskać prosty układ dwukolumnowy, utwórz .rowi dodaj odpowiednią liczbę .span*kolumn. Ponieważ jest to siatka 12-kolumnowa, każda z nich .span*obejmuje pewną liczbę z tych 12 kolumn i powinna zawsze sumować się do 12 dla każdego wiersza (lub liczby kolumn w rodzicu).

  1. <div class = "wiersz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

W tym przykładzie mamy .span4i .span8, co daje 12 kolumn i cały wiersz.

Przesunięcie kolumn

Przenieś kolumny w prawo za pomocą .offset*klas. Każda klasa zwiększa lewy margines kolumny o całą kolumnę. Na przykład .offset4porusza się .span4po czterech kolumnach.

4
3 przesunięcie 2
3 przesunięcie 1
3 przesunięcie 2
6 przesunięcie 3 
  1. <div class = "wiersz" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Zagnieżdżanie kolumn

Aby zagnieździć zawartość z domyślną siatką, dodaj nową .rowi zestaw .span*kolumn w istniejącej .span*kolumnie. Wiersze zagnieżdżone powinny zawierać zestaw kolumn, które sumują się do liczby kolumn jego rodzica.

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

System z płynną siatką

Przykład siatki płynnej na żywo

System elastycznej siatki używa procentów zamiast pikseli dla szerokości kolumn. Ma te same możliwości responsywne, co nasz system stałej siatki, zapewniając odpowiednie proporcje dla kluczowych rozdzielczości ekranu i urządzeń.

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

Podstawowy HTML z płynną siatką

Zmień dowolny wiersz na „płynny”, zmieniając .rowna .row-fluid. Klasy słupów pozostają takie same, co ułatwia przełączanie między siatkami stałymi i płynnymi.

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

Płynna kompensacja

Działa w taki sam sposób, jak odsunięcie w systemie stałej siatki: dodaj .offset*do dowolnej kolumny, aby odsunąć o tyle kolumn.

4
4 przesunięcie 4
3 przesunięcie 3
3 przesunięcie 3
6 przesunięcie 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Zagnieżdżanie płynów

Siatki płynne wykorzystują zagnieżdżanie w inny sposób: każdy zagnieżdżony poziom kolumn powinien zawierać do 12 kolumn. Dzieje się tak, ponieważ płynna siatka do ustawiania szerokości wykorzystuje wartości procentowe, a nie piksele.

Płyn 12
Płyn 6
Płyn 6
Płyn 6
Płyn 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Płyn 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Płyn 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Płyn 6 </div> 
  9.           <div class = "span6" > Płyn 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Płyn 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Układy

Naprawiono układ

Zapewnia wspólny układ o stałej szerokości (i opcjonalnie responsywny) z tylko <div class="container">wymaganymi.

  1. <ciało>
  2.   <div class = "kontener" > 
  3.     ...
  4.   </div>
  5. </body>

Układ płynny

Twórz płynną, dwukolumnową stronę z — <div class="container-fluid">idealną dla 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>

Elastyczny projekt

Włączanie funkcji responsywnych

Włącz responsywny CSS w swoim projekcie, dołączając odpowiedni metatag i dodatkowy arkusz stylów w <head>dokumencie. Jeśli skompilowałeś Bootstrap ze strony Dostosuj, wystarczy dołączyć metatag.

  1. <meta name = „viewport” content = „width=szerokość-urządzenia, początkowa skala=1.0” >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Heads-up!Bootstrap domyślnie nie zawiera obecnie funkcji responsywnych, ponieważ nie wszystko musi być responsywne. Zamiast zachęcać programistów do usunięcia tej funkcji, uważamy, że najlepiej włączyć ją w razie potrzeby.

O responsywnym Bootstrapie

Responsywne urządzenia

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
Duży wyświetlacz 1200px i więcej 70px 30px
Domyślna 980 pikseli i więcej 60px 20px
Tablety portretowe 768px i więcej 42px 20px
Telefony na tablety 767 pikseli i mniej Kolumny płynne, bez stałych szerokości
Telefony 480px i mniej Kolumny płynne, bez stałych szerokości 
  1. /* Duży pulpit */
  2. @media ( min - szerokość : 1200px ) { ... }     
  3.  
  4. /* Z tabletu w orientacji pionowej na poziomą i na komputer */
  5. @media ( min - szerokość : 768px ) i ( max - szerokość : 979px ) { ... }        
  6.  
  7. /* Z telefonu w orientacji poziomej do tabletu w orientacji pionowej */
  8. @media ( max - szerokość : 767px ) { ... }     
  9.  
  10. /* Telefony poziome i dół */
  11. @media ( max - szerokość : 480px ) { ... }

Responsywne klasy użyteczności

Aby przyspieszyć programowanie przyjazne dla urządzeń mobilnych, użyj tych klas narzędzi do wyświetlania i ukrywania treści według urządzenia. Poniżej znajduje się tabela z dostępnymi klasami i ich wpływem na układ danego zapytania o media (oznaczony według urządzenia). Można je znaleźć w responsive.less.

Klasa Telefony767 pikseli i mniej Tablety979px do 768px Komputery stacjonarneDomyślna
.visible-phone Widoczny
.visible-tablet Widoczny
.visible-desktop Widoczny
.hidden-phone Widoczny Widoczny
.hidden-tablet Widoczny Widoczny
.hidden-desktop Widoczny Widoczny

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. Responsywne narzędzia nie powinny być używane z tabelami i jako takie nie są obsługiwane.

Przypadek testowy narzędzi responsywnych

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