Сделаем для приложения Cat Photo App простой, оригинальный заголовок, для этого разместим картинку и текст заголовка на одной строке.
Помните, Bootstrap использует гибкую систему сетки, с ее помощью можно легко расположить элементы в одной строке и указать их относительную ширину. При этом большинство Bootstrap классов можно применить к элементу div
.
На этой диаграмме показано как работает сетчатый макет Bootstrap состоящий из 12 столбцов:
Обратите внимание, что на картинке используется класс col-md-*
. md
значит "medium" (средний), а *
- это количество столбцов, которые элемент займет по ширине. В данном случае мы указываем ширину элементов для экрана среднего размера, например ноутбука.
В нашем приложении Cat Photo App мы будем использовать класс col-xs-*
, где xs
значит "extra small", т.е. маленький экран, как у мобильного телефона, а *
- это количество столбцов, которые элемент займет по ширине.
Поместите первую картинку и элемент h2
внутрь элемента <div class="row">
. При этом элемент h2
должен быть внутри элемента <div class="col-xs-8">
, а картинка внутри элемента <div class="col-xs-4">
, чтобы в результате они были на одной строке.
Заметили как размер изображения подстроился под текст?