Предыдущий ролик Следующий ролик  

Видео урок: Creating responsive designs with Bootstrap

Основы ASP.NET MVC 5

В этом видео я предоставлю вам краткий обзор того, какие аспекты внешнего дизайна вашего приложения можно усовершенствовать с помощью фреймворка Bootstrap. Bootstrap - это широко известный фреймворк, разработанный Twitter и имеющий официальное название Twitter Bootstrap, но на сегодняшний момент используемый под именем Bootstrap. В основе Bootstrap лежит система сеток, шириной в 12 колонок, которая используется для организации макетов на разных типах клиентских устройств. Для всех столбцов в строке мы используем разные имена CSS классов, чтобы указать, сколько столбцов из 12 доступных мы собираемся закрепить за каждым разделом.

В основном общее количество столбцов сводится к 12, но если, как в третьей из изображенных здесь строк, нам не хватает содержимого для четырех оставшихся столбцов, можно просто удалить их, что никоим образом не повлияет на макет первых 8 столбцов. В большинстве случаев мы указываем, что макет предназначен для устройства конкретного размера, например, для стационарного компьютера. Затем столбцы будут автоматически сжиматься в вертикальный макет для устройств меньшего размера, до тех пор пока мы специально не переопределим это поведение с помощью дополнительных CSS классов.

Первое, что я сделаю, - зайду в представление Index и удалю эту секцию jumbotron. Сам по себе Jumbotron - это класс Bootstrap. Затем я, по сути, начинаю все с нуля. Создаю пользовательский интерфейс, немного похожий на предполагаемый интерфейс банкомата, всего лишь с несколькими возможностями, доступ к которым можно получить с помощью нескольких больших кнопок. Если мы хотим задать столбцы для макета сетки, то начать нужно с элемента div с классом row, поэтому оставляем эту строку. Затем добавим два столбца, каждый из которых занимает половину возможной ширины, указав при этом, что они растягиваются на 6 столбцов из 12.

Сделать это можно с помощью класса col-md-6. md используется для обозначения устройств среднего или крупного размера. Давайте вкратце рассмотрим эти определения класса на сайте getbootstrap.com. Если на главной панели навигации выбрать ссылку CSS, потом справа нажать кнопку "Grid system" (Система сеток), а затем кнопку "Grid options" (Опции сеток), то мы увидим удобную таблицу, в которой приводится описание этих классов. Итак, я использую только класс col-md-6, который подразумевает, что на устройствах, ширина окна просмотра которых больше или равна 992 пикселям, приложение должно занимать половину из возможных 12 столбцов.

Кроме того, как сказано вот здесь, макет сетки будет сжатым, или вертикальным. Итак, вернемся к нашему примеру. Внутрь первого столбца div я собираюсь добавить несколько кнопок. Создам их в виде тегов ссылки, а затем применю несколько стилей кнопок из Bootstrap. Более подробную информацию об этих стилях можно получить на той странице, которую мы только что рассматривали, в разделе "Buttons". Атрибут href мы заполним позднее, когда будем реализовывать функциональность для этих опций. Сначала мы добавим базовый класс кнопок btn, затем btn-primary, чтобы придать кнопке некий цвет,

btn-large, чтобы сделать ее чуть крупнее, и btn-block, который позволит растянуть ее по всей ширине. Эта кнопка будет использоваться для опции снятия средств со счета. Давайте теперь посмотрим, что у нас получилось. Видим всего лишь одну кнопку. Мне не нравится, что она расположена прямо под панелью навигации. Поэтому давайте это исправим. Bootstrap не слишком уж силен в создании вертикальных отступов между элементами.

Поэтому перейдем в файл site.css и добавим пользовательский класс, который позволит к любому элементу применять отступ сверху. Я не хочу делать это в файле bootstrap.css, потому что в любой момент могу обновить его с помощью пакетов NuGet, в результате чего он будет заменен новым файлом, а я потеряю все внесенные в него изменения. Итак, применим к каждому столбцу класс margin-top-20, чтобы при сжатии их для мобильного представления между двумя столбцами оставалось некоторое пространство.

Чтобы кнопка стала более привлекательной, добавим так называемый "глиф". Если на панели навигации сайта Bootstrap выбрать раздел "Components" (Компоненты), то первое, что мы увидим, - это набор иконок-глифов, встроенных в Bootstrap. Под каждой иконкой указано имя CSS класса, с помощью которого можно реализовать на странице такую иконку. Эти классы можно применять не ко всем элементам. Мы создадим пустой тег span, присвоим ему имя базового класса "glyphicon", а затем укажем класс нужного нам глифа.

Для опции снятия средств со счета будем использовать класс glyphicon-circle-arrow-down. Обновим страницу и посмотрим, что изменилось. Теперь кнопка выглядит чуть получше. Давайте добавим еще несколько опций. Скопируем этот фрагмент, немножко отступим и вставим его два раза. Итак, добавим еще две опции: "Получить 100 долларов" (quick cash $100) и "Запрос баланса" (balance inquiry). Этим опциям будут соответствовать иконки молния и знак вопроса соответственно.

После этого я скопирую весь столбец со всем этим HTML и добавлю еще три опции: "Выписка по счету" (print statement), "Денежные переводы" (transfer funds) и "Внесение наличных" (deposit). Затем укажу для каждой опции подходящие иконки: принтер, передача и круглая стрелка вверх. Сохраним изменения и обновим страницу. Последнее, что я могу сделать, - добавить изображение для верхнего колонтитула.

Делается это путем добавления строки в файл макета. Это изображение будет располагаться прямо над телом документа, ему соответствует столбец класса col-md-12. Если вы работаете с файлами упражнений, то в папке Chapter 2 -> Images можете найти изображение для верхнего колонтитула. Поскольку у меня пока нет папки Images, я просто перетащу всю эту папку в раздел Content, а затем можно перетащить файл logo.png в этот элемент div. Еще я добавлю класс img-responsive, чтобы размер изображения подгонялся под соответствующее устройство,

и класс center-block, чтобы это изображение автоматически выравнивалось по центру. После обновления страницы можно увидеть, что при изменении размера окна не только изображение меняет свой размер, но и кнопки укладываются друг на друга. Это сделано для того, чтобы они лучше приспосабливались под конкретный дисплей. В этом видео я продемонстрировал вам отличный набор инструментов для новичка в Bootstrap. Некоторое время потренируйтесь, а затем приступайте к просмотру следующей главы, посвященной моделям и данным. Если вы по ходу просмотра курса пользуетесь файлами упражнений, то все внесенные мною в этой главе изменения можно найти в папке Chapter 2 -> Final.