Давайте вернемся к приложению 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 контейнера называют ещё "резиновой".