Стилизация представления index

Базовые средства Bootstrap работают путем применения классов к элементам, которые соответствуют селекторам CSS, определенным внутри добавленных в папку Content файлов. Подробную информацию о классах, определенных в библиотеке Bootstrap, можно получить на веб-сайте Bootstrap, а в примере ниже демонстрируется использование ряда базовых стилей в представлении Index.cshtml:

@{ Layout = null;} <!DOCTYPE html> <html><head><metaname="viewport"content="/><title>Index</title><linkhref="~/Content/bootstrap.css"rel="stylesheet" /><linkhref="~/Content/bootstrap-theme.css"rel="stylesheet" /><style>.btna{color: white;text-decoration: none; } body{background-color:#F1F1F1; }</style></head><body><divclass="text-center"><h2>Мы собираемся на захватывающую вечеринку.</h2><h3>И вы приглашены, нужно только заполнить форму</h3><br /><divclass="btnbtn-success">@Html.ActionLink("Форма RSVP", "RsvpForm")</div></div></body></html>

Вразметкубылидобавленыэлементы link дляфайлов bootstrap.css и bootstrap-theme.css изпапки Content. Они являются файлами Bootstrap, требуемыми для базовой стилизации CSS, обеспечиваемой этой библиотекой. Вдобавок в папке Scripts имеется соответствующий файл JavaScript, но в данной статье он не нужен. Кроме того, определен также элемент style, который устанавливает цвет фона для элемента body и стили текста для элементов <a>.

Вы заметите, что для каждого файла Bootstrap в папке Content имеется двойник с суффиксом min - например, есть файлы bootstrap.css и bootstrap.min.css. Это распространенная практика минимизации файлов JavaScript и CSS при развертывании приложений в производственной среде, которая представляет собой процесс удаления всех пробельных символов, а также в случае файлов JavaScript замену имен функций и переменных более короткими метками. Целью минимизации является сокращение объема передаваемых данных, необходимых для доставки содержимого в браузер.

После импортирования стилей Bootstrap и определения пары собственных стилей осталось стилизовать элементы. Рассматриваемый пример прост, поэтому необходимо использовать только три класса CSS из Bootstrap: text-center, btn и btn-success.

Класс text-center центрирует содержимое элемента и его дочерних элементов. Класс btn стилизует элемент button, input или <a> в виде симпатичной кнопки, а класс btn-success указывает диапазон цветов для этой кнопки. Цвет кнопки зависит от применяемой темы - в примере используется стандартная тема (как определено в файле bootstrap-theme.css), но в Интернете доступно буквально бесконечное количество других тем.

Полученные в итоге результаты показаны на рисунке ниже: