트위터 부트 스트랩 버튼 스타일링

Twitter-Bootstrap 버튼은 놀랍도록 아름답습니다. 스크롤하여 사용해보십시오.

그러나 그들은 색상이 제한되어 있습니다.

부트 스트랩이 너무 아름답고 쉽게 만들었던 아름다운 호버 오버 효과를 유지하면서 버튼의 기본 색상을 변경할 수있는 방법이 있습니까?

나는 트위터가 그 효과를 유지하기 위해 사용하는 CSS / JavaScript가 어떻게 보이는지 완전히 알지 못합니다.

기본적으로 Twitter Bootstrap의 버튼은 ".btn {}"에 의해 CSS에서 제어됩니다. 당신이해야 할 일은 CSS 파일로 가서 "btn"이라고 표시된 곳을 찾아서 색상 설정을 변경하는 것입니다. 그러나 버튼을 강조 표시 할 때 버튼의 색상을 변경해야하므로 단순히 그렇게하는 것만 큼 간단하지 않습니다. 그렇게하려면 CSS에서 ".btn : hover {}와 같은 다른 태그를 찾아야합니다. "등

이를 변경하려면 CSS를 변경해야합니다. 다음은 해당 파일에 대한 빠른 링크입니다.

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

가장 간단한 방법은 이것을 재정의에 넣는 것입니다. 상상할 수없는 색을 선택해서 미안해

부트 스트랩 4- 알파 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

부트 스트랩 4 알파 SASS 예

부트 스트랩 3 적게

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS 예제

부트 스트랩 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

부트 스트랩 3 SASS 예

부트 스트랩 2.3 덜

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

부트 스트랩 2.3 LESS 예제

부트 스트랩 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

호버 / 액티브를 처리합니다.

주석에서 검정색을 사용할 때 어둡게하는 대신 버튼을 밝게하려면 (또는 반대로하려면) 클래스를 다음과 같이 조금 더 확장해야합니다.

부트 스트랩 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

부트 스트랩 3 SASS Lighten 예

예를 들어 위험 버튼의 경우 CSS의 색상을 덮어 쓸 수 있습니다.

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

다음은 좋은 리소스입니다. http://charliepark.org/bootstrap_buttons/

색상을 변경하고 실제 효과를 볼 수 있습니다.

bootstrap.css (버전 3)를로드 한 후 자체 사용자 정의 CSS 파일을 이미로드하고있는 경우 이러한 2 개의 CSS 스타일을 custom.css에 추가 할 수 있으며 기본 버튼 스타일의 부트 스트랩 기본값을 재정의합니다.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

CSS 값을 하나씩 변경하는 대신 LESS 를 사용하는 것이 좋습니다 . 부트 스트랩은 Github에 더 적은 버전이 있습니다 : https://github.com/twbs/bootstrap

LESS를 사용하면 변수를 정의하여 색상을 변경하여 훨씬 더 편리하게 만들 수 있습니다. 색상을 한 번 정의하면 LESS는 값을 전역 적으로 변경하는 CSS 파일을 컴파일합니다. 시간과 노력을 절약합니다.

부트 스트랩 버튼 스타일을 완전히 재정의하려면 속성 목록을 재정의해야합니다. 아래 예를 참조하십시오.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

나열된 모든 스타일을 사용하지 않으면 버튼에서 작업을 수행 할 때 기본 스타일이 표시됩니다. 예를 들어 버튼을 클릭하고 버튼에서 마우스 포인터를 제거하면 기본 색상이 표시됩니다. 또는 버튼을 길게 누르면 기본 색상이 표시됩니다. 따라서 재정의 할 모든 의사 스타일을 나열했습니다.

Sass 용 부트 스트랩 재정의의 경우

.btn-default {

    @include button-variant($color, $background, $border);

}

여기에서 소스를 확인할 수 있습니다 : https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

또는 http://twitterbootstrapbuttons.w3masters.nl/ 시도하십시오 . HTML 색상 입력을 기반으로 버튼에 대한 CSS를 생성합니다. 부트 스트랩 CSS 뒤에 CSS를 추가합니다. 세 가지 스타일의 버튼 (밝음, 어두움 및 회전)을 제공합니다.

다음은 매우 쉽고 효율적인 방법입니다. CSS에 버튼에 적용 할 색상으로 클래스를 추가하세요.

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

부트 스트랩 버튼 또는 링크에 스타일을 추가합니다.

<a href="xxx" class="btn btn-info my-btn">aaa</a>

에서 트위터 부트 스트랩 부트 스트랩 3.0.0, 트위터 버튼이 평평하다. http://getbootstrap.com/customize 에서 사용자 정의 할 수 있습니다 . 버튼 색상, 테두리 반경 등

또한 HTML 코드 및 기타 기능 http://twitterbootstrap.org/bootstrap-css-buttons를 찾을 수 있습니다 .

부트 스트랩 2.3.2 버튼은 그라데이션이지만 3.0.0 (새 릴리스)은 평평하고 더 멋져 보입니다.

또한이 리소스에서 전체 부트 스트랩 모양과 스타일을 사용자 정의 할 수 있습니다. http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

나는 이것이 오래된 스레드라는 것을 알고 있지만 다른 관점을 추가하기 위해. 재정의를 사용하는 것은 실제로 약간의 코드 냄새이며 더 큰 프로젝트에서 빠르게 손을 뗄 것이라고 주장합니다. 오늘은 버튼, 내일 모달, 다음 날 드롭 다운 등을 재정의하고 있습니다.

포함을 주석 처리하고 buttons.less내 자신을 정의하거나 내 프로젝트에 더 적합한 다른 Buttons 라이브러리를 찾는 것이 좋습니다. 뻔뻔한 플러그 : 여기에 우리의 Buttons 라이브러리를 TB : Using Buttons with Twitter Bootstrap과 쉽게 혼합 할 수있는 예가 있습니다. 실제로 buttons.less는 성능을 향상시키기 위해 include를 완전히 제거하고 싶을 가능성이 있지만, 이렇게하면 좀 덜 "일반적"으로 보이게 할 수있는 방법을 알 수 있습니다. 나는 아직이 연습을하지 않았지만 다음과 같은 줄을 간단히 주석 처리하여 시작할 수 있다고 생각합니다.

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

그런 다음 자신의 버튼 모듈 중 하나를 사용하여`lessc를 사용하여 다시 컴파일하십시오. 이렇게하면 TB의 핵심적인 전투 테스트를받을 수 있지만 주요 재정의에 의존하지 않고도 사용자 정의 할 수 있습니다. Bootstrap과 같은 라이브러리의 일부만 사용하지 않을 이유가 전혀 없습니다. 물론 Sass 버전의 TB에도 동일하게 적용됩니다.

Bootstrap (최소한 버전 3.1.1) 및 LESS의 경우 다음을 사용할 수 있습니다.

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

이것은에 정의되어 bootstrap/less/buttons.less있습니다.

배경색을 변경하고! important를 사용할 수 있습니다.

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}