Bootstrap 3 col: Grid system · Bootstrap

Содержание

Bootstrap Бутстрап 4 Grid Examples

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯


Ниже мы собрали несколько примеров схем Bootstrap 4 Grid.


Три равные колонки

Используйте .col класс на заданном количестве элементов, и Bootstrap распознает количество элементов (и создает столбцы с одинаковой шириной). В приведенном ниже примере мы используем три элемента Col, который получает ширину 33,33% каждый.

col

col

col

Пример

<div>
  <div>col</div>
  <div>col</div>
  <div class=»col»>col</div>
</div>


Три равных столбца с использованием чисел

Можно также использовать числа для управления шириной столбцов. Просто убедитесь, что сумма добавляет до 12 или меньше (это не обязательно, что вы используете все 12 доступных столбцов):

col-4

col-4

col-4

Пример

<div>
  <div>col-4</div>
  <div>col-4</div>
  <div class=»col-4″>col-4</div>
</div>


Три неравные колонки

Для создания неравных столбцов необходимо использовать числа. В следующем примере будет создано 25% 50% от 25% Сплита:

col-3

col-6

col-3

Пример

<div>
  <div>col-3</div>
  <div>col-6</div>
  <div class=»col-3″>col-3</div>
</div>



Установка ширины одной колонки

Тем не менее, достаточно установить ширину одного столбца и автоматически изменять размер столбцов. В следующем примере будет создано 25% 50% от 25% Сплита:

col

col-6

col

Пример

<div>
  <div>col-3</div>
  <div>col-6</div>
  <div class=»col»>col-3</div>
</div>


Более равные столбцы

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6

Пример

<!— Two equal columns —>
<div>
  <div>1 of 2</div>

  <div>2 of 2</div>
</div>

<!— Four equal columns —>
<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

<!— Six equal columns —>
<div>
  <div>1 of 6</div>
  <div>2 of 6</div>
  <div>3 of 6</div>
  <div>4 of 6</div>  
  <div>5 of 6</div>
  <div>6 of 6</div>
</div>


Больше неравных столбцов

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 4

2 of 4

3 of 4

4 of 4

Пример

<!— Two Unequal Columns —>
<div>
  <div>1 of 2</div>
  <div>2 of 2</div>
</div>

<!— Four Unequal Columns —>
<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

<!— Setting two column widths —>

<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>


Одинаковая высота

Если один из столбцов выше, чем другой (из-за текста или CSS высота), остальное будет следовать:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.

col

col

Пример

<div>
  <div>Lorem ipsum…</div>
  <div>col</div>
  <div>col</div>
</div>


Вложенные столбцы

В следующем примере показано, как создать компоновку двух столбцов с двумя столбцами внутри одного из столбцов:

Пример

<div>
  <div>
    .col-8
    <div>
      <div>.col-6</div>
      <div>.col-6</div>
    </div>
  </div>
  <div>.col-4</div>
</div>


Адаптивные классы

Система Grid Bootstrap 4 имеет пять классов:

  • .col- (дополнительные малые устройства-ширина экрана менее 576пкс)
  • . col-sm- (малые устройства-ширина экрана равна или больше, чем 576пкс)
  • .col-md- (средние устройства-ширина экрана, равная или превышающая 768px)
  • .col-lg- (большие устройства-ширина экрана равна или больше, чем 992пкс)
  • .col-xl- (XLarge устройства-ширина экрана, равная или превышающая 1200px)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину sm и md, вы только должны указать sm.


Укладываются в горизонтальную

col-sm-9

col-sm-3

col-sm

col-sm

col-sm

В следующем примере показано, как создать макет столбца, который начинается с стека на дополнительных малых устройствах, прежде чем стать горизонтальным на больших устройствах (SM, MD, LG и XL):

Пример

<div>
  <div>col-sm-9</div>
  <div>col-sm-3</div>
</div>
<div>
  <div class=»col-sm»>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>


Смешивать и сочетать

col-6 col-sm-9

col-6 col-sm-3

col-7 col-lg-8

col-5 col-lg-4

col-sm-3 col-md-6 col-lg-4

col-sm-9 col-md-6 col-lg-8

Пример

<!— 50%/50% split on extra small devices and 75%/25% split on larger devices —>
<div>
  <div>col-6 col-sm-9</div>
  <div>col-6 col-sm-3</div>
</div>

<!— 58%/42% split on extra small, small and medium devices and 66.

3%/33.3% split on large and xlarge devices —>
<div>
  <div>col-7 col-lg-8</div>
  <div>col-5 col-lg-4</div>
</div>

<!— 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) —>
<div class=»row»>
  <div>col-sm-3 col-md-6 col-lg-4</div>
  <div>col-sm-9 col-md-6 col-lg-8</div>
</div>


Нет водосточных желобов

Добавьте .no-gutters класс в .row контейнер для удаления водосточных желобов (дополнительное пространство):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Пример

<div>

❮ Назад Дальше ❯

bootstrap 4 популярное

bootstrap сетка
bootstrap меню
bootstrap modal модальное окно
блоки bootstrap
bootstrap скачать бесплатно
bootstrap кнопки
bootstrap формы
bootstrap таблицы
bootstrap примеры



Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Поддержка формата Bootstrap 3 в конструкторе сайта ReadyScript

Bootstrap – cамый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Он использует самые современные технологии CSS и HTML, именно поэтому он был включен в список поддерживаемых сеточных фреймворков в конструкторе сайта ReadyScript. Прежде всего, давайте рассмотрим, какие преимущества имеют темы оформления ReadyScript, собранные по сетке, для этого детальнее окунемся в техническую часть таких тем.  

Тема оформления, собранная по сетке оперирует понятиями: контейнер, строка, секция, блок. Первые три элемента — это понятия, которые полностью дублируют сущности, используемые в bootstrap.

  • Контейнер – это элемент с классом «container», который имеет условную ширину в 12 колонок и может содержать Строки.
  • Строка – это элемент с классом «row», который может содержать Секции или вложенные Строки.
  • Секция – это элемент с классом «col-*-*», который может содержать вложенные Секции, Строки или Блоки. Ширина секции, задается в диапазоне от 1 до 12 и определяет количество колонок, которые она занимает.
  • Блок – это видимая часть модулей системы, например, блок категорий, блок меню, блок с баннерами, блок со списком товаров, и т.д.

Главное отличие «тем по сетке» от «обычных тем», заключается в том, что скелет страницы, а именно расположение компонентов(блоков), формируется в специальном Конструкторе сайта ReadyScript, и только верстка функциональных блоков непосредственно размещена в шаблонах. Такая модель дает возможность пользователю самостоятельно устанавливать внешний вид сайта, наполнять его функциональностью за счет изменения состава блоков внутри секций, и даже производить перестановки самих секций. В практическом смысле это означает, что можно добавить или перенести колонку или иную область блоков в любой части страницы.

Разработчикам такая модель открывает путь к простому обновлению темы оформления с помощью тотальной перезаписи папки с темой оформления, т.к. все сведения об установленных блоках и их параметрах находятся в базе данных, а соответственно они сохранятся.

Bootstrap 3 по-умолчанию поддерживает адаптации для 4х видов устройств:

  • очень малые устройства (XS), экран менее 768 px
  • малые устройства (SM), экран не менее 768 px
  • средние устройства (MD), экран не менее 992 px
  • большие устройства (LG), экран не менее 1200 px


Для каждого из перечисленных выше устройств, можно определить собственное расположение блоков. В конструкторе сайта имеется переключатель устройств, который позволит смоделировать расположение секций на выбранном устройстве.

Показать HTML для данной сетки

<div> <div> <div>…</div> <div>…</div> <div>…</div> <div>…</div> </div> </div>

Рассмотрим на примерах различные случаи генерации сетки

1. Классический пример

<div> <div> <div>…здесь будут Блоки…</div> <div>…здесь будут Блоки…</div> </div> </div>

В Конструкторе сайта это будет выглядеть так:

2. Что делать, если до или после контейнера(.container) требуется вставка индивидуальной разметки?

<div> <div> <div> <p> Custom text</p> <div> <div>.

..здесь будут Блоки…</div> <div>…здесь будут Блоки…</div> </div> </div> </div> </div>

В таком случае необходимо воспользоваться внешним и внутренним шаблонами, которые можно указать у контейнера. В данном случае внешний шаблон должен иметь следующее содержимое, назовем файл outside.tpl:

<div> {$wrapped_content} </div>

А внутренний, назовем его inside.tpl следующее:

<div> <p> Custom text</p> {$wrapped_content} </div>

Переменная $wrapped_content всегда содержит HTML-код вложенных элементов. Указываем шаблоны outside.tpl, inside.tpl в настройках контейнера.

Внешние и внутренные шаблоны дают полную свободу программистам по обертыванию автоматически сгенерированного кода собственным. Для простых случаев, когда контейнер требуется просто обернуть одним элементом с неким классом, можно воспользоваться настройками контейнера «Внешний элемент», «CSS-класс оборачивающего блока».

3. Что делать, если после секции(.col-*-*) требуется вставка индивидуальной разметки?

<div> <div> <div> <div> <p> Custom text </p> …здесь будут Блоки… </div> </div> <div>…здесь будут Блоки…</div> </div> </div>

В таком случае необходимо воспользоваться внутренним шаблоном, который можно указать у секции. В данном случае внутренний шаблон, назовем его inside.tpl, должен иметь следующее содержимое:

<div> <p> Custom text</p> {$wrapped_content} </div>

Указываем шаблон inside.tpl в настройках секции.

Если необходимо после Секции (col-*-*) вставить clearfix, то необходимо отметить соответствующий флажок в окне редактирования секции. Итоговый HTML будет в этом случае таким:

<div> <div> <div>…здесь будут Блоки…</div> <div></div> <div>…здесь будут Блоки…</div> </div> </div>

4. Как добавить произвольные классы к генерируемым системой элементам?

<div> <div> <div>…здесь будут Блоки…</div> <div></div> <div>…здесь будут Блоки…</div> </div> </div>

В окне редактирования каждого элемента(контейнера, строки, секции) есть соответствующее поле «Произвольный CSS класс», которое позволяет решить данную проблему.

Файлы стилей в темах оформления

После того, как сетка в Конструкторе сайта будет настроена, ReadySript успешно сгенерирует соответствующий HTML, однако подключение необходимых CSS файлов в клиентской части полностью ложится на разработчика темы. То есть в файле layout.tpl нужно позаботиться о подключении файлов CSS фреймворка нужной конфигурации, чтобы HTML обрел необходимую форму.

{* Подключаем CSS файлы для темы оформления *} {addcss file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css» basepath=»root» no_compress=true} {* Подключаем JS файлы для темы оформления *} {addjs file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js» basepath=»root» no_compress=true} {* Выводим bootstrap сетку из Конструктора сайта *} {$app->blocks->renderLayout()}

Приятная мелочь

Во время настройки элементов в Конструкторе сайта, существует вероятность, что какая-либо секция съедет за область видимости браузера, в случае некорректного указания параметров у секции. Как найти потом такую секцию, чтобы открыть её повторно к редактированию и ввести корректные параметры? С помощью специально разработанной для таких случаев кнопки, расположенной в правой части контейнера. Нажатие на данную кнопку будет включать режим «плоского» отображения всех элементов. В таком режиме не действуют смещения и размеры элементов, поэтому абсолютно любую секцию можно будет легко найти.

Заключение

В данной статье мы рассмотрели на примерах самые вероятные вопросы, которые могут возникнуть при сборке тем оформления в новом формате. В целом сборка темы по сетке bootstrap лишь незначительно отличается от сборки по сетке GS960, поэтому рекомендуем к прочтению нашу подробную документацию по сборке тем оформления в формате GS960. Ожидаем, что в скором времени появятся темы оформления, собранные по сетке bootstrap и это станет наилучшим примером для разработчиков.


03 ноября 2015 18:22, Артем Полторанин

Рассказать друзьям:

html — строки и столбцы в бутстрапе 3

Задать вопрос

спросил

Изменено 4 года, 1 месяц назад

Просмотрено 1к раз

Я пытаюсь показать имя «тест» 3 раза подряд и 3 раза во второй строке, но разделы в горизонтальной строке не отображаются

Вместо этого он показывает мне все в шаблоне verticle col. ..

 
<мета-кодировка="UTF-8">




бутстрап
 
 <дел>
     

Услуги

<дел> <раздел> Значок

Овощи

Bootstrap включает адаптивную мобильную первую плавающую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых параметров макета, а также мощные миксины для создания более семантических макетов.

<раздел> Значок

Автомобили

Bootstrap включает адаптивную мобильную первую плавающую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых параметров макета, а также мощные миксины для создания более семантических макетов.

<раздел> Значок

одежда

Bootstrap включает адаптивную мобильную первую плавающую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых параметров макета, а также мощные миксины для создания более семантических макетов.

<дел> <раздел> Значок

Мотоцикл

Bootstrap включает адаптивную мобильную первую плавающую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых параметров макета, а также мощные миксины для создания более семантических макетов.

<раздел> Значок

Домашние животные

Bootstrap включает адаптивную мобильную первую плавающую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых параметров макета, а также мощные миксины для создания более семантических макетов.

<раздел> Значок

Телефон

<р> Bootstrap включает в себя отзывчивую, мобильную первую систему гибкой сетки, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает в себя предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантических макетов.

 //мой код css
    .икона{
        максимальная ширина: 150 пикселей;
        поле: 0 авто;
        дисплей: блок;
    }
    .сервисный раздел{
        выравнивание текста: по центру;
    }
 

как этот код будет работать? есть какие-то исправления или предложения?

  • html
  • css
  • twitter-bootstrap-3
  • bootstrap-modal
  • bootstrap-4

Система сетки bootstrap требует своих стилей css.

Попробуйте ввести следующее в свой тег:

 
 

Ваш код выглядит нормально, после этого он должен работать.

3

Ваш код кажется правильным, вам просто нужно обрабатывать несколько разрешений экрана, в приведенном ниже фрагменте я добавил col-xs-4 , что дает мне возможность отображать мою систему сетки на экранах меньшего размера. это должно тебе помочь

 

 
//основной контейнер

Услуги

//1-я строка <раздел>

Тест

<раздел>

Тест

<раздел>

Тест

//2-я строка <раздел>

Тест

<раздел>

Тест

<раздел>

Тест

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Что такое смещение столбцов в сетке Bootstrap 3?

Улучшить статью

Сохранить статью

  • Последнее обновление: 05 янв, 2023

  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    Смещение: Это выглядит потрясающе, когда содержимое нашей веб-страницы видно на всей ширине окна просмотра доступной ширины устройства. Но в некоторых случаях мы должны предоставить некоторую область компонентам веб-страницы вокруг них, что сделает их более привлекательными. Итак, для достижения этой цели начальная загрузка знакомит нас с концепцией смещения . Зачет — это способ толкать или перемещать объекты на веб-странице, чтобы освободить место вокруг них.

    Настройка среды: Нам нужно добавить ссылку начальной загрузки CDN в наш HTML-документ для использования смещения столбца как:




    Для реализации смещения мы используем класс ‘.offset-n’ , где ‘n’ указывает ширину, на которую компонент должен сместиться из исходного положения.

    Синтаксис:

     
    // содержимое тега div

    Смещение столбца: Смещение столбца используется для перемещения или выталкивания столбца из исходного положения на указанную ширину или расстояние. Чтобы реализовать смещение столбца, мы используем ‘.col-m’ класс с классом ‘.col-offset-n’ , который сдвигает столбец на n столбцов.

    Синтаксис:

     
    // содержимое тега div

    Мы можем использовать это с разными точками останова. Итак, здесь мы используем его с «md», так что любое смещение, которое мы применяем, должно быть действительным для среднего, большого, очень большого и очень большого размера экрана. Поэтому здесь мы используем класс ‘.col-md-m’ с ‘.col-md-offset-n класс.

    Пример 1: Ниже пример показано, что применение столбца. >

    < Голова >

    < META CHARSET = META CHARSET = META CHARSE0040 "UTF-8" >

       < meta http-equiv = "X-UA-Compatible"

             content = " IE = Edge " >

    < Meta Имя = " Viewport "

    Содержание . 33333 . 39039. 39039. 39. 39. 39. 39. 39. 439. 9004. 9004. 39. 39. 9004. 39. . =1,0" >

     

      

       < link rel = "stylesheet"

             href =

    "https://cdn .jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

             integrity =

    "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"  

             crossorigin = "anonymous" >

      

       < script src =

               "https://cdn . jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js "

    =

    " SHA384-QJHTVGHMR9XO6.T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"

               crossorigin = "anonymous" >

       script >

     

       < script источник =

    "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

          0040 integrity =

    "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

               crossorigin = "anonymous" >

       Скрипт >

    < Сценарий SRC = "https://code. jquery.com/jquery-3.6.0040

               integrity =

    "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

               crossorigin = "anonymous" >

       < / скрипт >

       < стиль >

    9 .0   9003 {зеленый0040

           цвет: зеленый;

         }

       style >

     

       < title >Column Offsetting title >

    головка >

     

    < корпус >

       < center >

         < div class = "box" >

           < h3 class = "зеленый" > Добро пожаловать в GFG H3 >

    < BR > < BR >0040

    < DIV Класс = " >

    < Div MD-4 Green " >

    < H5 > Hey Geek! H5 >

    >

    9 <

    40

    P > Я составлен со смещенной колонкой по четырем столбцам. >

    < DIV Класс = "Row" >

    1>

    111919 гг.0040 DIV Класс = "COL-MD-4 Offset-MD-3 Green" >

    < H5 > Хей GEK! ГИК! >

    < P > Я составлен со смещением на три столбца.0039 >

           div >

     

           < div class = "row" >

               < div class = "col-md-4 offset-md-2 green" >

                90 90 40 0039> Hey Geek! H5 >

    < P > Я составлена ​​с двумя колонками. Div >

    Div >

    <

    19040

    19090

    0

    >

    >

    0040 class = "row" >

               < div class = "col-md-4 offset-md-1 green" >

    < H5 > Hey Geek! H5 >

    < P > I'm Aff Sotpset. 0040 p >

     

               div >

           div >

     

           < div class = "строка" >

               < div class

    0 "COL-MD-4" >

    < H5 > Hey Geek! H5 >

    >

    9.. < < < < < < < <. Нормальная колонна. P >

    DIV >

    .0003

         div >

       center >

    body >

     

    html >

    Выход:

    Пример 2:

    .0039

    < html lang = "en" >

     

    < head >

       < meta charset = "UTF-8" >

       < meta http-equiv = "X-UA-Compatible"

             content = "IE=edge" >

       < meta name = "viewport"

             content = "ширина = ширина устройства, начальная масштаба = 1,0" >

    < Link href =

    "https://cdn. jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

             rel = " stylesheet"

             integrity =

    "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"

             crossorigin = "anonymous" >

    < Скрипт SRC =

    "HTTPS://cdn.jsdelivr.net/NSSTR.SSTRSSTR.SSTR.SSTRSSTR.SSTRSSTR.SSTR.SSTR. min.js"

               integrity =

    "sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"

               crossorigin = "anonymous" >

       script >

     

       < script src =

    "https://cdn. jsdelivr .net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

               integrity =

    "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

               crossorigin = "anonymous" >

       script >

     

       < script src = "https://code.jquery.com/jquery-3.6.0.min.js"

    =

    "SHA256-/xujejexlQ6.0040

               crossorigin = "anonymous" >

       script >

       < style >

         . зеленый {

             цвет: зеленый;

         }

       style >

     

       < title >Column Offsetting title >

    head >

     

    < Body >

    < Центр >

    < Div

    < Div

    < Div

    0040 Класс = "Box" >

    < H3 Class = "Green" = " = " = ". BR >

    < DIV Класс = "ряд" >

    39090

    391

    09090

    340

    3911>

    >

    .0039 div class = "col-md-4 green" >

               < h5 >Hey Geek! h5 >

               < P > I'm Normal Coluns. 0003

             < div class = "col-md-4 offset-md-4 green" >

               < h5 >Hey Geek!< / H5 >

    < P > Я смещен на восьми столбцах. div >

           div >

     

           < div class = "row" >

    < DIV Класс = "COL-MD-4 Offset-MD-4" >

    9 " >

    9" >

    < H5 > Эй гик! >

     

             div >

           div >

     

           < DIV Класс = "Row" >

    < DIV < DIV < DIV 99. . 40404040404040404049. 4049. 49. 49. = 9004 " 49. 9004" 49. 9004 " 9. 9004" 499. 9004 ".

    < H5 > Эй, гик!0040 p >

     

             div >

     

             < div class = "col-md-4 offset- MD-4 Green " >

    < H5 > Hey Geek! H5 >

    >

    >

    >

    >

    >

    >

    >

    0039 < P > Я составлен составной столбец на восемь столбцов.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    © 2019 Штирлиц Сеть печатных салонов в Перми

    Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.