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