BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

2014-11-21 / Вр:21:19 / просмотров: 13176

Что вы научитесь в этом уроке? В этом уроке вы сможете самостоятельно создать свой первый каркас (шаблон) сайта при помощи Bootstrap сетки.
Сетка Bootstrap состоит из колонок и строк. Чтобы облегчить понимание создания сетки, условно разобьем работу на два этапа.

Этап 1 – создание строк.

Создание сетки нужно начинать с создания строк. Чтобы создать строку, нужно в контейнере прописать тег div с классом «row». «row» с англ. означает строка. Строк может быть неограниченное количество, но при создании каждой новой строки к тегу div нужно присваивать класс «row».

<div class="container">

        <h1>Hello, world!</h1>
        <div class="row">
        ...
        </div>

        <div class="row">
        ...
        </div>
</div>

Этап 2 – работа с колонками.

Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно сливать по несколько штук и размещать их в нужной позиции.

Чтоб слить (совместить) колонки, нужно внутри «row» указать класс «col-md-*», где * – число, соответствующее количеству колонок, которые соединяем.

<div class="row">
<div class="col-md-6">содержимое в блоке</div>
<div class="col-md-6">содержимое в блоке</div>
</div>

Важно! При соединении колонок их общее число всегда должно быть равно 12-ти.

Схема сетка  Bootstrap

Схема сетка Bootstrap

1-ый ряд: все 12 колонок, из которых состоит сетка;
2-ой ряд: допустим, нам нужна колонка, ширина которой равна двум стандартным колонкам. Мы слили две колонки, но общее число колонок по-прежнему равно 12-ти.
7-ой ряд: в этом случае нам необходимо было поделить сетку на три равных колонки, для этого мы трижды слили по 4 колонки, что в сумме равно 12.

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

А теперь я переведу схему сетки  Bootstrap в код:

<!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 Template на BlogGood.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]-->
	<style>
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
	{
	border:1px solid #ccc;
	margin-bottom:30px;
	height:60px;
	}
	</style>
  </head>
  <body>
<div class="container">

        <h1>Hello, world!</h1>
<!-- 1 строка  -->
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<!-- 2 строка  -->
<div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-10">.col-md-10</div>
</div>
<!-- 3 строка  -->
<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-9">.col-md-9</div>
</div>
<!-- 4 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>
<!-- 5 строка  -->
<div class="row">
  <div class="col-md-5">.col-md-5</div>
  <div class="col-md-7">.col-md-7</div>
</div>
<!-- 6 строка  -->
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
<!-- 7 строка  -->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<!-- 8 строка  -->
<div class="row">
  <div class="col-md-12">.col-md-12</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>

Если вы еще ничего не поняли, тогда попробую объяснить так.
Вам нужно 2-х колоночный сайт. Слева сайтбар, справа контент.
Вы уже знаете, что сетка в Bootstrap состроить из 12 колонок.
Пробуем слить 4 колонки в одну.
1колонка + 1колонка + 1колонка + 1колонка = 4колонок
Значить, для сайтбара, класс «col-md-» будет выглядеть так: «col-md-4».
12 (колонок) – 4 (колонки, которые мы объединили) = 8 (колонок осталось).

Значит, для контента, класс «col-md-» будет выглядеть так: «col-md-8»
Вот так выглядит общий код:

<div class="row">
  <div class="col-md-4">содержимое в блоке </div>
  <div class="col-md-8">содержимое в блоке </div>
</div>

Вот и все волшебство.

Идем дальше.

В Bootstrap есть возможность прописать разные CSS-стили или разбить ячейки по-разному для групп устройств.

Например, я хочу, чтобы моя шапка сайта на больших мониторах была разбита на одну ячейку, но для телефонов я решил сделать две ячейки и прописать к ним же другой CSS-стиль. Уловили мысль?
Посмотрите, какие классы вы можете использовать для различных групп устройств и какие особенности имеет каждый класс.

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

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

Давайте посмотрим, как это будет оформляться в коде:

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

В итоге:
- при больших устройствах (≥1200px) будут на экране два ряда на всю ширину (действует класс «col-lg-12»):

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

- при средних устройствах (≥992px) будут на экране две колонки  (действует класс «col-md-8» и класс «col-md-4»):

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

- при малых устройствах (≥768px) будут на экране две колонки  с одинаковой шириной (действует класс «col-sm-6»):

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

- при очень маленьких устройствах (<768px) будут на экране две колонки на всю ширину (действует класс «col-xs-12»):

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

Я думаю, здесь вы разобрались!
Переходим к практическому занятию.
Припустим, у меня есть вот такой эскиз сайта:

Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

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

<!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 Template на BlogGood.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]-->
	<style>
	.col-md-1, .col-md-8, .col-md-4, .col-md-6, .col-md-3, .col-md-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"> Шапка блога BlogGood.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 на BlogGood.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>

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

У меня все! Не пропустите следующих уроков по Bootstrap3 на BlogGood.ru. Подписывайтесь на обновления блога.
До встречи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

10 Ответов на комментарий - Уроки Bootstrap 3.0 для начинающих (4-й урок) – сетка

  1. Андрей

    Привет, у меня вот какой вопрос. Я установил тему на блог, всё настроил, но меня не устраивают вертикальные отступы между отдельными блоками в сетке на главной и на страницах архивов. Как-то можно повлиять на эти отступы? margin работает только на увеличение отступа, padding тоже не подходит.

    Ответить

    Андрей отвечает:

    Соответственно тема сделана в Bootstrap, поэтому здесь вопрос задаю.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Андрей! Я так понял, Вы хотите сделать отступы только на на главной и на страницах архивов? Добавьте в файл “index.php” и “archive.php” дополнительный CSS класс. А потом к этому классу делаете вертикальный отступ “margin-top”.
    Если я правильно Вас понял, то должно работать.

    Ответить

    Андрей отвечает:

    Мне так не подходит, как Вы говорите. Так работать будет, но мне немногого не того нужно было. Вертикальные отступы на увеличение работали с самого начала, но мне это не нужно было. Мне было нужно, чтобы минусовой margin работал, и не сверху, а снизу.

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    margin-bottom: -100px !important;

    это от блока.
    Если внутри блока отступ нужен, тогда используйте padding

    Ответить

    Андрей отвечает:

    Я в своей теме такого не нашёл. Я сам всё в CSS дописал.

  2. d-reports

    На официальном сайте про сетку я ничего почти не понял, но смог разобраться благодаря Вашему сайту. Потому большое спасибо. Единственная неточность ( и то видно от быстрого набора, что в коде прописано:

    блог BlogGood.ru
    Таблица рзметки Bootstrap

    то есть col-md-8 и col-md-4, а в комментарии к коду видно опечатка

    – при средних устройствах (≥992px) будут на экране две колонки (действует класс «col-lg-8» и класс «col-lg-4»):

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Огромное спасибо, что так внимательны и указали опечатку.

    Ответить

  3. Юрий

    Уважаемый Автор!
    Спасибо за статью, доходчиво, в общих чертах разобрался! :)

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Юрий

    Ответить

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

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

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821