Menyesuaikan template CSS Bootstrap

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:

1. 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.
2. 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.
3. 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.

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 setelahnya bootstrap.css, ini akan menimpa apa pun yang Anda inginkan.

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 terpisahcustom.css file , sehingga bootstrap.csstetap tidak diubah. Referensi ke custom.cssberikut setelah yang bootstrap.cssuntuk menimpa bekerja ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Cukup tambahkan perubahan apa pun yang diperlukan di CSS khusus. Sebagai contoh...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Sebelum ( bootstrap.css)

Setelah (dengan custom.css)

Saat membuat kustomisasi, Anda harus mengerti Kekhususan CSS . Mengganti custom.csskebutuhan untuk menggunakan selektor yang sespesifik bootstrap.css.

Perhatikan bahwa tidak perlu menggunakan !importantCSS khusus, kecuali Anda mengganti salah satu kelas Utilitas Bootstrap . Kekhususan CSS selalu berfungsi untuk satu kelas CSS untuk menggantikan yang lain.

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 file custom.scss. Misalnya, mari ubah warna latar belakang tubuh menjadi #eeeeee, dan ubah / timpa warna primarykontekstual biru ke variabel Bootstrap$purple ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Ini juga berfungsi untuk membuat kelas kustom baru . Sebagai contoh, di sini saya tambahkan purpleke warna tema yang menciptakan semua CSS untuk btn-purple, text-purple, bg-purple, alert-purple, dll ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

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

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:

Unduh Less.js terbaru dan sertakan jalur ke sana (dan Bootstrap) di file <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Untuk mengkompilasi ulang file .less, simpan saja dan muat ulang halaman Anda. Less.js mengkompilasinya dan menyimpannya di penyimpanan lokal.

Atau jika Anda lebih suka mengompilasi bootstrap.css baru secara statis dengan gaya kustom Anda (untuk lingkungan produksi):

Instal alat baris perintah LESS melalui Node dan jalankan perintah berikut:

$ lessc ./less/bootstrap.less > bootstrap.css

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.

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.

Pilihan terbaik menurut saya adalah mengkompilasi file LESS kustom termasuk bootstrap.less, file variabel.less kustom dan aturan Anda sendiri:

1. Klon bootstrap di folder root Anda: git clone https://github.com/twbs/bootstrap.git
2. Ubah namanya menjadi "bootstrap"
3. Buat file package.json: https://gist.github.com/jide/8440609
4. Buat Gruntfile.js: https://gist.github.com/jide/8440502
5. Buat folder "lebih sedikit"
6. Salin bootstrap / kurang / variabel.less ke folder "kurang"
7. Ubah jalur font: @icon-font-path: "../bootstrap/fonts/";
8. Buat file style.less kustom di folder "less" yang mengimpor bootstrap.less dan file variable.less kustom Anda: https://gist.github.com/jide/8440619
9. Lari npm install
10. Lari 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

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:

• Simpan salinan asli dari bootstrap dan timpa secara eksternal.
• Ubah satu file (bootstrap's variable.less) untuk memasukkan variabel Anda sendiri.
• Buat file situs Anda @include bootstrap.less dan kemudian timpa.

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:

• Ubah warna bilah navigasi dengan @ navbar-inverse-bg di variable.less Anda (bukan bootstrap)
• Tambahkan gaya bilah navigasi Anda sendiri ke bootstrap_overrides.less Anda, timpa apa pun yang Anda perlukan saat Anda pergi.
• Kebahagiaan.

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 .

Gunakan KURANG dengan Bootstrap ...

Berikut adalah dokumen Bootstrap tentang cara menggunakan LESS

(mereka telah pindah sejak jawaban sebelumnya)