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

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

---

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 예제

Bootstrap 2.3 SASS

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

It will take care of the hover/actives for you

From the comments, if you want to lighten the button instead of darken when using black (or just want to inverse) you need to extend the class a bit further like so:

Bootstrap 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
  }
}

Bootstrap 3 SASS Lighten Example

---

You can overwrite the colors in your css, for example for Danger button:

.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]; }

---

Here is a good resource: http://charliepark.org/bootstrap_buttons/

You can change color and see the effect in action.

---

If you are already loading your own custom CSS file after loading bootstrap.css (version 3) you can add these 2 CSS styles to your custom.css and they will override the bootstrap defaults for the default button style.

.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;
}

---

Instead of changing CSS values one by one I would suggest to use LESS. Bootstrap has LESS version on Github: https://github.com/twbs/bootstrap

LESS allows you to define variables to change colors which makes it so much more convenient. Define color once and LESS compiles CSS file that changes the values globally. Saves time and effort.

---

In order to completely override the bootstrap button styles, you need to override a list of properties. See the below example.

    .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;
    }

If you don't use all the listed styles then you will see the default styles at performing actions on button. For example once you click the button and remove mouse pointer from button, you will see the default color visible. Or keep the button pressed you will see default colors. So, I have listed all the pseudo-styles that are to be overridden.

---

For Bootstrap for Sass override it's

.btn-default {

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

}

You can see the source for it here: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

---

Or try http://twitterbootstrapbuttons.w3masters.nl/. It creates css for buttons based on html color input. Add the css after the bootstrap css. It provides three styles of buttons (light, dark and spin).

---

Here is a very easy and eficient way: add in your CSS your class with the colors you want to apply to your button:

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

and add the style to your bootstrap button or link:

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

---

In Twitter Bootstrap bootstrap 3.0.0, Twitter button is flat. You can customize it from http://getbootstrap.com/customize. Button color, border radious etc.

Also you can find the HTML code and others functionality http://twitterbootstrap.org/bootstrap-css-buttons.

Bootstrap 2.3.2 button is gradient but 3.0.0 ( new release ) flat and looks more cool.

and also you can find to customize the entire bootstrap looks and style form this resources: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

---

I know this is an older thread, but just to add another perspective. I'd assert that using overrides is really a bit of a code smell and will quickly get out of hand on larger projects. Today you're overriding Buttons, tomorrow Modals, the next day it Dropdowns, etc., etc.

I'd advise to try possibly commenting out the include for buttons.less and either define my own, or, find another Buttons library that's more suitable to my project. Shameless plug: here's an example of how easy it is to mix our Buttons library with TB: Using Buttons with Twitter Bootstrap. In practice, again, you'd likely want to remove the buttons.less include altogether to improve performance but this shows how you can make things look a bit less "generic". I haven't done this exercise yet myself but I'd imagine you could start by simply commenting out lines like:

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;
}

참고 URL : https://stackoverflow.com/questions/10659070/styling-twitter-bootstrap-buttons