twitter-bootstrap
트위터 부트 스트랩 스타일 사용자 정의

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

비고

한가지 주목해야 할 것은 bootstrap.css의 메인 캐릭터 다음에 custom.css 이름을 언급해야한다는 것입니다. 그렇지 않으면 custom.css의 값이 실제로 구현되지 않습니다.

기본 CSS 무시

모두는 트위터 부트 스트랩을 좋아하지만, 우리 중 일부는 기본 디자인이 마음에 들지 않습니다. 그래서 여기에 boostrap 디자인을 커스터마이징하기 시작하는 방법에 대한 간단한 가이드가 있습니다. 트위터 부풀 뜨기는 우리가 오버라이드 할 수있는 일련의 기본 CSS 파일을 제공합니다.

우리가 오버라이드 (override) 할 필요가 메일 CSS 파일이 있습니다 boostrap.min.css 세 이하 boostrap/dist/css 디렉토리.

boostrap의 기본 디자인을 덮어 쓰려면이 2 단계를 따르십시오.

custom.css 를 만들거나 (원하는 이름으로 지정할 수 있음) index.html 연결하십시오.

<html>
<head>
    <title>Customize Bootstrap</title>

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
    <!-- This mus be declared after the bootstrap.min.css -->
    <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
</head>
<body>
    <!-- Do something -->
</body>
</html>

사용자 정의를 시작하십시오. 예를 들어 기본 버튼의 색상을 변경하려고합니다. 부트 스트랩의 기본 버튼 스타일을 사용하려면 <button class="btn">Sample</button> 태그에 btn 클래스를 추가해야합니다. custom.css 에 다음 코드를 작성하면됩니다.
```
.btn{
    background-color:red;
}
```
위의 코드는 이와 같은 것을 생성합니다.
기본값 :

맞춤 설정 :

이 기법을 사용하면 boostrap 제공자가 이미 작성한 버튼 스타일 전체를 다시 작성할 필요가 없습니다. 이것은 또한 나에게 덜 지루한 우리 자신의 CSS 클래스를 작성하지 못하게했다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow