Menyesuaikan template CSS Bootstrap

109

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.

Anne
sumber
Hai @Pabluez, ya Anda menjawab, lihat di bawah. Maaf atas keterlambatan tanggapan - Saya sibuk liburan.
Anne
Saya yakin artikel ini akan membantu Anda prideparrot.com/blog/archive/2014/6/…
VJAI
1
Utas ini informatif stackoverflow.com/questions/10451317/…
Zim

Jawaban:

127

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.

Pabluez
sumber
15
+1 Jawaban yang bagus. Hanya untuk menambahkan poin ke-3: Anda dapat membuat kelas baru untuk diterapkan selain kelas lama, atau hanya menimpa / menambahkan properti yang ingin Anda ubah.
Wex
itulah yang saya maksud dengan mycustomcss ... saya akan mengeditnya ke mycustomclass, selain zebra-striped (bootstrap-class)
Pabluez
1
adakah yang bisa Anda tambahkan untuk ini tentang bagaimana melakukan ini dengan cara yang "baru" kurang / sass? yaitu: bagaimana Anda dapat membuat subclass gaya "bootstrap"? mewarisi semua + penambahan. saya belum memikirkan apakah ini campuran, dan memperpanjang, atau ?? maaf bodoh.
Alex Gray
1
+ 1Terima kasih atas jawabannya. Saya telah melakukan ini, dan berhasil tetapi tidak terasa seperti jawaban yang paling berkelanjutan. Jika saya mendapatkan file bootstrap.css yang diperbarui, saya mungkin harus mengubah kelas timpaan khusus untuk beradaptasi dengan perubahan apa pun. Seperti @alexgray, saya ingin memahami cara melakukan ini dengan lebih sedikit atau mixin. Atau, cara yang lebih baik untuk membuat kotak pasir tanpa menerapkan bootstrap sehingga saya dapat menggunakan gaya saya tanpa harus mengganti bootstrap. Jika ada yang memiliki tutorial bagus di luar sana, sebarkan
Anne
2
Apa gunanya mem-forking Bootstrap jika Anda hanya akan menambahkan perubahan ke file CSS Anda sendiri?
32

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)

masukkan deskripsi gambar di sini

Setelah (dengan custom.css)

masukkan deskripsi gambar di sini

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

Zim
sumber
Noice - bagaimana dengan mengatur warna kustom untuk background, border, font untuk tombol custom baru?
menggali
Apakah normal jika file CSS yang dihasilkan berukuran sekitar 160 Kb (130Kb terkompresi)? Apakah mungkin hanya untuk mengganti warna primer, misalnya?
Evgeny
@Zim Saya menghargai pembuat tema yang Anda buat!
Kareem Jeiroudi
Catatan: Ingatlah untuk menggunakan Autoprefixer setelah kompilasi
kanlukasz
20

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
Simetris
sumber
ini adalah cara yang disukai :)
Srivathsa
10

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.

mdashx
sumber
dapatkah Anda menjelaskan cara terbaik untuk menggunakan ini. Saya mengunduh bootswatch dan membangun css saya menggunakan grunt swatch: theme tetapi saya masih bingung tentang file mana yang harus saya taruh di mana. Saya mencoba untuk mendapatkan situasi di mana saya dapat mengunduh versi terbaru dari bootstrap atau tema bootswatch dan menggunakannya, tetapi masih menggunakan variabel yang saya sesuaikan. (Saya bekerja di VisualStudio2013 Pro jika itu membuat perbedaan). Saya tidak ingin menggunakan javascript untuk melakukan kompilasi. Untuk saat ini, saya setuju dengan menjalankan perintah build. Nanti, saya akan mencoba dan menemukan metode yang baik untuk mengotomatiskan. Terima kasih Mark
mark1234
5

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.

Tom
sumber
3

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

Jide
sumber
3

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 .

betaorbust
sumber
0

Gunakan KURANG dengan Bootstrap ...

Berikut adalah dokumen Bootstrap tentang cara menggunakan LESS

(mereka telah pindah sejak jawaban sebelumnya)

Dua belas 24
sumber
3
Jika dokumen telah dipindahkan, edit jawaban lain untuk mencerminkan bahwa
DeadChex
Ironisnya, tautan dalam jawaban ini sudah mati.
zacharydl