Как использовать Bootstrap 4 в ASP.NET Core

Я хочу обновить Bootstrap в ядре ASP.NET с помощью NuGet. Я использовал это:

Install-Package bootstrap -Version 4.0.0

Он добавил зависимости, но как добавить его в мой проект сейчас? Каков путь для локальных зависимостей NuGet?

Ответ 1

Как уже упоминалось, менеджер пакетов Bower, который обычно использовался для подобных зависимостей в приложении, не использующем тяжелые сценарии на стороне клиента, находится в процессе выхода и активно рекомендует перейти к другим решениям:

..psst! Пока поддерживается Bower, мы рекомендуем использовать пряжу и веб-пакет для новых фронт- эндовых проектов!

Так что, хотя вы все еще можете использовать его прямо сейчас, Bootstrap также объявил о прекращении его поддержки. В результате встроенные шаблоны ASP.NET Core медленно редактируются, чтобы отойти от него.

К сожалению, нет четкого пути вперед. Это происходит главным образом из-за того, что веб-приложения постоянно перемещаются в сторону клиента, что требует сложных систем сборки на стороне клиента и множества зависимостей. Так что, если вы собираете что-то подобное, вы, возможно, уже знаете, как решить эту проблему, и вы можете расширить существующий процесс сборки, просто добавив туда Bootstrap и jQuery.

Но есть все еще много веб-приложений, которые не настолько тяжелы на стороне клиента, где приложение все еще работает в основном на сервере, и в результате сервер обслуживает статические представления. Бауэр ранее заполнил это, упрощая публикацию зависимостей на стороне клиента без особого труда.

В мире .NET у нас также есть NuGet, а с предыдущими версиями ASP.NET мы могли бы также использовать NuGet для добавления зависимостей к некоторым зависимостям на стороне клиента, поскольку NuGet просто поместит контент в наш проект правильно. К сожалению, с новым форматом .csproj и новым NuGet установленные пакеты находятся вне нашего проекта, поэтому мы не можем просто ссылаться на них.

Это оставляет нам несколько вариантов, как добавить наши зависимости:

Единовременная установка

Это то, что в настоящее время делают шаблоны ASP.NET Core, которые не являются одностраничными приложениями. Когда вы используете их для создания нового приложения, папка wwwroot просто содержит папку lib которая содержит зависимости:

Если вы внимательно посмотрите на файлы в настоящее время, то увидите, что они изначально были размещены там с Bower для создания шаблона, но это, скорее всего, скоро изменится. Основная идея заключается в том, что файлы копируются один раз в папку wwwroot поэтому вы можете зависеть от них.

Для этого мы можем просто следовать введению Bootstraps и напрямую загружать скомпилированные файлы. Как упомянуто на сайте загрузки, это не включает jQuery, поэтому мы должны загрузить это отдельно; он содержит Popper.js, хотя, если мы решим использовать файл bootstrap.bundle позже, что мы и сделаем. Для jQuery мы можем просто получить один "сжатый, производственный" файл с сайта загрузки.

Это оставляет нам несколько файлов, которые будут просто распакованы и скопированы в папку wwwroot. Мы также можем создать папку lib чтобы было ясно, что это внешние зависимости:

Это все, что нам нужно, так что теперь нам просто нужно настроить наш файл _Layout.cshtml чтобы включить эти зависимости. Для этого мы добавим следующий блок в <head>:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

И следующий блок в самом конце <body>:

<environment include="Development">
    <script src="~/lib/js/jquery-3.3.1.js"></script>
    <script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/js/jquery-3.3.1.min.js"></script>
    <script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

Вы также можете просто включить минимизированные версии и пропустить помощники тегов <environment> чтобы сделать их немного проще. Но это все, что вам нужно сделать, чтобы начать.

Зависимости от NPM

Более современный способ, также если вы хотите обновлять свои зависимости, - это получить зависимости из репозитория пакетов NPM. Вы можете использовать для этого NPM или Yarn; в моем примере я буду использовать NPM.

Для начала нам нужно создать файл package.json для нашего проекта, чтобы мы могли указать наши зависимости. Для этого мы просто делаем это из диалога "Добавить новый элемент":

Как только мы это получим, нам нужно отредактировать его, чтобы включить наши зависимости. Это должно выглядеть примерно так:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

При сохранении Visual Studio уже запустит NPM, чтобы установить для нас зависимости. Они будут установлены в папку node_modules. Итак, что осталось сделать - это wwwroot файлы оттуда в нашу папку wwwroot. Есть несколько вариантов сделать это:

`bundleconfig.json` для объединения и минификации

Мы можем использовать один из различных способов использования bundleconfig.json для объединения и минимизации, как описано в документации. Очень простой способ - просто использовать пакет BuildBundlerMinifier NuGet, который автоматически устанавливает для этого задачу сборки.

После установки этого пакета нам нужно создать в bundleconfig.json проекта bundleconfig.json со следующим содержимым:

[
  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "minify": { "enabled": false }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
    "minify": { "enabled": false }
  }
]

Это в основном настраивает, какие файлы объединять в какие. И когда мы строим, мы видим, что vendor.min.css и vendor.js.css созданы правильно. Поэтому все, что нам нужно сделать, это снова настроить наш _Layouts.html чтобы включить эти файлы:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

Использование менеджера задач, такого как Gulp

Если мы хотим продвинуться немного дальше в разработке на стороне клиента, мы также можем начать использовать инструменты, которые мы использовали бы там. Например, Webpack, который является очень часто используемым инструментом сборки для действительно всего. Но мы также можем начать с более простого менеджера задач, такого как Gulp, и сделать несколько необходимых шагов самостоятельно.

Для этого мы добавляем gulpfile.js в корень нашего проекта со следующим содержимым:

const gulp = require('gulp');
const concat = require('gulp-concat');

const vendorStyles = [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
];

gulp.task('build-vendor-css', () => {
    return gulp.src(vendorStyles)
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));

gulp.task('default', gulp.series('build-vendor'));

Теперь нам также нужно настроить наш package.json чтобы он зависел от gulp и gulp-concat:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Наконец, мы редактируем наш .csproj чтобы добавить следующую задачу, которая гарантирует, что наша задача Gulp выполняется при сборке проекта:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Теперь, когда мы собираем, запускается задание Gulp по default, которое запускает задачи build-vendor, которые затем vendor.min.css наши vendor.min.css и vendor.min.js как мы это делали ранее. Поэтому после настройки нашего _Layout.cshtml как и выше, мы можем использовать jQuery и Bootstrap.

Хотя первоначальная настройка Gulp немного сложнее, чем bundleconfig.json выше bundleconfig.json, мы теперь вошли в мир Node и можем начать использовать все другие классные инструменты. Так что стоит начать с этого.

Заключение

Хотя это внезапно стало намного сложнее, чем при использовании Bower, мы также получили большой контроль над этими новыми опциями. Например, теперь мы можем решить, какие файлы на самом деле включены в папку wwwroot и как они выглядят. И мы также можем использовать это, чтобы сделать первые шаги в мир разработки на стороне клиента с Node, который, по крайней мере, должен немного помочь с кривой обучения.

Ответ 2

Если посмотреть на это, кажется, что подход LibMan лучше всего подходит для моих нужд с добавлением Bootstrap. Мне это нравится, потому что он теперь встроен в Visual Studio 2017 (15.8 или более позднюю версию) и имеет свои собственные диалоговые окна.

Метод по умолчанию, который VS добавляет в проекты, использует Bower, но похоже, что он находится на выходе. В заголовке страницы беседы Microsoft пишут:

Следующие две ссылки ведут к использованию LibMan с ASP.NET Core в Visual Studio, где показано, как можно добавлять библиотеки с помощью встроенного диалога:

В обозревателе решений щелкните правой кнопкой мыши папку проекта, в которую следует добавить файлы. Выберите "Добавить"> "Клиентская библиотека". Откроется диалоговое окно "Добавить библиотеку на стороне клиента": [источник: Скотт Адди 2018 ]

Затем для начальной загрузки просто (1) выберите unpkg, (2) введите "bootstrap @.." (3) Install. После этого вы просто захотите проверить правильность всех включений в _Layout.cshtml или других местах. Это должно быть что-то вроде href= "~/lib/bootstrap/dist/js/bootstrap...")

Ответ 3

Попробуйте Libman, это так же просто, как Bower, и вы можете указать wwwroot/lib/в качестве папки для загрузки.

Ответ 4

К сожалению, вам будет сложно использовать NuGet для установки Bootstrap (или большинства других фреймворков JavaScript/CSS) в проекте.NET Core. Если вы посмотрите на установку NuGet, она сообщит вам, что она несовместима:

если вы должны знать, где находятся локальные пакеты, они теперь находятся в вашем локальном каталоге профиля. т.е. %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts.

Тем не менее, я предлагаю переключиться на npm, или bower - как в ответе Saineshwar.

Ответ 5

Мы используем bootstrap 4 в ядре asp.net, но ссылаемся на библиотеки с "npm" с помощью расширения "Installer Package" и обнаруживаем, что это лучше, чем Nuget для Javascript/CSS-библиотек.

Затем мы используем расширение "Bundler & Minifier" для копирования соответствующих файлов для распространения (из папки npm node_modules, которая находится за пределами проекта) в wwwroot, как нам нравится для разработки/развертывания.

Ответ 6

Сейчас кажется, что Microsoft предпочитает Libman. Он интегрирован в Visual Studio 2017 (15.8).

В этой статье описывается, как его использовать и даже как настроить восстановление, выполняемое процессом сборки.

Документация по Bootstrap сообщает, какие файлы вам нужны в вашем проекте.

Следующий пример должен работать как конфигурация для libman.json.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}

Ответ 7

BS4 теперь доступен на .NET Core 2.2. На установщик SDK 2.2.105 x64 точно. Я использую Visual Studio 2017 с ним. Пока все хорошо для новых проектов веб-приложений.

Ответ 8

Что делает трюк для меня:

1) Щелкните правой кнопкой мыши на wwwroot> Добавить> Клиентская библиотека

2) Набрать "bootstrap" в поле поиска

3) Выберите "Выбрать конкретные файлы"

4) Прокрутите вниз и выберите папку. В моем случае я выбрал "twitter-bootstrap"

5) Проверьте "css" и "js"

6) Нажмите "Установить".

Через несколько секунд у меня есть все они в папке wwwroot. Сделайте то же самое для всех клиентских пакетов, которые вы хотите добавить.

Ответ 9

Вы также должны знать, что после обновления до Bootstrap 4 ваша панель навигации и карусель будут выглядеть странно. Вам необходимо обновить классы и элементы панели навигации в _Layout.cshtml в соответствии с новым способом Bootstrap 4.

См. Документацию Bootstrap 4 Navbar.

Ответ 10

Используйте файл конфигурации nmp (добавьте его в свой веб-проект), затем добавьте необходимые пакеты так же, как мы использовали bower.json и сохранили. Visual studio загрузит и установит его. Вы найдете пакет под узлом nmp вашего проекта.

Ответ 11

Почему бы просто не использовать CDN? Если вам не нужно редактировать код BS, вам просто нужно ссылаться на коды в CDN.

Смотрите BS 4 CDN здесь:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Внизу страницы.

Ответ 12

В этой статье вы получите пошаговое объяснение того, как добавить bootstrap 4 в основное приложение asp.net.

Ссылка статьи: - asp-net-core-with-bootstrap-4

Добавление бутстрапа

Добавление бутстрапа в макет