Utilizzando bootstrap con pergolato


135

Sto cercando di usare bootstrap con bower, ma poiché clona l'intero repository, non ci sono CSS e altre cose.

Significa che devo includere la creazione di Bootstrap nel mio processo di compilazione? O se sbaglio, qual è il flusso di lavoro giusto?


28
Non è una domanda stupida. Questo è il primo pacchetto che ho provato a installare con Bower. La conseguente mancanza di chiarezza e confusione mi ha fatto trascurare lo strumento per molto tempo.
jhappoldt,

Risposte:


84

Alla fine ho finito di usare quanto segue: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

Mi sembra più pulito dal momento che non clona l'intero repository, decomprime solo i test richiesti.

Il rovescio della medaglia è che rompe la filosofia del bower poiché bower updatenon aggiornerà il bootstrap.

Ma penso che sia ancora più pulito rispetto all'utilizzo bower install bootstrape alla creazione di bootstrap nel flusso di lavoro.

Immagino sia una questione di scelta.

Aggiornamento: sembra che ora versione una cartella dist (vedi: https://github.com/twbs/bootstrap/pull/6342 ), quindi basta usare bower install bootstrape puntare alle risorse nella distcartella


2
Ha appena aggiornato npmed bowere avendo "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" in component.jsonsembra anche al lavoro.
antitossico

8
Questo non sconfigge lo scopo dell'uso del pergolato in primo luogo?
namuol,

5
Sì, è un po 'schifo. Ma ciò che sta succhiando di più è ricostruire bootstrap nel proprio processo di compilazione poiché non eseguono build di versione nel loro repository.
xavier.seignard,

1
@namuol, esattamente, pensavo che Bower fosse creato per coloro che non sapevano come creare la struttura dir per qualsiasi libreria, come jquery, bootstrap ... non ha senso fornire file sorgente a coloro che non lo fanno sai, li confonde di più!
alexserver,

L'aggiornamento di npm è stata la soluzione per me.
Yves Van Broekhoven,

78

Esiste un pacchetto pergolato bootstrap predefinito chiamato bootstrap-css. Penso che questo sia ciò che tu ed io speravamo di trovare.

bower install bootstrap-css

Grazie Nico.


@DanielM se mostrava come ottenere / installare quel pacchetto. Attualmente è un commento, non una risposta.
Popnoodles,

bower install bootstrap-css
Nico,

1
Questa è la risposta corretta. Questo è il repository prebuild con tutti i file .min. {Js | css}.
0x126,

28

I file css e js si trovano all'interno del pacchetto: bootstrap/docs/assets/

AGGIORNARE:

dalla v3 c'è una distcartella nel pacchetto che contiene tutti i CSS, i js e i font.


Un'altra opzione (se vuoi solo recuperare singoli file) potrebbe essere: pulldown . La configurazione è estremamente semplice e puoi facilmente aggiungere i tuoi file / URL alla lista.


Questo è errato almeno per oggi per Bootstrap 3. Gli unici file in bower_components / bootstrap / docs / assets / css / sono docs.css e pygments-manni.css. Nessuno di questi sono i file css Bootstrap.
macinacaffè

4

supponendo che tu abbia installato npm e che il bower sia installato globalmente

  1. vai al tuo progetto
  2. bower init (questo genererà il file bower.json nella tua directory)
  3. (quindi continua a fare clic su Sì) ...
  4. per impostare il percorso in cui verrà installato bootstrap:
    creare manualmente un .bowerrcfile accanto al file bower.json e aggiungere quanto segue:

    {"directory": "pubblico / componenti"}

  5. bower install bootstrap --save

Nota: per installare altri componenti:

 bower search {component-name-here}

3

Ho finito con uno script di shell che dovresti davvero eseguire una sola volta al momento del checkout di un progetto

#!/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/

1
@lenswipe sì, neanche io, non ora comunque. tre anni dopo le cose si sono evolute dove non si dovrebbe più avere bisogno di farlo
slf

2

Ricorda anche che con un comando come:

bower search twitter

Si ottiene un risultato con un elenco di tutti i pacchetti relativi a Twitter. In questo modo sei aggiornato su tutto ciò che riguarda Twitter e Bower, come ad esempio sapere se esiste un nuovo componente Bower.


Grazie, questo aiuta a mostrare tutto ciò che è legato a Twitter ma mostra molte opzioni da installare. Se ti piace installare l'ultimo bootstrap di Twitter, usa 'bower install twitter' che installa github.com/twbs/bootstrap e che include anche i sorgenti compilati nella directory dist.
AWolf

Perfetto, quindi con una combinazione di entrambi, puoi sempre sapere cosa verrà installato sul tuo computer.
joaquindev,

0

Hai installato nodeJs sul tuo sistema per eseguire npmcomandi. Una volta che npmfunziona correttamente puoi visitare bower.io. Lì troverai la documentazione completa su questo argomento. Troverai un comando $ npm install bower. questo installerà il pergolato sulla tua macchina. Dopo aver installato Bower puoi installare Bootstrap facilmente.

Ecco un tutorial video su questo

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.