Bagaimana cara mengubah warna latar belakang bilah navigasi Twitter Bootstrap 2.0.2? Bagaimana cara mengubah warna semua elemen bilah navigasi untuk mencerminkan warna latar belakang?
colors
twitter-bootstrap
navbar
Gattoo
sumber
sumber
Jawaban:
Anda dapat menimpa warna bootstrap, termasuk
.navbar-inner
kelasnya, dengan menargetkannya di stylesheet Anda sendiri daripada mengubah stylesheet bootstrap.css, seperti:Anda hanya perlu memodifikasi semua gaya itu dengan gaya Anda sendiri dan semuanya akan diambil, seperti ini misalnya, di mana saya menghilangkan semua efek gradien dan hanya menetapkan warna latar belakang hitam pekat:
Anda dapat memanfaatkan alat-alat seperti Editor Gradien Colorzilla dan membuat warna gradien Anda sendiri untuk semua browser dan mengganti warna asli dengan warna Anda sendiri.
Dan seperti yang saya sebutkan di komentar, saya tidak akan merekomendasikan Anda memodifikasi stylesheet bootstrap.css secara langsung karena semua perubahan Anda akan hilang setelah stylesheet diperbarui (versi saat ini adalah v2.0.2 ) jadi sebaiknya Anda menyertakan semua perubahan Anda di dalam lembar gaya Anda sendiri, bersama-sama dengan lembar gaya bootstrap.css. Namun ingatlah untuk menimpa semua properti yang sesuai agar memiliki konsistensi di seluruh browser.
sumber
background-image: none;
enam kali?Sumber yang bagus untuk melihat bagaimana membuat tema bootstrap adalah: bootswatch.com . Ini memiliki contoh yang bagus dan menunjukkan kode juga. Singkatnya, mereka menggunakan lessc untuk mengkompilasi ulang bootstrap.css ke color-theme.css baru Anda. Hal yang menyenangkan dari pendekatan mereka adalah dibangun di atas bootstrap, jadi ketika bootstrap diperbarui, Anda cukup mengkompilasi ulang.
Tautan tentang menggunakan lessc dan bootstrap:
sumber
Jika Anda tidak punya waktu untuk belajar "lebih sedikit" atau melakukannya dengan benar, berikut adalah cara jorok ...
Tambahkan ini di atas di mana Anda merender HTML bilah navigasi bootstrap - perbarui warna sesuai kebutuhan ..
sumber
Anda dapat mengunduh versi khusus dari bootstrap dan menyetel @navbarBackground ke warna yang Anda inginkan.
http://twitter.github.com/bootstrap/customize.html
sumber
Saya menggunakan Bootstrap versi 3.2.0 dan sepertinya .navbar-inner sudah tidak ada lagi.
Solusi di sini yang menyarankan pengesampingan .navbar-inner tidak berhasil untuk saya - warnanya tetap sama.
Warnanya hanya berubah ketika saya mengganti .navbar seperti yang ditunjukkan di bawah ini:
sumber
Cara terbaik saat ini untuk melakukan hal yang sama adalah dengan menginstal compiler baris perintah LESS menggunakan
Setelah Anda melakukan ini, buka folder less di direktori dan kemudian edit file variable.less dan Anda dapat mengubah banyak variabel sesuai dengan yang Anda butuhkan termasuk warna bilah navigasi
Setelah Anda selesai melakukannya, buka direktori bootstrap Anda dan jalankan perintah make.
sumber
Jika Anda menggunakan LESS, Anda dapat menggunakan Mixins untuk kode yang lebih sedikit. Di sini saya akan menambahkan gradien, batas, dan radius batas:
* Jika Anda menggunakan permata rails, twitter-bootstrap-rails, saya melakukan ini langsung di file bootstrap_and_overrides.css.less *
sumber
itulah yang saya lakukan
ini bekerja dengan baik untuk semua navigator Anda dapat melihat demo di sini http://caverne.fr di atas
sumber
Pada baris bootstrap.css 4784 kita melihat:
Anda perlu menghapus semua deklarasi properti 'background-image' untuk mendapatkan efek yang diinginkan.
sumber
Bukankah pisau cukur occam akan mengatakan untuk melakukan ini saja sampai Anda membutuhkan sesuatu yang lebih kompleks? Ini sedikit hack, tetapi mungkin sesuai dengan kebutuhan seseorang yang menginginkan perbaikan cepat.
sumber
Jika Anda menggunakan Versi LESS atau SASS dari Bootstrap. Cara paling efisien adalah dengan mengubah nama variabel, di file LESS atau SASS.
Sejauh ini cara termudah dan paling efisien untuk mengubah Navbar Bootstraps. Anda tidak perlu menulis timpaan, dan kode tetap bersih.
sumber
Anda dapat menyesuaikan versi Anda sendiri di situs web resmi Bootstrap .
sumber
Saya sebenarnya hanya menimpa apa pun yang ingin saya ubah di site.css, Anda harus memuat site.css setelah bootstrap sehingga akan menimpa kelas. Apa yang saya lakukan sekarang hanyalah membuat kelas saya sendiri dengan tema bootstrap kecil saya sendiri. Hal-hal kecil seperti ini
Saya juga mengubah suka dari kesalahan validasi dengan cara yang sama.
sumber