Подключение Bootstrap
Bootstrap — фреймворк от Twitter, предоставляющий готовые CSS и JavaScript решения для создания привлекательных веб-сайтов. Существует несколько способов его подключения: использование ссылок CDN или скачивание файлов.
Подключение через ссылки (CDN)
- Перейдите на сайт getbootstrap.com.
- Скопируйте ссылку на CSS-файл.
- В главном шаблоне (layout.html) добавьте тег <link>:
<link rel="stylesheet" href="ссылка_на_bootstrap_css" />Можно добавить атрибуты rel="stylesheet" и type="text/css":
<link rel="stylesheet" type="text/css" href="ссылка_на_bootstrap_css" />После сохранения стили Bootstrap будут применены. Для подключения JavaScript скопируйте соответствующую ссылку и добавьте тег <script> аналогично.
Подключение путем скачивания
- Скачайте Bootstrap с сайта getbootstrap.com.
- Разархивируйте архив.
- Создайте папку wwwroot в проекте. Внутри неё создайте папки img, css и js.
- Переместите скачанные CSS и JavaScript файлы в соответствующие папки.
- Подключите файлы в layout.html, используя относительные пути:
<link rel="stylesheet" href="~/css/bootstrap.min.css" />
<script src="~/js/bootstrap.bundle.min.js"></script> <!-- или bootstrap.min.js -->Знак тильды (~) указывает на корневую папку wwwroot.
Установка через NuGet
Bootstrap можно установить через NuGet в Visual Studio. В данном примере используются другие методы.
Добавление собственных стилей и изображений
Создайте папку wwwroot с подпапками img, css и js.
- Добавление CSS-файла: Создайте CSS-файл (например, style.css) в папке css. Например:
background: red;Подключите его в layout.html:
<link rel="stylesheet" href="~/css/style.css" />- Добавление изображений: Переместите изображения в папку img. В представлении (Views) используйте относительные пути:
<img src="~/img/tesla.jpg" alt="Tesla" />Создание дизайна с использованием Bootstrap
Используйте примеры из документации Bootstrap для создания базового дизайна. Добавьте стили Bootstrap для адаптивного макета. Например, блок с классом row, содержащий блоки с классом col-md-4 для отображения элементов в сетке.
Для обновления стилей после изменений в CSS-файле может потребоваться очистить кэш браузера.
В результате добавлен Bootstrap, созданы собственные стили и подключены изображения. Этот урок демонстрирует основные принципы работы с Bootstrap и статическими файлами в ASP.NET Core MVC. Представленный пример – лишь отправная точка для создания дизайна сайта.