Адаптивная верстка на bootstrap фреймворке. Знакомство с сеткой и процессом адаптации на бутстрап

Приветствую всех читателей текущей статьи и моих верных подписчиков. Очень много вопросов и разговоров вертится вокруг одного главного «умения» и по совместительству преимущества изучаемого фреймворка. Думаю, вы уже догадались, о чем пойдет речь. Это Bootstrap адаптивная верстка.

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

Базовые элементы

Среди всего набора элементов Bootstrap-а 3 для реализации адаптивной, а точнее отзывчивой верстки можно назвать различные виды сеток, готовые шаблоны и конечно же само подключение подхода mobile-first. Разберем инструменты по порядку.

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

Базовая сетка всех шаблонов веб-сервисов состоит из 12 колонок. Изначально они фиксированные и ширина всего контейнера составляет 940 пикселей. Однако при использовании динамических (плавающих) сеток блок можно растянуть в более чем 1000px и при этом он будет располагаться по центру.

Для того чтобы умело пользоваться описываемым механизмом, нужно знать, что есть два вида контейнеров, которые, собственно, и влияют на название сетки. Так, при использовании класса container вы создаете фиксированную разметку, а при container- fluid – плавающую.

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

Сумма колонок в одном ряду должна давать число 12. Поэтому была придумана интересная система. Вы можете задать и две колонки, однако для каждой из них необходимо прописать специальный класс col-*-*, определяющий ширину. Выглядит это следующим образом:

<div class="container"

<div class="row">

<div class="col-md-8"></div>

<div class="col-md-4"></div>

</div>

</div>

Это базовый набор команд программы, который обязательно присутствует в любом шаблоне. Существующие же шаблоны Бутстрапа внешне выглядят различно и это достигается путем изменения количества, ширины, высоты и стилей колонок и строк, а также добавлением в них других тегов.

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

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

В добавок к этому существует возможность повысить гибкость разметки за счет использования

классов xs, sm, md и lg

Более подробно о сетках и шаблонах вы можете почитать в отдельных статьях моего блога, посвященных конкретному разбору каждого элемента, в рубрике Bootstrap верстка.

Подключаем отзывчивый дизайн

На сегодняшний день хорошим стилем считается подключения адаптивности сразу в теге <meta>. Строка подключения выглядит следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

и указывает, что весь контент веб-страницы будет растягиваться на всю доступную ширину дисплея. А для оптимизации отзывчивости далее в коде используются выше названные классы.

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

Практическая часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .row.content {height: 1500px}
    .sidenav {
      background-color: #f2f2f2;
      height: 100%;
    }
    footer {
      background-color: #545;
      color: white;
      padding: 16px;
    }
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 16px;
      }
      .row.content {height: auto;}
    }
  </style>
</head>
<body>
 
<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-3 sidenav">
      <h4>Мой крутой блог</h4>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Главная</a></li>
        <li><a href="#section2">Друзья</a></li>
        <li><a href="#section3">Семья</a></li>
        <li><a href="#section3">Фотки</a></li>
      </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Поищите чего-нибудь...">
        <span class="input-group-btn">
          <button ="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
 
    <div class="col-sm-9">
      <h4><small>Последние сообщения</small></h4>
      <hr>
      <h2>Я люблю пиццу!</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Отправлено Артемом, 17.09.2016, 15:17.</h5>
      <h5><span class="label label-danger">Food</span> <span class="label label-primary">Pizza</span></h5><br>
      <p>После просмотра видоса на YouTube о том, как готовят итальянскую пиццу, решил попробовать сам. Очень вкусно!! Ссылка на видео ниже.</p>
      <br><br>
 
      <h4><small>Последние сообщения</small></h4>
      <hr>
      <h2>Конференция</h2>
      <h5><span class="glyphicon glyphicon-time"></span> Отправлено Вероникой, 17.09.2016, 21:01.</h5>
      <h5><span class="label label-success">C#</span></h5><br>
      <p>Все-таки нововведения в язык у меня вызывают...дикий восторк! Молодцы ребята!</p>
      <hr>
 
      <h4>Оставить свой след:</h4>
      <form role="form">
        <div class="form-group">
          <textarea class="form-control" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-success">Отправить</button>
      </form>
      <br><br>
 
      <p><span class="badge">2</span> Комментарии:</p><br>
 
      <div class="row">
        <div class="col-sm-2 text-center">
 
        </div>
        <div class="col-sm-10">
          <h4>Артур <small>17.09.2016, 15:23</small></h4>
          <p>Жди нас в гости!</p>
          <br>
        </div>
          <br>
          <p><span class="badge">1</span> Комментарии:</p><br>
          <div class="row">
            <div class="col-sm-2 text-center">
 
            </div>
            <div class="col-xs-10">
              <h4>Александр <small>17.09.2016,  21:11</small></h4>
              <p>К сожалению, я так и не смог попасть. Расскажешь потом обо всем.</p>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
<footer class="container-fluid">
  <p>Все права защищены</p>
</footer>
 
</body>
</html>

Генераторы адаптивных элементов Bootstrap для страниц

Некоторые разработчики иногда пытаются найти генераторы элементов, сверстанных при помощи Бутстрапа. Поэтому в текущей главе я немного расскажу о aTmpl.

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

Сервис расположен по ссылке: http://atmpl.ru/.

Жду ваших заявок на подписку. Обязательно читайте другие мои публикации и наиболее понравившимися делитесь с друзьями. Желаю удачи! Пока-пока!

С уважением, Роман Чуешов