Bootstrap mit Laube verwenden

135

Ich versuche, Bootstrap mit Bower zu verwenden, aber da es das gesamte Repo klont, gibt es kein CSS und andere Dinge.

Bedeutet dies, dass ich das Erstellen von Bootstrap in meinen eigenen Erstellungsprozess einbeziehen muss? Oder wenn ich falsch liege, was ist der richtige Workflow?

twitter-bootstrap bower xavier.seignard
quelle
28
Überhaupt keine blöde Frage. Dies ist das erste Paket, das ich mit Bower installieren wollte. Der daraus resultierende Mangel an Klarheit und Unordnung ließ mich das Tool lange übersehen.
Jhappoldt

Antworten:

84

Ich habe schließlich Folgendes verwendet: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

Scheint mir sauberer zu sein, da es nicht das gesamte Repo klont, sondern nur die erforderlichen Assests entpackt.

Der Nachteil davon ist, dass es die Bower-Philosophie bricht, da ein bower updateBootstrap nicht aktualisiert wird.

Aber ich denke, es ist immer noch sauberer, als bower install bootstrapBootstrap in Ihrem Workflow zu verwenden und dann zu erstellen.

Es ist eine Frage der Wahl, denke ich.

Update: Anscheinend wird jetzt ein dist-Ordner versioniert (siehe: https://github.com/twbs/bootstrap/pull/6342 ). Verwenden Sie also einfach bower install bootstrapdie Assets im distOrdner und zeigen Sie darauf

xavier.seignard
quelle
2
Gerade aktualisiert npmund bowerund "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" in component.jsonscheint auch zu funktionieren.
Antitoxikum
8
Besiegt dies nicht den Zweck, Laube überhaupt zu benutzen?
Namuol
5
Ja, es ist irgendwie scheiße. Aber was noch schlimmer ist, ist, Bootstrap in Ihrem eigenen Build-Prozess neu zu erstellen, da sie keine Versions-Builds in ihrem Repo haben.
Xavier.seignard
1
@namuol, genau, ich dachte, Bower wurde für diejenigen erstellt, die nicht wussten, wie man die Verzeichnisstruktur für eine Bibliothek erstellt, wie jquery, bootstrap ... es ist nicht sinnvoll, Quelldateien für diejenigen bereitzustellen, die dies nicht tun weiß, es verwirrt sie mehr!
Alexander Server
Das Aktualisieren von npm war die Lösung für mich.
Yves Van Broekhoven
78

Es gibt ein vorgefertigtes Bootstrap-Bower-Paket namens bootstrap-css. Ich denke, das wollten Sie (und ich) finden.

bower install bootstrap-css

Danke Nico.

Terry Roe
quelle
@ DanielM, wenn es zeigte, wie man dieses Paket erhält / installiert. Derzeit ist es ein Kommentar, keine Antwort.
Popnoodles
Bower installieren Bootstrap-CSS
Nico
1
Das ist die richtige Antwort. Dies ist das vorgefertigte Repo mit allen .min. {Js | css} -Dateien.
0x126
28

Die CSS- und JS-Dateien befinden sich im Paket: bootstrap/docs/assets/

AKTUALISIEREN:

Seit distVersion 3 enthält das Paket einen Ordner, der alle CSS, JS und Schriftarten enthält.

Eine andere Option (wenn Sie nur einzelne Dateien abrufen möchten) könnte sein: Pulldown . Die Konfiguration ist äußerst einfach und Sie können der Liste problemlos Ihre eigenen Dateien / URLs hinzufügen.

Dziad Borowy
quelle
Dies ist mindestens ab heute für Bootstrap 3 falsch. Die einzigen Dateien in bower_components / bootstrap / docs / assets / css / sind docs.css und pylements-manni.css. Keine dieser Dateien sind die Bootstrap-CSS-Dateien.
Kaffeemühle
4

Angenommen, Sie haben npm und bower global installiert

  1. Navigieren Sie zu Ihrem Projekt
  2. bower init (Dadurch wird die Datei bower.json in Ihrem Verzeichnis generiert.)
  3. (dann klicken Sie weiter auf Ja) ...

  4. So legen Sie den Pfad fest, unter dem Bootstrap installiert wird:
    Erstellen Sie manuell eine .bowerrcDatei neben der Datei bower.json und fügen Sie Folgendes hinzu:

    {"Verzeichnis": "public / components"}

  5. bower install bootstrap --save

Hinweis: So installieren Sie andere Komponenten:

 bower search {component-name-here}
Mahmoud Zalt
quelle
3

Am Ende habe ich ein Shell-Skript erstellt, das Sie beim ersten Auschecken eines Projekts eigentlich nur einmal ausführen müssen sollten

#!/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
quelle
1
@lenswipe ja, ich auch nicht, jetzt sowieso nicht. Drei Jahre später haben sich Dinge entwickelt, bei denen man das nicht mehr tun sollte
Uhr
2

Denken Sie auch daran mit einem Befehl wie:

bower search twitter

Sie erhalten ein Ergebnis mit einer Liste aller Pakete, die sich auf Twitter beziehen. Auf diese Weise sind Sie über alles in Bezug auf Twitter und Bower auf dem Laufenden, beispielsweise wenn Sie wissen, ob es eine brandneue Bower-Komponente gibt.

joaquindev
quelle
Vielen Dank, das hilft, alles zu zeigen, was mit Twitter zu tun hat, aber es zeigt viele Optionen für die Installation. Wenn Sie den neuesten Twitter-Bootstrap installieren möchten , verwenden Sie 'bower install twitter', mit dem github.com/twbs/bootstrap installiert wird und das auch die kompilierten Quellen im dist-Verzeichnis enthält.
AWolf
Perfekt, sodass Sie mit einer Kombination aus beiden immer wissen, was auf Ihrem Computer installiert werden soll.
Joaquindev
0

Sie haben nodeJs auf Ihrem System installiert , um npmBefehle auszuführen . Sobald npmes richtig funktioniert, können Sie besuchen bower.io. Dort finden Sie eine vollständige Dokumentation zu diesem Thema. Sie finden einen Befehl $ npm install bower. Dadurch wird die Laube auf Ihrer Maschine installiert . Nach der Installation von bower können Sie Bootstrap einfach installieren.

Hier ist ein Video-Tutorial dazu

Asad Khan
quelle