Bootstrap system sieci
krótkie wprowadzenie
W tym poradniku dowiesz się, jak tworzyć Bootstrap systemu sieci (system sieci).
Jak wiadomo, w zakresie projektowania graficznego, system sieci jest strukturą dwuwymiarową przez osie poziome i pionowe przecinają komponentów regionalnych treści budowy. Jest on powszechnie stosowany do projektowania układu i zawartości struktury projektowania graficznego. W tworzeniu stron internetowych, jest to szybki i skuteczny sposób, aby stworzyć spójny układ bardzo skuteczny sposób przy użyciu HTML i CSS. Tak więc, system sieci stało się ważnym elementem / ramka modułu workflow lub web design.
Mówiąc najprościej, projektowanie stron internetowych, używamy HTML i CSS do tworzenia wierszy i kolumn w celu uzyskania siatki. I kolumna zawiera rzeczywistą treść.
Od wersji 2.3.2 począwszy, Bootstrap oferuje dwa rodzaje siatek. Domyślnym systemem siatka jest 940px szerokości i 12. Możesz dodać Responsive stylów jak to przedstawił rzutnię, aby dostosować szerokość 724px i 1170px.
Istnieje również system sieci przepływu, który jest oparty na procencie, a nie oparte na pikselach. I może być rozszerzony na samo jako domyślny siatka jest elastyczny. W tym tutorialu omówimy domyślnej sieci przez kilka przykładów, system sieci przepływu zostanie wyjaśnione w osobnym poradniku.
Proszę pobrać najnowszą wersję plików z Bootstrap "http://twitter.github.io/bootstrap/assets/bootstrap.zip" na. Można w naszym wstępnym kursie zrozumieć odpowiednią strukturę plików.
Pierwsze z domyślnej sieci
Zacznijmy od podstawowego HTML rozpocząć, aby zobaczyć, jak powyższe domyślnej aplikacji siatkę.
<! DOCTYPE html>
<Html>
<Head>
<Title> using Bootstrap przykłady stałych układu </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Body>
</ Body>
</ Html>
Bootstrap Korzystanie z klasy CSS "wiersz", aby utworzyć linie poziome klasy CSS "Spanx" (wartość x wynosi od 1 do 12), aby utworzyć pionową kolumnę. Przez te dwa mogą tworzyć siatkę trzy kolumny (każda kolumna zawiera tekst), HTML w następujący sposób
<! DOCTYPE html> <Html> <Head> <Title> using Bootstrap przykłady stałych układu </ title> <Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0"> <! - Bootstrap -> <link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media "ekran" => <Script src = "http://code.jquery.com/jquery.js"> </ script> <Script src = "bootstrap / js / bootstrap.min.js"> </ script> </ Head> <Body> <Div class = "container"> <Div class = "wiersz"> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas ID, condimentum AT, laoreet Mattis, Massa. Sed eleifend nonummy diam. Praesent mauris ante, Elementum et, bibendum się, Zapytanie sit amet, NIBH. DUIs tincidunt LECTUS Quis DUI Viverra Vestibulum. Suspendisse vulputate aliquam DUI. nulla Elementum DUI ut augue. aliquam vehicula mil na mauris. mecenasa placerat, nisl na consequat rhoncus, sem nunc gravida Justo, Quis eleifend Arcu velit Quis lacus. Morbi magna magna, tincidunt a, Mattis non, imperdiet vitae, Tellus. Sed odio est auctor ac, sollicitudin się, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas ID, condimentum AT, laoreet Mattis, Massa. Sed eleifend nonummy diam. Praesent mauris ante, Elementum et, bibendum się, Zapytanie sit amet, NIBH. DUIs tincidunt LECTUS Quis DUI Viverra Vestibulum. Suspendisse vulputate aliquam DUI. nulla Elementum DUI ut augue. aliquam vehicula mil na mauris. mecenasa placerat, nisl na consequat rhoncus, sem nunc gravida Justo, Quis eleifend Arcu velit Quis lacus. Morbi magna magna, tincidunt a, Mattis non, imperdiet vitae, Tellus. Sed odio est auctor ac, sollicitudin się, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas ID, condimentum AT, laoreet Mattis, Massa. Sed eleifend nonummy diam. Praesent mauris ante, Elementum et, bibendum się, Zapytanie sit amet, NIBH. DUIs tincidunt LECTUS Quis DUI Viverra Vestibulum. Suspendisse vulputate aliquam DUI. nulla Elementum DUI ut augue. aliquam vehicula mil na mauris. mecenasa placerat, nisl na consequat rhoncus, sem nunc gravida Justo, Quis eleifend Arcu velit Quis lacus. Morbi magna magna, tincidunt a, Mattis non, imperdiet vitae, Tellus. Sed odio est auctor ac, sollicitudin się, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> </ Div> </ Div> </ Body> </ Html>
Poniżej jest graficznym przedstawieniem systemu sieci
W ten sposób, może być za pomocą "span4" klasy dla każdej kolumny, utworzony siatkę trzy kolumny. Klasa "Kontener" jest używany do przechowywania całą strukturę. Tutaj można zobaczyć instancji internetowego . Z tego możemy wywnioskować daną klasę CSS używany do tworzenia numer kolumny ogólnej składni.
Tworzenie ogólną składnię Grid:
<Div class = & quot; row & quot;> <Div class = & quot; Spanx & quot;> elementy inline jak rozpiętości elementów blokowych, takich jak p, div. </ Div> powtórz <div class = & quot; & quot; Spanx> razy y.
Gdzie y oznacza liczbę kolumn, które mają zostać utworzone, a x równa się 12 (który określa maksymalną liczbę kolumn, które można utworzyć) łącznie. x musi być dodatnia, a wartość musi wynosić od 1-12.
Na przykład, jeśli masz trzy kolumny o równej szerokości, z których każda kolumna jest class = "span4", ale jeśli chcesz, pierwsza kolumna większy niż dwa pozostałe, pierwsza kolumna może użyć class = "span6" Pozostałe dwie kolumny używając class = "span3".
Sposób tworzenia wiersza w stałej siatce
Następnie, zanim przejdziemy do innych przykładów, rzućmy okiem na stałej siatki do tworzenia wierszy i kolumn reguł CSS.
Klasa wiersz następująco
.row {
margin-left: -20px;
* Zoom: 1;
}
Ustawianie lewego marginesu do ujemnego 20 pikseli, a dla opcji "Zoom: 1;". Tutaj, "*" wskazuje atrybut zoom wszystkie elementy są ustawione na 1, aby naprawić IE6 / 7 błędów. Ustaw właściwość zoom 1, co założyć wewnętrzną właściwość o nazwie hasLayout do napraw IE6 / 7 Wiele zoom / kwestiach wykończeniowych.
.row: przed,
.row: after {
Wyświetlacz: Stół;
line-height: 0;
content: "";
}
Bootstrap przy użyciu poprzedniego kodu CSS, aby utworzyć linię. Używa ": Przed" i "Po" własności CSS. Te dwa pseudoelementy. ": Przed" stosuje się przed elementem docelowym w coś "Po" służy do wprowadzania pewnej treści po elementu docelowego. "Display: Stół;" tak, że elementy przedstawione w formie tabelarycznej. Poprzez ustawienie "line-height: 0;", aby upewnić się, że każdy wiersz nie posiadają wysokość wiersza za pomocą "treść:" "", aby upewnić się, że zawartość nie jest włożona do przodu i elementów tylnych.
Następnie należy wykonać następujące zasady w celu zapewnienia, aby po lewej i prawej stronie danego elementu nie jest pływający element.
.row: after {
clear: both;
}
Jak utworzyć kolumnę w stałej siatce
[Klasa * = "rozpiętość"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
To jest reguła CSS w użyciu. "[Klasa * =" rozpiętość "]" wybierz wartości atrybutów klasy dla wszystkich elementów w "rozpiętość" zaczęło. Teraz użyj "float: left;", aby zlokalizować każdą kolumnę obok siebie. Użyj "min-height: 1px", aby wszystkie kolumny mają minimalną wysokość 1px, użyj "margin-left: 20px;" ustawić lewy margines na 20 pikseli.
Użyj osobnego regułę CSS, aby ustawić szerokość kolumny. W szczególności, jak pokazano w poniższej tabeli
| CSS 代码 | 解释 |
|---|---|
.span12 {
width: 940px;
}
|
如果该行有一个单一的列，列宽为 940px。 |
.span11 {
width: 860px;
}
|
如果该行有一个由 11 列合并的列，列宽为 860px。 |
.span10 {
width: 780px;
}
|
如果该行有一个由 10 列合并的列，列宽为 780px。 |
.span9 {
width: 700px;
}
|
如果该行有一个由 9 列合并的列，列宽为 700px。 |
.span8 {
width: 620px;
}
|
如果该行有一个由 8 列合并的列，列宽为 620px。 |
.span7 {
width: 540px;
}
|
如果该行有一个由 7 列合并的列，列宽为 540px。 |
.span6 {
width: 460px;
}
|
如果该行有一个由 6 列合并的列，列宽为 460px。 |
.span5 {
width: 380px;
}
|
如果该行有一个由 5 列合并的列，列宽为 380px。 |
.span4 {
width: 300px;
}
|
如果该行有一个由 4 列合并的列，列宽为 300px。 |
.span3 {
width: 220px;
}
|
如果该行有一个由 3 列合并的列，列宽为 220px。 |
.span2 {
width: 140px;
}
|
如果该行有一个由 2 列合并的列，列宽为 140px。 |
.span1 {
width: 60px;
}
|
单个列宽为 60px。 |
Bootstrap wystąpienie domyślne siatki
Ten przykład pokazuje, jak utworzyć kolumnę, dwie kolumny, sześć kolumn, 12 kolumn i cztery kolumny (w tej kolejności).
Należy również zauważyć, że wszystkie kolumny są utworzone są otoczone klasy "pojemnika", "pojemnika" ma utworzyć stały układ za pomocą startowej.
Przykłady
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap przykładem systemu grid - w3cschool Bootstrap Tutorial </ title>
<Meta name = "description" content = "Tworzenie siatki z 16 kolumn startowej. Dowiedz się z przykładami, aby stworzyć system siatki w startowej.">
<link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
<Style>
.span12 h1 {color: # FE6E4C; font-weight: bold; padding: 5px;}
h3 {margin: 10px 0 10px 0;}
</ Style>
</ Head>
<Body>
<Div class = "container">
<Div class = "wiersz">
<div class = ""> span12
<H1> w3cschool.cc jest projektowanie stron internetowych i rozwój poradnik. </ H1>
</ Div>
</ Div>
<Div class = "wiersz">
<div class = ""> span12
<P> w3cschool oferuje tutoriale tworzenie stron internetowych. Wierzymy w Open Source. Normy miłości. I priorytet prostota i czytelność podczas służby treści. Z 3000+ unikalnych stronach treści i tysiące przykładów, jesteśmy niepełna. Mamy praktyk wydawców online, aby bawić z kodami np. </ p>
</ Div>
</ Div>
<Div class = "wiersz">
<div class = ""> span12
<H3> Niektóre z tych tematów i więcej ...: </ h3>
</ Div>
<Div class = "span2">
<P> <img src = "images / html5_logo.png" width = "140" height = "86" alt = "html5 logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / javascript logo.png" width = "140" height = "86" alt = "javascript logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / json.gif" width = "140" height = "86" alt = "JSON logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / php.png" width = "140" height = "86" alt = "PHP logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / mysql-logo.png" width = "140" height = "86" alt = "MySQL logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / przeglądarkę statistics.png" width = "140" height = "86" alt = "Statystyki przeglądarkowe logo" /> </ p>
</ Div>
</ Div>
<Div class = "wiersz">
<div class = ""> span12
<H3> Portale społecznościowe podzielić: </ h3>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "span1">
<P> <img src = "images / gplus.png" width = "50" height = "49" alt = "GPlus logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / twitter.png" width = "50" height = "38" alt = "Twitter logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / orkut.png" width = "50" height = "55" alt = "Orkut logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / ipad.png" width = "50" height = "53" alt = "iPad logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / digo.png" width = "50" height = "54" alt = "Digo logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / zapface.png" width = "51" height = "53" alt = "Zapface logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / facebook.png" width = "48" height = "53" alt = "facebook logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / netvibes.png" width = "51" height = "53" alt = "Netvibes logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / linkedin.png" width = "49" height = "54" alt = "full logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / newsvine.png" width = "48" height = "53" alt = "Newsvine logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / blogger.png" width = "51" height = "53" alt = "Blogger logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / reditt.png" width = "48" height = "57" alt = "Reddit logo" /> </ p>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "span3">
<H3> Fontend Development: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Div class = "span3">
<H3> Backend Developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Div class = "span3">
<H3> Zarządzanie bazą danych: </ h3>
<P> SQL, MySQL PostgreSQL, NoSQL, MongoDB </ p>
</ Div>
<Div class = "span3">
<H3> API, narzędzia i wskazówki: </ h3>
<P> Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Oto, co można stworzyć
Zobacz online
Patrz przykład powyżej w innym oknie przeglądarki.
Proszę kliknąć tutaj, aby pobrać wszystkie powyższe przykłady HTML, CSS, JS i plików graficznych.
Dodaj reaguje na domyślnej sieci
Jeśli chcesz dodać do wydajności reakcji Bootstrap domyślne siatki, dopiero po natywnego pliku CSS HTML, aby dodać
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
Aby wyświetlić domyślny siatkę z czuły, kliknij tutaj, aby zobaczyć demo online . Kliknij tutaj, aby pobrać kod .
Domyślny siatki odgrywa odpowiedź istnieją dwa warunki. Gdy okno (renderowania oczek wolnego miejsca) jest większa, niż 1200 pikseli [poprzez @media (min szerokość: 1200 pikseli) otrzymany] Gdy okno robocze jest większe niż 768px ale mniej niż 979px [poprzez @media (min szerokość: 768px) i ( max-width: 979px) ustawienia].
Offsetowy kolumny: Domyślna siatka
Za pomocą offsetu można poruszać prawą stronę kolumny do swojej pierwotnej pozycji. Odbywa się to przez dodanie do kolumny z lewej krawędzi do osiągnięcia. Przez Bootstrap, można użyć "offsetx" (gdzie wartość x jest dodatnia) klasa i klasa "spany" (gdzie wartość y jest dodatnia). Zależy 'offestx' 'x' jest wartością powiązanej ruchomej kolumnie 'x' szerokości kolumny po prawej stronie.
Szerokość przesunięcia jest określony w bootstrap CSS. Offset12 lewy górny margines wynosi 980px, minimalna odległość pozostaje Przesu1 100px.
Ponieważ system domyślne siatki jest oparta na piksel, gdy aplikacja jest przesunięty, trzeba wiedzieć, że chcesz użyć przesunięcia pikseli i kolumny pikseli ma być używany. Zarówno liczba pikseli sumowane nie może przekroczyć poziomu rzutni.
W poniższym przykładzie, będziemy tworzyć siatkę dwukolumnowy. Wśród nich możemy poruszać się w prawo tak, że lewa kolumna cztery kolumny. Kod HTML w następujący sposób:
Przykłady
<Div class = "wiersz">
<Div class = "span4 offset4">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum się, laoreet Mattis, Massa. Sed eleifend nonummy śr. Praesent mauris ante, Elementum et, bibendum się, Zapytanie sit amet, NIBH. DUIs tincidunt LECTUS Quis DUI Viverra Vestibulum. Suspendisse vulputate aliquam DUI. nulla Elementum DUI ut augue. aliquam vehicula mil na mauris. mecenasem placerat, nisl na consequat rhoncus, sem nunc gravida Justo, Quis eleifend Arcu velit Quis lacus . Morbi magna magna, tincidunt a, Mattis non, imperdiet vitae, Tellus. Sed odio est auctor ac, sollicitudin się, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
<Div class = "span3">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum się, laoreet Mattis, Massa. Sed eleifend nonummy śr. Praesent mauris ante, Elementum et, bibendum się, Zapytanie sit amet, NIBH. DUIs tincidunt LECTUS Quis DUI Viverra Vestibulum. Suspendisse vulputate aliquam DUI. nulla Elementum DUI ut augue. aliquam vehicula mil na mauris. mecenasem placerat, nisl na consequat rhoncus, sem nunc gravida Justo, Quis eleifend Arcu velit Quis lacus . Morbi magna magna, tincidunt a, Mattis non, imperdiet vitae, Tellus. Sed odio est auctor ac, sollicitudin się, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
</ Div>
</ Div>
Kliknij tutaj, aby zobaczyć demo online Kliknij tutaj, aby pobrać kod .
Możesz dodać w oryginalnym CSS reagującego CSS, możesz być niwelowane przy zastosowaniu kolumny dodać do siatki odpowiedzi domyślnej.
Zagnieżdżone kolumny: Domyślna siatka
Bootstrap przy użyciu domyślnego siatkę, kolumna może być zagnieżdżone. Wystarczy utworzyć wiersz w kolumnie, a liczba kolumn chcesz utworzyć zagnieżdżony wiersz. Jednocześnie należy pamiętać, że całkowita liczba kolumn dla zagnieżdżonych kolumn innych kolumn, aby upewnić się, że nie więcej niż liczba kolumn podczas tworzenia kolumny nadrzędnej wspomniałem.
Poniższy przykład pokazuje, jak gniazdo w domyślnych kolumn w siatce startowej.
Przykłady
<Div class = "wiersz">
<Div class = "span7">
<Div class = "wiersz">
<Div class = "span4">
<P> mecenasem aliquet velit vel turpis. Mauris neque metus, malesuada NEC, ultricies sit amet, porttitor Mattis, enim. W Massa libero, interdum NEC, interdum vel, blandit sed nulla. W ullamcorper, est eget tempor cursus, neque mil consectetuer mi, ultricies massa est sed nisl. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos hymenaeos. Proin nulla Arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta Convallis pede. </ p>
</ Div>
<Div class = "span3">
<P> mecenasem aliquet velit vel turpis. Mauris neque metus, malesuada NEC, ultricies sit amet, porttitor Mattis, enim. W Massa libero, interdum NEC, interdum vel, blandit sed nulla. W ullamcorper, est eget tempor cursus, neque mil consectetuer mi, ultricies massa est sed nisl. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos hymenaeos. Proin nulla Arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta Convallis pede. </ p>
</ Div>
</ Div>
</ Div>
<Div class = "span5">
<P> mecenasem aliquet velit vel turpis. Mauris neque metus, malesuada NEC, ultricies sit amet, porttitor Mattis, enim. W Massa libero, interdum NEC, interdum vel, blandit sed nulla. W ullamcorper, est eget tempor cursus, neque mil consectetuer mi, ultricies massa est sed nisl. Klasa aptent taciti sociosqu ad litora torquent za conubia nostra, za inceptos hymenaeos. Proin nulla Arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta Convallis pede. </ p>
</ Div>
</ Div>
</ Div>
Kliknij tutaj, aby zobaczyć demo online Kliknij tutaj, aby pobrać kod .
W powyższym przykładzie, linia w pojemniku ma dwie kolumny zostały zdefiniowane jako "class =" span7 "" i "class =" span5 «". Co daje w sumie 12 kolumn. Teraz możemy dodać wiersz w lewej kolumnie, a następnie utworzyć dwie kolumny, które są zdefiniowane jako "class =" span4 "" i "class =" span3 «". W związku z powyższym łączna liczba kolumn, w których do przestrzegania jego postanowień kolumnie dominującej (3 + 4 = 7).
Można również dodać tutaj wydajność reakcji.
wniosek
W tym poradniku, omówiliśmy domyślny Bootstrap sieci energetycznej. Ten poradnik jest oparta na Bootstrap V2.3.2. Poniżej znajduje się podsumowanie głównych punktów związanych z tym tutorialu:
- domyślny system sieci Bootstrap jest 940px szerokości i 12 kolumn.
- W siatce wiersz przez "class =" wiersz " 'Utwórz kolumnę przez' class =" "" Utwórz Spanx, gdzie x jest liczbą całkowitą dodatnią. X suma wszystkich kolumn nie może przekraczać 12.
- Dodając Bootstrap Responsive CSS, można dodać odpowiedź do domyślnej sieci.
- Użyj offset stworzyć dodatkową przestrzeń do kolumn. Korzystając z "klasa =" offsetx " ', gdzie X jest dodatnią liczbą całkowitą. Jeśli używany jest offset, całkowitą liczbę kolumn, numer zawiera przesunięcie do użytku nie więcej niż 11.
- Kolumny mogą być zagnieżdżone. W przypadku korzystania z kolumny zagnieżdżone, gdy całkowita liczba siatki obliczeniowej (linia kontenerowa) w kolumnie, zagnieżdżone kolumny powinny być uwzględnione.
- Można również użyć zagnieżdżonego kolumnę offsetu.