함께 부트 스트랩과 내 CSS 사용하기

기본 CSS는 알고 있지만 경험이 없습니다. 부트 스트랩의 CSS 파일을 사용하고 싶지만 내 스타일 코드도 추가하고 싶습니다. 그 일을 어떻게해야합니까? 먼저 부트 스트랩 스타일을 추가해야합니까? 그게 최선의 방법인가요?함께 부트 스트랩과 내 CSS 사용하기

출처

2014-10-29 ahgk

부트 스트랩 첫째, 당신 후

예 ... 당신이 그들 여부 등을해야합니까. – ggdx

css를 처음 접한다면 프레임 워크를 먼저 던지는 것이 좋습니다. CSS를 배우고 프레임 워크를 조작하는 방법을 배웁니다. – ggdx

다른 사람들이 말했듯이 부트 스트랩 먼저. 단추/텍스트의 색과 같은 사용자 지정 부트 스트랩을 고려할 수도 있습니다. 이것은 부트 스트랩의 사용자 정의 페이지에서 다운로드하거나 시각적 인 변경을 제공하는 http://bootswatchr.com/create와 같은 도구를 사용하여 수행 할 수 있습니다 (전체 공개 - 사이트를 사용한 적이 한번도 없었습니다. 더 나은 도구가 존재할 수 있습니다 ...) – Jack

이렇게 스타일 시트를 주문하게됩니다. 먼저 부트 스트랩 CSS와 스타일 시트 파일을 포함하게됩니다. 왜 그런가요? 그렇게하면 중요한 것을 사용하지 않고 프레임 워크의 클래스를 덮어 쓸 수 있습니다. 자신 만의 클래스를 작성하여 레이아웃에 포함시킬 수 있으며, 부트 스트랩 클래스를 사용하여 필요에 따라 클래스를 조정할 수 있습니다. 당신이 당신의 클래스를 혼합하여 부트 스트랩 클래스 속성이 수업에서 추가 된 것을 확인할 때

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
    /* Your external css file will go here. This is just for testing :) */ 
 
    
 
.mycustombtn{ 
 
    background: #000; 
 
} 
 

 
</style> 
 

 

 
<button type="button" class="btn btn-danger mycustombtn">Danger</button>

출처

2014-10-29 20:56:14

먼저 부트 스트랩 CSS를 추가 한 다음 사용자가 직접 추가해야하지만 부트 스트랩의 CSS 때문에 까다로울 수 있습니다. 부트 스트랩 클래스가하는 일을 항상 확인하십시오.

출처

2014-10-29 20:41:45

주요 문제는 Bootstrap과 동일한 클래스 및 ID 이름을 사용하는 것입니다. 맞습니까? 내 CSS에 고유 한 클래스 및 ID 이름을 사용할 계획입니다. 가능한 오류를 예방하기에 충분합니까? – ahgk

원하지 않는 것을 추가 할 수있는 클래스가 있습니다. 그리고 중요한 것을 너무 많이 사용하지 않도록 노력하십시오. 그것은 최선의 관행이 아닙니다. –

그것은 다음과 같이 보일 것입니다 : 당신이 필요로

이

<head> 
    <link href="bootstrap.min.css" rel="stylesheet" /> 
    <link href="yourstyle.css" rel="stylesheet" /> 
</head>

당신은 많은 CSS 링크를 넣을 수 있습니다. 일반적으로 프레임 워크 CSS 파일을 직접 작성하는 것이 가장 좋습니다.

출처

2014-10-29 20:47:21 phantom

당신은 당신의 CSS로 부트 스트랩을 사용할 수 있습니다

, 단지 할 (당신의 머리 태그) 것을 : 심지어 어떤 지시를 덮어 쓸 수 있습니다

<!-- Latest compiled and minified Bootstrap CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" /> 

<!-- Your file css --> 
<link rel="stylesheet" href="your-file-css.css" />

, 그냥 당신이 파일에 넣어 (하지만 가장 좋은 방법이 아닙니다).

항상 css 파일 링크 앞에 부트 스트랩 링크를 넣으십시오. 죄송합니다

내

출처

2014-10-29 20:48:00

-1

그것은 모든 CSS 특이성에 관한 영어.

두 속성이 같은 가중치를 갖는 경우 두 번째 속성이 사용됩니다.

!important 속성을 선언하여 단일 CSS 속성을 재정의 할 수 있습니다.

예; 당신은 (단지 물건을 시도하는 초보자를위한 도움) 부트 스트랩 스타일은 당신이 우선 통지하는 경우

body { 
    background-color: #000 !important; 
}

그것은 CSS 선택기의 무게 (또는 특이성)을 극복 할 수있는 가장 쉬운 방법입니다.

하지만 특이성에 대해 자세히 알아 보려면 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/을 읽어야합니다.

출처

2014-10-29 20:50:10 dojs

함께 부트 스트랩과 내 CSS 사용하기

답변

관련 문제