Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Сетка. Основы bootstrap 3 для начинающих. Урок №4

01.06.2016


11:32


6262


8


Сетка. Основы bootstrap 3 для начинающих. Урок №4

Сетка. Основы bootstrap 3 для начинающих. Урок №4

Всем привет!
Продолжаем изучать основы «bootstrap 3». Пришло время познакомиться в «bootstrap 3» с таким понятием как сетка.
С помощью сетки вы сможете создать свой первый адаптивный каркас сайта (веб-страницы).
Итак, сетка Bootstrap состоит из строк и колонок.

Прежде чем создать колонки, нужно прописать строку. Для этого достаточно прописать тег div с классом «row».

<div class="row">
... здесь будут колонки...
</div>

Итак, вначале пишется строка, а в строке уже строятся колонки.

1. Создаем строку:

<div class="row">
... здесь будут колонки...
</div>

<div class="row">
... здесь будут колонки...
</div>

2. Создаем колонки (сетку):

Сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
При необходимости колонки можно объединить и разместить в нужной позиции.

Чтобы создать колонки, нужно прописать внутри «row» класс
«col-(*1)-(*2)».
Там, где (*1) указываем, для каких  групп устройств нужно выполнить (см. таблицу 1).
Там, где (*2) указываем число (количество колонок)
(см. таблицу 2).

(табл. 1) Таблица разметки Bootstrap для различных групп устройств

Очень маленькие устройство
Телефоны (<768px)
Малые устройства
Планшеты (≥768px)
Средние устройства
Настольные (≥992px)
Большие устройства
Настольные (≥1200px)
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
колонок 12
Ширина колонки Авто 60px 78px 95px

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

Например:

<div class="col-lg-(*2) col-md-(*2) col-sm-(*2) col-xs-(*2)">блог StepkinBLOG.RU</div>

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

Теперь разберемся, что такое (*2). Так как я уже говорил об этом выше, это число, обозначающее количество колонок
(см. таблицу 2).

(табл. 2) Схема сетка Bootstrap3

Сетка. Основы bootstrap 3 для начинающих. Урок №4

На таблице можно увидеть, что сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
Чтобы указать 12 одинаковых колонок для всех устройств, нужно вместо  (*2) указать цифру, которая подходит. Но помните, что общая сумма должна получиться 12.

Смотрим пример:

<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6 col-xs-12">блог StepkinBLOG.RU</div>
<div class="col-lg-12 col-md-4 col-sm-6 col-xs-12">Таблица разметки Bootstrap </div>
</div>

Чтобы вы поняли мной сказанные слова о том, что общая сумма должна быть равна 12, сделаем арифметический подсчет.
Смотрим на строки №2 и №3.

col-lg-12 и col-lg-12. (размер экрана ≥1200px).
Колонки на экране будут в два ряда на всю ширину, так как указана цифра 12, а сетка состоит только из 12 колонок.

Результат:

Сетка. Основы bootstrap 3 для начинающих. Урок №4

col-md-8 и col-md-4. (размер экрана ≥992px).
На экране будет две колонки, так как 8 + 4 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 8 колонок, а правая 4.

Результат:

Сетка. Основы bootstrap 3 для начинающих. Урок №4

col-sm-6 и col-sm-6 (размер экрана ≥768px).
На экране будет две колонки, так как 6 + 6 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 6 колонок и правая 6.

Результат:

Сетка. Основы bootstrap 3 для начинающих. Урок №4

col-xs-12 и col-xs-12 (размер экрана <768px).
Колонки на экране будут в два ряда на всю ширину, так как указана цифра 12, а сетка состоит только из 12 колонок.

Результат:

Сетка. Основы bootstrap 3 для начинающих. Урок №4

Разобрались?
Перейдем к практике.
Попробуем на Bootstrap3 создать вот такой адаптивный макет для сайта:

Сетка. Основы bootstrap 3 для начинающих. Урок №4

Чтобы создать такой макет, вам достаточно было пройти все 4 урока по основам Bootstrap3.
Итак, вот решение (рекомендую просмотреть код, чтобы закрепить новые знания):

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 на StepkinBLOG.RU</title>

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- CSS стиль для отображения границы -->
<style>
.col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, .col-xs-12
{
border:1px solid #ccc;
height:60px;
}
</style>

</head>
<body>
<div class="container">
<!-- 1 строка -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> Шапка блога StepkinBLOG.RU </div>
</div>
<!-- 2 строка -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 1 </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 2 </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 3 </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Блок 4 </div>
</div>
<!-- 3 строка -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> Меню </div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> Контент </div>
</div>
<!-- 4 строка -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> уроки Bootstrap на StepkinBLOG.RU </div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

Можете посмотреть результат, а заодно проверить с телефона, планшета или ПК, как будет открываться созданный макет.

Закончу статью своей коронной фразой:

«Но это не все чудеса, которые есть в «bootstrap 3», это только начало. Вы увидите всю мощь и магию «bootstrap 3» на моих уроках, если, конечно, будете следить за новостями и обновлениями (настойчиво рекомендую подписаться на обновления блога stepkinBLOG.RU :idea:).»



Случайные записи:

  1. Работа со строками в php. Основы PHP с нуля. Урок №7
  2. Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6
  3. Как сделать фоновую музыку на сайте – HTML и HTML5
  4. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  5. Спецсимволы в HTML. Основы HTML для начинающих. Урок №4

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

8 ответа(ов) на статью: “Сетка. Основы bootstrap 3 для начинающих. Урок №4”

  1. dorzh says:

    Если сформулировать основное правило сетки, может оно будет выглядеть так: "Код колонок одного разрешения располагается в редакторе в одну колонку и в сумме должен быть равен 12. В браузере - одно разрешение располагается в строку и тоже должно быть равно 12, а сумма разрешений col-xs, также всегда равно 12 и всегда располагается в колонку?"

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Если я вас правильно понял, то ответ будет таким:
    все зависит от размера вашего экрана.
    Колонок 12, но вы можете для каждого устройства менять число колонок. Это и будет адаптивность.
    Так что не всегда col-xs, это 12 колонок, вы можете сделать 1 колонку, 2,3 и так до 12.
    12 - это максимальное число, которая может делится.
    Если не понятно объяснил, напишите, постараюсь более подробно ответить

    Ответить

  2. Сергей says:

    Добился. Только неясно как строку менюшки раздвинуть по вертикали. Через локалку идёт.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Сергей, не совсем понял вопрос.

    Ответить

  3. Серый says:

    Не понял зачем писать row несколько раз? У меня получилось выполнить задание так:
    между тегами body

    Шапка
    1 Блок
    2 Блок
    3 Блок
    4 Блок
    Меню
    Контент
    Подвал

    css
    .row div {
    border:1px solid #cc0000;
    }
    .heads {
    height: 150px;
    }
    .blocks {
    height: 120px;
    }
    .menu, .content {
    height: 300px;
    }
    .foter {
    height: 100px;
    }
    p {
    text-align: center;
    }

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Продублируйте коммент, у вас пропали теги. Пропишите код между [ code]тут код [/code ] *только без пробелов

    Ответить

  4. Серый says:

    У меня получилась 1 строка row в которой находятся все колонки. Это ошибка?

    Это между body (бутстрап 3)
    <div class="container"> 
        <div class="row">
          <div class="col-lg-12 heads"><p>Шапка</p></div>
          <div class="col-xs-3 blocks"><p>1 Блок</p></div>
          <div class="col-xs-3 blocks"><p>2 Блок</p></div>
          <div class="col-sm-3 blocks"><p>3 Блок</p></div>
          <div class="col-sm-3 blocks"><p>4 Блок</p></div>
          <div class="col-sm-3 menu"><p>Меню</p></div>
          <div class="col-sm-9 content"><p>Контент</p></div>  
          <div class="col-sm-12 foter"><p>Подвал</p></div>
        </div>
     </div>
    css
    .row div {
    border:1px solid #cc0000;
    }
    .heads {
    height: 150px;
    }
    .blocks {
    height: 120px;
    }
    .menu, .content {
    height: 300px;
    }
    .foter {
    height: 100px;
    }
    p {
    text-align: center;
    }

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Если верстка отображается на всех устройствах нормально, то не стоить переделывать. Я так тоже иногда делаю, когда верстаю для CMS WordPress.
    Но, по всем правилам, желательно делать вот так (так учили меня):

    <div class="container"> 
        <div class="row">
          <div class="col-lg-12 heads"><p>Шапка</p></div>
        </div>
        <div class="row">
          <div class="col-xs-3 blocks"><p>1 Блок</p></div>
          <div class="col-xs-3 blocks"><p>2 Блок</p></div>
          <div class="col-sm-3 blocks"><p>3 Блок</p></div>
          <div class="col-sm-3 blocks"><p>4 Блок</p></div>
        </div>
        <div class="row">
          <div class="col-sm-3 menu"><p>Меню</p></div>
          <div class="col-sm-9 content"><p>Контент</p></div>
        </div> 
        <div class="row"> 
          <div class="col-sm-12 foter"><p>Подвал</p></div>
        </div>
     </div>
    

    и указывайте сетку для всех устройств, например:

    <div class="col-lg-12 col-md-8 col-sm-6 col-xs-12">Тут хедер</div>

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?