What is Twitter Bootstrap (TB) ?
the characteristics of the device used (PC, tablet, mobile phone)
![]()
How to Download Twitter Bootstrap ?
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
<head>
headerh1, #headerh1
#logindisplay
_Layout.cshtml (complete code)
Let's Modify Home Page
Index.cshtml (complete code)
Let's Modify About Page
![]()
![]()
Happy Coding.
How to Improve jQuery Selector Performance ?
How to Enable jQuery Intellisense in Visual Studio 2010 ?
- TB is a Free (open source) collection of tools for creating web applications
- It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components
- As well as optional JavaScript extensions
- TB has supported for HTML5 and CSS 3
- It is compatible with all major browsers
- It also supports Responsive Design
the characteristics of the device used (PC, tablet, mobile phone)
- You can Download Twitter Bootstrap Here
Step 1 :
Step 2 :
- After unzip the content,You will have below mentioned folders
- CSS folder's content is as below
- IMG folder's content is as below
- JS folder's content is as below
How to create Asp.Net MVC 3 project using Visual Studio 2010 ?
Step 1 : Click, File ==> New Project
Step 2 : Select, Internet Application Template
Step 3 : MVC 3 Internet Application Template generated Solution Explore is as below
How to add Twitter Bootstrap UI Framework for Asp.Net MVC 3 project ?
css and img :
- Create a folder named "bootstrap" under the Content folder
- Create 2 sub-folders named "css" and "img" under that
- Add the .css files into css folder and .png files into img folder
Note:The framework assumes that the .png images are located under a folder
named "img" under the parent folder of the folder in which the .css files are located
named "img" under the parent folder of the folder in which the .css files are located
scripts :
- Create a folder named "bootstrap" under the Scripts folder
- Add the bootstrap javaScript files into it
After that solution explore looks like below
Let's try to add Bootstrap effects into our Asp.net MVC project
How to Add the Bootstrap CSS ?
- Open the _Layout.cshtml page
- Add the following 2 lines in the head tag at the end of its existing content
- You don't need to remove any of its existing content
- You need to make sure that bootstrap-responsive.min.css appears after the bootstrap.min.css
<head>
<linkhref="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")"
rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")"
rel="stylesheet"type="text/css"/>
</head>
How to Add Bootstrap JavaScript ?
- It is a good practice to add the JavaScript files at the end of the page content
- Add the following line at the end of the _Layout.cshtml file before ending the body tag
<scriptsrc="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")"
type="text/javascript"></script>
Let's add some Twitter Bootstrap css styles for our Asp.Net MVC UIs
Site.css
- Open the Site.css file
- Look for the "header h1, #header h1" styled item
- Replace it with the following code block
headerh1, #headerh1
{
font-weight: normal;
padding: 5px0;
margin: 0;
color: #5c87b2;
border: none;
line-height: 2em;
font-size: 20px!important;
text-shadow: 1px1px1px#111;
}
- Look for #logindisplay, #logindisplay a:link, #logindisplay a:visited and #logindisplay a:hover styled items
- Change the color property to #555 instead of white
- Replace it with following code block
{
font-size: 1.1em;
display: block;
text-align: right;
margin: 10px;
color: #555;
}
#logindisplaya:link
{
color: #555;
text-decoration: underline;
}
#logindisplaya:visited
{
color: #555;
text-decoration: underline;
}
#logindisplaya:hover
{
color: #555;
text-decoration: none;
}
Let's Modify Body
- Open _Layout.cshtml page
- Replace it with following code block
_Layout.cshtml (complete code)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>@ViewBag.Title</title>
<linkhref="@Url.Content("~/Content/Site.css")"rel="stylesheet"
type="text/css"/>
<linkhref="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")"
rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")"
rel="stylesheet"type="text/css"/>
</head>
<body>
<divclass="container-fluid">
<divid="header"class="row-fluid">
<divid="title">
<h1>
My MVC Application</h1>
</div>
<divid="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
</div>
<divid=""class="row-fluid">
<divclass="navbar">
<divclass="navbar-inner">
<divclass="container-fluid">
<divclass="nav-collapse">
<ulclass="nav">
<liclass="@(ViewBag.Active == "Home" ? "active" : "")">
@Html.ActionLink("Home", "Index", "Home")
</li>
<liclass="divider-vertical"></li>
<liclass="@(ViewBag.Active == "About" ? "active" : "")">
@Html.ActionLink("About", "About", "Home")
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<divid=""class="row-fluid">
@RenderBody()
</div>
<divid="footer"class="row-fluid">
</div>
</div>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<scriptsrc="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")"
type="text/javascript"></script>
</body>
</html>
- Open Index.cshtml page
- Replace it with following code block
Index.cshtml (complete code)
@{
ViewBag.Title = "Home Page";
ViewBag.Active = "Home";
}
<divclass="hero-unit">
<h2>@ViewBag.Message</h2>
<p>
This is a template to demonstrate the way to beautify the default
MVC3 template using Twitter Bootstrap website. It is pretty
simple and easy.
</p>
MVC3 template using Twitter Bootstrap website. It is pretty
simple and easy.
</p>
<p>
<ahref="http://asp.net/mvc"class="btn btn-primary btn-large"
style="color: White;">
style="color: White;">
To learn more about ASP.NET MVC visit »</a>
</p>
</p>
</div>
- Open About.cshtml page
- Replace it with following code block
About.cshtml (complete code)
@{
ViewBag.Title = "About Us";
ViewBag.Active = "About";
}
<div class="row-fluid">
<div class="span4">
<h2>
About 1</h2>
<p>
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
</p>
<p>
<a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>
About 2</h2>
<p>
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
</p>
<p>
<a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>
About 3</h2>
<p>
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
<p>
<a class="btn" href="#">View details »</a></p>
</div>
</div>
That's it.You're done.
- Now the Asp.net MVC 3 project with Twitter BootstrapTemplate should look like below
Home page (portion)
About page (portion)
Do you need to Download This Sample Project ?
Do you need to dive deep ends of Twitter Bootstrap ?
- Getting Started - Home
- Themes & Templates
- Bootswatch
- Twitter Bootstrap Tutorials
- Stackoverflow
- The Official Bootstrap Blog
Conclusion
- Bootstrap is a Toolkit from Twitter designed to kick-start development of web-apps and sites
- You can design highly professional and more sophisticated web sites with minimum effort by using Bootstrap
- It is Tested and supported in the major modern browsers, such as the Latest versions of Safari, Google Chrome, Firefox 5+, and Internet Explorer 7+
- With Bootstrap2.0 and later,Mobile browsers are also supported
- So Try to use TB with your web projects and Enjoy it
I hope this helps to You.Comments and feedback greatly appreciated.
Happy Coding.
May Be Useful for You
How to Improve jQuery Selector Performance ?
How to Enable jQuery Intellisense in Visual Studio 2010 ?