Bootstrap подвесная система
Краткое введение
В этом уроке, вы узнаете, как создать систему Bootstrap сетки (Grid System).
Как вы знаете, в области графического дизайна, система сетки представляет собой двумерную структуру, с помощью горизонтальной и вертикальной оси пересекаются региональные компоненты для построения контента. Он широко применяется в дизайн-макета и структуры содержимого графического дизайна. В веб-дизайне, это быстрый и эффективный способ создать последовательную схему очень эффективный способ с помощью HTML и CSS. Таким образом, система сетки стала важным компонентом / модуль кадра или веб-дизайн рабочего процесса.
Проще говоря, веб-дизайн, мы используем HTML и CSS для создания строк и столбцов для достижения сетки. А столбец содержит фактическое содержание.
Начиная с версии 2.3.2 и далее, Bootstrap предлагает два типа сетки. Система сетки по умолчанию 940px в ширину и 12. Вы можете добавить Отзывчивый таблицу стилей, как она представлена в иллюминатор, чтобы отрегулировать ширину 724px и 1170px.
Существует также система сетки потока, которая основана на процентах, а не на основе пикселей. И он может быть продлен на такой же, как сетки по умолчанию фиксированной отзывчивым. В этом уроке мы обсудим сетки по умолчанию через несколько примеров, подвесная система потока будет описана в отдельном руководстве.
Пожалуйста, скачайте последнюю версию бутстрапе файлов с "http://twitter.github.io/bootstrap/assets/bootstrap.zip" на. Вы можете в нашем вводном уроке , чтобы понять соответствующую структуру файла.
Получение из сетки по умолчанию
Давайте начнем с основной HTML начать видеть, как выше сетки приложения по умолчанию.
<! DOCTYPE HTML>
<HTML>
<Head>
<Title> используя Bootstrap примеры фиксированной разметки </ title>
<META NAME = "вьюпорт" содержание = "ширина = ширина устройства, начальный масштаб = 1.0">
<! - Bootstrap ->
<ссылка HREF = "самозагрузки / CSS / bootstrap.min.css" REL = "таблица стилей" медиа = "экран">
<Script SRC = "http://code.jquery.com/jquery.js"> </ скрипт>
<Script SRC = "бутстраповские / JS / bootstrap.min.js"> </ скрипт>
</ Head>
<Body>
</ Body>
</ HTML>
Bootstrap с помощью "строку" класса CSS для создания горизонтальных линий класса CSS "Spanx" (значение х равно от 1 до 12), чтобы создать вертикальную колонку. Через эти два можно создать сетку три колонки (каждый столбец содержит некоторый текст), HTML следующим образом
<! DOCTYPE HTML> <HTML> <Head> <Title> используя Bootstrap примеры фиксированной разметки </ title> <META NAME = "вьюпорт" содержание = "ширина = ширина устройства, начальный масштаб = 1.0"> <! - Bootstrap -> <ссылка HREF = "самозагрузки / CSS / bootstrap.min.css" REL = "таблица стилей" медиа = "экран"> <Script SRC = "http://code.jquery.com/jquery.js"> </ скрипт> <Script SRC = "бутстраповские / JS / bootstrap.min.js"> </ скрипт> </ Head> <Body> <Div класс = "контейнер"> <Div класс = "строка"> <Div класс = "span4"> <р> Lorem Ipsum Dolor сидят Амет, consectetuer adipiscing Элит. Нам Cursus. Morbi ут миль. Nullam enim Лев, экскретов идентификатор, condimentum на, laoreet Маттис, Massa. Sed eleifend nonummy диам. Связаться с Нами mauris анте, Elementum и др, Bibendum в, Дознание сидят Амет, nibh. DUIs tincidunt Lectus Quis дуи viverra преддверия. Suspendisse vulputate aliquam дуй. Nulla Elementum дуи ут augue. aliquam vehicula миль в mauris. Меценат placerat, nisl на consequat rhoncus, СЭМ Nunc gravida Justo, Quis eleifend arcu велит Quis Lacus. Morbi Магна Магна, tincidunt а, Маттис не, imperdiet Vitae, Tellus. Sed Одио То есть, auctor ас, sollicitudin в, consequat Vitae, Орси. Fusce ID Felis. Vivamus sollicitudin Метус Eget эрос. < / p> </ DIV> <Div класс = "span4"> <р> Lorem Ipsum Dolor сидят Амет, consectetuer adipiscing Элит. Нам Cursus. Morbi ут миль. Nullam enim Лев, экскретов идентификатор, condimentum на, laoreet Маттис, Massa. Sed eleifend nonummy диам. Связаться с Нами mauris анте, Elementum и др, Bibendum в, Дознание сидят Амет, nibh. DUIs tincidunt Lectus Quis дуи viverra преддверия. Suspendisse vulputate aliquam дуй. Nulla Elementum дуи ут augue. aliquam vehicula миль в mauris. Меценат placerat, nisl на consequat rhoncus, СЭМ Nunc gravida Justo, Quis eleifend arcu велит Quis Lacus. Morbi Магна Магна, tincidunt а, Маттис не, imperdiet Vitae, Tellus. Sed Одио То есть, auctor ас, sollicitudin в, consequat Vitae, Орси. Fusce ID Felis. Vivamus sollicitudin Метус Eget эрос. < / p> </ DIV> <Div класс = "span4"> <р> Lorem Ipsum Dolor сидят Амет, consectetuer adipiscing Элит. Нам Cursus. Morbi ут миль. Nullam enim Лев, экскретов идентификатор, condimentum на, laoreet Маттис, Massa. Sed eleifend nonummy диам. Связаться с Нами mauris анте, Elementum и др, Bibendum в, Дознание сидят Амет, nibh. DUIs tincidunt Lectus Quis дуи viverra преддверия. Suspendisse vulputate aliquam дуй. Nulla Elementum дуи ут augue. aliquam vehicula миль в mauris. Меценат placerat, nisl на consequat rhoncus, СЭМ Nunc gravida Justo, Quis eleifend arcu велит Quis Lacus. Morbi Магна Магна, tincidunt а, Маттис не, imperdiet Vitae, Tellus. Sed Одио То есть, auctor ас, sollicitudin в, consequat Vitae, Орси. Fusce ID Felis. Vivamus sollicitudin Метус Eget эрос. < / p> </ DIV> </ Div> </ Div> </ Body> </ HTML>
Ниже представлено графическое представление системы сетки
Таким образом, мы можем с помощью "span4" класс для каждого столбца, созданной сетки три колонки. Класс "Контейнер" используется для хранения всей структуры. Здесь Вы можете просмотреть онлайн экземпляр . Исходя из этого, мы можем вывести данный класс CSS, используемый для создания номер столбца общего синтаксиса.
Создать общий синтаксис сетки:
<Класс = Див & Quot; грести & Quot;> <Класс = Див & Quot; Spanx & Quot;> встроенные элементы, такие как промежуток, элементы уровня блока, как р, отд. </ Div> повторить <DIV класс = & Quot; Spanx & Quot;> у раз.
Где у есть число столбцов, которые вы хотите создать, и х равно 12 (что максимальное количество столбцов, которые можно создать), вместе взятых. х должно быть положительным целым числом, а значение должно быть от 1-12.
Например, если у вас есть три равных по ширине столбцов, каждый столбец представляет собой класс = "span4", но если вы хотите, чтобы первый столбец больше, чем два других, первый столбец может использовать класс = "span6" остальные две колонки с использованием класса = "span3".
Как создать строку в фиксированной сетке
Тогда, прежде чем мы перейдем к другим примерам, давайте взглянем на фиксированной сетке для создания строк и столбцов правил CSS.
строка класс следующим образом
.row {
Левое поле: -20px;
* Увеличение: 1;
}
Установка левого края до отрицательного 20px, и установить "* Zoom: 1;". Здесь "*" указывает на атрибут масштабирования все элементы устанавливаются в 1, чтобы установить IE6 / 7 жука. Установите свойство масштабирования 1, что установить внутреннюю свойство hasLayout для / проблем рендеринга ремонт IE6 / 7 Многие масштабирования.
.row: перед тем,
.row: после того, как {
дисплей: таблица;
высота линии: 0;
Содержание: "";
}
Bootstrap с использованием предыдущего кода CSS, чтобы создать линию. Он использует ": до" и ": после того, как" собственность CSS. Эти два псевдо-элементы. "Перед" используется до целевого элемента в нечто ": после того, как" используется для вставки некоторого содержимого после элемента мишени. "Дисплей: таблица"; таким образом, что элементы, представленные в табличной форме. Установив "высоту строки: 0;", чтобы гарантировать, что каждая строка не принадлежит высоту строки с помощью 'содержания: "" ", чтобы гарантировать, что содержимое не вставлен в передние и задние элементы.
Затем используйте следующие правила, чтобы обеспечить к левой и правой сторон данного элемента не плавающий элемент.
.row: после того, как {
ясно: то и другое;
}
Как создать столбец в фиксированной сетке
[Класс * = "пролет"] {
плавать: слева;
мин-высота: 1px;
Левое поле: 20px;
}
Это правило CSS для использования. '[Класс * = "пролет"] "выберите значения атрибутов класс для всех элементов в« пролетом »начал. Теперь используйте "Float: слева;", чтобы определить местонахождение каждого столбца соседствуют друг с другом. Используйте "мин-высота: 1px", чтобы сделать все столбцы имеют минимальную высоту 1px, используйте "Левое: 20px;" установите левый край на 20px.
Используйте отдельное правило CSS, чтобы установить ширину столбца. В частности, как показано в таблице ниже
| 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 экземпляра сетки по умолчанию
Этот пример демонстрирует, как создать столбец, две колонки, шесть колонок, 12 колонн и четыре столбца (в таком порядке).
Также обратите внимание, что все столбцы, которые создаются окружены класса "контейнер", "контейнер", чтобы создать фиксированный формат, используя Bootstrap.
примеров
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Bootstrap Пример системы сетки - w3cschool Bootstrap Учебник </ title>
<META NAME = "описание" содержание = "Создание 16 столбцов сетки с Bootstrap. Узнайте, с примерами для создания системы сетки в Bootstrap.">
<ссылка HREF = "самозагрузки / CSS / bootstrap.min.css" REL = "таблица стилей" медиа = "экран">
<Script SRC = "http://code.jquery.com/jquery.js"> </ скрипт>
<Script SRC = "бутстраповские / JS / bootstrap.min.js"> </ скрипт>
<Style>
.span12 h1 {цвет: # FE6E4C; шрифта: жирный; обивка: 5px;}
h3 {Маржа: 10px 0 10px 0;}
</ Style>
</ Head>
<Body>
<Div класс = "контейнер">
<Div класс = "строка">
<Div класс = "span12">
<H1> w3cschool.cc является веб-дизайн и разработка учебника. </ H1>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "span12">
<P> w3cschool предлагает обучающие веб-разработки. Мы считаем, что в Open Source. Стандарты любви. И приоритеты простоту и удобство чтения во время службы контента. С помощью 3000+ уникальных страниц контента и тысячи примеров, мы всесторонним. У нас есть онлайн-редакторов практики, чтобы играть вокруг с кодами примеров. </ p>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "span12">
<H3> Некоторые темы и многое другое ... </ h3>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "Images / html5_logo.png" ширина = "140" высота = "86" ALT = "html5 логотип" /> </ p>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "изображений / JavaScript-logo.png" ширина = "140" высота = "86" ALT = "JavaScript логотип" /> </ p>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "Images / json.gif" ширина = "140" высота = "86" ALT = "JSON логотип" /> </ p>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "Images / php.png" ширина = "140" высота = "86" ALT = "PHP логотип" /> </ p>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "изображения / MySQL-logo.png" ширина = "140" высота = "86" ALT = "MySQL логотип" /> </ p>
</ Div>
<Div класс = "Span2">
<P> <IMG SRC = "изображений / браузер statistics.png" ширина = "140" высота = "86" ALT = "Браузер статистики Логотип" /> </ p>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "span12">
<H3> Сайты социальных сетей для обмена: </ h3>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "Span1">
<P> <IMG SRC = "Images / gplus.png" ширина = "50" высота = "49" ALT = "GPlus логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / twitter.png" ширина = "50" высота = альт "38" = "Twitter логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / orkut.png" ширина = высота "50" = "55" ALT = "Orkut логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "изображений / ipad.png" ширина = "50" высота = "53" ALT = "IPAD логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / digo.png" ширина = "50" высота = альт "54" = "Digo логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / zapface.png" ширина = высота "51" = "53" ALT = "Zapface логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / facebook.png" ширина = высота "48" = "53" ALT = "facebook логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / netvibes.png" ширина = "51" высота = альт "53" = "Netvibes логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / linkedin.png" ширина = "49" высота = альт "54" = "LinkedIn логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / newsvine.png" ширина = "48" высота = альт "53" = "Newsvine логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / blogger.png" ширина = "51" высота = "53" ALT = "Blogger логотип" /> </ p>
</ Div>
<Div класс = "Span1">
<P> <IMG SRC = "Images / reditt.png" ширина = "48" высота = альт "57" = "Reddit логотип" /> </ p>
</ Div>
</ Div>
<Div класс = "строка">
<Div класс = "span3">
<H3> Fontend развития: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Div класс = "span3">
<H3> Backend Developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Div класс = "span3">
<H3> Управление базой данных: </ h3>
<P> SQL, MySQL PostgreSQL, NoSQL, MongoDB </ p>
</ Div>
<Div класс = "span3">
<H3> API, инструменты и советы: </ h3>
<P> Google Plus API, Twitter Bootstrap, JSON, поджигатель, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ HTML>
Вот то, что вы будете создавать
Просмотр Интернет
Смотрите пример выше в другом окне браузера.
Пожалуйста , нажмите здесь , чтобы загрузить все выше примеров HTML, CSS, JS и графических файлов.
Добавить в ответ на сетке по умолчанию
Если вы хотите добавить к производительности отклика Bootstrap сетки по умолчанию, только после того, как родной CSS HTML-файл, чтобы добавить
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
Для просмотра сетки по умолчанию с отзывчивым, нажмите здесь , чтобы посмотреть онлайн демо . Нажмите здесь , чтобы загрузить код .
Система по умолчанию сетки играет ответ есть два условия. Когда окно просмотра (сетка рендеринга свободного пространства) больше, чем 1200px [через @media (мин-ширина: 1200px) получается], когда видовой экран больше, чем 768px, но меньше, чем 979px [с помощью @media (мин-ширина: 768px) и ( макс-ширина: 979px) настройки].
Смещение столбцов: по умолчанию сетки
Используя смещение, вы можете переместить правую сторону колонны в исходное положение. Это делается путем добавления столбца к левому краю, чтобы достичь. По Bootstrap, вы можете использовать "OffsetX" (где значение х является положительным целым числом) класс и класс "spany" (где величина у является положительным целым числом). Зависит 'offestx' 'х' является значением соответствующего мобильного столбца 'х' ширины столбца справа.
Ширина смещения определяется в Bootstrap CSS. Offset12 верхний левый маржа составляет 980px, минимальное расстояние осталось смещение1 100px.
Поскольку система сетки по умолчанию основано на пикселе, когда приложение сдвигается, вы должны знать, что вы хотите использовать смещение пикселей и столбцов пикселов, которые будут использоваться. И количество пикселей складываются вместе, не должна превышать вашего уровня видового экрана.
В следующем примере мы создадим сетку с двумя колонками. Среди них, мы перемещаем вправо так, что левая колонка четыре колонки. HTML-код следующим образом:
примеров
<Div класс = "строка">
<Div класс = "span4 offset4">
<P> Lorem Ipsum Dolor сидят Амет, consectetuer adipiscing Элит. Нам Cursus. Morbi ут миль. Nullam enim Лев, экскретов идентификатор, condimentum на, laoreet Маттис, Massa. Sed eleifend nonummy диам. Связаться с Нами mauris анте, Elementum и др, Bibendum в, Дознание сидеть Амет, nibh. DUIs tincidunt Lectus Quis дуи viverra преддверия. Suspendisse vulputate aliquam дуй. Nulla Elementum дуи ут augue. aliquam vehicula миль в mauris. Меценат placerat, nisl в consequat rhoncus, СЭМ Nunc gravida Justo, Quis eleifend arcu велит Quis Lacus . Morbi Магна Магна, tincidunt а, Маттис не, imperdiet Vitae, Tellus. Sed Одио То есть, auctor ас, sollicitudin в, consequat Vitae, Орси. Fusce ID Felis. Vivamus sollicitudin Метус Eget эрос. </ p>
</ Div>
<Div класс = "span3">
<P> Lorem Ipsum Dolor сидят Амет, consectetuer adipiscing Элит. Нам Cursus. Morbi ут миль. Nullam enim Лев, экскретов идентификатор, condimentum на, laoreet Маттис, Massa. Sed eleifend nonummy диам. Связаться с Нами mauris анте, Elementum и др, Bibendum в, Дознание сидеть Амет, nibh. DUIs tincidunt Lectus Quis дуи viverra преддверия. Suspendisse vulputate aliquam дуй. Nulla Elementum дуи ут augue. aliquam vehicula миль в mauris. Меценат placerat, nisl в consequat rhoncus, СЭМ Nunc gravida Justo, Quis eleifend arcu велит Quis Lacus . Morbi Магна Магна, tincidunt а, Маттис не, imperdiet Vitae, Tellus. Sed Одио То есть, auctor ас, sollicitudin в, consequat Vitae, Орси. Fusce ID Felis. Vivamus sollicitudin Метус Eget эрос. </ p>
</ Div>
</ Div>
</ Div>
Нажмите здесь , чтобы посмотреть онлайн демо Нажмите здесь , чтобы загрузить код .
Вы можете добавить в оригинальной CSS отзывчивым CSS, вы также можете быть компенсировано за счет использования столбца, чтобы добавить к сетке отклика по умолчанию.
Вложенные столбцы: по умолчанию сетки
Bootstrap с помощью сетки по умолчанию, столбец могут быть вложенными. Вам просто нужно создать строку в столбце, а число столбцов, которые вы хотите создать вложенную строку. В то же время, вы должны помнить о том, что общее количество столбцов для вложенных столбцов других столбцов, чтобы гарантировать, что не больше, чем число столбцов при создании родительского столбца упоминается.
В следующем примере показано, как гнездо в столбцах по умолчанию в сетке Bootstrap.
примеров
<Div класс = "строка">
<Div класс = "span7">
<Div класс = "строка">
<Div класс = "span4">
<P> Меценат aliquet велит Vel turpis. Mauris neque Метус, malesuada включенные в другие группировки, ultricies сидят Амет, porttitor Маттис, enim. В Massa либеро, interdum включенные в другие группировки, interdum Vel, blandit СЭД, Nulla. В ullamcorper, ЭСТ Eget TEMPOR Cursus, neque мили consectetuer миль, А ultricies Massa Est СЕПГ nisl. Класс aptent taciti sociosqu объявление litora torquent на conubia ностра, в inceptos hymenaeos. Proin Nulla arcu, nonummy luctus, изречение Eget, fermentum и др, Lorem. Nunc convallis Pede Порта. </ p>
</ Div>
<Div класс = "span3">
<P> Меценат aliquet велит Vel turpis. Mauris neque Метус, malesuada включенные в другие группировки, ultricies сидят Амет, porttitor Маттис, enim. В Massa либеро, interdum включенные в другие группировки, interdum Vel, blandit СЭД, Nulla. В ullamcorper, ЭСТ Eget TEMPOR Cursus, neque мили consectetuer миль, А ultricies Massa Est СЕПГ nisl. Класс aptent taciti sociosqu объявление litora torquent на conubia ностра, в inceptos hymenaeos. Proin Nulla arcu, nonummy luctus, изречение Eget, fermentum и др, Lorem. Nunc convallis Pede Порта. </ p>
</ Div>
</ Div>
</ Div>
<Div класс = "span5">
<P> Меценат aliquet велит Vel turpis. Mauris neque Метус, malesuada включенные в другие группировки, ultricies сидят Амет, porttitor Маттис, enim. В Massa либеро, interdum включенные в другие группировки, interdum Vel, blandit СЭД, Nulla. В ullamcorper, ЭСТ Eget TEMPOR Cursus, neque мили consectetuer миль, А ultricies Massa Est СЕПГ nisl. Класс aptent taciti sociosqu объявление litora torquent на conubia ностра, в inceptos hymenaeos. Proin Nulla arcu, nonummy luctus, изречение Eget, fermentum и др, Lorem. Nunc convallis Pede Порта. </ p>
</ Div>
</ Div>
</ Div>
Нажмите здесь , чтобы посмотреть онлайн демо Нажмите здесь , чтобы загрузить код .
В приведенном выше примере, линия в контейнере имеет две колонны были определены как "класс =" span7 " 'и' класс =" span5 " '. Создание в общей сложности 12 колонн. Теперь мы добавим строку в левой колонке, а затем создать два столбца, которые определены как "класс =" span4 "" и "класс =" span3 " '. Таким образом, общее количество столбцов, в которых в соответствии с его положениями родительской колонки (3 + 4 = 7).
Вы можете также добавить здесь производительность отклика.
вывод
В этом учебнике мы обсуждали подвесную систему Bootstrap по умолчанию. Этот учебник основан на Bootstrap V2.3.2. Ниже приводится краткое изложение основных моментов, связанных с этой обучающей программы:
- Bootstrap подвесная система по умолчанию 940px в ширину, так и с 12 колоннами.
- В сетке, строка за "класс =" ряд "" Создать столбец по "класс =" Spanx "" Создать, где х представляет собой целое положительное число. Х сумма всех столбцов не должно превышать 12.
- Добавляя ответная CSS Bootstrap, вы можете добавить ответ на сетке по умолчанию.
- Используйте Offset, чтобы создать дополнительное пространство для колонн. Используя 'CLASS = "OffsetX"', где Х представляет собой положительное целое число. Если вы используете смещение, общее число столбцов, число включает смещение для использования не более чем на 11.
- Колонки могут быть вложенными. Если вы используете вложенную столбец, когда общее количество расчетной сетки (контейнерной линии) в колонке, должны быть включены вложенные колонки.
- Вы можете также использовать вложенную столбец смещения.