Скрипты

ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...
wowonder-v-1-3-социальная-сетевая-платформа WoWonder - это PHP-скрипт социальной сети, WoWonder это лучший способ чтобы начать создание собственного сайта социальной сети. Этот скрипт имеет все...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создание адаптивного дизайна сайта с использованием Bootstarp 3

Adaptive-design-using-Bootstrap

В этой статье мы будем говорить об основных составляющих блоков, которые являются общими для большинства сайтов, а также о создании адаптивного макета с использованием фреймворка Bootystarp 3.

Что касается основных блоков, из которых состоит сайт то они таковы:

1) Заголовок – верхняя зона с логотипом , возможно главным меню, дополнительной информацией, контактами и так далее.

2) Нижний колонтитул - самая нижняя часть сайта, где может содержаться дополнительный блок меню, контакты, социальные иконки, авторское право и так далее.

3) Содержание – это основная часть контента, и находиться как правило чуть ниже заголовка. Его содержание зависит от направленности сайта, если это например интернет магазин, то здесь может располагается страница товара, категории и так т.д.

4) Боковая панель – она может присутствовать не во всех конструкциях, но иногда может быть и несколько боковых панелей. Боковая панель, как правило, располагается в левой или правой частях от основного содержания и содержит авансовый отчет онлайн и разнообразные виджеты.

DEMO

Функции, использующие макет сетки.
Ниже приведен код макета для формирования четырёх столбцов с использованием сетки.

Спойлер.
<div class="container">
  <div class="row">
    <div class="col-md-3"><p>Column 1</p></div>
    <div class="col-md-3"><p>Column 2</p></div>
    <div class="col-md-3"><p>Column 3</p></div>
    <div class="col-md-3"><p>Column 4</p></div>
  </div>
</div>

Из приведённого выше кода мы видим что формируется структуры сайта, мы можем использовать три основных класса: .container, .row, .col- *.

.container – оборачивает всё содержимое блока, устанавливает основную ширину для сайта.

.row – блок обёртка для столбцов.

.col- *- блок столбец.

Теперь давайте поговорим о правилах строительства макета с использованием сетки. 

Строки .row должны быть помещены в .container (фиксированной ширины) или в .container с плавающей адаптивной ширеной, для правильного выравнивания и заполнения.

Используйте строки .row чтобы создать горизонтальную группу столбцов.

Содержание должно быть размещено в столбцах и столбцы могут быть только прямые потомки строк.

Стандартные классы, такие как .row и .col-XS-4 используются для быстрого создания макета сетки.

Колонки имеют отступы, которые для первого и последнего столбца компенсируются отрицательной маржи с отступом .row. 

Сетка колонок опирается на максимальное число столбцов – 12, то есть чтобы создать три блока вам нужно использовать класс .col-md-4.

Если строка содержит больше 12 столбцов (суммарная ширена всех колонок ), то каждая последующая колонка будет перенесена на новую строку.

В таблице ниже указаны CSS классы для элементов сетки (столбцы).

Скачайте CSS сетку Bootstarp 3.
Скачиваем урезанную версии библиотеки bootstarp, нам сейчас нужно скачать только стили для формирования макета с использованием таблиц, переходим на страницу загрузки и снимаем все галочки кроме Grid System.

Adaptive-design-using-Bootstrap 2
И теперь мы можем подключить сетку Bootstarp на вашу страницу.

<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">

Мы подготовили макет, без какого либо содержания, то есть там будут только условные блоки. Изначально предполагалось сделать макет для интернет магазина, так как в этом случае он будет чётко отображать поведение блоков при изменении ширины браузера.

В макете будет следующая структура.

1) Шапка с логотипом и контентом.

2) Боковая панель.

3) Нижний колонтитул, разделён на верхнюю часть с четырьмя блоками меню и нижнюю часть с авторским правом и иконками социальных сетей.

4) Область контента содержит 8 блоков для продуктов.

Adaptive-design-using-Bootstrap 1
В дополнение к основным классам сетки был добавлен дополнительный блок в каждом столбце с классом .well, который заполняется серым цветом для наглядности.

Все .row разделы имеют уникальные идентификаторы, для того чтобы показать что использования сетки не создаёт особую глубину вложенности в HTML верстки. 

Все блоки колонн также имеют свои “semantic” классы.

Вот весь код макета с использованием Bootstarp 3 сетки:

Спойлер.
<div id="wrapper" class="container">
  <div id="header" class="row">
    <div id="logo" class="col-md-3"><div class="well">3<br>#logo</div></div>
    <div id="header-content" class="col-md-9"><div class="well">9<br>header-content</div></div>
  </div>
  <div id="category" class="row">
    <div id="featured" class="col-md-9">
      <div class="row">
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>

        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
        <div class="product col-sm-6 col-md-4 col-lg-3"><div class="well">3<br>product</div></div>
      </div>
    </div>
    <div id="sidebar" class="col-md-3"><div class="well">3<br>#sidebar</div></div>
  </div>
  <div id="footer">
    <div class="footer-top row">
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
      <div class="menu-footer col-sm-6 col-md-3"><div class="well">3<br>.menu-footer</div></div>
    </div>
    <div class="footer-bottom row">
      <div class="copyrights col-sm-6 col-md-6"><div class="well">6<br>.copyrights</div></div>
      <div class="social-icons col-sm-6 col-md-6"><div class="well">6<br>.social-icons</div></div>
    </div>
  </div>
</div>

Как видно из макета три класса столбцов используются для ‘product’ блок: col-sm-6 col-md-4 col-lg-3.

col-sm-6 – используются для отображения наших продуктов на 2 в ряд, для экранов шириной более 768px.

col-md-4 - используются для отображения наших продуктов на 3 в ряд, для экранов шириной более 992px.

col-lg-3 - используются для отображения наших продуктов на 2 в ряд, для экранов шириной более 1200px.

Таким образом, используя блоки с шириной для разных разрешений экрана пользователького устройства, мы добиваемся адаптивности нашего дизайна.

Использование сетки при создании новых сайтов, позволяет автоматизировать рутинные подходы для аналогичных проектов и создания готовых моделей (решений) для различных задач.


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

There are no comments posted here yet

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

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...