Apakah visual studio mendukung bootstrap 5?

Daftar isi

Artikel ScopeThis berfokus pada Alat yang tersedia di Visual Studio untuk mengembangkan Aplikasi Web menggunakan Bootstrap

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
Untuk meningkatkan pengalaman pengembangan, tersedia banyak trik, alat, dan Ekstensi Visual Studio. Artikel ini menunjukkan beberapa alat ini yang benar-benar dapat meningkatkan produktivitas pengembang dan membuat pengembangan lebih mudah

Dukungan bootstrap secara Default untuk Aplikasi Web di Visual Studio

Dari Visual Studio, saat membuat aplikasi web baru, baik itu formulir web atau MVC, Bootstrap sudah diinstal dan dimuat di proyek
Di bawah ini adalah contoh Aplikasi MVC baru
Seperti yang Anda tunjukkan di bawah, file Booststrap CSS dan Javascript sudah ditambahkan secara default

Apakah visual studio mendukung bootstrap 5?
               
Apakah visual studio mendukung bootstrap 5?


Selain itu, Visual Studio menyediakan IntelliSense untuk Bootstrap. Ini sekali lagi membuat bootstrap lebih mudah digunakan dan meningkatkan produktivitas pengembang

Apakah visual studio mendukung bootstrap 5?

Perancah Default menggunakan ASP. MVC.NET

Visual Studio tidak hanya mendukung Bootstrap, tetapi juga dapat menghasilkan tampilan Anda menggunakan bootstrap
Di bawah ini adalah contoh dasar dari kode scaffolded

Langkah 1. Buat Model baru

public class People

{

     public int Id {get;class0class1

     public class4 class5get;class0class1

     public class4 People3get;class0class1

     public class4 {1get;class0class1

{6


Langkah 2. Tambahkan pengontrol
Klik kanan pada Pengontrol > Tambah > Pengontrol

Apakah visual studio mendukung bootstrap 5?


Langkah 3. Pilih Pengontrol MVC 5 dengan tampilan, menggunakan Entity Framework



Apakah visual studio mendukung bootstrap 5?




Langkah 4. Pilih kelas model dan tekan Add

Apakah visual studio mendukung bootstrap 5?


Ini mungkin memakan waktu beberapa detik. Visual Studio membuat tampilan dari model
Halaman-halaman berikut dibuat menggunakan bootstrap seperti yang ditunjukkan di bawah ini

Apakah visual studio mendukung bootstrap 5?


Berdasarkan model, Visual Studio akan secara otomatis mendeteksi bidang yang diperlukan dan menghasilkan tampilan untuk halaman Buat, Hapus, Detail, Edit, dan Indeks
Semua halaman ini ditulis menggunakan Bootstrap seperti yang ditunjukkan di bawah ini


Contoh dari Indeks. cshtml

{7{8 class    0    1     2

     {7    5    2

    7 {7    9    2

public1 public2

    7 public4    9    2

    7 {7    9    2

public1 int2

    7 public4    9    2

    7 {7    9    2

public1 Id {2

    7 public4    9    2

    7 {7    9get0    9    2

     public4    5    2


Contoh dari Edit. cshtml

{7get8 class    0;1    2

    _ ;4

     {7get8 class    0class00    2

    7 class03

    7 class05

     public4get8    2

public4get8    2



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

Salah satu cara untuk melakukannya adalah memodifikasi setiap halaman setelah perancah kode yang menyiratkan duplikasi tugas
Cara lain yang lebih menarik untuk melanjutkan adalah dengan menentukan template sehingga studio visual tahu bagaimana cara menyusun kode

Ini dapat dicapai dengan menggunakan  plugin Visual Studio yang sangat bagus bernama SideWaffle

Ekstensi SideWaffle menambahkan sekumpulan Cuplikan, Proyek, dan Template Item yang berguna ke Visual Studio. Tujuannya adalah untuk membuat pekerjaan sehari-hari Anda di Visual Studio menjadi pengalaman yang lebih kaya dan lebih produktif

Memasang SideWaffle

Di bawah ini adalah langkah-langkah untuk Menginstal SideWaffle

Langkah 1. Buka Alat > Ekstensi dan Pembaruan > Daring > Cari SideWaffle


Apakah visual studio mendukung bootstrap 5?


Langkah 2. Pilih Side Waffle Power Pack dan Klik Download
Langkah 3. Ini akan mengunduh paket VSIX
Langkah 4. Setelah pengunduhan selesai, buka dan pilih versi Visual Studio mana yang Anda perlukan untuk menginstalnya


Apakah visual studio mendukung bootstrap 5?



Menghasilkan Template menggunakan SideWaffle

Langkah 1. Saat penginstalan selesai, mulai ulang Visual Studio
Langkah 2. Klik kanan pada proyek, Tambahkan Item baru dan pilih ASP. File T4 Perancah .NET

Apakah visual studio mendukung bootstrap 5?


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".

Apakah visual studio mendukung bootstrap 5?


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

{7{8 class    0class17     2


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

{7{8 class    0class17     2

     {7    5    2

    7 {7    9    2

public1 public2

    7 public4    9    2

    7 {7    9    2

public1 int2

    7 public4    9    2

    7 {7    9    2

public1 Id {2

    7 public4    9    2

    7 {7    9get0    9    2

     public4    5    2


Di bawah ini adalah output dari kode yang dihasilkan

Apakah visual studio mendukung bootstrap 5?



Paket Cuplikan Bootstrap

Bootstrap Snippet Pack memiliki kumpulan snippet Bootstrap untuk Visual Studio
Sangat sering, pengembang web harus pergi untuk meminimalkan lingkungan pengembangan mereka, pergi ke situs web Bootstrap untuk menemukan sepotong HTML dari komponen tertentu
Melakukan ini sepanjang hari mengurangi produktivitas pengembang karena ia harus berpindah-pindah browser - Lingkungan Pengembangan
Untungnya, dengan Bootstrap Snippet Pack, potongan kode dapat diambil melalui Visual Studio

Untuk menginstal Paket Cuplikan Bootstrap, dari Visual Studio, buka  Alat > Ekstensi dan Pembaruan > Online > Cari Paket Cuplikan Bootstrap

Apakah visual studio mendukung bootstrap 5?



Setelah Diinstal, Dari editor Visual Studio, tekan CTRL+K, CTRL+X untuk memasukkan alat cuplikan


Apakah visual studio mendukung bootstrap 5?



Kemudian pilih bootstrap dan komponen yang diperlukan

Apakah visual studio mendukung bootstrap 5?


Bootstrap Snippet Pack akan secara otomatis menghasilkan HTML yang diperlukan

Apakah visual studio mendukung bootstrap 5?



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 Bootstrap

Plugin ini dapat diunduh dari visual studio itu sendiri. Buka saja Tools > Extensions and Updates > Online dan cari Bootstrap Bundle
Pilih plug-in dan tekan unduh lalu instal

Apakah visual studio mendukung bootstrap 5?



Membuat template menggunakan Bootstrap Bundle

Langkah 1. Untuk menggunakan plugin, Pilih File > New Project
Langkah 2. Pilih Situs MVC Bundel Bootstrap

Apakah visual studio mendukung bootstrap 5?


Langkah 3. Ini akan memunculkan wizard yang akan membantu Anda membuat Situs Web Bootstrap

Apakah visual studio mendukung bootstrap 5?


Langkah 4. Untuk Contoh ini, pilih dari template Kemudian Bisnis Modern

Apakah visual studio mendukung bootstrap 5?



Langkah 5. Kemudian, pilih halaman yang akan dibutuhkan

Apakah visual studio mendukung bootstrap 5?



Langkah 6. Klik berikutnya untuk memilih tema

Apakah visual studio mendukung bootstrap 5?


Langkah 7. Klik di samping Tambahkan judul Situs Web. Kemudian klik Selesai

Apakah visual studio mendukung bootstrap 5?


Langkah 8. Ini membutuhkan beberapa detik agar kode dan halaman dirangkai

Apakah visual studio mendukung bootstrap 5?



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.  



Apakah visual studio mendukung bootstrap 5?


Apakah visual studio mendukung bootstrap 5?


Apakah visual studio mendukung bootstrap 5?


Referensi

a. Bootstrap. com
b. Paket Templat SideWaffle
c. SideWaffle. com
d. Paket Cuplikan Bootstrap
e. BootstrapBundle. 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.