Bootstrap jest zbudowany na responsywnych 12-kolumnowych siatkach, układach i komponentach.
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.
- <!DOCTYPE html>
- <html lang = "pl" >
- ...
- </html>
Bootstrap ustawia podstawowe globalne style wyświetlania, typografii i łączy. W szczególności:
margin
na cielebackground-color: white;
nabody
@baseFontFamily
, @baseFontSize
, i @baseLineHeight
atrybutów jako naszej bazy typograficznej@linkColor
i zastosuj podkreślenia linków tylko na:hover
Te style można znaleźć w ramach scaffolding.less .
W Bootstrap 2 stary blok resetowania został porzucony na rzecz Normalize.css , projektu Nicolasa Gallaghera , który obsługuje również 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 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.
Aby uzyskać prosty układ dwukolumnowy, utwórz .row
i 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).
- <div class = "wiersz" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
W tym przykładzie mamy .span4
i .span8
, co daje łącznie 12 kolumn i pełny wiersz.
Przenieś kolumny w prawo za pomocą .offset*
klas. Każda klasa zwiększa lewy margines kolumny o całą kolumnę. Na przykład .offset4
porusza się .span4
po czterech kolumnach.
- <div class = "wiersz" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
Aby zagnieździć zawartość z domyślną siatką, dodaj nową .row
i 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.
- <div class = "wiersz" >
- <div class = "span9" >
- Kolumna poziomu 1
- <div class = "wiersz" >
- <div class = "span6" > Poziom 2 </div>
- <div class = "span3" > Poziom 2 </div>
- </div>
- </div>
- </div>
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ń.
Zmień dowolny wiersz na „płynny”, zmieniając .row
na .row-fluid
. Klasy słupów pozostają takie same, co ułatwia przełączanie między siatkami stałymi i płynnymi.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </div>
Zagnieżdżanie z elastycznymi siatkami jest nieco inne: liczba zagnieżdżonych kolumn nie powinna odpowiadać liczbie kolumn nadrzędnych. Zamiast tego każdy poziom kolumn zagnieżdżonych jest resetowany, 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>
Zapewnia wspólny układ o stałej szerokości (i opcjonalnie responsywny) z tylko <div class="container">
wymaganymi.
- <ciało>
- <div class = "kontener" >
- ...
- </div>
- </body>
Twórz płynną, dwukolumnową stronę z — <div class="container-fluid">
idealną dla 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>
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.
- <meta name = „viewport” content = „width=szerokość-urządzenia, początkowa skala=1.0” >
- <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.
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
.
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.
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 |
- /* Duży pulpit */
- @media ( min - szerokość : 1200px ) { ... }
- /* Z tabletu w orientacji pionowej na poziomą i na komputer */
- @media ( min - szerokość : 768px ) i ( max - szerokość : 979px ) { ... }
- /* Z telefonu w orientacji poziomej do tabletu w orientacji pionowej */
- @media ( max - szerokość : 767px ) { ... }
- /* Telefony poziome i dół */
- @media ( max - szerokość : 480px ) { ... }
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 | Ukryty | Ukryty |
.visible-tablet |
Ukryty | Widoczny | Ukryty |
.visible-desktop |
Ukryty | Ukryty | Widoczny |
.hidden-phone |
Ukryty | Widoczny | Widoczny |
.hidden-tablet |
Widoczny | Ukryty | Widoczny |
.hidden-desktop |
Widoczny | Widoczny | Ukryty |
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.
Zmień rozmiar przeglądarki lub załaduj na różnych urządzeniach, aby przetestować powyższe klasy.
Zielone znaczniki wyboru wskazują, że klasa jest widoczna w bieżącym oknie roboczym.
W tym przypadku zielone znaczniki wyboru wskazują, że klasa jest ukryta w bieżącym oknie roboczym.