Bowerでのブートストラップの使用


135

私はバウワーでブートストラップを使用しようとしていますが、リポジトリ全体を複製するため、CSSやその他のものはありません。

自分のビルドプロセスにBootstrapのビルドを含める必要があるということですか?または、私が間違っている場合、適切なワークフローは何ですか?


28
まったくばかげた質問ではありません。これは私がbowerでインストールしようとした最初のパッケージです。その結果、明快さと混乱の欠如は、私が長い間ツールを見落としていた。
jhappoldt 2013年

回答:


84

私は最終的に以下を使用して終了しました: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

リポジトリ全体を複製するわけではないので、私にはよりクリーンに思えます。必要なアセットのみを解凍します。

欠点は、bower updateブートストラップが更新されないため、バウアーの哲学が崩れることです。

しかしbower install bootstrap、ワークフローでブートストラップを使用して構築するよりも、まだクリーンだと思います。

それは私が推測する選択の問題です。

更新: distフォルダーにバージョンを付けたようです(参照:https : //github.com/twbs/bootstrap/pull/6342)。そのためbower install bootstrapdistフォルダー内のアセットを使用してポイントするだけです。


2
ちょうど更新されnpmbower持っ"bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" ていることcomponent.jsonもうまくいくようです。
抗毒性2013

8
これはそもそもバウワーを使う目的にそぐわないのでは?
namuol 2013

5
はいそれはちょっと吸います。しかし、さらに厄介なのは、リポジトリでビルドのバージョン管理を行わないため、独自のビルドプロセスでブートストラップを再ビルドすることです。
xavier.seignard 2013

1
@namuol、正確には、jquery、bootstrapなどのライブラリのdir構造を作成する方法を知らない人のためにbowerが作成されたと思いました...そうでない人にソースファイルを提供するのは意味がありません知って、それは彼らをもっと混乱させる!
alexserver 2014

npmを更新することが私の解決策でした。
イヴヴァンブローホーフェン2014年

78

bootstrap-cssと呼ばれるビルド済みのbootstrap bowerパッケージがあります。これはあなた(と私)が望んでいたことだと思います。

bower install bootstrap-css

ニコありがとう。


@DanielM(そのパッケージを取得/インストールする方法を示している場合)。現在、それは答えではなくコメントです。
Popnoodles 2014年

bower install bootstrap-css
Nico

1
それが正解です。これは、すべての.min。{js | css}ファイルを含むビルド前のリポジトリです。
0x126

28

cssおよびjsファイルはパッケージ内にあります。 bootstrap/docs/assets/

更新:

v3以降、distすべてのcss、js、およびフォントを含むフォルダーがパッケージ内にあります。


別のオプション(単一のファイルをフェッチするだけの場合)は、pulldownです。設定は非常にシンプルで、独自のファイル/ URLをリストに簡単に追加できます。


これは少なくとも今日のBootstrap 3では正しくありません。bower_components/ bootstrap / docs / assets / css /にあるファイルは、docs.cssとpygments-manni.cssのみです。これらはどちらもBootstrap cssファイルではありません。
コーヒーグラインダー

4

npmがインストールされ、bowerがグローバルにインストールされていると仮定します

  1. プロジェクトに移動する
  2. bower init (これにより、bower.jsonファイルがディレクトリに生成されます)
  3. (次に[はい]をクリックし続けます)...
  4. ブートストラップがインストールされるパスを設定するには:bower.jsonファイルの横にファイルを
    手動で作成し.bowerrc、以下を追加します。

    {「ディレクトリ」:「public / components」}

  5. bower install bootstrap --save

注:他のコンポーネントをインストールするには:

 bower search {component-name-here}

3

プロジェクトを最初にチェックアウトするときに本当に一度だけ実行する必要があるシェルスクリプトを使用してしまいました

#!/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ええ、私もどちらにしろ、とにかく今は。1は、このいずれかのより多くのことを行う必要はありませんどこ3年後の事は進化してきた
SLF

2

また、次のようなコマンドを使用してください。

bower search twitter

Twitterに関連するパッケージのリストを含む結果が得られます。このようにして、たとえば、まったく新しいbowerコンポーネントがあるかどうかを知るように、TwitterとBowerに関するすべての最新情報を入手できます。


おかげで、これはTwitterに関連するすべてを表示するのに役立ちますが、インストールするための多くのオプションが表示されます。最新のTwitterブートストラップをインストールする場合は、github.com / twbs / bootstrapをインストールする「bower install twitter」を使用します。これには、distディレクトリにコンパイル済みソースも含まれます。
AWolf 2014年

完璧です。両方を組み合わせると、コンピュータに何がインストールされるかを常に知ることができます。
joaquindev

0

コマンドを実行するには、システムにnodeJsをインストールする必要がありますnpm。一度npm適切にあなたが訪問することができます取り組んでいますbower.io。そこには、このトピックに関する完全なドキュメントがあります。あなたはコマンドを見つけるでしょう$ npm install bower。これはあなたのマシンにバウワーをインストールします。インストールした後亭を使えば、簡単にブートストラップを取り付けることができます。

これはビデオチュートリアルです

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.