Bagaimana cara menggunakan bootstrap-theme.css dengan bootstrap 3?

174

Setelah mengunduh paket lengkap bootstrap 3 dari http://getbootstrap.com , saya perhatikan ada file css terpisah untuk tema. Bagaimana cara memanfaatkannya? Tolong jelaskan?

Saya termasuk bootstrap-theme.cssdalam proyek bootstrap saya yang ada, tetapi tidak ada perbedaan dalam output.

html css twitter-bootstrap-3 Yuvaraj P
sumber

Jawaban:

382

Setelah mengunduh Bootstrap 3.x, Anda akan mendapatkan bootstrap.css dan bootstrap-theme.css (belum lagi versi kecil dari file-file ini yang juga ada).

bootstrap.css

bootstrap.csssepenuhnya ditata dan siap digunakan, jika itu keinginan Anda. Ini mungkin agak sederhana tetapi sudah siap dan sudah ada.

Anda tidak perlu menggunakan bootstrap-theme.css jika Anda tidak mau dan semuanya akan baik-baik saja.

bootstrap-theme.css

bootstrap-theme.csshanya apa yang coba disarankan oleh nama file: ini adalah tema untuk bootstrap yang secara kreatif dianggap 'THE bootstrap theme'. Nama file membingungkan beberapa hal karena basis bootstrap.csssudah memiliki gaya yang diterapkan dan saya, untuk satu, akan mempertimbangkan gaya-gaya tersebut sebagai default. Tetapi kesimpulan itu tampaknya tidak benar mengingat hal-hal yang dikatakan di bagian contoh dokumentasi Bootstrap sehubungan dengan bootstrap-theme.cssfile ini :

"Muat tema Bootstrap opsional untuk pengalaman yang ditingkatkan secara visual."

Kutipan di atas ditemukan di sini http://getbootstrap.com/getting-started/#examples pada thumbnail yang menghubungkan ke halaman contoh ini http://getbootstrap.com/examples/theme/ . Idenya adalah bahwa bootstrap-theme.cssadalah THE bootstrap tema DAN itu opsional.

Tema di BootSwatch.com

Tentang tema di BootSwatch.com: Tema-tema ini tidak diimplementasikan seperti bootstrap-theme.css. Tema-tema BootSwatch adalah versi modifikasi dari aslinya bootstrap.css. Jadi, Anda TIDAK boleh menggunakan tema dari BootSwatch DAN bootstrap-theme.cssfile secara bersamaan.

Tema Khusus

Tentang Tema Kustom Anda Sendiri: Anda dapat memilih untuk memodifikasi bootstrap-theme.csssaat membuat tema Anda sendiri. Melakukan hal itu dapat membuatnya lebih mudah untuk membuat perubahan gaya tanpa secara tidak sengaja merusak kebaikan Bootstrap yang ada di dalamnya.

ketangkasan
sumber
68
Ini harus menjadi jawaban yang dipilih.
Patrick Cullen
11
Pemberitahuan tentang Bootswatch.com sangat membantu. Terima kasih.
Daniel Kmak
@Daniel ... tetapi harus di refactored sesuai dengan twbs / arah bootstrap baru untuk memiliki fitur yang stabil dan konsisten untuk klien temanya
Luca G. Soave
Bukankah file bootstrap-theme.css lebih merupakan override, yaitu bootstrap.css membuat Anda sedemikian rupa sehingga Anda dapat menggunakan bootstrap dengan semua gaya yang relevan. Bootstrap-theme.css ada untuk mengganti gaya TANPA mengubah file css dasar. Pentingnya di sini adalah bahwa jika Anda meningkatkan ke bootstrap XX Anda mengganti file css dasar dan Anda tidak perlu khawatir kehilangan semua kustomisasi Anda. Anda mungkin harus mengubah file tema Anda, tapi itu jauh dari masalah. Mungkin apa yang Anda katakan.
Jacques
2
Hal yang paling membingungkan tentang ini adalah bahwa jika Anda menggunakan fitur Kustomisasi di situs bootstrap ( getbootstrap.com/customize ), itu menempatkan kustomisasi Anda di bootstrap.css dan bukan file tema. Halaman itu juga tidak mengandung opsi untuk mengubah apa pun yang terkait dengan Tema (tm). Sejauh yang saya bisa lihat, file tema hanya menambahkan banyak gradien dan bayangan di seluruh dan melakukan sedikit hal lain.
C.Daftar
90

Untuk contoh gaya css lihat: http://getbootstrap.com/examples/theme/

Jika Anda ingin melihat bagaimana contoh terlihat tanpa file bootstrap-theme.css buka alat pengembang browser Anda dan hapus tautan dari <head> contoh dan kemudian Anda dapat membandingkannya.

Saya tahu ini adalah pertanyaan lama tapi diposting kalau-kalau ada yang mencari contoh bagaimana saya.

Memperbarui

bootstrap.css = kerangka kerja css utama (kisi, gaya dasar, dll)

bootstrap-theme.css= gaya yang diperluas (tombol 3D, gradien dll). File ini bersifat opsional dan sama sekali tidak memengaruhi fungsionalitas bootstrap, hanya meningkatkan tampilannya.

Perbarui 2

Dengan rilis v3.2.0 Bootstrap telah menambahkan opsi untuk melihat tema css pada halaman doc. Jika Anda pergi ke salah satu halaman dokumen ( css , komponen , javascript ) Anda akan melihat tautan "Pratinjau tema" di bagian bawah nav sisi yang dapat Anda gunakan untuk menghidupkan dan mematikan tema css.

joshhunt
sumber
Terima kasih telah mengikuti ini karena jawaban Anda paling masuk akal. Saya bertanya-tanya, tahukah Anda, apakah saya hanya akan mengganti konten bootstrap.cssdengan tema dari Bootswatch.com seperti yang dikatakan situs dan saya masih dapat menggunakan bootstrap-theme.cssbahkan dengan tema Bottswatch?
Refracted Paladin
3
bootstrap.css = kerangka css utama (kisi, gaya dasar, dll) bootstrap-theme.css = gaya yang diperluas (tombol 3D dll.) Saya belum pernah menggunakannya tetapi baru saja melihatnya dan Bootswatch sepertinya mengedit file bootstrap.css sesuai dengan kebutuhan di sana sendiri. Jadi untuk menggunakannya, Anda hanya perlu mengunduh file bootstrap.css dari Bootswatch dan menggunakannya. Jangan gunakan bootstrap-theme.css juga karena mungkin akan bertentangan dengan css dari Bootswatch.
joshhunt
Terima kasih kawan, hargai jawabannya! Itulah yang saya perhatikan juga tidak berhasil kembali ke sini. Tanpa modifikasi, Anda tidak dapat menggunakan bootstrap-themeBootswatch. Itu membuat situs saya berantakan.
Refresh Paladin
72

Pertama, bootstrap-theme.csstidak lain adalah setara dengan gaya Bootstrap 2.x di Bootstrap 3. Jika Anda benar-benar ingin menggunakannya, cukup tambahkan saja dengan bootstrap.css(versi yang diperkecil akan bekerja juga).

dan mikrofon
sumber
4
Harap ingatkan bahwa jika Anda menggunakan file css tema bootstrap pihak ke-3, Anda sebaiknya memberi komentar resmi bootstrap-theme.css.
Cheung
163
Kenapa ini adalah jawaban yang diterima. Itu bahkan bukan jawaban. Maaf. Semua ini mengatakan apa yang setara dengan file di Bootstrap 2 dan siapa pun yang tidak terbiasa dengan Bootstrap 2 sekarang harus mencari jawaban lain untuk mengetahui apa yang dilakukan file ini.
Mario Awad
4
Tapi itu semua, apa yang ingin saya ketahui.
uladzimir
9
Setuju dengan @MarioAwad, ini bukan jawaban. Ini juga membingungkan karena saya pikir itu hanya dukungan dari css Bootstrap lama, yang hanya sebagian benar.
Yannis Dran
1
Di BS 3.2, termasuk tema CSS memang mengubah tampilan dan nuansa dengan menambahkan nuansa 3D ke tombol dan hal lainnya. Lihat jawaban oleh joshhunt untuk detailnya.
RajV
31

Bootstrap-theme.css adalah file CSS tambahan, yang opsional untuk Anda gunakan. Ini memberikan efek 3D pada tombol dan beberapa elemen lainnya.

Jowen
sumber
14

Seperti yang dinyatakan oleh orang lain, nama file bootstrap-theme.css sangat membingungkan. Saya akan memilih sesuatu seperti bootstrap-3d.css atau bootstrap-fancy.css yang akan lebih deskriptif tentang apa yang sebenarnya dilakukannya. Apa yang dilihat dunia sebagai "Tema Bootstrap" adalah hal yang dapat Anda peroleh dari BootSwatch yang merupakan binatang yang sama sekali berbeda.

Dengan begitu, efeknya cukup bagus - gradien dan bayangan dan semacamnya. Sayangnya file ini akan mendatangkan malapetaka pada Tema BootSwatch, jadi saya memutuskan untuk menggali apa yang diperlukan untuk membuatnya bermain bagus dengan mereka.

KURANG

Bootstrap-theme.css dihasilkan dari file theme.less di sumber Bootstrap. Elemen yang terpengaruh adalah (pada Bootstrap v3.2.0):

  • Daftar item
  • Tombol
  • Gambar-gambar
  • Dropdown
  • Navbar
  • Lansiran
  • Bilah kemajuan
  • Daftar Grup
  • Panel
  • Sumur

File theme.less tergantung pada:

@import "variables.less";
@import "mixins.less";

Kode menggunakan warna yang didefinisikan dalam variable.less di beberapa tempat, misalnya:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

Inilah mengapa bootstrap-theme.css benar-benar mengacaukan Tema BootSwatch. Berita baiknya adalah bahwa Tema BootSwatch juga dibuat dari file variable.less, jadi Anda bisa membuat bootstrap-theme.css untuk Tema BootSwatch Anda.

Membangun bootstrap-theme.css

Cara yang benar untuk melakukannya adalah memperbarui proses pembuatan Tema, tetapi di sini di sini adalah cara yang cepat dan kotor. Ganti file variabel.less di sumber Bootstrap dengan yang dari Bootswatch Theme Anda dan bangun dan voila Anda memiliki file bootstrap-theme.css untuk Tema Bootswatch Anda.

Membangun Bootstrap sendiri

Membangun Bootstrap mungkin terdengar menakutkan, tetapi sebenarnya sangat sederhana:

  1. Unduh kode sumber Bootstrap
  2. Unduh dan instal NodeJS
  3. Buka prompt perintah dan navigasikan ke folder sumber bootstrap. Ketik "npm install". Ini akan menambahkan folder "node_modules" ke proyek dan mengunduh semua barang Node yang Anda butuhkan.
  4. Instal grunt secara global (opsi -g) dengan mengetikkan "npm install -g grunt-cli"
  5. Ubah nama folder "dist" menjadi "dist-orig" lalu bangun kembali dengan mengetikkan "grunt dist". Sekarang periksa apakah ada folder "dist" baru yang berisi semua yang Anda butuhkan untuk menggunakan build Bootstrap kustom Anda.

Selesai Lihat, itu mudah, bukan?

Orang ini
sumber
2

Saya tahu posting ini agak lama tetapi ...

  Seperti yang ditunjukkan oleh 'kecerdasan'.

Tentang Tema Kustom Anda Sendiri Anda dapat memilih untuk memodifikasi bootstrap-theme.css saat membuat tema sendiri. Melakukan hal itu dapat membuatnya lebih mudah untuk membuat perubahan gaya tanpa secara tidak sengaja merusak kebaikan Bootstrap yang ada di dalamnya.

  Saya melihatnya sebagai Bootstrap telah melihat selama bertahun-tahun bahwa setiap orang menginginkan sesuatu yang sedikit berbeda dari gaya inti. Meskipun Anda dapat memodifikasi bootstrap.css mungkin akan merusak banyak hal dan itu dapat membuat memperbarui ke versi yang lebih baru benar-benar menyakitkan dan menghabiskan waktu. Mengunduh dari situs 'tema' berarti Anda harus menunggu jika pembuatnya memperbarui tema itu, besar jika kadang-kadang, kan?

  Beberapa membuat file 'custom.css' sendiri dan tidak apa-apa, tetapi jika Anda menggunakan 'bootstrap-theme.css' banyak hal sudah dibuat dan ini memungkinkan Anda untuk menggulung tema Anda sendiri dengan lebih cepat 'tanpa' mengganggu inti dari bootstrap .css. Saya tidak menyukai tombol 3D dan gradien sebagian besar waktu, jadi ubahlah menggunakan bootstrap-theme.css. Tambahkan margin atau padding, ubah radius ke tombol Anda, dan seterusnya ...

pengguna1946683
sumber