Приветствую всех читателей текущей статьи и моих верных подписчиков. Очень много вопросов и разговоров вертится вокруг одного главного «умения» и по совместительству преимущества изучаемого фреймворка. Думаю, вы уже догадались, о чем пойдет речь. Это 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">
и указывает, что весь контент веб-страницы будет растягиваться на всю доступную ширину дисплея. А для оптимизации отзывчивости далее в коде используются выше названные классы.
Экстра-маленькие девайсы (Смартфоны) | Маленькие девайсы (Планшеты) | Средние девайсы (Персональные компьютеры) | Большие девайсы (Персональные компьютеры) | |
Размер | <768px | >=768px | >=992px | >=1200px |
Ширина контейнера | None (auto) | 750px | 970px | 1170px |
Префиксный класс | xs | sm | md | lg |
Ширина колонки | Плавающие без фиксированного размера (auto) | ~62px | ~81px | ~97px |
Существуют и другие классы, которые значительно расширяют возможности отзывчивой разметки. Все они хранятся в специальном файле фреймворка 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/.
Жду ваших заявок на подписку. Обязательно читайте другие мои публикации и наиболее понравившимися делитесь с друзьями. Желаю удачи! Пока-пока!
С уважением, Роман Чуешов