Давайте вернемся к приложению Cat Photo App. В этот раз воспользуемся адаптивными стилями из популярного CSS фреймворка Bootstrap разработанного в Twitter.
Bootstrap определит ширину экрана вашего устройства и настроит под него размер HTML элементов - отсюда и название адаптивный дизайн Responsive Design
.
При наличии адаптивного дизайна нет необходимости создавать мобильную версию сайта. Он и так будет хорошо выглядеть на устройствах с любой диагональю.
Можно добавить Bootstrap в любое приложение, подключив его в самом начале HTML документа с помощью <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
. Но мы уже подключили его на этой странице для Вас.
Чтобы начать, мы должны поместить все HTML элементы в элемент div
с классом container-fluid
Fluid - "текучий, жидкий" контейнер (элементы div с классом ".fluid-container") имеет ширину, равную ширине рабочей области экрана. Т.е. ширина fluid контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области экрана.
Сетку сайта, которую проектируют на основе fluid контейнера называют ещё "резиновой".