Daftar isi Show
PersyaratanArtikel berikut ini didasarkan pada pemutakhiran Visual Studio 2013 4 PendahuluanBootstrap adalah kerangka kerja HTML, CSS, dan JS paling populer untuk mengembangkan proyek yang responsif dan ramah seluler di web Bootstrap membuat pengembangan web front-end lebih cepat dan lebih mudah. Ini dirancang untuk orang-orang dari semua tingkat keahlian, perangkat dengan segala bentuk, dan proyek dengan berbagai ukuran Saat membuat Aplikasi Web di Visual Studio, bootstrap disertakan secara default dalam proyek yang membantu pengembang membuat Aplikasi Web responsif kelas atas Dari Visual Studio, saat membuat aplikasi web baru, baik itu formulir web atau MVC, Bootstrap sudah diinstal dan dimuat di proyek Selain itu, Visual Studio menyediakan IntelliSense untuk Bootstrap. Ini sekali lagi membuat bootstrap lebih mudah digunakan dan meningkatkan produktivitas pengembang Visual Studio tidak hanya mendukung Bootstrap, tetapi juga dapat menghasilkan tampilan Anda menggunakan bootstrap
Langkah 2. Tambahkan pengontrol Klik kanan pada Pengontrol > Tambah > Pengontrol Langkah 3. Pilih Pengontrol MVC 5 dengan tampilan, menggunakan Entity Framework Langkah 4. Pilih kelas model dan tekan Add Ini mungkin memakan waktu beberapa detik. Visual Studio membuat tampilan dari model Halaman-halaman berikut dibuat menggunakan bootstrap seperti yang ditunjukkan di bawah ini
Contoh dari Indeks. cshtml
Contoh dari Edit. cshtml
Templat Scaffolding / Scaffolding Kustom Dalam aplikasi dunia nyata, ada kebutuhan untuk menjaga standar tata letak di semua halaman. Misalnya, semua tabel harus memiliki tata letak tertentu Memasang SideWaffleDi bawah ini adalah langkah-langkah untuk Menginstal SideWaffle Langkah 2. Pilih Side Waffle Power Pack dan Klik Download Menghasilkan Template menggunakan SideWaffleLangkah 1. Saat penginstalan selesai, mulai ulang Visual Studio Langkah 3. Identifikasi Templat Kode Templat Kode folder akan ditambahkan. Ini adalah template yang digunakan untuk membuat scaffolding Untuk memodifikasi "View Templates", cari folder "MVC View". Langkah 4. Modifikasi Template Folder "Tampilan MVC" memiliki template untuk semua tampilan yang dapat diubah melalui MVC Asumsikan bahwa saat melihat rekaman, semua tabel harus dibatasi dan memiliki efek hover Untuk melakukan ini, Ubah template daftar (list. cs. t4) dan tambahkan berikut ini ke tag tabel
Langkah 5. Menguji perubahan Untuk menguji perubahan ini, hapus People controller dan view dan scaffold lagi seperti yang dijelaskan di bagian 2 Sekarang, jika Anda pergi ke Index. html dari folder people, class table-bordered table-hover telah ditambahkan secara otomatis Hal yang sama akan terjadi jika Anda merancah tampilan lain untuk model lain
Di bawah ini adalah output dari kode yang dihasilkan Paket Cuplikan Bootstrap Bootstrap Snippet Pack memiliki kumpulan snippet Bootstrap untuk Visual Studio Setelah Diinstal, Dari editor Visual Studio, tekan CTRL+K, CTRL+X untuk memasukkan alat cuplikan Kemudian pilih bootstrap dan komponen yang diperlukan Bootstrap Snippet Pack akan secara otomatis menghasilkan HTML yang diperlukan Bundel Bootstrap Ekstensi Visual Studio hebat lainnya adalah Bundel Bootstrap Bundel Bootstrap menyertakan templat proyek untuk semua tata letak contoh Bootstrap dan untuk templat situs web lengkap Start Bootstrap's Modern Business dan Business Casual Ekstensi memandu Anda melalui pembuatan ASP bertema Bootstrap. Situs web Net MVC, Anda dapat memilih tata letak situs serta warna situs skema berdasarkan BootSwatch Memasang Paket BootstrapPlugin ini dapat diunduh dari visual studio itu sendiri. Buka saja Tools > Extensions and Updates > Online dan cari Bootstrap BundlePilih plug-in dan tekan unduh lalu instal Membuat template menggunakan Bootstrap BundleLangkah 1. Untuk menggunakan plugin, Pilih File > New ProjectLangkah 2. Pilih Situs MVC Bundel Bootstrap Langkah 3. Ini akan memunculkan wizard yang akan membantu Anda membuat Situs Web Bootstrap Langkah 4. Untuk Contoh ini, pilih dari template Kemudian Bisnis Modern Langkah 5. Kemudian, pilih halaman yang akan dibutuhkan
Langkah 7. Klik di samping Tambahkan judul Situs Web. Kemudian klik Selesai Langkah 8. Ini membutuhkan beberapa detik agar kode dan halaman dirangkai Langkah 9. Anda kemudian dapat menjalankan Aplikasi Semua kode telah dirangkai dan template bersih dibuat dalam beberapa menit Pengguna hanya perlu menyesuaikan konten dan semuanya selesai Di bawah ini adalah beberapa tangkapan layar dari output. Referensi a. Bootstrap. com Bagaimana cara menggunakan Bootstrap 5 di Visual Studio?Oleh karena itu kita akan mulai dengan proyek baru yang kosong terlebih dahulu. Buat folder proyek baru, mis. g. bootstrap-contoh-01. Di folder proyek buat dua file baru dan kosong. indeks. html dan gaya. . Akordeon Lansiran Modal Bisakah saya menggunakan Bootstrap di Visual Studio?Bootstrap adalah perangkat sumber terbuka untuk mengembangkan dengan HTML, CSS, dan JS. Visual studio memudahkan untuk mengidentifikasi kelas mana yang berasal dari framework Bootstrap CSS dengan menampilkan logo di daftar penyelesaian .
Bagaimana cara memutakhirkan Bootstrap 4 ke 5 di Visual Studio?Di Visual Studio, Anda dapat mencoba memperbarui Bootstrap dengan klik kanan pada proyek Anda > Kelola paket NuGet > Pembaruan > pilih “bootstrap” to update it.
Apakah kode Visual Studio mendukung Bootstrap?Alat terintegrasi dengan Visual Studio Code
. Create quality HTML prototypes quickly, using popular open source tools like Bootstrap, LESS, Fontawesome and more. |