Dapatkah saya menggunakan visual studio untuk bootstrap?

Saya menulis beberapa artikel tentang menggunakan Bootstrap CSS UI Framework bersama dengan ASP. Formulir Web .NET dan MVC. Tetap saja, saya mendapat pertanyaan tentang cara menambahkan bootstrap di ASP. .NET MVC dan Formulir Web. Jadi, saya berpikir untuk menggabungkan langkah-langkah penting dalam menambahkan bootstrap ke proyek MVC atau Web Forms. Di bawah ini adalah topik yang akan saya bahas dalam artikel ini. Anda dapat melompat ke topik yang Anda minati. (UPDATE 18-03-2018. Artikel ini telah diperbarui untuk Bootstrap 4 dan. Kerangka Bersih 4. 7. 1)

1. 1. Menambahkan Bootstrap Di ASP. Formulir Web .NET Menggunakan Paket NuGet.
   2. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. Formulir Web .NET Secara Manual (Tanpa NuGet).
   3. Menambahkan Bootstrap Di ASP. NET MVC Menggunakan Paket NuGet.
   4. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. .NET MVC Secara Manual (Tanpa NuGet).
   5. Menambahkan Bootstrap Di ASP. NET dari CDN.
   6. Menggunakan Kelas Bootstrap Dengan ASP. Kontrol .NET seperti Kontrol HTML Sisi Server, Kontrol Formulir Web, dan Kelas Pembantu HTML.
   7. Menggunakan Bootstrap di Core MVC. Buka Artikel →

Alat dan Kerangka yang Digunakan

• Visual Studio 2017 (Versi 15. 6. 2)
• Kerangka Bersih 4. 7. 1
• Bootstrap 4

A. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. Formulir Web .NET (Menggunakan NuGet)

Mulai dari Visual Studio 2015, Microsoft telah menambahkan Bootstrap sebagai kerangka antarmuka pengguna default melalui paket NuGet. Jadi, bootstrap akan ditambahkan secara otomatis ke proyek Anda, jika Anda memilih ASP. Formulir Web .NET (. .NET Framework). Tetapi bootstrap default yang menyertainya adalah versi yang lebih lama, katakanlah 3. 0. 0. Anda harus memutakhirkan paket Bootstrap NuGet untuk menambahkan bootstrap versi terbaru ke proyek Formulir Web Anda

Berikut adalah langkah-langkah untuk memutakhirkan bootstrap melalui NuGet

1. Mulai Visual Studio. Buka menu File >> Baru >> Proyek
2. Di jendela New Project, buka Installed >> Visual C# >> Web
3. Pilih ASP. Aplikasi Web .NET (. NET Framework), Masukkan nama proyek dan tekan tombol OK. (Saya juga telah memilih. .NET Framework 4. 7. 1. Tapi, itu opsional. )
   
   
   
4. Di layar berikutnya, New ASP. Aplikasi Web .NET, pilih Formulir Web di bawah Templat dan tekan tombol OK
5. ASP. Proyek Formulir Web .NET sekarang dibuat
6. Untuk memeriksa versi bootstrap, klik kanan solusi di penjelajah solusi dan pilih Kelola Paket NuGet Untuk Solusi…. Di Jendela Kelola NuGet, cari paket bootstrap dan pilih. Di panel kanan, Anda dapat melihat bahwa versi bootstrap yang diinstal adalah 3. 0. 0 dan versi stabil terbaru lebih tinggi dari itu. Dalam kasus saya, versi stabil terbaru adalah 4. 0. 0
   
   
   
7. Untuk memutakhirkan bootstrap ke versi stabil terbaru, pilih nama proyek di panel kanan layar NuGet dan tekan tombol Instal di sebelah nomor versi stabil terbaru
8. Bersamaan dengan paket nugget, popper paket dependen. js diinstal dan paket dependen lain yang sudah diinstal seperti AspNet. Pengelola Skrip. bootstrap, jQuery dan AspNet. Pengelola Skrip. jQuery ditingkatkan ke versi yang kompatibel dengan bootstrap
9. Sekarang bootstrap dan paket ketergantungannya telah ditingkatkan dan siap digunakan. Jika mau, Anda dapat memutakhirkan semua paket NuGet lainnya seperti WebGrease, Respond, Antlr, dll. ke versi terbaru mereka. Itu selalu merupakan praktik yang baik untuk menggunakan perangkat lunak versi terbaru saat memulai proyek web baru
10. Jika Anda ingin melihat file bootstrap di proyek Anda, perluas folder Konten dan Skrip. Mereka seperti yang ditunjukkan pada tangkapan layar di bawah ini
    
    
    
11. Sekarang, buka Situs. File master dan tambahkan referensi ke popper. js baik secara langsung atau dengan menggunakan BundleConfig dan ScriptReference. (CATATAN. Popper. js diperlukan hanya jika Anda menggunakan tooltips, popovers atau dropdowns di bootstrap)
12. Seperti yang telah saya sebutkan sebelumnya, antarmuka pengguna default dari proyek ini adalah bootstrap. Jika Anda melihat kode di Situs. File master, Anda dapat melihat template bootstrap dengan bilah navigasi bootstrap (navbar) dan wadah. Tapi, kode ini untuk bootstrap versi lama. Bootstrap 4 tidak akan mendukung beberapa kode ini, terutama navbar. Navs dan navbars sepenuhnya ditulis ulang di bootstrap 4. Jadi, Anda harus mengubah bagian navbar. Hapus bagian navbar yang ditunjukkan di bawah ini dari Situs. Berkas induk
    
    
    
13. Gunakan kode di bawah ini, bukan kode navbar lama
    

14. Sistem grid bootstrap ditangani dalam file aspx. Misalnya, jika Anda membuka Default. aspx, Anda dapat melihat kisi dan kolom bootstrap
    
    
    

Sekarang Anda dapat mengembangkan ASP Anda. Aplikasi formulir web .NET menggunakan antarmuka pengguna bootstrap. Untuk mengetahui lebih lanjut tentang penggunaan kelas bootstrap dengan kontrol HTML sisi server dan Kontrol Formulir Web

B. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. Formulir Web .NET (Manual – Tanpa NuGet)

Seperti yang telah Anda lihat di bagian sebelumnya, jika Anda membuat proyek formulir web menggunakan templat default di studio visual, itu akan menyertakan semua file dan dependensi yang diperlukan untuk bootstrap melalui paket NuGet. Templat bootstrap dasar dengan bilah navigasi dan wadah dibuat di Situs. File master, sehingga Anda dapat memiliki pola kisi Anda sendiri di file aspx

Tetapi sebagian besar pengembang web tidak ingin membuat proyek dari template dan komponen default studio visual. Mereka ingin memulai dengan templat kosong dan menambahkan komponen dan referensi yang diperlukan sesuai kebutuhan, baik dari NuGet atau menambahkannya secara manual. Jadi, di sini saya telah memberi Anda petunjuk langkah demi langkah untuk menambahkan bootstrap dan ketergantungannya pada Empty ASP. Proyek .NET Web Forms secara manual (tanpa menggunakan paket NuGet)

Sumber sampel yang dibuat untuk Bootstrap With ASP ini. Artikel Formulir Web .NET tersedia di GitHub. Dapatkan Kode Sumber

Buat Proyek Formulir Web Kosong

1. Mulai Visual Studio. Buka menu File >> Baru >> Proyek
2. Di jendela New Project, buka Installed >> Visual C# >> Web
3. Pilih ASP. Aplikasi Web .NET (. NET Framework) dan tekan tombol OK. (Saya juga telah memilih. .NET Framework 4. 7. 1. Itu opsional. )
   
   
   
4. Di layar berikutnya ASP Baru. Aplikasi Web .NET, pilih ikon Kosong di bagian template proyek. Juga pilih Formulir Web di bawah bagian "Tambahkan folder dan referensi inti untuk" dan tekan tombol OK
   
   
   
5. ASP kosong. Proyek Formulir Web .NET sekarang dibuat

Tambahkan File Bootstrap ke ASP Kosong. Proyek Formulir Web .NET

1. Unduh file CSS dan JS Terkompilasi bootstrap dari http. //getbootstrap. com
2. Buka zip file bootstrap yang diunduh bootstrap-4. 0. 0-dist. zip
3. Salin folder css dan js dan tempelkan ke ASP. folder proyek .NET
   
   
   
   
   
   
   
4. Buka penjelajah solusi studio visual dan sertakan folder ke proyek. (Jika Anda tidak terbiasa menyertakan file dan folder untuk diproyeksikan. (a) Pilih proyek dan tekan ikon Tampilkan Semua File. (b) Folder bootstrap yang telah kami tempelkan ke folder proyek akan terlihat sekarang. Pilih folder css, font dan js dan klik kanan. Dari menu klik kanan, pilih Sertakan dalam Proyek. Folder disertakan dalam ASP. proyek BERSIH. )
   
   
   
   
   
   
   
5. Sekarang, Anda harus menambahkan dependensi bootstrap. Bootstrap membutuhkan jQuery dan dan Popper. js. Bootstrap versi 4 mendukung jQuery versi 3 atau lebih tinggi dan popper. js versi 1. 12. 9 atau lebih tinggi
6. Unduh inti jQuery 3 yang diperkecil. 3. 1 dari https. //kode. jquery. com/jquery-3. 3. 1. min. js
7. Unduh popper js 1 yang diperkecil. 14. 1 dari https. //unpkg. com/popper. js/dist/umd/popper.js/dist/umd/popper. min. js
8. Tempatkan file jquery-3. 3. 1. min. js dan popper.js. min. js di bawah folder js proyek. Sertakan file ke proyek, seperti cara kami menyertakan file bootstrap
   
   
   

Menggunakan Bootstrap Di ASP. Formulir Web .NET

Kerangka kerja bootstrap sekarang siap digunakan dalam proyek. Untuk menggunakan bootstrap dalam proyek, Anda harus menambahkan template bootstrap. Templat bootstrap tidak lain adalah bilah navigasi dan wadah bootstrap. Di ASP. Formulir web .NET Anda dapat menambahkan navbar dan wadah bootstrap di halaman master dan menggunakan halaman master untuk file aspx lainnya

1. Tambahkan halaman Master baru dan beri nama Situs. Menguasai.
   
   
2. Di Situs. File master, tambahkan 3 meta tag ini di bagian head. 3 tag meta ini harus didahulukan di bagian kepala
   

   
   
   

3. Tambahkan referensi file css ke bagian kepala di bawah tag meta. (CATATAN. Saya tidak akan menggunakan teknik bundling untuk file css dan js, karena di luar cakupan artikel ini. Sama seperti file css dan js lainnya, Anda dapat membundel file bootstrap css dan js dan menggunakannya. )
   

4. Tambahkan referensi file jQuery, popper dan Bootstrap js tepat di atas tag body penutup
   

   
   
   

5. Tambahkan bilah navigasi di bagian tubuh. Di bawah ini adalah contoh bilah navigasi tetap. Navbar ini dipasang di atas. Anda dapat memiliki semua jenis bilah navigasi yang Anda inginkan. Beberapa contoh template ada di website bootstrap
   

   
   

6. Bungkus asp. ContentPlaceHolder di bagian body dengan kelas container bootstrap. Untuk melakukan ini tambahkan kelas container (class=”container body-content”) ke elemen div yang mengelilingi tempat penampung konten. Praktik terbaik lainnya untuk mengubah ID placeholder konten menjadi sesuatu yang bermakna seperti BodyContent
   
   
   
7. Tambahkan bagian footer di dalam bagian container.
   
   
8. Untuk menyempurnakan tampilan dan nuansa, saya telah menambahkan gaya ruang padding ke tag body (style=”padding-top. 70px;”). Anda dapat memindahkan gaya ini ke file css terpisah saat memulai pengembangan
9. Situs. Kode halaman master terlihat seperti ini (di GitHub)
10. Sekarang, tambahkan halaman default Default. aspx ke proyek
11. Di Default. halaman aspx, hapus semua konten kecuali direktif @ Halaman di baris pertama
12. Dalam direktif @ Page, tambahkan MasterPageFile=”~/Site. Menguasai". Ini untuk melampirkan halaman saat ini ke halaman master
    

    <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default. aspx. cs” Mewarisi=”MyTecBitsBootstrapNoNuGetWebForm. Default” MasterPageFile=”~/Site. Guru” %>

13. Kemudian Anda dapat menambahkan pola grid sesuka Anda dan menambahkan konten Anda. Gunakan asp. Tag konten untuk membungkus semua konten yang akan ditampilkan di Situs. Placeholder konten tubuh Guru. Contoh konten halaman default ada di sini (di GitHub)

Untuk mengetahui lebih lanjut tentang penggunaan kelas bootstrap dengan kontrol HTML sisi server dan Kontrol Formulir Web

Contoh ASP. Kode Sumber Formulir Web .NET

Proyek sampel tersedia di GitHub. https. //github. com/mytecbits/MyTecBits-Bootstrap-Empty-WebForm

Halaman Web Dalam Mode Desktop

Halaman Web Dalam Mode Seluler

C. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. .NET MVC (Menggunakan NuGet)

Sejauh ini kita telah melihat cara menambahkan Bootstrap di ASP. Formulir Web .NET. Sekarang, kita akan melihat cara menambahkannya di Proyek MVC

Jika Anda membuat proyek MVC 5 menggunakan templat MVC default di Visual Studio 2015 atau lebih tinggi, Bootstrap sudah disertakan dalam proyek melalui paket NuGet. Tetapi bootstrap default akan menjadi versi yang lebih lama, katakanlah 3. 0. 0. Anda harus memutakhirkan paket Bootstrap NuGet untuk menambahkan bootstrap versi terbaru di proyek MVC Anda

Untuk memutakhirkan bootstrap, ikuti langkah-langkah ini

1. Luncurkan Visual Studio dan buka File >> Baru >> Proyek
2. Di jendela New Project, buka Installed >> Visual C# >> Web
3. Pilih ASP. Aplikasi Web .NET (. NET Framework), masukkan nama proyek dan tekan tombol OK. (Saya juga telah memilih. .NET Framework 4. 7. 1. Itu opsional. )
   
   
   
4. Di layar berikutnya ASP Baru. Aplikasi Web .NET, pilih ikon MVC di bawah bagian Templat teratas dan tekan tombol OK
5. ASP. Proyek .NET MVC sekarang dibuat dengan template default
6. Untuk memeriksa versi bootstrap, klik kanan solusi di penjelajah solusi dan pilih Kelola Paket NuGet Untuk Solusi…. Di Jendela Kelola NuGet, cari paket bootstrap dan pilih. Di panel kanan, Anda dapat melihat bahwa versi bootstrap yang diinstal adalah 3. 0. 0 dan versi stabil terbaru lebih tinggi dari itu. Dalam hal ini versi stabil terbaru adalah 4. 0. 0
   
   
   
7. Untuk memutakhirkan bootstrap ke versi stabil terbaru, pilih nama proyek di panel kanan layar NuGet dan tekan tombol Instal di sebelah nomor versi stabil terbaru
8. Seiring dengan paket bootstrap, popper paket dependen. js diinstal dan paket dependen pra-instal lainnya jQuery ditingkatkan ke versi yang dapat dipadatkan ke bootstrap
9. Sekarang bootstrap dan dependensinya telah ditingkatkan dan siap digunakan. Ini akan menjadi praktik yang baik untuk memutakhirkan semua paket NuGet lainnya seperti jQuery, Antlr, dll. ke versi stabil terbaru mereka
10. Jika Anda ingin memverifikasi file bootstrap di proyek Anda, luaskan folder Konten dan Skrip. Mereka seperti yang ditunjukkan pada tangkapan layar di bawah ini
    
    
    
11. Seperti yang telah saya sebutkan sebelumnya, antarmuka pengguna default dari proyek ini adalah bootstrap. Jika Anda memeriksa kode di. /Views/Shared/_Layout. cshtml, Anda dapat melihat template bootstrap dengan bootstrap navbar dan container. Tapi, kode ini untuk bootstrap versi 3. Dengan versi bootstrap yang ditingkatkan, kode navbar ini tidak akan berfungsi. Anda harus mengubah kode navbar dengan bootstrap 4. Di bawah ini adalah bagian dari navbar lama, yang harus Anda hapus
    
    
    
12. Alih-alih yang lama, tambahkan kode navbar di bawah ini
    

13. Jangan lupa buka App_Start >> BundleConfig. cs dan tambahkan popper. js ke bundel atau tambahkan referensi popper. js ke _Layout. file cshtml
14. Sistem grid bootstrap ditangani dalam tampilan. Misalnya, jika Anda membuka tampilan. /Tampilan/Beranda/Indeks. cshtml, Anda dapat melihat kisi dan kolom bootstrap
    
    
    

Untuk mengetahui lebih lanjut tentang penggunaan kelas bootstrap dengan kontrol HTML sisi server dan Pembantu HTML MVC

D. Langkah-langkah Untuk Menambahkan Bootstrap Di ASP. NET MVC (Manual – Tanpa NuGet)

Di sini saya telah memberi Anda petunjuk langkah demi langkah untuk menambahkan bootstrap dan ketergantungannya pada Empty ASP. Proyek .NET MVC secara manual, tanpa menggunakan paket Bootstrap NuGet

Sumber sampel yang dibuat untuk artikel Bootstrap With MVC ini tersedia di GitHub. Dapatkan Kode Sumber

Buat Proyek MVC Kosong

1. Mulai Visual Studio. Buka menu File >> Baru >> Proyek
2. Di jendela New Project, buka Installed >> Visual C# >> Web
3. Pilih ASP. Aplikasi Web .NET (. NET Framework) dan tekan tombol OK. (Saya juga telah memilih. .NET Framework 4. 7. 1. Itu opsional. )
4. Di layar berikutnya ASP Baru. Aplikasi Web .NET, pilih ikon Kosong di bawah bagian templat. Juga pilih MVC di bawah bagian "Tambahkan folder dan referensi inti untuk" dan tekan tombol OK
   
   
   
5. Proyek MVC kosong sekarang dibuat

Tambahkan File Bootstrap Ke proyek MVC Kosong

1. Unduh bootstrap File CSS dan JS Terkompilasi dari http. //getbootstrap. com
2. Buka zip file bootstrap yang diunduh bootstrap-4. 0. 0-dist. zip
3. Salin folder css, dan js dari file zip yang diunduh dan tempelkan ke folder proyek MVC.
   
   
4. Buka penjelajah solusi studio visual dan sertakan folder ke proyek. (Jika Anda tidak terbiasa memasukkan file dan folder ke proyek. (a) Pilih proyek di penjelajah solusi dan tekan ikon Tampilkan Semua File. (b) Folder bootstrap yang telah kami tempelkan ke folder proyek akan terlihat di garis putus-putus sekarang. Pilih folder css dan js dan klik kanan. Dari menu klik kanan, pilih Sertakan dalam Proyek. Folder tersebut termasuk dalam proyek MVC. )
5. Sekarang kita akan menambahkan dependensi bootstrap. Bootstrap 4 membutuhkan jQuery versi 3 atau lebih tinggi dan popper. js versi 1. 12. 9 atau lebih tinggi
6. Unduh inti jQuery 3 yang diperkecil. 3. 1 dari https. //kode. jquery. com/jquery-3. 3. 1. min. js
7. Unduh popper yang diperkecil. js 1. 14. 1 dari https. //unpkg. com/popper. js/dist/umd/popper.js/dist/umd/popper. min. js
8. Tempatkan file jquery-3. 3. 1. min. js dan popper.js. min. js di bawah folder js proyek. Sertakan file ke proyek, seperti cara kami menyertakan file bootstrap
9. Sekarang folder dan file di explorer solusi terlihat seperti ini
   
   
   

Menggunakan Bootstrap Di MVC

Kerangka bootstrap sekarang siap digunakan dalam proyek MVC. Untuk menggunakan bootstrap dalam proyek, Anda harus menambahkan template bootstrap. Templat bootstrap tidak lain adalah bilah navigasi dan wadah bootstrap

Dalam proyek MVC Anda dapat menambahkan bilah navigasi dan wadah di file Tata Letak dan sistem kisi dan kolom bootstrap dalam tampilan. Ikuti langkah-langkah ini untuk mengimplementasikan template

1. Buat folder bernama Dibagikan di bawah Tampilan
2. Di bawah folder Bersama, tambahkan halaman tata letak bernama _Layout. cshtml
3. Remove the content in the _Layout.cshtml file and paste the below code. See the highlighted part of the code below. The first block has the 3 meta tags which are required for bootstrap. These 3 meta tags should immediately follow the tag. The next part in the head section is the bootstrap’s css file reference. In the body tag, we will have the navigation bar defined by the class navbar. Then the @RenderBody() is wrapped by the bootstrap’s container class. Finally, we have the script reference for the jQuery and Bootstrap js file. (NOTE: I’m not using the bundling technique for the css and js files in this article. Just like any other css and js file you can bundle the bootstrap css and js files using bundle config and use the @Style.Render and @Script.Render to include the bundled files.) The content of _Layout.cshtml is also available here in GitHub.
   

   <. DOCTYPE html>
   
   
   
   
   

   
   
   

   
   

   
   @RenderBody()
   
   
   

   
   
   
   

   @RenderSection(“skrip”, diperlukan. Salah)
   
   

4. Buat file tata letak lain, di bawah Tampilan dan beri nama _ViewStart. cshtml
5. Hapus semua konten di _ViewStart. file cshtml dan rekatkan kode di bawah ini. Ini hanya untuk menentukan file Layout saat merender tampilan
   

   @{
   Tata Letak = “~/Views/Shared/_Layout. cshtml”;
   }

6. Sekarang Anda harus membuat tampilan, yang akan memiliki kelas kisi dan kolom bootstrap
7. Klik kanan folder Pengontrol. Dari menu klik kanan pilih Add >> Controller
8. Dari jendela pop-up Add Scaffold, Pilih MVC 5 Controller dengan tindakan read/wright
9. Beri nama controller sebagai HomeController. Pengontrol Rumah. file kelas pengontrol cs dibuat di bawah folder Pengontrol. Sub-folder bernama Home juga dibuat di bawah folder Views
10. Sekarang, tambahkan view bernama Index di bawah folder Home. Saat menambahkan tampilan pastikan untuk memilih halaman tata letak yang telah Anda buat sebelumnya
    
    
    
11. Dalam Indeks. halaman tampilan cshtml, Anda dapat melakukan tata letak grid bootstrap menggunakan kelas baris dan kolom. Di bawah ini adalah contoh konten, saya telah menambahkan ke tampilan indeks
    
    
    

Untuk mengetahui lebih lanjut tentang penggunaan kelas bootstrap dengan kontrol HTML sisi server dan Pembantu HTML MVC

Contoh ASP. Kode Sumber .NET MVC

Contoh proyek MVC tersedia di GitHub. https. //github. com/mytecbits/MyTecBits-Bootstrap-Empty-MVC

Halaman Web MVC Dalam Mode Desktop

Halaman Web MVC Dalam Mode Seluler

E. Menambahkan Bootstrap di ASP. NET dari CDN

Bootstrap juga tersedia di beberapa jaringan pengiriman konten (CDN). CDN yang direkomendasikan untuk bootstrap adalah MaxCDN. Untuk menambahkan bootstrap di ASP Anda. Proyek .NET (baik MVC dan Formulir Web), gunakan referensi cdn di bawah alih-alih mengunduh dan menambahkannya ke proyek Anda. Menggunakan CDN akan membantu Anda meningkatkan kinerja halaman web Anda, tetapi kerugiannya adalah, Anda harus terhubung ke internet agar ini berfungsi, bahkan dalam lingkungan pengembangan atau produksi

In section before any other head content:

Tepat sebelum tag

Bootstrap membutuhkan jQuery dan popper. js untuk menggunakan beberapa komponennya. Anda telah memanggil jQuery dan popper. js sebelum merujuk bootstrap. js

<. – jQuery dulu, lalu Popper. js, lalu Bootstrap JS –>

F. Menggunakan Kelas Bootstrap Dengan ASP. Kontrol .NET

Komponen bootstrap dapat diimplementasikan dalam elemen situs web menggunakan kelas style sheet. Di ASP. Di .NET, ada beberapa jenis kontrol seperti Kontrol HTML sisi server, Kontrol Formulir Web, Pembantu HTML MVC, dll… Di bawah ini adalah beberapa contoh penggunaan kelas bootstrap dalam berbagai jenis kontrol

Menambahkan Kelas Bootstrap di Kontrol HTML Sisi Server

Menggunakan bootstrap di kontrol HTML sisi server (dengan runat = server) sangat mudah, Anda hanya perlu menambahkan atribut class dan menambahkan kelas bootstrap yang diperlukan di dalamnya

Misalnya, dalam kontrol formulir html masukan

Anda dapat menambahkan kelas bootstrap (class=”form-control”) seperti ini

Hasilnya akan seperti ini

Anda dapat menggunakan teknik yang sama di kontrol html sisi server lainnya seperti tombol, textarea, kotak centang, radio, pilih (kotak daftar), dll…

Menambahkan Kelas Bootstrap di Kontrol Formulir Web

Sekarang, kita akan melihat cara menambahkan kelas bootstrap ke kontrol formulir web seperti Label .

Dalam kontrol formulir web, Anda dapat menggunakan atribut CssClass untuk menambahkan kelas bootstrap ke kontrol

Misalnya, dalam kontrol label

Peringatan dari MyTecBits. com. …

Anda dapat menambahkan kelas peringatan peringatan bootstrap "peringatan-peringatan" seperti ini

Peringatan dari MyTecBits. com. …

Hasilnya akan seperti ini

Demikian pula Anda dapat menggunakan atribut CssClasses untuk menambahkan kelas bootstrap di Kontrol Formulir Web lainnya juga

Saat menggunakan gaya bootstrap di kontrol GridView, Anda harus melakukan langkah tambahan. Detailnya tersedia di artikel Menerapkan gaya bootstrap ke kontrol GridView

Menambahkan Kelas Bootstrap di Pembantu HTML MVC

Menambahkan kelas bootstrap ke Pembantu HTML itu sederhana, tetapi tidak semudah di Kontrol Formulir Web atau kontrol Sisi Server HTML. Untuk menambahkan kelas gaya ke Pembantu HTML, Anda harus membebaninya. Jika Anda ingin membuat tombol tautan bootstrap menggunakan @Html. ActionLink, maka Anda harus membebaninya dengan objek htmlAttributes

Misalnya, di tautan tindakan

@Html. ActionLink(“Pulang”, “Indeks”, “Beranda”)

Anda dapat menambahkan kelas tombol bootstrap "btn btn-default" seperti ini

@Html. ActionLink(“Pulang”, “Indeks”, “Beranda”, null, baru { @class = “btn btn-default”})

Hasilnya akan seperti ini

Demikian pula, Anda dapat menggunakan objek htmlAttributes untuk Pembantu HTML lainnya seperti @Html. Label, @Html. Redaktur, dll…

Bagaimana cara menjalankan Bootstrap di Visual Studio?

Bisakah Visual Studio menjalankan kode Bootstrap?

Bagaimana cara memulai kode Bootstrap di Visual Studio?

Bagaimana cara menambahkan Bootstrap di Visual Studio 2022?