Embed Size (px)
Citation preview
Visit: www.Intertech.com/Blog
Adopting Twitter Bootstrap In MVC Twitter bootstrap is a sleek, intuitive framework for rapid development of responsive user interfaces using
basic HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other
interface components as well as JavaScript extensions.
One visible advantage of using bootstrap over the default ASP.Net MVC templates is the ability to extend and
change. This becomes obvious as we will discover a host of themes built on the basic HTML and CSS classes
given by bootstrap.
Consultants Who Teach
2
Adopting Bootstrap in ASP.NET MVC 4 application It is relatively easy to adopt bootstrap packages even using a base MVC 4 application, steps to do are listed
below:
Open Visual Studio 2012, and create a (Empty) MVC application as shown below:
Download the bootstrap package from web - http://twitter.github.io/bootstrap/. Copy the downloaded
files to Contents folder in the project root.
Consultants Who Teach
3
Add the _ViewStart.cshtml and _Layout.cshtml views (In Add view dialog, choose option to create as
partial view) to the views folder as shown below:
In _ViewStart.cshml. add reference to the _layout.cshtml as shown below:
1
2
3
@{
Layout = "~/Views/Shared/_layout.cshtml";
}
Consultants Who Teach
4
Add the responsive bootstrap template to the _layout.cshtml as listed below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="content/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="content/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Consultants Who Teach
5
Adding the Navbar, Body and Footer. This largely depends upon the page layout needed to achieve, the
getting started lists some basic templates such as – Starter, Marketing, Fluid, Narrow Marketing, Justified
Nav, Sign-in Sticky footer and carousel jumbotron templates. Feel free to use view source and adopt the
content to render the views. Though the base layout is driven using a shared layout view, the main
content can be rendered using the @RenderBody() helper of MVC, sample for which is displayed below:
1
2
3
4
5
6
7
8
9
10
11
<!-- Main Content -->
<div class="container-fluid">
<div class="row-fluid">
@RenderBody()
</div>
<!-- Footer Content -->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
Adopting Bootstrap in MVC 4 using Nuget Packages There are multiple options (Nuget packages), that will allow adopting bootstrap frameworks in MVC projects.
Let us examine one such package promoted by Eric Hexter, author of the book – MVC 2/3/4 in action and a
Microsoft MVP among many other notable works.
Links and Resources
Nuget Package Home
http://nuget.org/packages/twitter.bootstrap.mvc4
Project Blog
http://lostechies.com/erichexter/2012/11/20/twitter-bootstrap-mvc4-the-template-nuget-package-for-asp-net-
mvc4-projects/
Consultants Who Teach
6
In short, here are the steps to install the base package
Steps to Install: 1. Create an empty ASP.NET MVC 4 application.
2. Right-click on the solution and select Manage Nuget packages.
3. Search for Twitter.Bootstrap.MVC4.
4. Click install.
5. In order to set up a set of sample web pages please look for and install a package
Twitter.Bootstrap.MVC4.sample.
That’s it!
Adopting Custom themes Built with Bootstrap: Most of the custom themes built with bootstrap will have a similar package structure as that of Bootstrap and
will look to extend the existing capabilities of bootstrap. There are many sample templates available
at Wrapbootstrap or create your own at Getbootstrap for free.
