부트스트랩 3과 함께 부트스트랩-테마.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파일 이름이 제안하려는 것입니다. 창의적으로 '부트스트랩 테마'로 간주되는 부트스트랩에 대한 테마입니다.은스로다금et금aesfetee의f은e로e스bootstrap.css이미 스타일링이 적용되어 있고, 저로서는 그 스타일을 기본이라고 생각합니다. 그 부트스트랩 문서의 볼 때 잘못된 입니다.bootstrap-theme.css선택사항:
"시각적으로 향상된 경험을 위해 옵션인 부트스트랩 테마를 로드합니다."
위의 인용문은 이 예제 페이지 http://getbootstrap.com/examples/theme/ 에 연결된 썸네일에서 볼 수 있습니다. http://getbootstrap.com/getting-started/ #backs.그 생각은bootstrap-theme.css부트스트랩 테마이며 선택 사항입니다.
테마: BootSwatch.com
BootSwatch.com 의 테마 정보 이러한 않습니다 구현되지 같이 테마는 다음과 않습니다 are 구현되지 these implement not ed like 이러한 themes : 정보 테마는 같이 의 다음과 테마 are BootSwatch.com bootstrap-theme.css .BootSwatch의 입니다.bootstrap.css따라서와 . "BootSwatch"의 는 안 .bootstrap-theme.css동시에 파일을 작성합니다.
사용자 지정 테마
지정 테마 : 할 을 할 을 bootstrap-theme.css부트스트랩의 않고 변경할 수 .이렇게 하면 내장된 부트스트랩의 장점을 실수로 깨뜨리지 않고 스타일을 쉽게 변경할 수 있습니다.
CSS 스타일의 예는 http://getbootstrap.com/examples/theme/ 을 참조하십시오.
예제의 모양을 보려면bootstrap-slap.slap 파일 없이 브라우저 개발자 도구를 열고 예제의 <head>에서 링크를 삭제한 다음 비교할 수 있습니다.
나는 이것이 오래된 질문이라는 것을 알지만 누군가가 내가 어떻게 생겼는지에 대한 예시를 찾고 있을 때를 대비하여 그것을 올립니다.
갱신하다
bootstrap.css 프레임워크 등=인 CSS (키워드,본일등)
bootstrap-theme.css= 확장된 스타일링(3D 버튼, 그라디언트 등).이 파일은 선택 사항이며 부트스트랩의 기능에는 전혀 영향을 주지 않으며 외관만 개선합니다.
업데이트2
v3.2.0 릴리즈에서 부트스트랩은 문서 페이지에서 테마 CSS를 볼 수 있는 옵션이 추가되었습니다.문서 페이지(css, components, javascript) 중 하나로 이동하면 사이드 내비 하단에 테마 css를 켜고 끄는 데 사용할 수 있는 "테마 미리보기" 링크가 표시됩니다.
일단 , ,bootstrap-theme.css이는 부트스트랩 3의 부트스트랩 2.x 스타일과 동등한 것에 지나지 않습니다.꼭 사용하고 싶으시면 같이 추가하시면 됩니다.bootstrap.css(정의된 버전 작동합니다 도 minim.
부트스트랩-테마.css는 추가 CSS 파일로, 사용자가 선택적으로 사용할 수 있습니다.이것은 버튼과 다른 요소들에 3D 효과를 줍니다.
다른 사람들이 말했듯이 bootstrap-theme.css라는 파일 이름은 매우 혼란스럽습니다.bootstrap-3d.css 또는 bootstrap-fancy.css와 같은 것을 선택했을 것입니다. 실제로 무엇을 하는지 더 설명적일 것입니다.전 세계가 '부트스트랩 테마'라고 보는 것은 완전히 다른 짐승인 '부트스워치'에서 얻을 수 있는 것입니다.
그래디언트와 그림자 등 그 효과는 꽤 좋습니다.안타깝게도 이 파일은 BootSwatch 테마에 큰 피해를 줄 것입니다. 그래서 저는 BootSwatch 테마와 잘 어울리게 하려면 어떤 것이 필요한지 자세히 살펴보기로 했습니다.
더 적은
Bootstrap-theme.css는 Bootstrap 소스의 theme.less 파일에서 생성됩니다.영향을 받는 요소는 다음과 같습니다(부트스트랩 v3.2.0 기준).
- 아이템목록
- 단추
- 이미지들
- 드롭다운
- 나브바
- 알림
- 진행률 막대
- 그룹 목록
- 패널
- 웰스
테마.less 파일은 다음에 따라 달라집니다.
@import "variables.less";
@import "mixins.less";
코드는 variable.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 테마도 variable.less 파일로 생성되므로 BootSwatch 테마에 대한 bootstrap-theme.css를 간단히 구축할 수 있다는 것입니다.
부트스트랩-테마.css 구축
올바른 방법은 테마 빌드 프로세스를 업데이트하는 것이지만, 여기에 빠르고 더러운 방법이 있습니다.Bootstrap 소스의 variables.less 파일을 Bootswatch Theme의 파일로 교체하고 빌드하면 Bootswatch Theme의 bootstrap-theme.css 파일이 있습니다.
부트스트랩 자체 구축
부트스트랩을 구축하는 것은 어려운 일로 들릴지 모르지만, 실제로는 매우 간단합니다.
- 부트스트랩 소스 코드 다운로드
- NodeJS 다운로드 및 설치
- 명령 프롬프트를 열고 부트스트랩 소스 폴더로 이동합니다.npm install을 입력합니다.이렇게 하면 프로젝트에 "node_modules" 폴더가 추가되고 필요한 모든 Node 항목이 다운로드됩니다.
- "npm install -g grunt-cli"를 입력하여 전역적으로 grunt 설치(-g 옵션)
- "dist" 폴더 이름을 "dist-orig"로 바꾼 다음 "grunt dist"를 입력하여 재구성합니다.이제 사용자 지정 부트스트랩 빌드를 사용하는 데 필요한 모든 것을 포함하는 새로운 "dist" 폴더가 있는지 확인합니다.
됐어요, 쉽죠, 그렇죠?
이 게시물이 좀 오래된 건 알지만...
위트니스'가 지적한 것처럼.
자신만의 사용자 지정 테마 자신만의 테마를 만들 때 bootstrap-theme.css를 수정하도록 선택할 수 있습니다.이렇게 하면 내장된 부트스트랩의 장점을 실수로 깨뜨리지 않고 스타일을 쉽게 변경할 수 있습니다.
부트스트랩은 지난 수년간 모든 사람들이 핵심 스타일과는 조금 다른 것을 원한다는 것을 알고 있습니다.bootstrap.css를 수정할 수는 있지만 문제가 발생할 수도 있고 새로운 버전으로 업데이트하는 것이 정말 힘들고 시간이 많이 걸릴 수도 있습니다.'테마' 사이트에서 다운로드한다는 것은 해당 크리에이터가 해당 테마를 업데이트할 경우, 때로는 크게 업데이트할 경우 기다려야 한다는 것을 의미합니다.
어떤 사람들은 'custom.css' 파일을 자체적으로 구축하기도 하는데 그건 괜찮지만 'bootstrap-theme.css'를 사용하면 이미 많은 것들이 구축되어 있기 때문에 bootstrap.css의 핵심을 방해하지 않고' 자신의 테마를 더 빠르게 롤링할 수 있습니다.대부분의 경우 3D 버튼과 그래디언트가 마음에 들지 않으므로 부트스트랩-테마.css를 사용하여 변경합니다.여백이나 패딩을 추가하고, 반지름을 단추로 변경하는 등...
언급URL : https://stackoverflow.com/questions/18327543/how-to-use-bootstrap-theme-css-with-bootstrap-3
'programing' 카테고리의 다른 글
| 페이지에서 연락처 양식 7 쇼트코드를 사용하지 않는 한 연락처 양식 7 CSS 및 JS 제거 (0) | 2023.09.19 |
|---|---|
| SQL 삽입 문 반환 "0/무개 행 삽입" (0) | 2023.09.19 |
| 워드프레스 기능에 코드를 적용하는 것.단 하나의 카테고리로 php. (0) | 2023.09.14 |
| Oracle 업데이트 및 반환 값 (0) | 2023.09.14 |
| 워드프레스의 영구링크 - 페이지를 찾을 수 없음 (0) | 2023.09.14 |