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

Respostas:

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

  1. navegue para o seu projeto
  2. bower init (isso gerará o arquivo bower.json no seu diretório)
  3. (continue clicando sim) ...

  4. 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"}

  5. 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