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

112

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

Install-Package bootstrap -Version 4.0.0

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

Установленные зависимости NuGet

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 разработчик
источник

3

BS4 не должен иметь поддержки Bower (источник: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Замените bootstrap@4.0.0-beta.3 на bootstrap@4.0.0: stackoverflow.com/questions/47985337/…

mrapi

1

В настоящее время это должен быть принятый ответ, самый простой - с использованием Libman: stackoverflow.com/a/53012140/578552

rfcdejong

Версия 4.4.1 теперь совместима с NUGET.

Диего Венансио,

223

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

..psst! В то время как Бауэр поддерживается, мы рекомендуем пряжу и Webpack новых интерфейсных проектов!

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

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

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

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

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

Одноразовая установка

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

Папка wwwroot содержит папку lib со статическими зависимостями

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

Для этого мы можем просто следовать введению Bootstrap и напрямую загружать скомпилированные файлы . Как упоминалось на сайте загрузки, в него не входит jQuery , поэтому нам также необходимо загрузить его отдельно; он действительно содержит Popper.js, хотя, если мы решим использовать bootstrap.bundleфайл позже, что мы и сделаем. Для jQuery мы можем просто получить один «сжатый рабочий » файл с сайта загрузки (щелкните ссылку правой кнопкой мыши и выберите в меню «Сохранить ссылку как ...»).

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

Папка 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файл для нашего проекта, чтобы мы могли указать наши зависимости. Для этого мы просто делаем это в диалоговом окне «Добавить новый элемент»:

Добавить новый элемент: файл конфигурации npm

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

{
  "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папку. Для этого есть несколько вариантов:

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

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

После установки этого пакета нам нужно создать 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>

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

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

Вывод

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

тыкать
источник

1

При использовании метода npm я получал ошибки вроде «Uncaught SyntaxError: Неожиданный экспорт токена». Чтобы исправить это, я переключился на umd-файл popper.js "node_modules / popper.js / dist / umd / popper.min.js". В остальном это один из лучших ответов, которые я когда-либо видел в стеке, спасибо.

Джеймс Блейк,

2

@user Похоже, вы используете очень старую версию Node. Вы можете увидеть версию, запустив node -vи получить текущую версию здесь на nodejs.org

совать

62

РЖУНИМАГУ. Я должен смеяться или я заплачу. Семнадцать лет разработки .Net с использованием инструментальной поддержки Visual Studio, и что до этого? Лично я не вижу, насколько это прогресс. Если так много работы требуется только для добавления стиля Bootstrap в веб-проект, значит, что-то пошло не так.

camainc

11

@camainc Во всяком случае, вините в этом развитие экосистемы JavaScript. На самом деле это вообще не связано с .NET или Visual Studio. Простым решением остается просто загрузить файлы вручную, а затем добавить их в корневой каталог. Именно так это работало и раньше. - И хотя это стоит того, Microsoft работает над новыми инструментами VS, чтобы упростить этот процесс (и сделать его обновляемым).

тык

3

@ ozzy432836, я знаю, что это не проблема начальной загрузки, и я никогда не говорил, что это так. Это общая проблема разработки, и все, похоже, гонятся за новым фреймворком. Я видел много изменений в своей карьере, но ничего похожего на то, что произошло за последние пару лет с Javascript. Было совершенно безумно наблюдать, как сообщество разработчиков перемешивает один новый фреймворк за другим. Что касается того, является ли JS продвижением вперед, то этот вопрос все еще не решен, особенно с WASM и такими проектами, как Blazor, на горизонте.

camainc

56

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

Обновление 6/11/2020: bootstrap 4.1.3 теперь добавлен по умолчанию в VS-2019.5 (спасибо Харальду С. Ханссену за внимание).

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

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

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

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

Sunsetquest
источник

1

У меня VS 4.7.02558 (Community Edition), и для меня это был самый простой вариант. Я использовал его в практических проектах, созданных для подготовки к экзамену MS 70-486 (MVC), поэтому я не могу ответить, насколько это эффективно для проектов, которые направляются в производство.

Эд Гиббс

2

Для меня это также был самый простой способ установить материал с помощью MS STANDARD TOOL. С подсказками в вашем сообщении - смените Provider на unpkg, введите bootstrap @ 4., Я смог установить. Libman действительно не интуитивно понятен (в моем случае мне также пришлось ввести. (Точку) после 4, до того, как будут показаны пакеты (я думал, libman не работает в моей среде).

FredyWenger

2

Напоминаем: если вы ищете Bootstrap на CdnJS, имейте в виду, что это имя twitter-bootstrap, как оно изначально называлось.

D.Rosado

1

В Visual Studio 2019 (последняя версия на 11 июня 2020 г.) - файл libman создается, но я не вижу всплывающего окна libman.

Харальд С. Ханссен,

1

Я тестировал LibMan на нескольких проектах, и это действительно правильный путь. Жаль, что графический интерфейс не работает, но после нескольких попыток им легко пользоваться.

Харальд С. Ханссен

18

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

Изабих
источник

1

Пока нет в выпуске VS2017: ОБНОВЛЕНИЕ: 24 мая 2018 г. - Похоже, что LibMan не попал в финальную версию 15.7. Это в предварительном просмотре для 15.8.x

kristianp

1

Похоже, это уже вышло с финальной версией 15.8.

Кирк Ларкин

Теперь он доступен в VS2017 V 15.8 и предлагает гораздо более простой подход, чем принятый ответ

Jemsworld

10

Какая уловка для меня:

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

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

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

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

5) Отметьте "css" и "js"

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

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

Огюст
источник

6

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

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

В документации Bootstrap указано, какие файлы вам нужны в вашем проекте.

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

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "twitter-bootstrap@4.2.1",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "jquery@3.3.1",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}

Марсель Мельциг
источник

Спасибо, я читал книгу Pro ASP.NET Core MVC 2, в которой мне предлагалось использовать Bower, который сейчас устарел. Я долго поискал, прежде чем понял, что вы можете просто щелкнуть правой кнопкой мыши свой проект и выбрать Добавить -> Клиентская библиотека. И это использует libman. Это все встроено.

TxRegex

4

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

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

Марк Редман
источник

4

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

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

Однако я предлагаю перейти на npm или bower - как в ответе Сайнешвара.

Балах
источник

2

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

Klewis
источник

2

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

См. BS 4 CDN здесь:

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

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

Край
источник

1

Использование CDN добавляет зависимость во время выполнения. Так что, если CDN выходит из строя, ваш сайт тоже. Это проблема безопасности, поскольку тот, кто контролирует cdn, может изменять популярные файлы и внедрять скрипт на ваш сайт. Это также проблема конфиденциальности, поскольку браузер пользователя запрашивает файлы со стороннего сервера, а не с вашего собственного.

TxRegex 07

3

@TxRegex на каком-то этапе фактически рекомендовали ссылаться на CDN, а не на сервер веб-приложения; потому что браузер пользователя, скорее всего, уже кэшировал популярную библиотеку, такую как Bootstrap, при просмотре других сайтов. Но что бы там ни было ...

joedotnot

0

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

Александр ле Гран
источник