Saya baru saja memulai dengan Bootstrap dari Twitter dan bertanya-tanya apa 'praktik terbaik' untuk kustomisasi. Saya ingin mengembangkan sistem yang akan memanfaatkan semua kekuatan template css (Bootstrap atau lainnya), sepenuhnya (dan mudah) dapat dimodifikasi, berkelanjutan (yaitu - ketika versi Bootstrap berikutnya dirilis dari Twitter, saya tidak ' tidak harus memulai kembali.
Misalnya, saya ingin menambahkan gambar latar belakang ke navigasi atas. Sepertinya ada 3 cara untuk melakukannya:
- Ubah kelas .topbar di bootstrap.css. Saya tidak terlalu suka ini karena saya akan memiliki banyak item .topbar dan saya tidak ingin memodifikasinya dengan cara yang sama.
- Buat kelas baru dengan gambar latar belakang saya dan terapkan kedua gaya (baru dan bootstrap ke elemen saya). Hal ini dapat membuat konflik gaya, yang dapat dihindari dengan menghapus kelas .topbar menjadi kelas terpisah dan hanya menggunakan bagian yang tidak diinjak oleh kelas khusus saya. Sekali lagi ini membutuhkan lebih banyak pekerjaan daripada yang menurut saya perlu dan meskipun fleksibel, itu tidak memungkinkan saya untuk dengan mudah memperbarui bootstrap.css ketika Twitter merilis angsuran berikutnya.
- Gunakan variabel dalam .LESS untuk mencapai kustomisasi. Begitu saja ini sepertinya pendekatan yang bagus tetapi belum pernah digunakan. KURANGI saya memiliki kekhawatiran tentang kompilasi css pada klien dan tentang keberlanjutan kode.
Meskipun saya menggunakan Bootstrap, pertanyaan ini dapat digeneralisasikan untuk semua template css.
Terima kasih sebelumnya atas masukannya.
Jawaban:
Hal terbaik untuk dilakukan adalah.
1. garpu twitter-bootstrap dari github dan klon secara lokal.
mereka mengubah dengan sangat cepat perpustakaan / kerangka kerja (mereka menyimpang secara internal. Beberapa lebih suka perpustakaan, saya akan mengatakan bahwa itu kerangka kerja, karena mengubah tata letak Anda dari saat Anda memuatnya di halaman Anda). Nah ... bercabang / kloning akan memungkinkan Anda mengambil versi baru yang akan datang dengan mudah.
2. Jangan mengubah file bootstrap.css
Ini akan mempersulit hidup Anda ketika Anda perlu mengupgrade bootstrap (dan Anda harus melakukannya).
3. Buat file css Anda sendiri dan timpa kapan pun Anda menginginkan barang bootstrap asli
jika mereka menyetel bilah atas dengan, katakanlah,
color: black;
tetapi Anda menginginkannya putih, buat pemilih baru yang sangat spesifik untuk bilah atas ini dan gunakan aturan ini pada bilah atas tertentu. Untuk tabel misalnya, itu akan menjadi<table class="zebra-striped mycustomclass">
. Jika Anda mendeklarasikan file css setelahnyabootstrap.css
, ini akan menimpa apa pun yang Anda inginkan.sumber
Perbarui 2019 - Bootstrap 4
Saya meninjau kembali pertanyaan penyesuaian Bootstrap ini untuk 4.x, yang sekarang menggunakan SASS, bukan LESS. Secara umum, ada 2 cara untuk menyesuaikan Bootstrap ...
1. Penggantian CSS Sederhana
Salah satu cara untuk menyesuaikan cukup menggunakan CSS untuk mengganti CSS Bootstrap. Untuk pemeliharaan, kustomisasi CSS diletakkan di tempat yang terpisah
custom.css
file , sehinggabootstrap.css
tetap tidak diubah. Referensi kecustom.css
berikut setelah yangbootstrap.css
untuk menimpa bekerja ...Cukup tambahkan perubahan apa pun yang diperlukan di CSS khusus. Sebagai contoh...
Sebelum (
bootstrap.css
)Setelah (dengan
custom.css
)Saat membuat kustomisasi, Anda harus mengerti Kekhususan CSS . Mengganti
custom.css
kebutuhan untuk menggunakan selektor yang sespesifikbootstrap.css
.2. Kustomisasi menggunakan SASS
Jika Anda terbiasa dengan SASS (dan Anda harus menggunakan metode ini), Anda dapat menyesuaikan Bootstrap dengan milik Anda sendiri
custom.scss
. Ada bagian di dokumen Bootstrap yang menjelaskan hal ini, namun dokumen tidak menjelaskan cara menggunakan variabel yang ada di filecustom.scss
. Misalnya, mari ubah warna latar belakang tubuh menjadi#eeeeee
, dan ubah / timpa warnaprimary
kontekstual biru ke variabel Bootstrap$purple
...Ini juga berfungsi untuk membuat kelas kustom baru . Sebagai contoh, di sini saya tambahkan
purple
ke warna tema yang menciptakan semua CSS untukbtn-purple
,text-purple
,bg-purple
,alert-purple
, dll ...https://www.codeply.com/go/7XonykXFvP
Dengan SASS Anda harus @import bootstrap setelah kustomisasi untuk membuatnya bekerja! Setelah SASS dikompilasi ke CSS ( ini harus dilakukan menggunakan kompiler SASS node-sass, gulp-sass, npm webpack, dll .. ), CSS yang dihasilkan adalah Bootstrap yang disesuaikan. Jika Anda tidak terbiasa dengan SASS, Anda dapat menyesuaikan Bootstrap menggunakan alat seperti pembuat tema yang saya buat ini.
Demo Bootstrap Kustom (SASS)
Catatan: Tidak seperti 3.x, Bootstrap 4.x tidak menawarkan alat customizer resmi . Namun Anda dapat mengunduh CSS grid saja atau menggunakan alat build khusus 4.x lainnya untuk membuat ulang CSS Bootstrap 4 sesuai keinginan.
Terkait:
Bagaimana cara memperpanjang / memodifikasi (menyesuaikan) Bootstrap 4 dengan SASS
Bagaimana cara mengubah warna primer bootstrap?
Cara membuat set gaya warna baru di Bootstrap 4 dengan sass
Cara Menyesuaikan Bootstrap
sumber
Saya pikir cara yang secara resmi lebih disukai sekarang adalah menggunakan Less, dan secara dinamis menimpa bootstrap.css (menggunakan less.js), atau mengkompilasi ulang bootstrap.css (menggunakan Node atau Less compiler).
Dari dokumen Bootstrap , berikut ini cara mengganti gaya bootstrap.css secara dinamis:
Atau jika Anda lebih suka mengompilasi bootstrap.css baru secara statis dengan gaya kustom Anda (untuk lingkungan produksi):
sumber
Sejak jawaban Pabluez pada bulan Desember, sekarang ada cara yang lebih baik untuk menyesuaikan Bootstrap.
Gunakan: Bootswatch untuk menghasilkan bootstrap.css Anda
Bootswatch membangun Bootstrap Twitter normal dari versi terbaru (apa pun yang Anda instal di direktori bootstrap), tetapi juga mengimpor kustomisasi Anda. Hal ini mempermudah penggunaan Bootstrap versi terbaru, dengan tetap mempertahankan CSS khusus, tanpa harus mengubah apa pun tentang HTML Anda. Anda cukup menggoyangkan file boostrap.css.
sumber
Anda dapat menggunakan template bootstrap dari
http://www.initializr.com/
yang menyertakan semua file bootstrap .less. Anda kemudian dapat mengubah variabel / memperbarui lebih sedikit file yang Anda inginkan dan secara otomatis akan mengkompilasi css. Saat menerapkan kompilasi file less ke css.
sumber
Pilihan terbaik menurut saya adalah mengkompilasi file LESS kustom termasuk bootstrap.less, file variabel.less kustom dan aturan Anda sendiri:
git clone https://github.com/twbs/bootstrap.git
@icon-font-path: "../bootstrap/fonts/";
npm install
grunt watch
Sekarang Anda dapat memodifikasi variabel sesuka Anda, mengganti aturan bootstrap di file style.less kustom Anda, dan jika suatu hari Anda ingin memperbarui bootstrap, Anda dapat mengganti seluruh folder bootstrap!
EDIT: Saya membuat boilerplate Bootstrap menggunakan teknik ini: https://github.com/jide/bootstrap-boilerplate
sumber
Saya baru-baru ini menulis posting tentang bagaimana saya melakukannya di Udacity selama beberapa tahun terakhir. Metode ini berarti kami dapat memperbarui Bootstrap kapan pun kami mau tanpa harus menggabungkan konflik, membuang pekerjaan, dll.
Posting lebih mendalam dengan contoh, tetapi ide dasarnya adalah:
Ini berarti menggunakan KURANG, dan mengkompilasinya ke CSS sebelum mengirimkannya ke klien (sisi klien KURANG jika rewel, dan saya biasanya menghindarinya) tetapi SANGAT baik untuk pemeliharaan / peningkatan kemampuan, dan mendapatkan kompilasi KURANG sangat mudah. . Kode github yang ditautkan memiliki contoh menggunakan grunt, tetapi ada banyak cara untuk mencapai ini - bahkan GUI jika itu yang Anda inginkan.
Dengan menggunakan solusi ini, contoh soal Anda akan terlihat seperti:
Ketika tiba saatnya untuk mengupgrade bootstrap Anda, Anda tinggal menukar salinan bootstrap yang asli dan semuanya akan tetap berfungsi (jika bootstrap membuat perubahan yang merusak, Anda harus memperbarui override Anda, tetapi Anda tetap harus melakukannya)
Posting blog dengan panduan ada di sini .
Contoh kode di github ada di sini .
sumber
Gunakan KURANG dengan Bootstrap ...
Berikut adalah dokumen Bootstrap tentang cara menggunakan LESS
(mereka telah pindah sejak jawaban sebelumnya)
sumber