Fundacja siatki Przykłady
Poniżej zebraliśmy kilka przykładów wspólnej sieci.
Trzy równorzędne kolumny
Ten przykład pokazuje, jak utworzyć trzy równe kolumny (33,3% / 33,3% / 33,3%), pokazując trzy kolumny dotyczące sprzętu średniej i dużej skali, automatyczne układanie na małych urządzeniach:
Przykłady
<Div class = "medium-4 kolumny" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medium-4 kolumny" style = "background-color: różowy;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medium-4 kolumny" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Spróbuj »
Trzy nierówne kolumny
Ten przykład pokazuje, jak utworzyć trzy nierówne kolumnę (25% / 50% / 25%), pokazując trzy kolumny dotyczące sprzętu średniej i dużej skali, automatyczne układania na małych urządzeniach:
Przykłady
<Div class = "medium-3 kolumny" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
<Div class = "medium-6 Kolumny" style = "background-color: różowy;">
<P> .medium-6 </ p>
</ Div>
<Div class = "medium-3 kolumny" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Spróbuj »
Dwie równe kolumny
Ten przykład pokazuje, jak utworzyć dwie równe kolumny (50% / 50%), udział małych, średnich i dużych urządzeń jest zawsze powyżej 50% / 50%:
Przykłady
<Div class = "small-6 Kolumny" style = "background-color: yellow;">
<P> .small-6 </ p>
</ Div>
<Div class = "small-6 Kolumny" style = "background-color: różowy;">
<P> .small-6 </ p>
</ Div>
</ Div>
Spróbuj »
Dwie nierówne kolumny
Ten przykład pokazuje, jak utworzyć dwie nierówne kolumny (33,3% / 66,6%), odsetek małych, średnich i dużych urządzeń jest zawsze powyżej 33,3% / 66,6%:
Przykłady
<Div class = "small-8 kolumn" style = "background-color: yellow;">
<P> .small-8 </ p>
</ Div>
<Div class = "small-4 kolumny" style = "background-color: różowy;">
<P> .small-4 </ p>
</ Div>
</ Div>
Spróbuj »
Zmienić kolejność kolumn
Używając .small|medium|large-push-* i .small|medium|large-pull-* Klasa modyfikować kolejność kolumn:
Przykłady
<Div class = "small-4 kolumny małą 8-push" style = "background-color: yellow;">
<P> .small-4 .small- 8-Push </ p>
</ Div>
<Div class = "small-8 kolumn małą 4-pull" style = "background-color: różowy;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>
Spróbuj »
Kolumna zagnieżdżona
Można używać zagnieżdżonych siatek (kolumna wkładka kolumna):
Przykłady
<Div class = "small-8 kolumn"> .small-8
<Div class = "wiersz">
<Div class = "small-8 kolumn"> .small-8 Zagnieżdżone
<Div class = "wiersz">
<Div class = "small-8 kolumn"> .small-8 Zagnieżdżony Znowu </ div>
<Div class = "small-4 kolumny"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 kolumny"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 kolumny"> .small-4 </ div>
</ Div>
Spróbuj »
Mieszane: telefon komórkowy, stacjonarny,
Układ siatki Fundacja ma trzy kolumny: .small-* (telefon komórkowy), .medium-* (płaskie) i .large-* (stacjonarny). Klasy te mogą być dynamicznie stosowane w połączeniu sprawiają, że układ bardziej elastycznym:
Wskazówka: Każda klasa może być powiększony, jeśli chcesz szerokość małych i dużych urządzeniu ekranu można ustawić zgodnie .small-* .
Przykłady
<Div class = "small-6 dużych kolumn-8"> .small-6 .large-8 </ div>
<Div class = "small-6 dużych-4 kolumny"> .small-6 .large-4 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-2 duże-4 kolumny"> .small-2 .large-2 </ div>
<Div class = "small-4 duże-4 kolumny"> .small-4 .large-2 </ div>
<Div class = "small-6 dużych-4 kolumny"> .small-6 .large-2 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-3 duże-5 kolumny"> .small-3 .large-5 </ div>
<Div class = "small-9 dużych-7 kolumny"> .small-9 .large-7 </ div>
</ Div>
Spróbuj »
Mieszane: telefon komórkowy, tablet i urządzenia stacjonarne
Przykłady
<Div class = "średnie 6 dużych kolumn-8"> .medium-6 .large-8 </ div>
<Div class = "średnie 6 dużych-4 kolumny"> .medium-6 .large-4 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-4 średnich 3 duże-7 kolumny"> .small-4 .medium-3 .large-7 </ div>
<Div class = "small-4 średnich 6 dużych-3 kolumny"> .small-4 .medium-6 .large-3 </ div>
<Div class = "small-4 średnich 3 duże-2 kolumny"> .small-4 .medium-3 .large-2 </ div>
</ Div>
Spróbuj »
W środkowej kolumnie
Można użyć środkowej kolumnie .small-centered klasę. Średnie i duże urządzenia mogą być dziedziczone skupia małe urządzenia, ale trzeba ustawić klasę skupia się na duży sprzęt .large-centered .
Przykłady
<Div class = "small-4 małe skupione kolumny"> małą 4 małe skupione </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-6 małych skoncentrowane kolumny"> małej 6 małych skoncentrowane </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-6 dużych skoncentrowanych kolumny"> małe 6 duże skoncentrowane </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-8 small-centered-uncentered duże kolumny"> małą 8-centered małe dużą uncentered </ div>
</ Div>
<Div class = "wiersz">
<Div class = "small-10 małe skupione kolumny"> małe 10 małych skoncentrowane </ div>
</ Div>
Spróbuj »
kolumna offsetowy
Można użyć .large-offset-* (lub .small-offset-* ) klasę, ustaw kolumnie po prawej stronie. Liczba kolumn na lewym marginesie kontroli przy użyciu gwiazdkę:
Przykłady
<Div class = "duże-1 kolumny"> 1 </ div>
<Div class = "duże-11 kolumny"> 11 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "duże-1 kolumny"> 1 </ div>
<Div class = "duże-10 duże offsetu-1 kolumny"> 10, offset 1 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "duże-1 kolumny"> 1 </ div>
<Div class = "duże-9 dużych offset-2 kolumny"> 9, offset 2 </ div>
</ Div>
<Div class = "wiersz">
<Div class = "duże-1 kolumny"> 1 </ div>
<Div class = "duże-8 dużych offset-3 kolumny"> 8, offset 3 </ div>
</ Div>
Spróbuj »
Niepełna kolumny
Jeśli liczba kolumn w wierszu, a nie 12, Fundacja automatycznie jako ostatni do prawego pływaka, a pusty wypełnić pozostałych kolumn.
Opcje .end kategorii elementem ostatniego jeden zestaw do lewego pływaka:
Przykłady
<div class = "medium-3 kolumny"> .medium-3 </ div>
<div class = "medium-3 kolumny"> .medium-3 </ div>
<div class = "medium-3 kolumny"> .medium-3 </ div>
</ Div>
<Div class = "wiersz">
<div class = "medium-3 kolumny"> .medium-3 </ div>
<div class = "medium-3 kolumny"> .medium-3 </ div>
<Div class = "średnie-3 kolumny kończą"> .medium-3 .END </ div>
</ Div>
Panoramiczny
Siatka ( .row ) Maksymalny rozmiar (max-width) jest 62.5rem. Na Wide wielkość może być większa niż 62.5rem kolumna ta nie będzie wypełnij strona, nawet jeśli szerokość jest ustawiona na 100%. Ale możemy ustawić nowy max-width poprzez CSS:
Jeśli chcesz użyć domyślnego max-width, ale kolor tła między całej strony, a następnie użyć na element kontenera .row klasie, i trzeba określić kolor tła:
Przykłady
<Div class = "wiersz">
<Div class = "small-6 Kolumny" style = "background-color: yellow;"> .small-6 </ div>
<Div class = "small-6 Kolumny" style = "background-color: różowy;"> .small-6 </ div>
</ Div>
</ Div>
Spróbuj »