wake-up-neo.com

Bootstrap mit Laube verwenden

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

Bedeutet das, dass ich das Erstellen von Bootstrap in meinen eigenen Build-Prozess einbeziehen muss? Oder wenn ich falsch liege, wie ist der richtige Workflow?

135
xavier.seignard

Ich beendete schließlich die Verwendung des folgenden: bower install --save http://Twitter.github.com/bootstrap/assets/bootstrap.Zip

Scheint mir sauberer zu sein, da es nicht das gesamte Repo klonen kann, sondern nur die erforderlichen Assets entpackt.

Der Nachteil dabei ist, dass die Bower-Philosophie gebrochen wird, da ein bower update keinen Bootstrap aktualisiert.

Aber ich denke, es ist immer noch sauberer als bower install bootstrap und dann das Erstellen von Bootstraps in Ihrem Workflow.

Ich denke, es ist eine Frage der Wahl. </ S>

Update: Die Version scheint einen dist-Ordner zu haben (siehe: https://github.com/twbs/bootstrap/pull/6342 ). Verwenden Sie einfach bower install bootstrap und zeigen Sie auf die Assets im dist-Ordner

84
xavier.seignard

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

bower install bootstrap-css

Danke, Nico.

77
Terry Roe

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

UPDATE:

seit v3 gibt es einen dist-ordner im paket, der alle css, js und fonts enthält.


Eine andere Option (wenn Sie nur einzelne Dateien abrufen möchten) könnte Folgendes sein: pulldown . Die Konfiguration ist extrem einfach und Sie können Ihre eigenen Dateien/URLs leicht zur Liste hinzufügen.

27
tborychowski

vorausgesetzt, Sie haben npm installiert und global installiert

  1. navigieren Sie zu Ihrem Projekt 
  2. bower init (dadurch wird die Datei bower.json in Ihrem Verzeichnis generiert)
  3. (dann weiter auf Ja klicken) ...
  4. so legen Sie den Pfad fest, unter dem Bootstrap installiert wird:
    Erstellen Sie manuell eine .bowerrc-Datei neben der Datei bower.json und fügen Sie Folgendes hinzu:

    { "verzeichnis": "public/components" }

  5. bower install bootstrap --save

Hinweis: um andere Komponenten zu installieren:

 bower search {component-name-here}
4
Mahmoud Zalt

Am Ende lief ein Shell-Skript, das Sie eigentlich nur einmal ausführen sollten, wenn Sie ein Projekt zum ersten Mal auschecken

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

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 Twitter und Bower auf dem Laufenden. Sie wissen zum Beispiel, ob es eine brandneue Bower-Komponente gibt.

2
joaquindev

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

Hier ist ein Video-Tutorial dazu

0
asad khan