레일즈의 기존 스타일 시트와 함께 트위터의 부트 스트랩 스타일 시트를 어떻게 망가 뜨리지 않고 사용합니까?

그래서 내 레일 애플 리케이션에 stylesheet에 대한 URL을 포함하지만, 그것은 모든 건초 더미에 던졌습니다. 레일즈의 기존 스타일 시트와 함께 트위터의 부트 스트랩 스타일 시트를 어떻게 망가 뜨리지 않고 사용합니까?

나는 이런 식으로 포함 :

<%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', 'style', 'css3buttons', 'jquery.lightbox-0.5', :media => 'all') %>

는 내가하고 싶은 것은, 내가 html 태그에 클래스를 적용 할 때 트위터 스타일이 적용 만하는 것입니다. 이상적으로, 내가하고 싶은 것은 내 '스타일'시트의 스타일을 덮어 쓰는 것입니다.이 스타일 시트는 내 전체 앱의 스타일 시트입니다.

작업하려는 모든 요소의 스타일을 수정하지 않고도 쉽게이 작업을 수행 할 수 있습니까?

출처

2012-01-17 marcamillion

http://twitter.github.com/bootstrap/1.4.0/bootstrap.css을 보면 루트 HTML 요소의 재설정과 스타일을 정의하고 있음을 알 수 있습니다. 예를 들어

가 : 당신의있는 style.css 이미 h1 또는 경우 스타일을 정의하는 경우

h1 { 
    margin-bottom: 18px; 
    font-size: 30px; 
    line-height: 36px; 
}

그래서, 레이아웃은 다른 여유를 가지도록 h1을 기대하고, 레이아웃은 예상대로 볼려고하고 있지 않다.

트위터 부트 스트랩은 프로젝트를 시작할 때 일반적으로 사용하기 때문에 아무런 문제없이 기존 프로젝트의 스타일 시트에 완전히 연결할 수 있습니다.

대신 양식 및 표 스타일을 포함 시키려면 their LESS stylesheets을 사용하는 것이 좋습니다. (using Bootstrap with Less).

<link rel="stylesheet/less" type="text/css" href="lib/tables.less"> 
<link rel="stylesheet/less" type="text/css" href="lib/forms.less"> 
<script src="less.js" type="text/javascript"></script>

당신은 모든 것을 포함하기 때문에 lib/boostrap.less를 사용하고자하지 않을거야,하지만 당신은 당신을 위해 작동 다른 LESS 스타일 시트를 포함 할 수 있습니다. 트위터 부스트랩의 하위 집합을 포함하는 경고 메시지가 예상대로 작동하지 않을 수 있습니다 (특히 CSS 재설정을 정의하지 않은 경우). 그래도 문제가 해결되지 않으면 Preboot.less을 사용해보세요. 참고 : Rails 3.1 supports LESS compilation

응용 프로그램에서 전체 트위터 부트 스트랩 CSS를 계속 사용하려면 트위터 부트 스트랩을 사용하는 새로운 레일스 레이아웃 템플릿을 만들면됩니다. 그런 다음 트위터 부스트랩으로 새 페이지를 작성하고 render :layout => "boostrap" 또는 이와 유사한 내용으로 새 페이지에서 트위터 부트 스트랩 레이아웃을 사용하도록 지정하십시오. 그런 다음 준비가되면 이전 페이지를 새 레이아웃 템플릿으로 마이그레이션 할 수 있습니다. 귀하의 경우 당신이 CSS를 로딩의 순서를 변경할 필요가 있다고 생각

출처

2012-01-17 09:43:11

는 자세한 응답을 작성하는 시간을내어 주셔서 감사합니다. 내가 뭘 하려는지, 이상적으로, 스타일을 현재 레이아웃에 통합하는 것입니다. 예를 들어, 모든 레이아웃에서 'application.html.erb'을 통해 적용되는 헤더가 있습니다. Bootstrap의 스타일 중 하나 또는 두 가지를 적용하고 싶습니다. 이는 하나의 예일 뿐이지 만 다양한 레이아웃과 앱의 '마스터 레이아웃'섹션에 대한 다양한 요소가 있습니다. 대안은 부트 스트랩에서 스타일 시트로 스타일을 복사 할 수 있지만 가능하면 그것을 피하려고했습니다. – marcamillion

@marcamillion은 덜 예를 들어보십시오. 레이아웃에서 다른 스타일 시트 뒤에 더 적은 스타일 시트 추가 –

는

최초의 앱 스타일 시트를로드 한 후 bootstrap.css

<%= stylesheet_link_tag :default %>

부트 스트랩과 앱 스타일 시트를 오버라이드 (override)

그리고 나서

<%= stylesheet_link_tag ('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', :media => 'all') %>

출처

2012-01-17 12:12:42 dbKooper

내가 할 때 가장 중요한 것은, 즉 메인 스타일 시트를 먼저로드 한 다음 부트 스트랩을 수행하고, 내 기본 스타일 시트보다 먼저 스타일을 오버라이드하는 것입니다. – marcamillion

오버 라이딩 동작은 단순히 스타일 클래스 이름의 충돌로 인한 것입니다. SO, 주 스타일 시트의 변경 이름 또는 부트 스트랩. CSS의 스타일 요소 제거 – dbKooper

알고 싶습니다. 클래스 스타일이없는 경우를 제외하고는 기본 스타일 시트를 다른 스타일보다 우선적으로 사용하고 싶습니다. 내 메인 시트에 그 이름. 예 : 내 스타일 시트에'alert-message' 클래스가 있다면, 트위터 부트 스트랩이 충돌하지 않을 것입니다. (왜냐하면 내가 대신 사용하기 때문에). 하지만 클래스 이름이 없다면 Bootstrap.css에 클래스 이름이 있기 때문에 트위터의 스타일을 사용하게됩니다. 이해가 되니? – marcamillion

부트 스트랩을 간단하게 사용자 정의 할 수 있습니다 p twitter github 사용자 정의 도구 Customize Bootstrap

원하는 항목 만 선택하고 사용자 정의 된 버전을 다운로드하십시오.

나는 또한 이것과 비슷한 것을 오랫동안 찾고 있었기 때문에 이제는 많이 도와주었습니다.

출처

2013-04-04 10:46:44

이 목적을 위해 덜 믹스 또는 저음 믹스를 사용할 수 있습니다. 부스트 랩은 멋진 믹스를 제공합니다. 예를 들어

: 좀 더 자세한 내용은

<!- our new, semanticized HTML --> 
<article> 
    <section class="main">...</section> 
    <aside></aside> 
</article> 

<!-- its accompanying Less stylesheet --> 
article { 
    .makeRow(); 

    section.main { 
    .makeColumn(10); 
    } 

    aside { 
    .makeColumn(2); 
    } 
}

참조 http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html 및 http://www.sitepoint.com/5-useful-sass-mixins-bootstrap/ 또한 https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins

출처

2015-08-18 14:48:44 Cedric

레일즈의 기존 스타일 시트와 함께 트위터의 부트 스트랩 스타일 시트를 어떻게 망가 뜨리지 않고 사용합니까?

답변

관련 문제