Cara menggunakan Bootstrap 4 di ASP.NET Core

112

Saya ingin memperbarui Bootstrap di ASP.NET Core dengan NuGet. Saya menggunakan ini:

Install-Package bootstrap -Version 4.0.0

Itu memang menambahkan dependensi tetapi bagaimana cara menambahkannya ke proyek saya sekarang? Apa jalur untuk dependensi NuGet lokal?

Dependensi NuGet yang diinstal

.net asp.net-core nuget bootstrap-4 asp.net-core-2.0 pengembang
sumber

3

BS4 seharusnya tidak memiliki dukungan Bower (sumber: getbootstrap.com/docs/4.0/migration/#breaking )

Klooven

Ganti [email protected] dengan [email protected]: stackoverflow.com/questions/47985337/…

mrapi

1

Saat ini ini harus menjadi jawaban yang diterima, yang paling mudah menggunakan Libman: stackoverflow.com/a/53012140/578552

rfcdejong

Versi 4.4.1 sekarang kompatibel dengan NUGET.

Diego Venâncio

223

Seperti yang telah disebutkan orang lain, manajer paket Bower , yang biasanya digunakan untuk dependensi seperti ini dalam aplikasi yang tidak bergantung pada skrip sisi klien yang berat, sedang keluar dan secara aktif merekomendasikan untuk pindah ke solusi lain:

..psst! Sementara Bower dipertahankan, kami merekomendasikan benang dan webpack untuk proyek front-end baru!

Jadi meskipun Anda masih dapat menggunakannya sekarang, Bootstrap juga telah mengumumkan untuk menghentikan dukungannya . Akibatnya, template ASP.NET Core bawaan perlahan-lahan diedit untuk menjauh darinya juga.

Sayangnya, tidak ada jalan yang jelas ke depan. Hal ini sebagian besar disebabkan oleh fakta bahwa aplikasi web terus bergerak lebih jauh ke sisi klien, membutuhkan sistem build sisi klien yang kompleks dan banyak ketergantungan. Jadi jika Anda membangun sesuatu seperti itu, Anda mungkin sudah tahu cara menyelesaikannya, dan Anda dapat memperluas proses pembuatan yang ada untuk menyertakan Bootstrap dan jQuery di sana.

Namun masih banyak aplikasi web di luar sana yang tidak terlalu berat di sisi klien, di mana aplikasi tersebut masih berjalan terutama di server dan sebagai hasilnya server menyajikan tampilan statis. Bower sebelumnya mengisi ini dengan membuatnya mudah untuk hanya mempublikasikan dependensi sisi klien tanpa banyak proses.

Di dunia .NET kami juga memiliki NuGet dan dengan versi ASP.NET sebelumnya, kami dapat menggunakan NuGet juga untuk menambahkan dependensi ke beberapa dependensi sisi klien karena NuGet hanya akan menempatkan konten ke dalam proyek kami dengan benar. Sayangnya, dengan .csprojformat baru dan NuGet baru, paket yang diinstal berada di luar proyek kami, jadi kami tidak bisa begitu saja mereferensikannya.

Ini memberi kita beberapa opsi bagaimana menambahkan dependensi kita:

Instalasi satu kali

Inilah yang sedang dilakukan oleh template ASP.NET Core, yang bukan aplikasi halaman tunggal. Saat Anda menggunakannya untuk membuat aplikasi baru, wwwrootfolder tersebut hanya berisi folder libyang berisi dependensi:

Folder wwwroot berisi folder lib dengan dependensi statis

Jika Anda melihat lebih dekat pada file saat ini, Anda dapat melihat bahwa mereka awalnya ditempatkan di sana dengan Bower untuk membuat template, tetapi kemungkinan akan segera berubah. Ide dasarnya adalah bahwa file tersebut disalin sekali ke wwwrootfolder sehingga Anda dapat bergantung padanya.

Untuk melakukan ini, kita cukup mengikuti pengenalan Bootstrap dan mengunduh file yang dikompilasi secara langsung. Seperti yang disebutkan di situs unduhan, ini tidak termasuk jQuery , jadi kita perlu mengunduhnya secara terpisah juga; itu memang berisi Popper.js meskipun jika kita memilih untuk menggunakan bootstrap.bundlefile nanti — yang akan kita lakukan. Untuk jQuery, kita cukup mendapatkan satu file "terkompresi, produksi" dari situs download (klik kanan link tersebut dan pilih "Save link as ..." dari menu).

Ini menyisakan kami dengan beberapa file yang hanya akan diekstrak dan disalin ke dalam wwwrootfolder. Kami juga dapat membuat libfolder untuk memperjelas bahwa ini adalah dependensi eksternal:

Folder wwwroot berisi folder lib dengan dependensi yang kami instal

Hanya itu yang kami butuhkan, jadi sekarang kami hanya perlu menyesuaikan _Layout.cshtmlfile kami untuk menyertakan dependensi tersebut. Untuk itu, kami menambahkan blok berikut ke <head>:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

Dan blok berikut di bagian paling akhir dari <body>:

<environment include="Development">
    <script src="~/lib/js/jquery-3.3.1.js"></script>
    <script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/js/jquery-3.3.1.min.js"></script>
    <script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

Anda juga dapat menyertakan versi yang diperkecil dan melewati <environment>penolong tag di sini untuk membuatnya sedikit lebih sederhana. Tetapi hanya itu yang perlu Anda lakukan untuk membuat Anda tetap memulai.

Ketergantungan dari NPM

Cara yang lebih modern, juga jika Anda ingin terus memperbarui dependensi Anda, adalah dengan mendapatkan dependensi dari repositori paket NPM. Anda dapat menggunakan NPM atau Benang untuk ini; dalam contoh saya, saya akan menggunakan NPM.

Untuk memulai, kita perlu membuat package.jsonfile untuk proyek kita, jadi kita bisa menentukan dependensi kita. Untuk melakukan ini, kita cukup melakukannya dari dialog "Tambahkan Item Baru":

Tambahkan Item Baru: npm File konfigurasi

Setelah kami memilikinya, kami perlu mengeditnya untuk memasukkan dependensi kami. Seharusnya terlihat seperti ini:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Dengan menyimpan, Visual Studio sudah akan menjalankan NPM untuk menginstal dependensi untuk kita. Mereka akan dipasang ke dalam node_modulesfolder. Jadi yang tersisa untuk dilakukan adalah memasukkan file dari sana ke wwwrootfolder kita . Ada beberapa opsi untuk melakukannya:

`bundleconfig.json` untuk bundling dan minifikasi

Kita dapat menggunakan salah satu dari berbagai cara untuk menggunakan a bundleconfig.jsonuntuk bundling dan minifikasi, seperti yang dijelaskan dalam dokumentasi . Cara yang sangat mudah adalah dengan menggunakan paket BuildBundlerMinifier NuGet yang secara otomatis menyiapkan tugas build untuk ini.

Setelah menginstal paket itu, kita perlu membuat bundleconfig.jsondi root proyek dengan konten berikut:

[
  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "minify": { "enabled": false }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
    "minify": { "enabled": false }
  }
]

Ini pada dasarnya mengkonfigurasi file mana yang akan digabungkan menjadi apa. Dan saat kami membangun, kami dapat melihat bahwa filevendor.min.css dan vendor.js.cssdibuat dengan benar. Jadi yang perlu kita lakukan adalah menyesuaikan _Layouts.htmllagi untuk memasukkan file-file itu:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

Menggunakan pengelola tugas seperti Gulp

Jika kita ingin beralih sedikit ke pengembangan sisi klien, kita juga bisa mulai menggunakan alat yang akan kita gunakan di sana. Misalnya Webpack yang merupakan alat build yang sangat umum digunakan untuk segala hal. Tapi kita juga bisa mulai dengan pengelola tugas yang lebih sederhana seperti Gulp dan melakukan sendiri beberapa langkah yang diperlukan.

Untuk itu, kami menambahkan file gulpfile.js ke root proyek kami, dengan konten berikut:

const gulp = require('gulp');
const concat = require('gulp-concat');

const vendorStyles = [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
];

gulp.task('build-vendor-css', () => {
    return gulp.src(vendorStyles)
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));

gulp.task('default', gulp.series('build-vendor'));

Sekarang, kita juga perlu menyesuaikan package.jsonagar ketergantungan kita pada gulpdangulp-concat :

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "jquery": "3.3.1",
    "popper.js": "1.12.9"
  }
}

Akhirnya, kami mengedit file .csproj untuk menambahkan tugas berikut yang memastikan bahwa tugas Gulp kami berjalan saat kami membangun proyek:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Sekarang, saat kami membangun, defaulttugas Gulp berjalan, yang menjalankan build-vendortugas, yang kemudian membangun kami vendor.min.cssdanvendor.min.js seperti yang kami lakukan sebelumnya. Jadi setelah menyesuaikan_Layout.cshtml seperti di atas, kita bisa menggunakan jQuery dan Bootstrap.

Sedangkan pengaturan awal Gulp sedikit lebih rumit daripada bundleconfig.json atas, kita sekarang telah memasuki dunia Node dan dapat mulai menggunakan semua alat keren lainnya di sana. Jadi mungkin ada baiknya untuk memulai dengan ini.

Kesimpulan

Meskipun ini tiba-tiba menjadi jauh lebih rumit daripada hanya menggunakan Bower, kami juga mendapatkan banyak kendali dengan opsi baru tersebut. Misalnya, sekarang kita dapat memutuskan file apa yang sebenarnya disertakan dalam wwwrootfolder dan bagaimana tampilannya. Dan kita juga bisa menggunakan ini untuk membuat langkah pertama ke dunia pengembangan sisi klien dengan Node yang setidaknya akan membantu sedikit dengan kurva pembelajaran.

menyodok
sumber

1

Saat menggunakan metode npm, saya mendapatkan kembali kesalahan seperti "SyntaxError Tidak Tertangkap: Ekspor token tidak terduga". Untuk memperbaiki ini saya beralih ke file umd popper.js "node_modules / popper.js / dist / umd / popper.min.js". Kalau tidak, salah satu jawaban terbaik yang pernah saya lihat di tumpukan, terima kasih.

James Blake

2

@user Kedengarannya Anda menggunakan Node versi yang sangat lama. Anda dapat melihat versi dengan menjalankan node -v, dan mendapatkan versi saat ini di sini di nodejs.org

poke

62

LOL. Saya harus tertawa atau saya akan menangis. Tujuh belas tahun pengembangan .Net menggunakan dukungan perkakas Visual Studio, dan telah sampai pada ini? Secara pribadi, saya gagal untuk melihat bagaimana kemajuan ini. Jika perlu kerja sebanyak ini hanya untuk menambahkan gaya Bootstrap ke proyek web, maka ada sesuatu yang salah secara drastis.

camainc

11

@camainc Jika ada, maka salahkan itu pada pengembangan ekosistem JavaScript. Ini benar-benar tidak terkait dengan .NET atau Visual Studio sama sekali. Solusi sederhana masih mengunduh file secara manual dan kemudian menambahkannya ke root web Anda. Begitulah cara kerjanya selama bertahun-tahun sebelumnya juga. - Dan untuk apa nilainya, Microsoft sedang mengerjakan perkakas VS baru untuk membuat proses ini lebih sederhana (dan dapat diperbarui).

aduk

3

@ ozzy432836, saya tahu ini bukan masalah bootstrap, dan saya tidak pernah mengatakannya. Ini adalah masalah pengembangan umum dengan semua orang tampaknya mengejar kerangka kerja baru berikutnya. Saya telah melihat banyak perubahan dalam karir saya, tetapi tidak seperti yang terjadi dalam beberapa tahun terakhir seputar Javascript. Sungguh gila menyaksikan komunitas pengembangan mengaduk satu demi satu kerangka kerja baru. Mengenai apakah JS adalah jalan ke depan, juri masih belum yakin, terutama dengan WASM dan proyek-proyek seperti Blazor di depan mata.

camainc

56

Melihat ini, sepertinya pendekatan LibMan bekerja paling baik untuk kebutuhan saya dengan menambahkan Bootstrap. Saya suka karena sekarang dibangun ke dalam Visual Studio 2017 (15.8 atau yang lebih baru) dan memiliki kotak dialognya sendiri.

Pembaruan 6/11/2020: bootstrap 4.1.3 sekarang ditambahkan secara default dengan VS-2019.5 (Terima kasih kepada Harald S.Hanssen untuk memperhatikan.)

Metode default VS menambahkan ke proyek menggunakan Bower tetapi sepertinya itu sedang keluar. Di header halaman Microsofts bower mereka menulis:

Mengikuti beberapa tautan mengarah ke Gunakan LibMan dengan ASP.NET Core di Visual Studio di mana ini menunjukkan bagaimana libs dapat ditambahkan menggunakan Dialog built-in:

Di Solution Explorer, klik kanan folder proyek tempat file akan ditambahkan. Pilih Tambahkan> Pustaka Sisi Klien. Dialog Tambahkan Pustaka Sisi Klien muncul: [sumber: Scott Addie 2018 ]

Kemudian untuk bootstrap cukup (1) pilih unpkg, (2) ketik "bootstrap @ .." (3) Install. Setelah ini, Anda hanya ingin memverifikasi semua yang disertakan di _Layout.cshtml atau tempat lain sudah benar. Mereka harus seperti href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

Sunsetquest
sumber

1

Saya memiliki VS 4.7.02558 (Edisi Komunitas) dan ini adalah opsi termudah bagi saya. Saya menggunakannya dalam proyek praktik yang dibuat untuk belajar untuk ujian MS 70-486 (MVC), jadi saya tidak dapat menjawab seberapa efektif ini untuk proyek yang menuju produksi.

Ed Gibbs

2

Bagi saya, ini juga merupakan cara termudah untuk menginstal barang dengan MS STANDARD TOOL. Dengan petunjuk dalam posting Anda - ubah Penyedia menjadi unpkg, ketik bootstrap @ 4., Saya dapat menginstal. Libman benar-benar tidak intuitif (dalam kasus saya, saya juga harus memasukkan. (Poin) setelah 4, sebelum paket ditampilkan (saya pikir, libman tidak berfungsi di lingkungan saya).

FredyWenger

2

Sekadar pengingat: jika Anda mencari Bootstrap di CdnJS, perhatikan namanya adalah twitter-bootstrap seperti aslinya.

D. Rosado

1

Dalam Visual Studio 2019 (terbaru 11 Juni 2020) - File libman dibuat, tetapi saya tidak melihat jendela popup libman.

Harald S. Hanssen

1

Saya telah menguji LibMan pada beberapa proyek dan ini benar-benar cara yang tepat. Sayang sekali GUI tidak berfungsi, tetapi setelah beberapa kali mencoba, mudah digunakan.

Harald S. Hanssen

18

Coba Libman , sesederhana Bower dan Anda dapat menentukan wwwroot / lib / sebagai folder unduhan.

ysabih
sumber

1

Belum dalam rilis VS2017: UPDATE: 24-Mei-2018 - Sepertinya LibMan tidak berhasil mencapai rilis final 15.7. Ada di pratinjau untuk 15.8.x

kristianp

1

Sepertinya ini sudah keluar sekarang dengan rilis 15,8 final.

Kirk Larkin

Ini tersedia sekarang dalam VS2017 V 15.8 dan pendekatan yang jauh lebih sederhana daripada jawaban yang diterima

Jemsworld

10

Apa triknya bagi saya adalah:

1) Klik kanan pada wwwroot> Add> Client Side Library

2) Ketikkan "bootstrap" di kotak pencarian

3) Pilih "Pilih file tertentu"

4) Gulir ke bawah dan pilih folder. Dalam kasus saya, saya memilih "twitter-bootstrap"

5) Centang "css" dan "js"

6) Klik "Instal".

Beberapa detik kemudian saya memiliki semua folder wwwroot. Lakukan hal yang sama untuk semua paket sisi klien yang ingin Anda tambahkan.

Auguste
sumber

6

Libman tampaknya menjadi alat yang disukai oleh Microsoft sekarang. Ini terintegrasi dalam Visual Studio 2017 (15.8).

Artikel ini menjelaskan cara menggunakannya dan bahkan cara menyiapkan pemulihan yang dilakukan oleh proses pembuatan.

Dokumentasi Bootstrap memberi tahu Anda file apa yang Anda butuhkan dalam proyek Anda.

Contoh berikut harus berfungsi sebagai konfigurasi untuk libman.json.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}

Marcel Melzig
sumber

Terima kasih, saya telah mengikuti buku Pro ASP.NET Core MVC 2 yang menyuruh saya menggunakan Bower yang sekarang sudah usang. Saya mencari-cari beberapa saat sebelum menyadari bahwa Anda cukup mengklik kanan proyek Anda dan memilih Add -> Client-Side library. Dan itu menggunakan libman. Semuanya ada di dalamnya.

TxRegex

4

Kami menggunakan bootstrap 4 di inti asp.net tetapi mereferensikan pustaka dari "npm" menggunakan ekstensi "Penginstal Paket" dan menemukan ini lebih baik daripada Nuget untuk pustaka Javascript / CSS.

Kami kemudian menggunakan ekstensi "Bundler & Minifier" untuk menyalin file yang relevan untuk distribusi (dari folder npm node_modules, yang berada di luar proyek) ke dalam wwwroot seperti yang kami inginkan untuk pengembangan / penyebaran.

Mark Redman
sumber

4

Sayangnya, Anda akan kesulitan menggunakan NuGet untuk menginstal Bootstrap (atau kebanyakan kerangka kerja JavaScript / CSS lainnya) pada proyek .NET Core. Jika Anda melihat penginstalan NuGet, ia memberi tahu Anda bahwa itu tidak kompatibel:

jika Anda harus tahu di mana dependensi paket lokal, sekarang mereka ada di direktori profil lokal Anda. yaitu%userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .

Namun, saya menyarankan untuk beralih ke npm, atau bower - seperti dalam jawaban Saineshwar.

Balah
sumber

2

BS4 sekarang tersedia di .NET Core 2.2 . Pada penginstal SDK 2.2.105 x64 pasti. Saya menjalankan Visual Studio 2017 dengan itu. Sejauh ini bagus untuk proyek aplikasi web baru.

klewis
sumber

2

Mengapa tidak menggunakan CDN saja? Kecuali Anda perlu mengedit kode BS, maka Anda hanya perlu mereferensikan kode di CDN.

Lihat BS 4 CDN Disini:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Di bagian bawah halaman.

Tepi
sumber

1

Penggunaan CDN menambahkan ketergantungan waktu proses. Jadi, jika CDN turun, begitu pula situs Anda. Ini masalah keamanan karena siapa pun yang mengontrol cdn dapat mengubah file populer dan menyuntikkan skrip ke situs Anda. Ini juga merupakan masalah privasi karena browser pengguna meminta file dari server pihak ketiga daripada milik Anda.

TxRegex

3

@TxRegex pada tahap tertentu sebenarnya disarankan agar referensi ke CDN daripada server aplikasi web; karena browser pengguna kemungkinan besar telah meng-cache pustaka populer seperti Bootstrap saat mempelajari situs lain. Tapi terserah ...

joedotnot

0

Gunakan file konfigurasi nmp (tambahkan ke proyek web Anda) lalu tambahkan paket yang diperlukan dengan cara yang sama seperti yang kami lakukan menggunakan bower.json dan simpan. Visual studio akan mengunduh dan menginstalnya. Anda akan menemukan paket tersebut di bawah node nmp proyek Anda.

Alexandre le Grand
sumber