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

Respuestas:

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

  1. navegar a su proyecto
  2. bower init (esto generará el archivo bower.json en su directorio)
  3. (luego sigue haciendo clic en sí) ...

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

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