http://getbootstrap.com 에서 부트 스트랩 3의 전체 팩을 다운로드 한 후 테마에 대한 별도의 CSS 파일이 있음을 알았습니다. 그것을 이용하는 방법? 설명 해주십시오?
나는 포함 된 bootstrap-theme.css기존 부트 스트랩 프로젝트에 있지만, 출력 차이가 없습니다.
http://getbootstrap.com 에서 부트 스트랩 3의 전체 팩을 다운로드 한 후 테마에 대한 별도의 CSS 파일이 있음을 알았습니다. 그것을 이용하는 방법? 설명 해주십시오?
나는 포함 된 bootstrap-theme.css기존 부트 스트랩 프로젝트에 있지만, 출력 차이가 없습니다.
답변:
Bootstrap 3.x를 다운로드하면 bootstrap.css 및 bootstrap-theme.css를 얻게 됩니다 (이 파일들도 축소 된 버전은 말할 것도 없습니다).
bootstrap.css당신이 원하는 경우 완전히 스타일과 사용 준비가되어 있습니다. 아마도 약간 평범하지만 준비가되어 있습니다.
원하지 않는 경우 bootstrap-theme.css를 사용할 필요가 없으며 문제가 해결됩니다.
bootstrap-theme.css파일 이름이 제안하려고하는 것입니다. 창의적으로 'THE 부트 스트랩 테마'로 간주되는 부트 스트랩의 테마입니다. 파일의 이름은 기본에 bootstrap.css이미 스타일이 적용되어 있기 때문에 약간 혼란 스럽습니다. 저는 그 스타일을 기본값으로 간주합니다. 그러나이 결론은 부트 스트랩 문서의 예제 섹션에서이 bootstrap-theme.css파일 과 관련하여 언급 된 내용에 비추어 볼 때 잘못된 것입니다 .
"시각적으로 향상된 환경을 위해 선택적 Bootstrap 테마를로드하십시오."
위의 인용문은 이 예제 페이지 http://getbootstrap.com/examples/theme/에 연결되는 썸네일에 http://getbootstrap.com/getting-started/#examples 여기 에 있습니다. 아이디어는 즉 이다 부트 스트랩 테마는 선택 사항입니다.bootstrap-theme.css
BootSwatch.com의 테마 정보 :이 테마는처럼 구현되지 않습니다 bootstrap-theme.css. BootSwatch 테마는 원본의 수정 된 버전입니다 bootstrap.css. 따라서 BootSwatch의 테마와 bootstrap-theme.css파일을 동시에 사용해서는 안됩니다 .
나만의 커스텀 테마 정보 : 나만 bootstrap-theme.css의 테마를 만들 때 수정하도록 선택할 수 있습니다 . 그렇게하면 내장 된 부트 스트랩의 장점을 우연히 깨뜨리지 않고도 스타일을 쉽게 변경할 수 있습니다.
CSS 스타일의 예는 다음을 참조하십시오 . http://getbootstrap.com/examples/theme/
bootstrap-theme.css 파일 없이 예제가 어떻게 보이는지 보려면 브라우저 개발자 도구를 열고 예제의 <head>에서 링크를 삭제 한 다음 비교할 수 있습니다.
나는 이것이 오래된 질문이라는 것을 알고 있지만 누군가 내가 어떻게 생겼는지에 대한 예를 찾고있는 경우에 대비하여 게시했습니다.
최신 정보
bootstrap.css = 주요 CSS 프레임 워크 (그리드, 기본 스타일 등)
bootstrap-theme.css= 확장 스타일 (3D 버튼, 그라디언트 등). 이 파일은 선택 사항이며 부트 스트랩의 기능에는 전혀 영향을 미치지 않으며 모양 만 향상시킵니다.
업데이트 2
v3.2.0 릴리스에서는 부트 스트랩이 문서 페이지에서 테마 CSS를 볼 수있는 옵션을 추가했습니다. 문서 페이지 ( css , components , javascript ) 중 하나로 이동 하면 사이드 네비게이션 하단에 테마 미리보기를 켜거나 끄는 데 사용할 수있는 "미리보기 테마"링크가 표시됩니다.
bootstrap.css사이트가 말한 것처럼 Bootswatch.com의 테마로 단순히 내용을 바꾸고 여전히 bootstrap-theme.cssBottswatch 테마로도 사용할 수 있는지 궁금합니다.
bootstrap-themeBootswatch와 함께 사용할 수 없습니다 . 어쨌든 내 사이트가 엉망이되었습니다.
첫째, bootstrap-theme.cssBootstrap 3의 Bootstrap 2.x 스타일과 동일합니다. 실제로 사용하려면 ALONG을 추가하십시오 bootstrap.css(최소 버전도 작동합니다).
다른 사람들이 말했듯이, 파일 이름 bootstrap-theme.css 는 매우 혼란 스럽습니다. bootstrap-3d.css 또는 bootstrap-fancy.css 와 같은 것을 선택했을 것입니다. 실제로하는 일을 더 묘사 할 것입니다. 세상이 "부트 스트랩 테마"로 보는 것은 완전히 다른 짐승 인 BootSwatch에서 얻을 수있는 것입니다.
그렇게 말하면 효과는 그라디언트와 그림자 등 매우 좋습니다. 불행히도이 파일은 BootSwatch Themes에 혼란을 줄 것입니다. 그래서 나는 그것들을 멋지게 플레이하기 위해 무엇이 필요한지 파헤 치기로 결정했습니다.
Bootstrap-theme.css는 Bootstrap 소스 의 theme.less 파일에서 생성됩니다 . 영향을받는 요소는 다음과 같습니다 (Bootstrap v3.2.0 기준).
theme.less 파일은 다음에 따라 다릅니다.
@import "variables.less";
@import "mixins.less";이 코드는 여러 위치에서 변수에 정의 된 색상을 사용합니다 (예 :
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}이것이 bootstrap-theme.css가 BootSwatch 테마를 완전히 망친 이유입니다. 다행스럽게도 BootSwatch 테마는 variables.less 파일로도 생성되므로 BootSwatch 테마에 대한 bootstrap-theme.css를 간단하게 구축 할 수 있습니다.
올바른 빌드 방법은 테마 빌드 프로세스를 업데이트하는 것이지만 여기에 빠르고 더러운 방법이 있습니다. Bootstrap 소스의 variables.less 파일을 Bootswatch Theme의 파일로 바꾸고 빌드하면 Bootswatch Theme에 대한 bootstrap-theme.css 파일이 있습니다.
부트 스트랩을 작성하면 어리석은 소리가 들릴 수 있지만 실제로는 매우 간단합니다.
끝난. 쉬운 일이지 않습니까?
이 게시물이 다소 오래되었다는 것을 알고 있지만 ...
'증거'가 지적했듯이.
자신 만의 사용자 정의 테마 정보 자신 만의 테마를 만들 때 bootstrap-theme.css를 수정하도록 선택할 수 있습니다. 그렇게하면 내장 된 부트 스트랩의 장점을 우연히 깨뜨리지 않고도 스타일을 쉽게 변경할 수 있습니다.
Bootstrap이 수년 동안 모든 사람들이 핵심 스타일과 약간 다른 것을 원한다는 것을 알았습니다. bootstrap.css를 수정할 수는 있지만 문제가 발생하여 최신 버전으로 업데이트하는 데 어려움이 있고 시간이 많이 걸릴 수 있습니다. 당신을 기다릴 필요에 '테마'사이트 수단에서 다운로드 하면 큰, 그 창조자 업데이트 그 테마 의 경우 때때로, 맞죠?
일부는 자체 'custom.css'파일을 빌드해도 괜찮지 만 'bootstrap-theme.css'를 사용하면 많은 것들이 이미 구축되어 있으므로 부트 스트랩의 핵심을 방해하지 않고 '테마'를 더 빠르게 롤백 할 수 있습니다. .css. 나는 대부분 3D 버튼과 그라디언트를 좋아하지 않기 때문에 bootstrap-theme.css를 사용하여 변경하십시오. 마진이나 패딩을 추가하여 버튼에 반경을 변경, 등등과 ...