twitter-bootstrap 在 bower 中使用引导程序

Using bootstrap with bower

提问by xavier.seignard

I'm trying to use bootstrap with bower, but since it clones the whole repo, there is no CSS and other stuff.

我正在尝试将 bootstrap 与 bower 一起使用，但由于它克隆了整个 repo，因此没有 CSS 和其他东西。

Does it means that I need to include building Bootstrap in my own build process? Or if I'm wrong, what's the right workflow?

这是否意味着我需要在自己的构建过程中包含构建 Bootstrap？或者，如果我错了，正确的工作流程是什么？

采纳答案by xavier.seignard

I finally ended using the following : bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

我终于结束了使用以下内容： bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

Seems cleaner to me since it doesn't clone the whole repo, it only unzip the required assests.

The downside of that is that it breaks the bower philosophy since a bower updatewill not update bootstrap.

But I think it's still cleaner than using bower install bootstrapand then building bootstrap in your workflow.

对我来说似乎更干净，因为它不克隆整个 repo，它只解压缩所需的资产。

这样做的缺点是它打破了 bower 的哲学，因为 abower update不会更新引导程序。

但我认为它仍然比bower install bootstrap在您的工作流程中使用然后构建引导程序更干净。

It's a matter of choice I guess.

我想这是一个选择问题。

Update :seems they now version a dist folder (see: https://github.com/twbs/bootstrap/pull/6342), so just use bower install bootstrapand point to the assets in the distfolder

更新：似乎他们现在版本一个 dist 文件夹（请参阅：https: //github.com/twbs/bootstrap/pull/6342），所以只需使用bower install bootstrap并指向dist文件夹中的资产

回答by Terry Roe

There is a prebuilt bootstrap bower package called bootstrap-css. I think this is what you (and I) were hoping to find.

有一个名为 bootstrap-css 的预构建 bootstrap bower 包。我认为这就是你（和我）希望找到的。

bower install bootstrap-css

Thanks Nico.

谢谢妮可。

回答by Dziad Borowy

The css and js files are located within the package: bootstrap/docs/assets/

css 和 js 文件位于包中： bootstrap/docs/assets/

UPDATE:

更新：

since v3 there is a distfolder in the package that contains all css, js and fonts.

从 v3 开始dist，包中有一个文件夹，其中包含所有 css、js 和字体。

---

---

Another option (if you just want to fetch single files) might be: pulldown. Configuration is extremely simple and you can easily add your own files/urls to the list.

另一种选择（如果您只想获取单个文件）可能是：pulldown。配置非常简单，您可以轻松地将自己的文件/网址添加到列表中。

回答by Mahmoud Zalt

assuming you have npm installed and bower installed globally

假设你已经安装了 npm 并全局安装了 bower

1. navigate to your project
2. bower init(this will generate the bower.json file in your directory)
3. (then keep clicking yes)...

4. to set the path where bootstrap will be installed:
   manually create a .bowerrcfile next to the bower.json file and add the following to it:

   { "directory" : "public/components" }

5. bower install bootstrap --save

1. 导航到您的项目
2. bower init（这将在您的目录中生成 bower.json 文件）
3. （然后继续单击是）...

4. 设置将安装引导程序的路径：在 bower.json 文件旁边
   手动创建一个.bowerrc文件并将以下内容添加到其中：

   {“目录”：“公共/组件”}

5. bower install bootstrap --save

Note: to install other components:

注意：安装其他组件：

 bower search {component-name-here}

回答by slf

I ended up going with a shell script that you should only really have to run once when you first checkout a project

我最终使用了一个 shell 脚本，当你第一次签出一个项目时，你应该只运行一次

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

回答by joaquindev

Also remember that with a command like:

还请记住，使用如下命令：

bower search twitter

bower search twitter

You get a result with a list of any package related to twitter. This way you are up to date of everything regarding Twitter and Bower like for instance knowing if there is brand new bower component.

您会得到一个包含与 twitter 相关的任何包的列表的结果。通过这种方式，您可以了解有关 Twitter 和 Bower 的所有最新信息，例如了解是否有全新的 bower 组件。

回答by asad khan

You have install nodeJson your system in order to execute npmcommands. Once npmis properly working you can visit bower.io. There you will find complete documentation on this topic. You will find a command $ npm install bower. this will install boweron your machine. After installing boweryou can install Bootstrap easily.

您已经在系统上安装了nodeJs以执行npm命令。一旦npm正常工作，您就可以访问bower.io。您将在那里找到有关此主题的完整文档。你会发现一个命令$ npm install bower。这将在您的机器上安装bower。安装Bower 后，您可以轻松安装 Bootstrap。

Here is a video tutorial on that

这是一个视频教程