Twitter Bootstrap vs jQuery UI? [Tutup]

214

Saya telah menggunakan jQuery UI untuk beberapa peningkatan halaman dasar. Tombol dan input kotak dialog gaya dan modal. Sekarang saya telah menemukan Bootstrap dan terlihat cukup bagus.

Adakah yang punya pengalaman untuk menggunakan jQuery UI ke Bootstrap? Ini yang ingin saya lakukan tetapi sebelum melakukan ini saya ingin mengetahui masalah apa yang bisa saya hadapi.

javascript jquery jquery-ui twitter-bootstrap Jessica
sumber
4
Salah satu solusi yang mungkin belum tersedia saat ditanya ... Addy Osmani dan timnya telah berupaya menggabungkan keduanya - jika Anda terjebak di antara keduanya, periksa dan mungkin Anda bisa mendapatkan semua yang Anda inginkan! - addyosmani.github.io/jquery-ui-bootstrap
streetlight
1
Bagaimana cara memperbarui (2014!) Jawaban? Adakah yang bisa memulai hadiah di sini?
Peter Krauss
Dari situs web Bootstrap - "Bootstrap hanya mendukung satu jendela modal pada satu waktu. Modem bersarang tidak didukung karena kami yakin itu adalah pengalaman pengguna yang buruk." -- Menyedihkan.
George Beier

Jawaban:

133

Saya punya beberapa proyek.

Perbedaan terbesar menurut saya

  • jQuery UI aman untuk mundur, berfungsi dengan benar dan terlihat bagus di peramban lama, di mana Bootstrap didasarkan pada CSS3 yang pada dasarnya berarti BESAR di peramban baru, tidak terlalu bagus di peramban lama

  • Perbarui frekuensi: Bootstrap mendapatkan pembaruan besar yang hebat dengan fitur-fitur baru yang luar biasa, tetapi sayangnya mereka mungkin melanggar kode sebelumnya, jadi Anda tidak bisa hanya menginstal bootstrap dan memperbarui ketika ada rilis besar baru, pada dasarnya memerlukan banyak pengkodean baru

  • jQuery UI didasarkan pada struktur html yang baik dengan transformasi dari JavaScript, sementara Bootstrap didasarkan pada struktur sebaris secara visual dan dapat disesuaikan. (memanggil widget di JQUERY UI, mendefinisikannya di Bootstrap)

Jadi apa yang harus dipilih?

Itu selalu tergantung pada jenis proyek yang sedang Anda kerjakan. Apakah widget keren dan cepat terlihat lebih baik, atau apakah pengguna Anda sering menggunakan browser lama?

Saya selalu menggunakan keduanya, jadi saya bisa menggunakan yang terbaik dari kedua dunia.

Berikut adalah tautan ke kedua kerangka kerja, jika Anda memutuskan untuk menggunakannya.

  1. jQuery UI
  2. Bootstrap
Marco Johannesen
sumber
2
-Terima kasih telah meluangkan waktu untuk menjawab. Kebutuhan saya adalah untuk sesuatu yang bekerja pada IE9 atau browser versi yang lebih baru yang memiliki dukungan CSS3 yang cukup bagus. Bootstrap mulai terlihat bagus untuk saya. Satu pertanyaan. Saya menggunakan ASP.MVC. Saya perhatikan ada sesuatu yang kurang dibutuhkan. Akankah Boostrap bekerja dengan platform Microsoft ASP MVC? Di manakah "kurang" cocok?
Jessica
Anda dapat mengkompilasi lebih sedikit file ke file .css. Membangun bootstrap (menggunakan make), akan membuat file CSS yang siap pakai. Dengan cara itu Anda tidak perlu menggunakan lebih sedikit.
mikaelb
3
KURANG adalah kerangka css. Ini sama sekali tidak diperlukan untuk menggunakan Boostrap (mereka memiliki versi CSS / JS reguler), tetapi dengan KURANG Anda dapat dengan mudah membuat variabel dalam CSS (mengubah warna dll), membuatnya tergantung, memiliki fungsi. Lihat di sini: lesscss.org dan ada versi BETA untuk kompiler di .NET lihat: dotlesscss.org
Marco Johannesen
20
Bagaimana Anda menggunakan "yang terbaik dari kedua dunia"? Yang paling dekat yang saya dapatkan adalah dengan menggunakan jQueryUI Bootstrap (pada dasarnya tema jQueryUI) tetapi masih dirancang untuk Bootstrap 1.4, bukan 2.0, dan ada bentrokan ketika mencoba menggunakan JS untuk tombol, dll.
Adam Lynch
3
@ PhoenixX_2 usahakan buruk! Contoh: di bootstrap Anda menulis semua kelas pada elemen tombol (mis. button button-primary button-small, Di mana di jQueryUI Anda menetapkan elemen menjadi tombol yaitu hanya menambahkan "btn" dan kemudian melalui JS Anda membuatnya menjadi tombol $(".btn").button(). Ini berarti bahwa di Bootstrap Anda mendefinisikannya dalam HTML, dan dalam jQueryUI Anda mendefinisikannya dalam JS. Negatif pada Bootstrap adalah Anda perlu mengedit HTML Anda jika Anda memperbarui / mengubah sesuatu (mis. versi Bootstrap) di mana jQueryUI Anda hanya perlu mengubah JS Anda yang seringkali lebih mudah. Ada yang positif dan negatif dengan keduanya! :)
Marco Johannesen
73

Setelah menggunakan keduanya, Bootstrap Twitter adalah perangkat teknologi yang unggul. Berikut ini beberapa perbedaan,

  • Widget : UI jQuery menang di sini. Widget tanggal yang disediakannya sangat berguna, dan Twitter Bootstrap tidak menyediakan hal semacam itu.
  • Perancah : Bootstrap menang di sini. Kisi-kisi Twitter yang lancar dan tetap adalah yang terbaik. UI jQuery bahkan tidak memberikan arahan ini membiarkan tata letak halaman hingga ke pengguna akhir.
  • Profesional di luar kotak : Bootstrap menggunakan CSS3 lebih unggul, jQuery UI terlihat ketinggalan zaman sebagai perbandingan.
  • Ikon : Aku akan mengikat yang ini. Bootstrap memiliki ikon yang lebih bagus daripada jQuery UI , tapi saya tidak suka istilahnya sedikit pun, Glyphicons Halflings biasanya tidak tersedia secara gratis, tetapi pengaturan antara Bootstrap dan pembuat Glyphicons telah memungkinkan ini tanpa biaya bagi Anda sebagai pengembang. Sebagai ucapan terima kasih, kami meminta Anda untuk menyertakan tautan opsional kembali ke Glyphicons bila memungkinkan.
  • Gambar & Gambar Kecil : pergi ke Bootstrap , UI jQuery bahkan tidak membantu di sini.

Catatan lainnya,

  • Penting untuk memahami bagaimana kedua teknologi ini bersaing di bidang juga. Ada banyak tumpang tindih, tetapi jika Anda ingin perancah sederhana dan ciptaan tetap / cairan Bootstrap bukan teknologi lain, itu teknologi terbaik. Jika Anda menginginkan satu widget, UI jQuery mungkin bahkan tidak masuk dalam tiga besar. Hari ini, jQuery UI terutama hanya mainan untuk konsistensi dan bukti konsep untuk pembuatan widget sisi klien menggunakan kerangka kerja terpadu.
Evan Carroll
sumber
34

Anda dapat menggunakan keduanya dengan masalah yang relatif sedikit. Twitter Bootstrap menggunakan jQuery 1.7.1 (saat tulisan ini dibuat), dan saya tidak dapat memikirkan alasan mengapa Anda tidak dapat mengintegrasikan komponen UI Jquery tambahan ke templat HTML Anda.

Saya telah menggunakan kombinasi HTML5 Boilerplate & Twitter Bootstrap yang dibuat di Initializr.com. Ini menggabungkan dua templat starter yang mengagumkan menjadi satu proyek starter yang hebat. Lihat detailnya di http://html5boilerplate.com/ dan http://www.initializr.com/ Atau untuk memulai segera, buka http://www.initializr.com/ , klik "Bootstrap 2" tombol, dan klik "Unduh". Ini akan memberi Anda semua js dan css yang Anda butuhkan untuk memulai.

Dan jangan takut dengan HTML5 dan CSS3. Initializr dan HTML5 Boilerplate termasuk polyfill dan kode khusus IE yang akan memungkinkan semua fitur untuk bekerja di IE 6, 7 8, dan 9.

Penggunaan KURANG dalam Bootstrap Twitter juga opsional. Mereka menggunakan KURANG untuk mengkompilasi semua CSS yang digunakan oleh Bootstrap, tetapi jika Anda hanya ingin mengganti atau menambahkan gaya Anda sendiri, mereka menyediakan file css kosong untuk tujuan itu.

Ada juga file js kosong (script.js) untuk Anda tambahkan kode khusus. Di sinilah Anda akan menambahkan penangan atau penyeleksi Anda untuk komponen jQueryUI tambahan.

eterps
sumber
Jawaban yang bagus Pertanyaan cepat yang sulit, apa yang benar-benar ditawarkan jquery ui selain tidak termasuk dalam bootstrap twitter dan pluginnya?
MindWire
5
Maaf, baru saja melihat ini. Sejauh widget js, jQuery UI memiliki datepicker dan slider, yang tidak termasuk dalam Bootstrap. Juga jqUI termasuk interaksi dan efek, seperti drag-and-drop, show / hide animations, toggling kelas, dan beberapa lainnya. Menggabungkan interaksi jqUI dengan komponen tata letak Bootstrap bisa menjadi kombinasi yang sangat kuat.
eterps
6
Satu masalah yang harus diperhatikan; kedua proyek mendefinisikan $ .fn.button dengan cara yang tidak kompatibel.
Levi
27

Kami telah menggunakan keduanya dan kami menyukai Bootstrap karena kesederhanaannya dan kecepatan pengembangan dan peningkatannya. Masalah dengan jQuery UI adalah ia bergerak dengan kecepatan siput. Butuh bertahun-tahun untuk meluncurkan fitur umum seperti Menubar, Tree control, dan DataGrid yang masih dalam tahap perencanaan / pengembangan selama-lamanya. Kami menunggu menunggu menunggu dan akhirnya menyerah dan menggunakan perpustakaan lain seperti ExtJS untuk produk kami http://dblite.com .

Bootstrap telah hadir dengan serangkaian fitur yang cukup komprehensif dalam waktu yang sangat singkat dan saya yakin ini akan melampaui UI jQuery segera.

Jadi saya tidak melihat gunanya menggunakan sesuatu yang pada akhirnya akan usang ...

Rajiv
sumber
43
Semuanya pada akhirnya akan ketinggalan jaman. Tidak ada gunanya melakukan apa pun.
tilgovi
6
Benar, kita hanya perlu memilih yang menurut kami akan bertahan lebih lama.
Rajiv
8
Nah, Anda hanya perlu memilih yang akan menghasilkan uang dari klien Anda. Setelah Anda membuatnya berfungsi, itu harus terus bekerja untuk sementara waktu, bahkan jika itu keluar dari gaya, jadi satu-satunya masalah nyata adalah uang.
Adam