Como usar o Bootstrap 4 no ASP.NET Core

111

Quero atualizar o Bootstrap no ASP.NET Core com NuGet. Eu usei este:

Install-Package bootstrap -Version 4.0.0

Ele adicionou as dependências, mas como faço para adicioná-lo ao meu projeto agora? Qual é o caminho para as dependências locais do NuGet?

Dependências do NuGet instaladas

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 desenvolvedor
fonte

3

BS4 não deve ter suporte para Bower (fonte: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Substitua [email protected] por [email protected]: stackoverflow.com/questions/47985337/…

mrapi

1

Atualmente, essa deve ser a resposta aceita, a mais fácil usando Libman: stackoverflow.com/a/53012140/578552

rfcdejong

Versão 4.4.1 compatível agora com NUGET.

Diego Venâncio

222

Como outros já mencionados, o gerenciador de pacotes Bower , que geralmente era usado para dependências como essa em aplicativos que não dependem de scripts pesados do lado do cliente, está saindo e recomendando ativamente a migração para outras soluções:

..psst! Enquanto o Bower é mantido, recomendamos yarn e webpack para novos projetos de front-end!

Portanto, embora você ainda possa usá-lo agora, o Bootstrap também anunciou o fim do suporte para ele . Como resultado, os modelos internos do ASP.NET Core estão sendo lentamente editados para se afastar deles também.

Infelizmente, não há um caminho claro a seguir. Isso se deve principalmente ao fato de que os aplicativos da web estão continuamente avançando para o lado do cliente, exigindo sistemas de construção complexos do lado do cliente e muitas dependências. Portanto, se você estiver construindo algo assim, talvez já saiba como resolver isso e pode expandir seu processo de construção existente para simplesmente incluir também Bootstrap e jQuery lá.

Mas ainda existem muitos aplicativos da web que não são tão pesados no lado do cliente, onde o aplicativo ainda é executado principalmente no servidor e o servidor fornece visualizações estáticas como resultado. O Bower preencheu isso tornando mais fácil publicar apenas dependências do lado do cliente sem muito de um processo.

No mundo .NET, também temos o NuGet e com versões anteriores do ASP.NET, poderíamos usar o NuGet também para adicionar dependências a algumas dependências do lado do cliente, pois o NuGet apenas colocaria o conteúdo em nosso projeto corretamente. Infelizmente, com o novo .csprojformato e o novo NuGet, os pacotes instalados estão localizados fora de nosso projeto, portanto, não podemos simplesmente fazer referência a eles.

Isso nos deixa com algumas opções de como adicionar nossas dependências:

Instalação única

Isso é o que os modelos ASP.NET Core, que não são aplicativos de página única, estão fazendo atualmente. Quando você os usa para criar um novo aplicativo, a wwwrootpasta simplesmente contém uma pasta libque contém as dependências:

A pasta wwwroot contém a pasta lib com dependências estáticas

Se você olhar atentamente para os arquivos atualmente, pode ver que eles foram originalmente colocados lá com o Bower para criar o modelo, mas isso provavelmente mudará em breve. A ideia básica é que os arquivos sejam copiados uma vez para a wwwrootpasta para que você possa depender deles.

Para fazer isso, podemos simplesmente seguir a introdução do Bootstrap e baixar os arquivos compilados diretamente. Conforme mencionado no site de download, isso não inclui jQuery , portanto, precisamos fazer o download separadamente também; ele contém Popper.js, embora se escolhermos usar o bootstrap.bundlearquivo mais tarde - o que faremos. Para jQuery, podemos simplesmente obter um único arquivo “compactado, de produção” do site de download (clique com o botão direito no link e selecione "Salvar link como ..." no menu).

Isso nos deixa com alguns arquivos que serão simplesmente extraídos e copiados para a wwwrootpasta. Também podemos criar uma libpasta para deixar mais claro que são dependências externas:

A pasta wwwroot contém a pasta lib com nossas dependências instaladas

Isso é tudo de que precisamos, então agora só precisamos ajustar nosso _Layout.cshtmlarquivo para incluir essas dependências. Para isso, adicionamos o seguinte bloco ao <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>

E o seguinte bloco no final do <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>

Você também pode simplesmente incluir as versões reduzidas e pular os <environment>auxiliares de tag aqui para torná-lo um pouco mais simples. Mas isso é tudo que você precisa fazer para continuar começando.

Dependências do NPM

A maneira mais moderna, também se você quiser manter suas dependências atualizadas, seria obter as dependências do repositório de pacotes NPM. Você pode usar o NPM ou o Yarn para isso; no meu exemplo, usarei o NPM.

Para começar, precisamos criar um package.jsonarquivo para nosso projeto, para que possamos especificar nossas dependências. Para fazer isso, simplesmente fazemos isso na caixa de diálogo "Adicionar novo item":

Adicionar novo item: arquivo de configuração npm

Assim que tivermos isso, precisamos editá-lo para incluir nossas dependências. Deve ser algo assim:

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

Ao salvar, o Visual Studio já executará o NPM para instalar as dependências para nós. Eles serão instalados na node_modulespasta. Então, o que resta fazer é colocar os arquivos de lá em nossa wwwrootpasta. Existem algumas opções para fazer isso:

`bundleconfig.json` para agrupamento e minificação

Podemos usar uma das várias maneiras de consumir um bundleconfig.jsonpara empacotamento e minificação, conforme explicado na documentação . Uma maneira muito fácil é simplesmente usar o pacote BuildBundlerMinifier NuGet, que configura automaticamente uma tarefa de construção para isso.

Depois de instalar esse pacote, precisamos criar um bundleconfig.jsonna raiz do projeto com o seguinte conteúdo:

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

Isso basicamente configura quais arquivos combinar em quais arquivos. E quando construímos, podemos ver que os vendor.min.csse vendor.js.csssão criados corretamente. Portanto, tudo o que precisamos fazer é ajustar o nosso _Layouts.htmlnovamente para incluir esses arquivos:

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

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

Usando um gerenciador de tarefas como o Gulp

Se quisermos avançar um pouco mais para o desenvolvimento do lado do cliente, também podemos começar a usar as ferramentas que usaríamos lá. Por exemplo, Webpack que é uma ferramenta de construção muito usada para realmente tudo. Mas também podemos começar com um gerenciador de tarefas mais simples como o Gulp e fazer as poucas etapas necessárias nós mesmos.

Para isso, adicionamos um gulpfile.jsna raiz do nosso projeto, com o seguinte conteúdo:

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

Agora, também precisamos ajustar nosso package.jsonpara ter dependências em gulpe 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"
  }
}

Finalmente, editamos nosso .csprojpara adicionar a seguinte tarefa, que garante que nossa tarefa Gulp seja executada quando construímos o projeto:

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

Agora, quando construímos, a defaulttarefa Gulp é executada, que executa as build-vendortarefas, que então constrói o nosso vendor.min.csse vendor.min.jsexatamente como fizemos antes. Então, depois de ajustar nosso _Layout.cshtmlcomo acima, podemos fazer uso de jQuery e Bootstrap.

Embora a configuração inicial do Gulp seja um pouco mais complicada do que a bundleconfig.jsonacima, agora entramos no mundo do Node e podemos começar a fazer uso de todas as outras ferramentas legais lá. Portanto, pode valer a pena começar com isso.

Conclusão

Embora de repente isso tenha ficado muito mais complicado do que apenas usando o Bower, também ganhamos muito controle com essas novas opções. Por exemplo, agora podemos decidir quais arquivos estão realmente incluídos na wwwrootpasta e como eles se parecem exatamente. E também podemos usar isso para dar os primeiros passos no mundo de desenvolvimento do lado do cliente com o Node, o que pelo menos deve ajudar um pouco na curva de aprendizado.

cutucar
fonte

1

Ao usar o método npm, recebia erros como "Uncaught SyntaxError: Inesperado exportação de token". Para corrigir isso, mudei para o arquivo popper.js umd "node_modules / popper.js / dist / umd / popper.min.js". Caso contrário, uma das melhores respostas que já vi na pilha, obrigado.

James Blake

2

@user Parece que você está usando uma versão muito antiga do Node. Você pode ver a versão executando node -ve obter uma versão atual aqui em nodejs.org

poke

62

RI MUITO. Tenho que rir ou vou chorar. Dezessete anos de desenvolvimento .Net usando o suporte de ferramentas do Visual Studio, e chegou a esse ponto? Pessoalmente, não consigo ver como isso é um progresso futuro. Se dá tanto trabalho apenas adicionar o estilo do Bootstrap a um projeto da web, então algo deu muito errado.

camainc de

11

@camainc Se alguma coisa, então culpe o desenvolvimento do ecossistema JavaScript. Isso realmente não está relacionado ao .NET ou Visual Studio. A solução simples ainda é apenas baixar os arquivos manualmente e adicioná-los à raiz da web. É assim que funcionou todos os anos anteriores também. - E pelo que vale a pena, a Microsoft está trabalhando em novas ferramentas do VS para tornar esse processo mais simples (e atualizável).

cutucar

3

@ ozzy432836, sei que não é um problema de bootstrap e nunca disse que era. É um problema geral de desenvolvimento, com todos aparentemente buscando a próxima nova estrutura. Eu vi muitas mudanças na minha carreira, mas nada como o que aconteceu nos últimos anos em torno do Javascript. Tem sido absolutamente louco observar a comunidade de desenvolvimento agitando uma nova estrutura após a outra. Quanto a JS é o caminho a seguir, o júri ainda não decidiu, especialmente com WASM e projetos como o Blazor no horizonte.

camainc

56

Olhando para isso, parece que a abordagem LibMan funciona melhor para minhas necessidades com a adição de Bootstrap. Eu gosto porque agora está integrado ao Visual Studio 2017 (15.8 ou posterior) e tem suas próprias caixas de diálogo.

Atualização 6/11/2020: bootstrap 4.1.3 agora é adicionado por padrão com o VS-2019.5 (Agradecimentos a Harald S. Hanssen por notar.)

O método padrão que o VS adiciona aos projetos usa o Bower, mas parece que ele está se extinguindo. No cabeçalho da página do bower da Microsofts eles escrevem:

A seguir alguns links levam a Use LibMan com ASP.NET Core no Visual Studio, onde mostra como as bibliotecas podem ser adicionadas usando uma caixa de diálogo interna :

No Solution Explorer, clique com o botão direito na pasta do projeto na qual os arquivos devem ser adicionados. Escolha Adicionar> Biblioteca do lado do cliente. A caixa de diálogo Adicionar biblioteca do lado do cliente é exibida: [fonte: Scott Addie 2018 ]

Então para bootstrap apenas (1) selecione o unpkg, (2) digite "bootstrap @ .." (3) Instalar. Depois disso, você só gostaria de verificar se todas as inclusões no _Layout.cshtml ou em outros locais estão corretas. Eles devem ser algo como href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

Sunsetquest
fonte

1

Tenho o VS 4.7.02558 (Community Edition) e essa foi a opção mais fácil para mim. Usei-o na prática de projetos criados para estudar para o exame MS 70-486 (MVC), então não posso responder pela eficácia disso para projetos que estão em produção.

Ed Gibbs

2

Para mim, essa também foi a maneira mais fácil de instalar o material com a FERRAMENTA MS STANDARD. Com as dicas em sua postagem - altere o provedor para unpkg, digite bootstrap @ 4., Consegui instalar. Libman não é realmente intuitivo (no meu caso, eu também tive que inserir o. (Ponto) após 4, antes de os pacotes serem exibidos (eu pensei, libman não está funcionando no meu ambiente).

FredyWenger

2

Apenas um lembrete: se você estiver procurando por Bootstrap no CdnJS, esteja ciente de que o nome é twitter-bootstrap como era originalmente chamado.

D.Rosado

1

No Visual Studio 2019 (a última em 11 de junho de 2020) - O arquivo libman é criado, mas não vejo a janela pop-up libman.

Harald S. Hanssen

1

Eu testei o LibMan em vários projetos e é realmente o caminho a percorrer. Pena que a GUI não funcione, mas depois de algumas tentativas é fácil de usar.

Harald S. Hanssen

18

Experimente o Libman , é tão simples quanto o Bower e você pode especificar wwwroot / lib / como a pasta de download.

ysabih
fonte

1

Ainda não está no lançamento do VS2017: ATUALIZAÇÃO: 24 de maio de 2018 - Parece que o LibMan não chegou ao lançamento final do 15.7. Está na previsão de 15.8.x

kristianp

1

Parece que já foi lançado com a versão 15.8 final.

Kirk Larkin de

Ele está disponível agora em VS2017 V 15.8 e uma abordagem muito mais simples do que a resposta aceita

Jemsworld

10

O que funciona para mim é:

1) Clique com o botão direito em wwwroot> Adicionar> Biblioteca do lado do cliente

2) Digite "bootstrap" na caixa de pesquisa

3) Selecione "Escolher arquivos específicos"

4) Role para baixo e selecione uma pasta. No meu caso escolhi "bootstrap do twitter"

5) Verifique "css" e "js"

6) Clique em "Instalar".

Poucos segundos depois, tenho todos eles na pasta wwwroot. Faça o mesmo para todos os pacotes do lado do cliente que deseja adicionar.

Auguste
fonte

6

Libman parece ser a ferramenta preferida pela Microsoft agora. Ele está integrado no Visual Studio 2017 (15.8).

Este artigo descreve como usá-lo e até mesmo como configurar uma restauração executada pelo processo de compilação.

A documentação do Bootstrap informa quais arquivos você precisa em seu projeto.

O exemplo a seguir deve funcionar como uma configuração para 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
fonte

Obrigado, eu estava acompanhando um livro do Pro ASP.NET Core MVC 2 que me dizia para usar o Bower, que agora está obsoleto. Eu pesquisei por um bom tempo antes de perceber que você pode simplesmente clicar com o botão direito em seu projeto e selecionar Adicionar -> Biblioteca do lado do cliente. E isso usa libman. Está tudo integrado.

TxRegex

4

Usamos o bootstrap 4 no asp.net core, mas referenciamos as bibliotecas de "npm" usando a extensão "Package Installer" e descobrimos que é melhor do que o Nuget para bibliotecas Javascript / CSS.

Em seguida, usamos a extensão "Bundler & Minifier" para copiar os arquivos relevantes para distribuição (da pasta npm node_modules, que fica fora do projeto) para wwwroot como gostamos para desenvolvimento / implantação.

Mark Redman
fonte

4

Infelizmente, você terá dificuldade em usar o NuGet para instalar o Bootstrap (ou a maioria das outras estruturas JavaScript / CSS) em um projeto .NET Core. Se você olhar para a instalação do NuGet, verá que é incompatível:

se você deve saber onde estão as dependências dos pacotes locais, elas agora estão no diretório de seu perfil local. ie %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts.

No entanto, sugiro mudar para npm ou bower - como na resposta de Saineshwar.

Balah
fonte

2

BS4 agora está disponível no .NET Core 2.2 . No instalador do SDK 2.2.105 x64 com certeza. Estou executando o Visual Studio 2017 com ele. Até agora, tudo bem para novos projetos de aplicativos da web.

Klewis
fonte

2

Por que não apenas usar um CDN? A menos que você precise editar o código do BS, você só precisa fazer referência aos códigos no CDN.

Veja BS 4 CDN aqui:

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

No final da página.

Beira
fonte

1

O uso de um CDN adiciona uma dependência de tempo de execução. Portanto, se o CDN cair, seu site também cairá. É um problema de segurança, pois quem controla o cdn pode alterar arquivos populares e injetar script em seu site. Também é um problema de privacidade, pois o navegador do usuário solicita os arquivos de um servidor de terceiros em vez do seu próprio.

TxRegex

3

@TxRegex em algum estágio foi realmente recomendado que as referências fossem para CDN em vez de um servidor de aplicativo da web; porque o navegador do usuário provavelmente já armazenou em cache uma biblioteca popular, como o Bootstrap, enquanto acessava outros sites. Mas tanto faz ...

joedotnot

0

Use o arquivo de configuração nmp (adicione-o ao seu projeto da web), em seguida, adicione os pacotes necessários da mesma forma que fizemos usando bower.json e salve. O Visual Studio irá baixá-lo e instalá-lo. Você encontrará o pacote sob o nó nmp do seu projeto.

Alexandre le Grand
fonte