바우어와 함께 부트 스트랩 사용


135

bower와 함께 부트 스트랩을 사용하려고하지만 전체 저장소를 복제하기 때문에 CSS 및 기타 항목이 없습니다.

자체 빌드 프로세스에 부트 스트랩 빌드를 포함시켜야합니까? 아니면 내가 틀렸다면 올바른 워크 플로는 무엇입니까?


28
전혀 멍청한 질문이 아닙니다. 이것은 bower로 설치하려고 시도한 첫 번째 패키지입니다. 결과적으로 명확성과 혼란이 부족하여 오랫동안 도구를 간과했습니다.
jhappoldt

답변:


84

마침내 다음을 사용하여 끝났습니다. bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

그것이 전체 저장소를 복제하지 않기 때문에 나에게 더 깨끗한 것 같습니다. 필요한 의견을 풀어야합니다.

그것의 단점은 bower update부트 스트랩을 업데이트하지 않기 때문에 bower 철학을 위반한다는 것 입니다.

그러나 bower install bootstrap워크 플로우에서 부트 스트랩을 사용한 다음 빌드하는 것보다 여전히 깨끗하다고 ​​생각합니다 .

내가 선택하는 것은 선택의 문제입니다.

업데이트 : 이제 dist 폴더의 버전을 확인한 것 같습니다 ( https://github.com/twbs/bootstrap/pull/6342 참조 ) 폴더 bower install bootstrap의 자산을 사용 하고 가리 키십시오.dist


2
그냥 업데이트 npm하고 bower와 가지고 "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" 있는 것은 component.json또한 작동하는 것 같다.
독성

8
이것이 처음으로 bower를 사용하는 목적을 물리 치지 않습니까?
namuol

5
예, 좀 짜증납니다. 그러나 더 빨라진 것은 자신의 빌드 프로세스에서 부트 스트랩을 다시 빌드하는 것입니다.
xavier.seignard

1
@namuol, 정확하게, bower는 jquery, bootstrap과 같은 라이브러리의 dir 구조를 만드는 방법을 모르는 사람들을 위해 만들어 졌다고 생각했습니다 ... 그렇지 않은 사람들에게 소스 파일을 제공하는 것은 의미가 없습니다 알고, 그것은 그들을 더 혼란스럽게한다!
alexserver

npm을 업데이트하는 것이 나를위한 해결책이었습니다.
Yves Van Broekhoven

78

bootstrap-css라는 사전 빌드 된 부트 스트랩 바우어 패키지가 있습니다. 나는 이것이 당신과 내가 찾고자하는 것이라고 생각합니다.

bower install bootstrap-css

고마워 니코


@DanielM은 해당 패키지를 얻는 방법을 보여주었습니다. 현재 답변이 아닌 설명입니다.
Popnoodles 2016 년

bower install bootstrap-css
Nico

1
정답입니다. 모든 .min. {js | css} 파일이있는 사전 빌드 저장소입니다.
0x126

28

css 및 js 파일은 패키지 내에 있습니다. bootstrap/docs/assets/

최신 정보:

v3부터는 dist모든 CSS, js 및 글꼴을 포함 하는 폴더가 패키지에 있습니다.


다른 옵션 (단일 파일 만 가져 오려는 경우)은 pulldown 입니다. 구성은 매우 간단하며 자신의 파일 / URL을 목록에 쉽게 추가 할 수 있습니다.


이것은 현재 오늘 부트 스트랩 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. 부트 스트랩을 설치할 경로를 설정하려면 :
    수동으로.bowerrc bower.json 파일 옆에 파일을 다음을 추가하십시오.

    { "directory": "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 그래, 나도 지금은 아니야. 3 년 후 더 이상이 일을 할 필요가없는 상황이 발전했습니다
slf

2

또한 다음과 같은 명령으로 기억하십시오 :

bower search twitter

트위터와 관련된 패키지 목록으로 결과를 얻습니다. 이렇게하면 새로운 bower 구성 요소가 있는지 아는 것과 같이 Twitter 및 Bower에 관한 모든 최신 정보를 얻을 수 있습니다.


감사합니다. Twitter와 관련된 모든 것을 표시하는 데 도움이되지만 설치할 수있는 옵션이 많이 있습니다. 최신 트위터 부트 스트랩을 설치 하려면 github.com/twbs/bootstrap 을 설치 하고 dist 디렉토리에 컴파일 된 소스를 포함하는 'bower install twitter'를 사용 하십시오.
AWolf

완벽하므로 두 가지를 조합하면 컴퓨터에 무엇이 설치 될지 항상 알 수 있습니다.
joaquindev

0

명령 을 실행하기 위해 시스템에 nodeJ 를 설치 했습니다npm . 일단 npm제대로 작동하면 방문 할 수 있습니다 bower.io. 이 주제에 대한 완전한 문서가 있습니다. 당신은 명령을 찾을 수 $ npm install bower있습니다. 컴퓨터에 바우어 가 설치됩니다 . bower 를 설치 한 후 Bootstrap을 쉽게 설치할 수 있습니다.

여기에 비디오 자습서가 있습니다

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.