Daftar isi
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
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
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
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
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
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
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
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
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
{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
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
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 Bootstrap
Plugin 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 Bundle
Langkah 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 6. Klik berikutnya untuk memilih tema
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
b. Paket Templat SideWaffle
c. SideWaffle. com
d. Paket Cuplikan Bootstrap
e. BootstrapBundle. com