Styling tombol bootstrap twitter


96

Tombol Twitter-Bootstrap luar biasa indah. Cobalah dengan menggulirnya

tangkapan layar tombol bootstrap

Tapi warnanya terbatas.

Adakah cara saya bisa mengubah warna dasar tombol sambil mempertahankan efek hover-over yang indah yang dibuat oleh bootstrap begitu indah dan mudah?

Saya sama sekali tidak menyadari seperti apa css / javascript yang digunakan twitter untuk mempertahankan efek tersebut.


7
Temukan dan edit definisi tombol yang lebih sedikit. Kemudian kompilasi ulang CSS dengan lessc. Jangan mengedit file CSS secara langsung! Itu tidak bisa dipelihara.
nalply

Jawaban:


25

Pada dasarnya, tombol di Twitter Bootstrap dikontrol di CSS oleh ".btn {}". Yang harus Anda lakukan adalah pergi ke file CSS dan temukan di mana dikatakan "btn" dan ubah pengaturan warnanya. Namun, ini tidak sesederhana hanya melakukan itu karena Anda juga harus mengubah warna tombol saat Anda menyorotnya, dll. Untuk melakukan ITU, Anda harus mencari tag lain di CSS seperti ".btn: hover {} ", dll.

Mengubahnya membutuhkan perubahan pada CSS. Berikut ini tautan cepat ke file itu:

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


33
Ini bukanlah solusi yang bagus. Silakan gunakan solusi lain, yang didasarkan pada LESS. Atau sesuaikan bootstrap melalui editor variabel di situs web mereka.
Jesper

5
timpa saja ... memuat css Anda pada akhirnya dapat membantu Anda memecahkan masalah .. menggunakan
kalibrasi yang

1
Ya, saya pasti akan menentang modifikasi bootstrap.css. Seperti yang dikatakan Jaimin, timpa saja.
Tim Ludwinski

176

Saya menemukan cara paling sederhana untuk memasukkan ini ke dalam timpaan Anda. Maaf untuk pilihan warna saya yang tidak imajinatif

Bootstrap 4-Alpha SASS

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

Contoh Bootstrap 4 Alpha SASS

Bootstrap 3 KURANG

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

Contoh Bootstrap 3 LESS

Bootstrap 3 SASS

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

Contoh Bootstrap 3 SASS

Bootstrap 2.3 KURANG

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

Contoh Bootstrap 2.3 KURANG

Bootstrap 2.3 SASS

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

Ini akan mengurus hover / aktif untuk Anda

Dari komentar, jika Anda ingin meringankan tombol alih-alih menggelapkan saat menggunakan hitam (atau hanya ingin membalik), Anda perlu memperluas kelas sedikit lebih jauh seperti:

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

Contoh Bootstrap 3 SASS Lighten


17
Anda tuan luar biasa.
basarat

7
Bagaimana Anda menerjemahkan ini ke dalam scss?
Dreyfuzz

1
Kemudian jalankan lesscuntuk mengkompilasi perubahan Anda ke CSS.
nalply

7
Dreyfuzz Saya tidak menggunakan scss tetapi melihat bootstraps sass pihak ke - 3 tampaknya Anda akan melakukan .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }`mengubah variabel Anda dengan tepat (maaf untuk format yang buruk)
chrisan

Saya mengerti, .buttonBackground is undefined in main.lessapakah saya perlu menyertakan sesuatu dalam kurang saya?
Himalay Majumdar

32

Anda dapat menimpa warna di css Anda, misalnya untuk tombol Bahaya:

.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
Saya pikir Anda perlu gaya :focusdan :activejuga, atau jika tidak Anda terkadang mendapatkan warna aneh pada klik / seret ...
Simon East

Sederhana, saya menyukainya.
Nino Škopac

1
Bagi mereka yang menemukan ini melalui pencarian, dan Anda mendapatkan warna default saat Anda mengklik dan menarik tombol, Anda perlu .btn-primary:active:focus {untuk memilih dan menimpa casing itu
Shane Reustle

27

Ini adalah sumber yang bagus: http://charliepark.org/bootstrap_buttons/

Anda dapat mengubah warna dan melihat efeknya beraksi.


2
Ini adalah konfigurator. Sangat mudah jika Anda terburu-buru membuat prototipe untuk pelanggan. Namun tidak bisa dipelihara dalam jangka panjang. Bagaimana jika konfigurator menghilang? Oleh karena itu untuk hal yang nyata, lesscadalah solusi yang lebih baik.
nalply

Suka solusi ini, meskipun saya berharap ada cara untuk memasukkan rgb / rgba untuk mendapatkan warna yang tepat.
Sedrick

@nalply less bagus jika Anda sudah menjalankan langkah itu, tetapi "konfigurator" ini melakukan semua yang diperlukan untuk menghasilkan css. Jatuhkan dan pergi. Anda tidak memerlukan konfigurator setelah itu.
moodboom

21

Jika Anda sudah memuat file CSS khusus Anda sendiri setelah memuat bootstrap.css (versi 3) Anda dapat menambahkan 2 gaya CSS ini ke custom.css Anda dan mereka akan menimpa default bootstrap untuk gaya tombol default.

.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

Alih-alih mengubah nilai CSS satu per satu, saya sarankan untuk menggunakan LESS. Bootstrap memiliki versi KURANG di Github: https://github.com/twbs/bootstrap

LESS memungkinkan Anda untuk menentukan variabel untuk mengubah warna yang membuatnya jauh lebih nyaman. Tentukan warna sekali dan LESS mengkompilasi file CSS yang mengubah nilai secara global. Menghemat waktu dan tenaga.


11

Untuk mengganti gaya tombol bootstrap sepenuhnya, Anda perlu mengganti daftar properti. Lihat contoh di bawah ini.

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

Jika Anda tidak menggunakan semua gaya yang terdaftar maka Anda akan melihat gaya default saat melakukan tindakan pada tombol. Misalnya setelah Anda mengklik tombol dan menghapus penunjuk mouse dari tombol, Anda akan melihat warna default terlihat. Atau terus tekan tombol Anda akan melihat warna default. Jadi, saya telah membuat daftar semua gaya semu yang akan diganti.


metode ini bagus. itu yang kedua setelah kustomisasi bootstrap KURANG
Gianluca Ghettini


5

Atau coba http://twitterbootstrapbuttons.w3masters.nl/ . Ini menciptakan css untuk tombol berdasarkan input warna html. Tambahkan css setelah bootstrap css. Ini menyediakan tiga gaya tombol (terang, gelap dan berputar).


1
Ini adalah konfigurator (semacam). Cukup mudah jika Anda terburu-buru membuat prototipe untuk pelanggan. Namun tidak bisa dipelihara dalam jangka panjang. Bagaimana jika konfigurator menghilang? Oleh karena itu untuk hal yang nyata, lesscadalah solusi yang lebih baik.
nalply

5

Berikut adalah cara yang sangat mudah dan efisien: tambahkan CSS Anda kelas Anda dengan warna yang ingin Anda terapkan pada tombol Anda:

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

dan tambahkan gaya ke tombol atau tautan bootstrap Anda:

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

3

Di Twitter Bootstrap bootstrap 3.0.0, tombol Twitter berbentuk datar. Anda dapat menyesuaikannya dari http://getbootstrap.com/customize . Warna tombol, tepi berseri-seri, dll.

Anda juga dapat menemukan kode HTML dan fungsionalitas lainnya http://twitterbootstrap.org/bootstrap-css-buttons .

Tombol bootstrap 2.3.2 adalah gradien tetapi 3.0.0 (rilis baru) datar dan terlihat lebih keren.

dan juga Anda dapat menemukan untuk menyesuaikan seluruh tampilan dan gaya bootstrap dari sumber daya ini: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/


1

Saya tahu ini adalah utas yang lebih lama, tetapi hanya untuk menambahkan perspektif lain. Saya akan menegaskan bahwa menggunakan timpaan benar-benar sedikit berbau kode dan akan segera lepas kendali pada proyek yang lebih besar. Hari ini Anda mengesampingkan Tombol, besok Modals, hari berikutnya Dropdown, dll., Dll.

Saya menyarankan untuk mencoba mengomentari include untuk buttons.lessdan menentukan milik saya sendiri, atau, temukan pustaka Buttons lain yang lebih cocok untuk proyek saya. Steker tak tahu malu: berikut adalah contoh betapa mudahnya mencampur perpustakaan Tombol kami dengan TB: Menggunakan Tombol dengan Bootstrap Twitter . Dalam praktiknya, sekali lagi, Anda mungkin ingin menghapus semua buttons.lesspenyertaan untuk meningkatkan kinerja, tetapi ini menunjukkan bagaimana Anda dapat membuat sesuatu terlihat sedikit kurang "umum". Saya sendiri belum melakukan latihan ini, tetapi saya membayangkan Anda dapat memulai hanya dengan mengomentari baris seperti:

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

Dan kemudian kompilasi ulang menggunakan `lessc menggunakan salah satu modul tombol Anda sendiri. Dengan cara itu Anda mendapatkan inti TB yang diuji dalam pertempuran, tetapi masih dapat menyesuaikan berbagai hal tanpa menggunakan penggantian utama. Sama sekali tidak ada alasan untuk tidak menggunakan hanya bagian dari pustaka seperti Bootstrap. Tentu saja hal yang sama berlaku untuk TB versi Sass


0

Untuk Bootstrap (setidaknya untuk versi 3.1.1) dan LESS, Anda dapat menggunakan ini:

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

Ini didefinisikan dalam bootstrap/less/buttons.less.


0

Anda dapat mengubah warna latar belakang dan menggunakan! 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;
}

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.