Usando bootstrap con bower

135

Estoy tratando de usar Bootstrap con Bower, pero dado que clona todo el repositorio, no hay CSS y otras cosas.

¿Significa que necesito incluir la compilación de Bootstrap en mi propio proceso de compilación? O si me equivoco, ¿cuál es el flujo de trabajo correcto?

twitter-bootstrap bower

— xavier.seignard
fuente

28

No es una pregunta tonta en absoluto. Este es el primer paquete que intenté instalar con Bower. La falta de claridad y desorden resultante me hizo pasar por alto la herramienta durante mucho tiempo.

— jhappoldt

84

~~Finalmente terminé usando lo siguiente: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip~~

Me parece más limpio ya que no clona todo el repositorio, solo descomprime los evaluaciones requeridas.

La desventaja de eso es que rompe la filosofía de Bower ya bower updateque a no actualizará bootstrap.

Pero creo que aún es más limpio que usar bower install bootstrapy luego crear bootstrap en su flujo de trabajo.

~~Es una cuestión de elección, supongo.~~

Actualización: parece que ahora versionan una carpeta dist (ver: https://github.com/twbs/bootstrap/pull/6342 ), así que solo use bower install bootstrapy señale los activos en la distcarpeta

— xavier.seignard
fuente

2

Acaba de actualizar npmy bowery teniendo "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" en component.jsontambién parece funcionar.

— antitóxico el

8

¿No vence esto el propósito de usar Bower en primer lugar?

— namuol

55

Sí, apesta un poco. Pero lo que apesta más es reconstruir bootstrap en su propio proceso de compilación, ya que no compilan versiones en su repositorio.

— xavier.seignard

1

@namuol, exactamente, pensé que Bower fue creado para aquellos que no sabían cómo hacer la estructura de directorios para cualquier biblioteca, como jquery, bootstrap ... no tiene sentido proporcionar archivos fuente a aquellos que no sabe, los confunde más!

— alexserver

Actualizar npm fue la solución para mí.

— Yves Van Broekhoven

78

Hay un paquete de arranque de arranque preinstalado llamado bootstrap-css. Creo que esto es lo que tú (y yo) esperábamos encontrar.

bower install bootstrap-css

Gracias nico.

— Terry Roe
fuente

@DanielM si mostró cómo obtener / instalar ese paquete. Actualmente es un comentario, no una respuesta.

— Popnoodles

bower install bootstrap-css

— Nico

1

Esa es la respuesta correcta. Este es el repositorio previo a la compilación con todos los archivos .min. {Js | css}.

— 0x126

28

~~Los archivos css y js se encuentran dentro del paquete: bootstrap/docs/assets/~~

ACTUALIZAR:

desde v3 hay una distcarpeta en el paquete que contiene todos los css, js y fuentes.

Otra opción (si solo desea buscar archivos individuales) podría ser: desplegable . La configuración es extremadamente simple y puede agregar fácilmente sus propios archivos / URL a la lista.

— Dziad Borowy
fuente

Esto es incorrecto al menos hoy para Bootstrap 3. Los únicos archivos en bower_components / bootstrap / docs / assets / css / son docs.css y pygments-manni.css. Ninguno de estos son los archivos css de Bootstrap.

— molinillo de café

4

asumiendo que tiene npm instalado y Bower instalado globalmente

navegar a su proyecto
bower init (esto generará el archivo bower.json en su directorio)
(luego sigue haciendo clic en sí) ...
para establecer la ruta donde se instalará bootstrap:
cree manualmente un .bowerrcarchivo junto al archivo bower.json y agregue lo siguiente:

{"directorio": "público / componentes"}
bower install bootstrap --save

Nota: para instalar otros componentes:

 bower search {component-name-here}

— Mahmoud Zalt
fuente

3

Terminé con un script de shell que realmente solo deberías tener que ejecutar una vez cuando compruebas un proyecto por primera 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
fuente

1

@lenswipe, sí, yo tampoco, no ahora de todos modos. tres años más tarde, las cosas han evolucionado donde ya no debería ser necesario hacer esto

— hasta el

2

También recuerda que con un comando como:

bower search twitter

Obtiene un resultado con una lista de cualquier paquete relacionado con Twitter. De esta manera, estará al tanto de todo lo relacionado con Twitter y Bower, como por ejemplo saber si hay un nuevo componente Bower.

— joaquindev
fuente

Gracias, eso ayuda a mostrar todo lo relacionado con Twitter, pero muestra muchas opciones para instalar. Si desea instalar la última rutina de arranque de Twitter, use 'bower install twitter' que instala github.com/twbs/bootstrap y que también incluye las fuentes compiladas en el directorio dist.

— AWolf

Perfecto, así que con una combinación de ambos, siempre puedes saber qué se instalará en tu computadora.

— joaquindev

0

Debe instalar nodeJs en su sistema para ejecutar npmcomandos. Una vez que npmesté funcionando correctamente, puede visitarlo bower.io. Allí encontrará documentación completa sobre este tema. Encontrarás un comando $ npm install bower. Esto instalará Bower en su máquina. Después de instalar Bower , puede instalar Bootstrap fácilmente.

Aquí hay un video tutorial sobre eso

— Asad Khan
fuente