Jak używać Bootstrap 4 w ASP.NET Core

112

Chcę zaktualizować Bootstrap w ASP.NET Core za pomocą NuGet. Użyłem tego:

Install-Package bootstrap -Version 4.0.0

Dodał zależności, ale jak mam to teraz dodać do mojego projektu? Jaka jest ścieżka do lokalnych zależności NuGet?

Zainstalowane zależności NuGet

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 deweloper
źródło

3

BS4 nie powinno mieć obsługi Bower (źródło: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Zastąp [email protected] na [email protected]: stackoverflow.com/questions/47985337/ ...

mrapi

1

Obecnie powinna to być akceptowana odpowiedź, najłatwiejsza przy użyciu Libmana: stackoverflow.com/a/53012140/578552

rfcdejong

Wersja 4.4.1 jest teraz kompatybilna z NUGET.

Diego Venâncio

223

Jak inni już wspominali, menedżer pakietów Bower , który był zwykle używany do takich zależności w aplikacji, która nie opiera się na skomplikowanych skryptach po stronie klienta, jest na wyjściu i aktywnie zaleca przejście na inne rozwiązania:

..psst! Chociaż Bower jest utrzymywany, zalecamy przędzę i pakiet sieciowy do nowych projektów front-end!

Więc chociaż nadal możesz go teraz używać, Bootstrap również ogłosił, że porzuci wsparcie dla niego . W rezultacie wbudowane szablony ASP.NET Core są powoli edytowane, aby również od nich odejść.

Niestety nie ma jasnej drogi naprzód. Wynika to głównie z faktu, że aplikacje internetowe nieustannie przechodzą w stronę klienta, wymagając złożonych systemów kompilacji po stronie klienta i wielu zależności. Więc jeśli tworzysz coś takiego, być może już wiesz, jak to rozwiązać, i możesz rozszerzyć istniejący proces budowania, aby po prostu uwzględnić tam również Bootstrap i jQuery.

Ale nadal istnieje wiele aplikacji internetowych, które nie są tak ciężkie po stronie klienta, w których aplikacja nadal działa głównie na serwerze, a serwer wyświetla statyczne widoki. Bower wcześniej wypełnił to, ułatwiając po prostu publikowanie zależności po stronie klienta bez tak dużego procesu.

W świecie .NET mamy również NuGet, a przy poprzednich wersjach ASP.NET możemy również użyć NuGet do dodania zależności do niektórych zależności po stronie klienta, ponieważ NuGet po prostu umieściłby zawartość w naszym projekcie poprawnie. Niestety w nowym .csprojformacie i nowym NuGet zainstalowane pakiety znajdują się poza naszym projektem, więc nie możemy po prostu odwoływać się do nich.

Pozostaje nam kilka opcji dodawania naszych zależności:

Instalacja jednorazowa

To właśnie robią obecnie szablony ASP.NET Core, które nie są aplikacjami jednostronicowymi. Kiedy używasz ich do tworzenia nowej aplikacji, wwwrootfolder zawiera po prostu folder libzawierający zależności:

Folder wwwroot zawiera folder lib z zależnościami statycznymi

Jeśli przyjrzysz się uważnie obecnym plikom, zobaczysz, że zostały pierwotnie umieszczone tam przez Bower w celu utworzenia szablonu, ale prawdopodobnie wkrótce się to zmieni. Podstawową ideą jest to, że pliki są kopiowane raz do wwwrootfolderu, więc możesz na nich polegać.

Aby to zrobić, możemy po prostu postępować zgodnie z wprowadzeniem Bootstrap i bezpośrednio pobrać skompilowane pliki . Jak wspomniano na stronie pobierania, nie obejmuje to jQuery , więc musimy pobrać ją również osobno; to nie zawiera Popper.js choć jeśli zdecydujemy się skorzystać z bootstrap.bundlepliku później, które będziemy robić. W przypadku jQuery możemy po prostu pobrać pojedynczy „skompresowany plik produkcyjny” z witryny pobierania (kliknij prawym przyciskiem myszy łącze i wybierz z menu opcję „Zapisz łącze jako ...”).

Pozostaje nam kilka plików, które po prostu rozpakują i skopiują do wwwrootfolderu. Możemy również utworzyć libfolder, aby było jaśniejsze, że są to zależności zewnętrzne:

Folder wwwroot zawiera folder lib z naszymi zainstalowanymi zależnościami

To wszystko, czego potrzebujemy, więc teraz musimy tylko dostosować nasz _Layout.cshtmlplik, aby zawierał te zależności. W tym celu dodajemy następujący blok do <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>

I kolejny blok na samym końcu <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>

Możesz także po prostu dołączyć zminimalizowane wersje i pominąć <environment>pomocników tagów, aby było to nieco prostsze. Ale to wszystko, co musisz zrobić, aby zacząć.

Zależności od NPM

Bardziej nowoczesnym sposobem, również jeśli chcesz aktualizować swoje zależności, byłoby pobranie zależności z repozytorium pakietów NPM. Możesz do tego użyć NPM lub Yarn; w moim przykładzie użyję NPM.

Na początek musimy utworzyć package.jsonplik dla naszego projektu, abyśmy mogli określić nasze zależności. Aby to zrobić, po prostu robimy to w oknie dialogowym „Dodaj nowy element”:

Dodaj nowy element: plik konfiguracyjny npm

Kiedy już to zrobimy, musimy go edytować, aby uwzględnić nasze zależności. Powinno to wyglądać tak:

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

Zapisując, Visual Studio będzie już uruchamiać NPM, aby zainstalować za nas zależności. Zostaną zainstalowane w node_modulesfolderze. Pozostaje więc tylko pobrać pliki stamtąd do naszego wwwrootfolderu. Możesz to zrobić na kilka sposobów:

`bundleconfig.json` do tworzenia pakietów i minifikacji

Możemy użyć jednego z różnych sposobów bundleconfig.jsonużywania a do tworzenia pakietów i minifikacji, jak wyjaśniono w dokumentacji . Bardzo prostym sposobem jest po prostu użycie pakietu BuildBundlerMinifier NuGet, który automatycznie konfiguruje w tym celu zadanie kompilacji.

Po zainstalowaniu tego pakietu musimy utworzyć bundleconfig.jsonw katalogu głównym projektu następującą zawartość:

[
  {
    "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 }
  }
]

To zasadniczo konfiguruje, które pliki mają być połączone w jakie. Kiedy budujemy, widzimy, że pliki vendor.min.cssi vendor.js.csssą tworzone poprawnie. Więc wszystko, co musimy zrobić, to _Layouts.htmlponownie dostosować nasze, aby uwzględnić te pliki:

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

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

Korzystanie z menedżera zadań, takiego jak Gulp

Jeśli chcemy nieco bardziej zająć się programowaniem po stronie klienta, możemy również zacząć używać narzędzi, których byśmy tam używali. Na przykład Webpack, który jest bardzo często używanym narzędziem do tworzenia naprawdę wszystkiego. Ale możemy również zacząć od prostszego menedżera zadań, takiego jak Gulp, i samodzielnie wykonać kilka niezbędnych kroków.

W tym celu dodajemy gulpfile.jsdo naszego katalogu głównego projektu, z następującą zawartością:

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'));

Teraz musimy również dostosować nasze, package.jsonaby mieć zależności od gulpi 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"
  }
}

Na koniec edytujemy nasze, .csprojaby dodać następujące zadanie, które zapewnia, że nasze zadanie Gulp zostanie uruchomione podczas budowania projektu:

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

Teraz, kiedy budujemy, defaulturuchamiane jest zadanie Gulp, które uruchamia build-vendorzadania, które następnie budują nasze vendor.min.cssi vendor.min.jstak jak wcześniej. Więc po dostosowaniu naszych _Layout.cshtmltak jak powyżej, możemy skorzystać z jQuery i Bootstrap.

Chociaż początkowa konfiguracja Gulpa jest nieco bardziej skomplikowana niż bundleconfig.jsonpowyższa, weszliśmy teraz do świata węzłów i możemy zacząć korzystać ze wszystkich innych fajnych narzędzi. Warto więc zacząć od tego.

Wniosek

Chociaż nagle stało się to o wiele bardziej skomplikowane niż w przypadku samego używania Bower, zyskujemy również dużą kontrolę dzięki tym nowym opcjom. Na przykład możemy teraz zdecydować, które pliki są faktycznie zawarte w wwwrootfolderze i jak dokładnie wyglądają. Możemy również wykorzystać to, aby wykonać pierwsze kroki w świecie programowania po stronie klienta za pomocą Node, co powinno przynajmniej trochę pomóc w krzywej uczenia się.

szturchać
źródło

1

Podczas korzystania z metody npm otrzymywałem błędy takie jak „Uncaught SyntaxError: Nieoczekiwany eksport tokenu”. Aby to naprawić, przełączyłem się na plik umd popper.js "node_modules / popper.js / dist / umd / popper.min.js". W przeciwnym razie jedna z najlepszych odpowiedzi, jakie kiedykolwiek widziałem na stosie, dziękuję.

James Blake,

2

@user To brzmi tak, jakbyś używał bardzo starej wersji Node. Możesz zobaczyć wersję, uruchamiając node -v, i pobrać aktualną wersję tutaj na nodejs.org

poke

62

LOL. Muszę się śmiać, albo będę płakać. Siedemnaście lat rozwoju .Net przy wsparciu narzędziowym Visual Studio i do tego doszło? Osobiście nie widzę, jak to postępuje. Jeśli samo dodanie stylu Bootstrap do projektu internetowego wymaga tyle pracy, to coś poszło nie tak.

camainc

11

@camainc Jeśli już, to zrzuć winę na rozwój ekosystemu JavaScript. To naprawdę nie jest w ogóle związane z .NET ani Visual Studio. Prostym rozwiązaniem jest nadal ręczne pobranie plików, a następnie dodanie ich do katalogu głównego. Właśnie tak to działało przez wszystkie poprzednie lata. - A co jest warte, Microsoft pracuje nad nowymi narzędziami VS, aby uprościć ten proces (i zaktualizować).

szturchnij

3

@ ozzy432836, wiem, że to nie jest problem z bootstrapem i nigdy nie powiedziałem, że tak. Jest to ogólny problem programistyczny, w którym wszyscy wydają się gonić za kolejnym nowym frameworkiem. Widziałem wiele zmian w mojej karierze, ale nic nie przypominało tego, co wydarzyło się w ciągu ostatnich kilku lat związanych z Javascriptem. To było absolutnie szalone, obserwując, jak społeczność programistów ubija jeden nowy framework za drugim. Jeśli chodzi o to, czy JS jest drogą do przodu, jury wciąż się nad tym nie zastanawia, zwłaszcza z WASM i projektami takimi jak Blazor na horyzoncie.

camainc

56

Patrząc na to, wydaje się, że podejście LibMan działa najlepiej dla moich potrzeb z dodaniem Bootstrap. Podoba mi się, ponieważ jest teraz wbudowany w Visual Studio 2017 (15.8 lub nowszy) i ma własne okna dialogowe.

Aktualizacja 6/11/2020: bootstrap 4.1.3 jest teraz dodawany domyślnie w VS-2019.5 (podziękowania dla Haralda S. Hanssena za zauważenie).

Domyślna metoda, którą VS dodaje do projektów, używa Bower, ale wygląda na to, że jest w drodze. W nagłówku strony altany Microsoftu piszą:

Poniższe linki prowadzą do używania LibMan z ASP.NET Core w programie Visual Studio, gdzie pokazano, jak można dodać biblioteki libs za pomocą wbudowanego okna dialogowego:

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder projektu, do którego mają zostać dodane pliki. Wybierz opcję Dodaj> Biblioteka po stronie klienta. Pojawi się okno dialogowe Dodaj bibliotekę po stronie klienta: [źródło: Scott Addie 2018 ]

Następnie dla bootstrapu po prostu (1) wybierz unpkg, (2) wpisz "bootstrap @ .." (3) Zainstaluj. Następnie wystarczy sprawdzić, czy wszystkie elementy zawarte w pliku _Layout.cshtml lub w innych miejscach są poprawne. Powinny być takie jak href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

Sunsetquest
źródło

1

Mam VS 4.7.02558 (Community Edition) i to była dla mnie najłatwiejsza opcja. Używałem go w praktyce w projektach stworzonych do nauki do egzaminu MS 70-486 (MVC), więc nie mogę odpowiedzieć na pytanie, jak efektywne jest to w przypadku projektów, które są kierowane do produkcji.

Ed Gibbs

2

Dla mnie był to również najłatwiejszy sposób na zainstalowanie rzeczy za pomocą MS STANDARD TOOL. Korzystając ze wskazówek w swoim poście - zmień dostawcę na unpkg, wpisz bootstrap @ 4., Udało mi się zainstalować. Libman naprawdę nie jest intuicyjny (w moim przypadku musiałem również wpisać. (Punkt) po 4, zanim pakiety zostały pokazane (myślałem, że libman nie działa w moim środowisku).

FredyWenger

2

Dla przypomnienia: jeśli szukasz Bootstrap na CdnJS, pamiętaj, że nazwa to twitter-bootstrap, jak pierwotnie nazywano.

D.Rosado,

1

W programie Visual Studio 2019 (najpóźniej do 11 czerwca 2020 r.) - plik libman zostaje utworzony, ale nie widzę wyskakującego okienka libman.

Harald S. Hanssen

1

Testowałem LibMan w kilku projektach i tak naprawdę jest do zrobienia. Szkoda, że GUI nie działa, ale po kilku próbach jest łatwy w użyciu.

Harald S. Hanssen

18

Wypróbuj Libmana , jest tak prosty jak Bower i możesz określić wwwroot / lib / jako folder pobierania.

ysabih
źródło

1

Jeszcze nie w wersji VS2017: AKTUALIZACJA: 24 maja 2018 r. - Wygląda na to, że LibMan nie dotarł do ostatecznej wersji 15.7. Jest w podglądzie 15.8.x

kristianp

1

Wygląda na to, że jest to już dostępne w ostatecznej wersji 15.8.

Kirk Larkin,

Jest już dostępny w VS2017 V 15.8 i znacznie prostszym podejściu niż przyjęta odpowiedź

Jemsworld

10

Jaka jest dla mnie sztuczka:

1) Kliknij prawym przyciskiem myszy wwwroot> Dodaj> Biblioteka po stronie klienta

2) Wpisz „bootstrap” w polu wyszukiwania

3) Wybierz „Wybierz określone pliki”

4) Przewiń w dół i wybierz folder. W moim przypadku wybrałem „Twitter-bootstrap”

5) Sprawdź „css” i „js”

6) Kliknij „Instaluj”.

Kilka sekund później mam je wszystkie w folderze wwwroot. Zrób to samo dla wszystkich pakietów po stronie klienta, które chcesz dodać.

Auguste
źródło

6

Libman wydaje się być teraz narzędziem preferowanym przez Microsoft. Jest zintegrowany z Visual Studio 2017 (15.8).

W tym artykule opisano, jak z niego korzystać, a nawet jak skonfigurować przywracanie wykonywane przez proces kompilacji.

Dokumentacja Bootstrap mówi, jakich plików potrzebujesz w swoim projekcie.

Poniższy przykład powinien działać jako konfiguracja dla 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"
    ]
  }
]

}

Marcel Melzig
źródło

Dzięki, śledziłem w książce Pro ASP.NET Core MVC 2, w której powiedziano mi, żebym używał Bower, który jest teraz przestarzały. Rozejrzałem się przez chwilę, zanim zdałem sobie sprawę, że możesz po prostu kliknąć projekt prawym przyciskiem myszy i wybrać Dodaj -> Biblioteka po stronie klienta. A to używa libman. Wszystko jest wbudowane.

TxRegex,

4

Używamy bootstrap 4 w asp.net core, ale odwołujemy się do bibliotek z „npm” przy użyciu rozszerzenia „Package Installer” i okazało się, że jest to lepsze niż Nuget dla bibliotek JavaScript / CSS.

Następnie używamy rozszerzenia „Bundler & Minifier”, aby skopiować odpowiednie pliki do dystrybucji (z folderu npm node_modules, który znajduje się poza projektem) do wwwroot, tak jak lubimy w celu rozwoju / wdrożenia.

Mark Redman
źródło

4

Niestety, będziesz mieć trudności z użyciem NuGet do zainstalowania Bootstrap (lub większości innych struktur JavaScript / CSS) w projekcie .NET Core. Jeśli spojrzysz na instalację NuGet, zobaczysz, że jest niezgodna:

jeśli musisz wiedzieć, gdzie są zależności pakietów lokalnych, znajdują się one teraz w katalogu twojego profilu lokalnego. to znaczy%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Proponuję jednak przejść na npm lub bower - jak w odpowiedzi Saineshwar.

Balah
źródło

2

BS4 jest teraz dostępny w .NET Core 2.2 . Na pewno w instalatorze SDK 2.2.105 x64. Korzystam z Visual Studio 2017 z nim. Jak dotąd dobrze nadaje się do nowych projektów aplikacji internetowych.

klewis
źródło

2

Dlaczego po prostu nie skorzystać z CDN? O ile nie musisz edytować kodu BS, wystarczy odwołać się do kodów w CDN.

Zobacz BS 4 CDN tutaj:

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

Na dole strony.

Krawędź
źródło

1

Użycie CDN dodaje zależność od środowiska wykonawczego. Więc jeśli CDN przestanie działać, Twoja witryna też. Jest to problem z bezpieczeństwem, ponieważ ktokolwiek kontroluje cdn, może zmienić popularne pliki i wstrzyknąć skrypt do Twojej witryny. Jest to również kwestia prywatności, ponieważ przeglądarka użytkownika żąda plików z serwera innej firmy, a nie z własnego.

TxRegex

3

@TxRegex Na pewnym etapie faktycznie zalecano, aby odniesienia dotyczyły CDN, a nie serwera aplikacji internetowej; ponieważ przeglądarka użytkownika prawdopodobnie zapisała już w pamięci podręcznej popularną bibliotekę, taką jak Bootstrap, podczas przeglądania innych witryn. Ale nieważne ...

joedotnot

0

Użyj pliku konfiguracyjnego nmp (dodaj go do swojego projektu internetowego), a następnie dodaj potrzebne pakiety w ten sam sposób, w jaki zrobiliśmy to przy użyciu bower.json i zapisz. Program Visual Studio pobierze go i zainstaluje. Pakiet znajdziesz pod węzłem nmp twojego projektu.

Alexandre le Grand
źródło