Stylizacja przycisków typu twitter bootstrap


96

Przyciski Twitter-Bootstrap są niesamowicie piękne. Wypróbuj je, przewijając je

zrzut ekranu przycisku bootstrap

Ale są ograniczone w kolorach.

Czy jest jakiś sposób, żebym mógł zmienić podstawowy kolor przycisku, zachowując jednocześnie piękny efekt najechania kursorem, który dzięki bootstrapowi był tak piękny i łatwy?

Jestem całkowicie nieświadomy tego, jak wygląda css / javascript, którego używa twitter do utrzymania tych efektów.


7
Znajdź i edytuj mniej definicji przycisków. Następnie ponownie skompiluj CSS z lessc. Nie edytuj bezpośrednio plików CSS! Nie da się tego utrzymać.
nalply

Odpowiedzi:


25

Zasadniczo przyciski w Twitter Bootstrap są kontrolowane w CSS przez „.btn {}”. Musisz tylko przejść do pliku CSS i znaleźć tam, gdzie jest napisane „btn”, i zmienić ustawienia kolorów. Jednak nie jest to tak proste, jak samo zrobienie tego, ponieważ musisz również zmienić kolor przycisku, który zmienia się po jego podświetleniu itp. Aby to zrobić, musisz szukać innych tagów w CSS, takich jak ".btn: hover {} ”itp.

Zmiana wymaga zmiany CSS. Oto szybki link do tego pliku:

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


33
To nie jest szczególnie piękne rozwiązanie. Prosimy o skorzystanie z innych rozwiązań opartych na LESS. Lub dostosuj bootstrap za pomocą edytora zmiennych na ich stronie internetowej.
Jesper

5
po prostu zastąpić go ... ładowanie swój css w końcu może pomóc rozwiązać ten problem .. stosując tę samą calss z bootstrap
Jaimin MosLake

1
Tak, zdecydowanie byłbym przeciwny modyfikowaniu pliku bootstrap.css. Jak powiedział Jaimin, po prostu go zastąp.
Tim Ludwinski

176

Odkryłem, że najprostszym sposobem jest umieszczenie tego w swoich nadpisaniach. Przepraszam za mój niewyobrażalny wybór koloru

Bootstrap 4-Alpha SASS

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

Przykład Bootstrap 4 Alpha SASS

Bootstrap 3 MNIEJ

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

Przykład Bootstrap 3 MNIEJ

Bootstrap 3 SASS

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

Przykład Bootstrap 3 SASS

Bootstrap 2.3 MNIEJ

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

Bootstrap 2.3 MNIEJ Przykład

Bootstrap 2.3 SASS

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

Za Ciebie zadba o najechanie / aktywowanie

Z komentarzy, jeśli chcesz rozjaśnić przycisk zamiast przyciemniać podczas używania czerni (lub po prostu chcesz odwrócić), musisz rozszerzyć klasę nieco dalej:

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

Przykład Bootstrap 3 SASS Lighten


17
Pan jest fantastyczny.
basarat

7
Jak przetłumaczyłbyś to na scss?
Dreyfuzz

1
Następnie uruchom, lesscaby skompilować zmiany w CSS.
nalply

7
Dreyfuzz Nie używam scss, ale patrząc na bootstrapy Sass z trzeciej strony wydaje się, że zrobiłbyś .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }`` odpowiednio zmieniając swoje zmienne (przepraszam za okropne formatowanie)
chrisan

Ja się .buttonBackground is undefined in main.lessmuszę to wszystko w moim mniej?
Himalay Majumdar

32

Możesz nadpisać kolory w swoim css, na przykład dla przycisku Niebezpieczeństwo:

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

7
Myślę, że musisz stylizować :focusi :activeteż, albo w przeciwnym razie czasami dostajesz dziwne kolory po kliknięciach / przeciągnięciach ...
Simon East

Proste, mi się podoba.
Nino Škopac

1
Dla tych, którzy znaleźli to poprzez wyszukiwanie i otrzymujesz domyślny kolor po kliknięciu i przeciągnięciu przycisku, musisz .btn-primary:active:focus {wybrać i zastąpić ten przypadek
Shane Reustle

27

Oto dobre źródło: http://charliepark.org/bootstrap_buttons/

Możesz zmienić kolor i zobaczyć efekt w akcji.


2
To jest konfigurator. To proste, jeśli spieszysz się z utworzeniem prototypu dla klienta. Jednak nie do utrzymania w dłuższej perspektywie. Co jeśli konfigurator zniknie? Dlatego tak naprawdę lesscjest lepszym rozwiązaniem.
nalply

Uwielbiam to rozwiązanie, chociaż żałuję, że nie ma sposobu na wprowadzenie rgb / rgba, aby uzyskać dokładne kolory.
Sedrick,

@nalply less jest świetne, jeśli już wykonałeś ten krok, ale ten "konfigurator" robi wszystko, co jest potrzebne do wygenerowania css. Wrzuć to i idź. Po tym nie będziesz potrzebować konfiguratora.
moodboom

21

Jeśli już ładujesz swój własny niestandardowy plik CSS po załadowaniu pliku bootstrap.css (wersja 3), możesz dodać te 2 style CSS do pliku custom.css i nadpisują one domyślne ustawienia ładowania początkowego dla domyślnego stylu przycisku.

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

12

Zamiast zmieniać wartości CSS jeden po drugim, sugerowałbym użycie LESS. Bootstrap ma MNIEJSZĄ wersję na Github: https://github.com/twbs/bootstrap

MNIEJ pozwala zdefiniować zmienne w celu zmiany kolorów, co czyni to o wiele wygodniejszym. Zdefiniuj kolor raz, a MNIEJ kompiluje plik CSS, który globalnie zmienia wartości. Oszczędza czas i wysiłek.


11

Aby całkowicie zastąpić style przycisków ładowania początkowego, należy przesłonić listę właściwości. Zobacz poniższy przykład.

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

Jeśli nie użyjesz wszystkich wymienionych stylów, zobaczysz style domyślne podczas wykonywania czynności na przycisku. Na przykład, gdy klikniesz przycisk i usuniesz wskaźnik myszy z przycisku, zobaczysz domyślny kolor. Lub trzymając wciśnięty przycisk, zobaczysz kolory domyślne. Dlatego wymieniłem wszystkie pseudo style, które mają zostać zastąpione.


ta metoda jest świetna.
ustępuje tylko MNIEJSZemu


5

Lub spróbuj http://twitterbootstrapbuttons.w3masters.nl/ . Tworzy css dla przycisków na podstawie danych wejściowych koloru HTML. Dodaj css po css bootstrap. Zapewnia trzy style przycisków (jasny, ciemny i spin).


1
To jest konfigurator (rodzaj). To całkiem proste, jeśli spieszysz się z tworzeniem prototypu dla klienta. Jednak nie do utrzymania w dłuższej perspektywie. Co jeśli konfigurator zniknie? Dlatego tak naprawdę lesscjest lepszym rozwiązaniem.
nalply

5

Oto bardzo łatwy i skuteczny sposób: dodaj do CSS swoją klasę z kolorami, które chcesz zastosować do przycisku:

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

i dodaj styl do przycisku lub łącza bootstrap:

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

3

W Twitter Bootstrap bootstrap 3.0.0 przycisk Twittera jest płaski. Możesz go dostosować ze strony http://getbootstrap.com/customize . Kolor przycisku, radialna ramka itp.

Możesz również znaleźć kod HTML i inne funkcje http://twitterbootstrap.org/bootstrap-css-buttons .

Przycisk Bootstrap 2.3.2 jest gradientowy, ale 3.0.0 (nowa wersja) płaski i wygląda fajniej.

a także możesz znaleźć możliwość dostosowania całego wyglądu i stylu bootstrap z tych zasobów: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/


1

Wiem, że to starszy wątek, ale żeby dodać inną perspektywę. Twierdzę, że używanie nadpisań to naprawdę trochę zapach kodu i szybko wymknie się spod kontroli w przypadku większych projektów. Dziś nadpisujesz Przyciski, jutro Modały, następnego dnia Rozwijane menu itp.

Radziłbym spróbować skomentować dołączenie dla buttons.lessi zdefiniować własne lub znaleźć inną bibliotekę Buttons, która jest bardziej odpowiednia dla mojego projektu. Bezwstydna wtyczka: oto przykład, jak łatwo jest połączyć naszą bibliotekę Buttons z TB: Używanie przycisków z Twitter Bootstrap . W praktyce znowu prawdopodobnie zechcesz buttons.lesscałkowicie usunąć dołączenie, aby poprawić wydajność, ale to pokazuje, jak możesz sprawić, by rzeczy wyglądały nieco mniej „generycznie”. Nie wykonałem jeszcze tego ćwiczenia, ale wyobrażam sobie, że możesz zacząć od prostego komentowania linii, takich jak:

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

A potem przekompiluj używając `lessc używając jednego z własnych modułów przycisków. W ten sposób otrzymujesz przetestowany w walce rdzeń TB, ale nadal możesz dostosowywać rzeczy bez uciekania się do poważnych zastąpień. Nie ma absolutnie żadnego powodu, aby nie używać tylko części biblioteki, takich jak Bootstrap. Oczywiście to samo dotyczy wersji TB Sass


0

W przypadku Bootstrap (przynajmniej dla wersji 3.1.1) i LESS możesz użyć tego:

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

Jest to zdefiniowane w bootstrap/less/buttons.less.


0

Możesz zmienić kolor tła i użyć! Ważne;

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.