Menggunakan bootstrap dengan bower

135

Saya mencoba menggunakan bootstrap dengan bower, tetapi karena itu mengkloning seluruh repo, tidak ada CSS dan hal lainnya.

Apakah ini berarti saya perlu menyertakan pembuatan Bootstrap dalam proses pembuatan saya sendiri? Atau jika saya salah, apa alur kerja yang benar?

twitter-bootstrap bower xavier.seignard
sumber
28
Bukan pertanyaan bodoh sama sekali. Ini adalah paket pertama yang saya coba instal dengan bower. Ketidakjelasan dan kekacauan yang diakibatkannya membuat saya mengabaikan alat untuk waktu yang lama.
jhappoldt

Jawaban:

84

Saya akhirnya berakhir menggunakan yang berikut ini: bower install --save http://twitter.github.com/bootstrap/assets/bootstrap.zip

Tampak lebih bersih bagi saya karena tidak mengkloning seluruh repo, itu hanya mengekstrak aset yang diperlukan.

Kelemahannya adalah ia melanggar filosofi bower karena a bower updatetidak akan memperbarui bootstrap.

Tapi saya pikir itu masih lebih bersih daripada menggunakan bower install bootstrapdan kemudian membangun bootstrap di alur kerja Anda.

Kurasa itu masalah pilihan.

Pembaruan: tampaknya mereka sekarang versi folder dist (lihat: https://github.com/twbs/bootstrap/pull/6342 ), jadi gunakan saja bower install bootstrapdan arahkan ke aset di distfolder

xavier.seignard
sumber
2
Hanya diperbarui npmdan bowerdan memiliki "bootstrap": "http://twitter.github.com/bootstrap/assets/bootstrap.zip" dalam component.jsonjuga tampaknya bekerja.
antitoksik
8
Bukankah ini pertama-tama menggagalkan tujuan menggunakan bower?
namuol
5
Ya itu agak payah. Tetapi yang lebih menarik adalah membangun ulang bootstrap dalam proses build Anda sendiri karena mereka tidak melakukan versi build di repo mereka.
xavier.seignard
1
@namuol, tepatnya, saya pikir bower dibuat untuk mereka yang tidak tahu bagaimana membuat struktur dir untuk perpustakaan mana pun, seperti jquery, bootstrap ... tidak masuk akal untuk memberikan file sumber kepada mereka yang tidak tahu, itu lebih membingungkan mereka!
alexserver
Memperbarui npm adalah solusi bagi saya.
Yves Van Broekhoven
78

Ada paket bower bootstrap bawaan yang disebut bootstrap-css. Saya pikir inilah yang Anda (dan saya) harapkan.

bower install bootstrap-css

Terima kasih Nico.

Terry Roe
sumber
@DanielM jika itu menunjukkan cara mendapatkan / menginstal paket itu. Saat ini komentar bukan jawaban.
Popnoodles
bower menginstal bootstrap-css
Nico
1
Itu adalah jawaban yang benar. Ini adalah repo prebuild dengan semua file .min. {Js | css}.
0x126
28

File css dan js berada di dalam paket: bootstrap/docs/assets/

MEMPERBARUI:

karena v3 ada distfolder dalam paket yang berisi semua css, js dan font.

Opsi lain (jika Anda hanya ingin mengambil satu file) mungkin: pulldown . Konfigurasi sangat sederhana dan Anda dapat dengan mudah menambahkan file / url Anda sendiri ke daftar.

Dziad Borowy
sumber
Ini tidak benar setidaknya untuk hari ini untuk Bootstrap 3. Satu-satunya file di bower_components / bootstrap / docs / assets / css / adalah docs.css dan pygments-manni.css. Tak satu pun dari ini adalah file css Bootstrap.
penggiling kopi
4

dengan asumsi Anda telah menginstal npm dan bower diinstal secara global

  1. arahkan ke proyek Anda
  2. bower init (ini akan menghasilkan file bower.json di direktori Anda)
  3. (lalu terus klik ya) ...

  4. untuk mengatur jalur di mana bootstrap akan diinstal:
    buat .bowerrcfile secara manual di sebelah file bower.json dan tambahkan yang berikut ini:

    {"direktori": "publik / komponen"}

  5. bower install bootstrap --save

Catatan: untuk memasang komponen lain:

 bower search {component-name-here}
Mahmoud Zalt
sumber
3

Saya akhirnya menggunakan skrip shell yang seharusnya hanya Anda jalankan sekali saat pertama kali melakukan pembayaran

#!/usr/bin/env bash

mkdir -p webroot/js
mkdir -p webroot/css
mkdir -p webroot/css-min
mkdir -p webroot/img
mkdir -p webroot/font

npm i
bower i

# boostrap
pushd components/bootstrap
npm i
make bootstrap
popd
cp components/bootstrap/bootstrap/css/*.min.css webroot/css-min/
cp components/bootstrap/bootstrap/js/bootstrap.js src/js/deps/
cp components/bootstrap/bootstrap/img/* webroot/img/

# fontawesome
cp components/font-awesome/css/*.min.css webroot/css-min/
cp components/font-awesome/font/* webroot/font/
slf
sumber
1
@lenswipe ya, saya juga, tidak sekarang juga. tiga tahun kemudian hal-hal telah berkembang di mana orang tidak perlu melakukan ini lagi
slf
2

Ingat juga itu dengan perintah seperti:

bower search twitter

Anda mendapatkan hasil dengan daftar paket apa pun yang terkait dengan twitter. Dengan cara ini Anda mengetahui segala sesuatu tentang Twitter dan Bower seperti misalnya mengetahui apakah ada komponen bower baru.

joaquindev
sumber
Terima kasih, itu membantu untuk menampilkan semua yang terkait dengan Twitter tetapi itu menunjukkan banyak opsi untuk dipasang. Jika Anda ingin menginstal bootstrap twitter terbaru, gunakan 'bower install twitter' yang menginstal github.com/twbs/bootstrap dan itu juga menyertakan sumber yang telah dikompilasi di direktori dist.
AWolf
Sempurna, jadi dengan kombinasi keduanya, Anda selalu dapat mengetahui apa yang akan diinstal di komputer Anda.
joaquindev
0

Anda telah menginstal nodeJs di sistem Anda untuk menjalankan npmperintah. Setelah npmberfungsi dengan baik, Anda dapat mengunjungi bower.io. Di sana Anda akan menemukan dokumentasi lengkap tentang topik ini. Anda akan menemukan perintah $ npm install bower. ini akan menginstal bower di mesin Anda. Setelah menginstal bower, Anda dapat menginstal Bootstrap dengan mudah.

Berikut adalah video tutorial tentang itu

asad khan
sumber