Usando bootstrap com caramanchão

135

Estou tentando usar o bootstrap com o bower, mas como ele clona todo o repositório, não há CSS e outras coisas.

Isso significa que eu preciso incluir a criação do Bootstrap no meu próprio processo de criação? Ou, se estiver errado, qual é o fluxo de trabalho certo?

twitter-bootstrap bower

— xavier.seignard
fonte

28

Não é uma pergunta idiota. Este é o primeiro pacote que tentei instalar com o bower. A resultante falta de clareza e bagunça me fez ignorar a ferramenta por um longo tempo.

— Jhappoldt

84

~~Finalmente terminei usando o seguinte: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip~~

Parece-me mais limpo, pois não clona o repositório inteiro, apenas descompacta os testes necessários.

A desvantagem disso é que ele quebra a filosofia do caramanchão, pois o a bower updatenão atualizará o bootstrap.

Mas acho que ainda é mais limpo do que usar bower install bootstrape criar a inicialização no seu fluxo de trabalho.

~~É uma questão de escolha, eu acho.~~

Atualização: parece que agora eles versão uma pasta dist (consulte: https://github.com/twbs/bootstrap/pull/6342 ), então basta usar bower install bootstrape apontar para os ativos na distpasta

— xavier.seignard
fonte

2

Acaba de atualizar npme bowere tendo "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" em component.jsontambém parece trabalho.

— Antitóxico #

8

Isso não derrota o propósito de usar o caramanchão em primeiro lugar?

— namuol

5

Sim, é meio ruim. Mas o mais importante é recriar o bootstrap em seu próprio processo de compilação, pois eles não compilam versões em seus repositórios.

— Xml.seignard

1

@namuol, exatamente, pensei que o bower foi criado para quem não sabia como criar a estrutura de diretórios para qualquer biblioteca, como jquery, bootstrap ... não faz sentido fornecer arquivos de origem para quem não sabe sabe, isso os confunde mais!

— 21414 alexserver

Atualizar o npm foi a solução para mim.

— Yves Van Broekhoven

78

Existe um pacote pré-construído de bootstrap bower chamado bootstrap-css. Eu acho que é isso que você (e eu) esperávamos encontrar.

bower install bootstrap-css

Obrigado Nico.

— Terry Roe
fonte

@ DanielM se ele mostrou como obter / instalar esse pacote. Atualmente, é um comentário, não uma resposta.

— Popnoodles

bower instalar inicialização-css

— Nico

1

Essa é a resposta correta. Este é o repositório de pré-construção com todos os arquivos .min. {Js | css}.

— 0x126

28

~~Os arquivos css e js estão localizados no pacote: bootstrap/docs/assets/~~

ATUALIZAR:

desde a v3, há uma distpasta no pacote que contém todos os css, js e fontes.

Outra opção (se você deseja apenas buscar arquivos únicos) pode ser: pulldown . A configuração é extremamente simples e você pode adicionar facilmente seus próprios arquivos / URLs à lista.

— Dziad Borowy
fonte

Isso está incorreto a partir de hoje, pelo menos hoje, no Bootstrap 3. Os únicos arquivos em bower_components / bootstrap / docs / assets / css / são docs.css e pygments-manni.css. Nenhum desses são os arquivos css do Bootstrap.

— moedor de café

4

supondo que você tenha o NPM instalado e o Bower instalado globalmente

navegue para o seu projeto
bower init (isso gerará o arquivo bower.json no seu diretório)
(continue clicando sim) ...
para definir o caminho no qual o bootstrap será instalado:
crie manualmente um .bowerrcarquivo ao lado do arquivo bower.json e adicione o seguinte:

{"diretório": "público / componentes"}
bower install bootstrap --save

Nota: para instalar outros componentes:

 bower search {component-name-here}

— Mahmoud Zalt
fonte

3

Acabei indo com um shell script que você só precisa executar uma vez quando faz o checkout de um projeto pela primeira vez

#!/usr/bin/env bash

mkdir -p webroot/js
mkdir -p webroot/css
mkdir -p webroot/css-min
mkdir -p webroot/img
mkdir -p webroot/font

npm i
bower i

# boostrap
pushd components/bootstrap
npm i
make bootstrap
popd
cp components/bootstrap/bootstrap/css/*.min.css webroot/css-min/
cp components/bootstrap/bootstrap/js/bootstrap.js src/js/deps/
cp components/bootstrap/bootstrap/img/* webroot/img/

# fontawesome
cp components/font-awesome/css/*.min.css webroot/css-min/
cp components/font-awesome/font/* webroot/font/

— slf
fonte

1

@lenswipe sim, eu também não, agora não mesmo. três anos depois, as coisas evoluíram onde não deve precisar mais fazer isso

— SLF

2

Lembre-se também de que, com um comando como:

bower search twitter

Você obtém um resultado com uma lista de qualquer pacote relacionado ao twitter. Dessa forma, você está atualizado de tudo sobre o Twitter e o Bower, como por exemplo, saber se existe um novo componente do Bower.

— joaquindev
fonte

Obrigado, isso ajuda a mostrar tudo o que está relacionado ao Twitter, mas mostra muitas opções para instalar. Se você deseja instalar o último bootstrap do twitter, use 'bower install twitter', que instala o github.com/twbs/bootstrap e que também inclui as fontes compiladas no diretório dist.

— AWolf

Perfeito, com uma combinação de ambos, você sempre pode saber o que será instalado no seu computador.

— Joaquindev

0

Você instala nodeJs em seu sistema para executar npmcomandos. Uma vez que npmestá funcionando corretamente, você pode visitar bower.io. Lá você encontrará documentação completa sobre esse tópico. Você encontrará um comando $ npm install bower. isso instalará o pavilhão em sua máquina. Depois de instalar o caramanchão, você pode instalar o Bootstrap facilmente.

Aqui está um tutorial em vídeo sobre isso

— asad khan
fonte