Ekalaya ManullangTry to become not a man of success, but try rather to become a man of value. ‐ Albert Einstein
Home PHP ASP.NET JQuery SQL Android Web Design Portfolio Contact
Home » .NET » ASP.NET » MVC 3 » web design » Menggunakan Twitter Bootstrap dengan ASP.NET C# MVC 3 WebApplication
Menggunakan Twitter Bootstrap dengan ASP.NET C# MVC 3Web ApplicationDiposkan oleh Ekalaya Manullang di 12/07/2014 01:35:00 AM
Bagi yang sudah familiar dengan Twitter Bootstrap tentu sudah paham kegunaan tools bootstrap
sebagai kebutuhan untuk desain responsive web.
https://www.twitterbootstrapmvc.com/Home/Installation
Berikut ini cara bagaimana menggunakan Twitter Boostrap dengan ASP.NET C# MVC 3 di Visual
Studio 2010.
1. Buat New Project ASP.NET C# MVC 3
Mulai dengan membuat New Project ASP NET MVC 3 Web Application dari Visual Studio 2010.
Saya beri nama MVCBootstrap. Dan menggunakan aplikasi Internet template dengan tampilan
Popular Post
Download Software Pendeteksi
Masalah Komputer
Pengguna komputer, baik itu...
PHP dan Microsoft SQLExpress (MSSQL)
SQLExpress adalah salah satu edisi...
NINJA HACKING (E‐BOOK)
Terkadang pernyataan‐pernyataan
konyol...
Membuat Script PHP Import Data MS.
Excel Ke MySQL
Sebenarnya topik tentang cara
membuat...
Belajar Ajax – XML Http Request (XHR)
Sebelum membaca tutorial ini lebih...
Pengenalan AJAX
Asynchronous JavaScript and
XMLHTTP,...
Membuat chart dengan Codeigniter dan
php libchart
Ketika kita membuat sebuah laporan
maka...
Blueprint – CSS Framework
Blueprint Css adalah sebuah...
Buku Codeigniter Gratis
Codeigniter merupakan salah satu...
Google+ Followers
Ekalaya Manullang
64 memiliki saya di lingkaran Lihat semua
2 lingkaran
About Me
Ekalaya Manullang
2 lingkaran 64
Lihat profil lengkapku
Follow by Email
Search this site...
Email address... Submit
Razor.
2. Siapkan Twitter Bootstrap
Anda dapat mengunduh Twitter Boostrap pada link berikut http://getbootstrap.com/2.3.2/
atau pada link https://www.twitterbootstrapmvc.com/
a. Setelah anda unduh ekstrak file bootstrap.zip
b. Struktur file pada folder bootstrap sebagai berikut:
Folder js :
bootstrap.js
bootstrap.min.js
Folder css :
bootstrap.css
bootstrap.min.css
bootstrap.responsive.css
bootstrap‐responsive.min.css
Folder img :
glyphicons‐halflings.png
^
glyphicons‐Halflings‐white.png
3. Tambahkan Folder Bootstrap pada project MvcBoostrap divisual studio.
Buat sebuah folder "bootstrap" di bawah folder Scripts dalam template project dan menambahkan
file JavaScript yang disebutkan di atas dalam folder.
Buat sebuah folder bernama "bootstrap" di bawah folder Content dalam template project dan buat
dua sub‐folder bernama "css" dan "img" di bawahnya. Tambahkan file css di folder css dan file .png
di folder img.
4. Edit file _Layout.cshtml.
Buka _Layout.cshtml dan edit script nya seperti gambar dibawah.
5. Edit File Site.css
Buka Site.css dan edit script nya seperti gambar dibawah.
6. Edit File Index.cshtml dan About.cshtml
Buka Index.cshtml dan About.cshtml kemudian edit script nya seperti gambar dibawah.
‐ Index.cshtml
‐ About.cshtml
Finish...
Hanya dengan waktu hampir 25 menit anda sudah bisa membuat UI cukup bagus dengan tampilan
profesional untuk aplikasi web yang dibangun dengan ASP.NET MVC 3...
Selamat Mencoba..
^____^
Terima Kasih Telah Berkunjung Di Blog Ekalaya Manullang
Dilarang Mengcopy‐Paste seluruh atau sebagian artikel di atas dalam bentuk apapun.
Hak cipta sepenuhnya dipegang oleh Ekalaya Manullang dan dilindungi oleh Digital
Millennium Copyright Act (DMCA). Tindakan Copy‐Paste bisa secara otomatis membuat
blog/website Anda TERHAPUS DARI INDEX GOOGLE.
Suka artikel ini? Bagikan : Facebook Twitter Google+ Linkedin Technorati Digg
Artikel Terkait :
.NET
Labe l : .NET, ASP.NET, MVC 3, web design
Reaksi: lucu (0) menarik (0) keren (0)
Keluar
Beri tahu saya
Masukkan komentar Anda...
Beri komentar sebagai: Ekalaya Manullang (Google)
Publikasikan
Pratinjau
Copyright © 2014 Ekalaya Manullang | Powered by Blogger
+1 Rekomendasikan ini di Google
0 K O M E N T A R :
L I N K K E P O S T I N G I N I