Introduction
Recently, I worked on a web application that would be used by teenagers and one
of the requirements is for the user interface to beautiful. Prior to that time,
I had fallen in love with the new twitter UI, the way the textboxes and buttons
are
usually styled. Thus, I thought it would be cool if the intended application’s
interface elements or controls have twitter like look too. The result of my
googling is twitter bootstrap framework.
Setting up your project to use twitter bootstrap
You can make your web application user interface very beautiful and
aesthetically pleasing to the eyes with twitter bootstrap framework.
It is
lightweight and easy to use both in asp.net webform and mvc applications and it
gives a web application a consistent look on pc, phones and tablets. Setting up a web
project in visual studio
to use twitter bootstrap is quite easy, after downloading the
framework from twitter.github.com/bootstrap,
extract it into
a folder, copy the folder structure as it is into your existing web project the
folders have the names js, css and img respectively, do not alter the folder
names, otherwise some components of the framework might not work properly.
With that setup, you can create an asp.net web form page that
will contain two textboxes. To use the framewok to style controls in a page,
you
need to add reference to
the css files in the asp.net web page.
During development
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
And during production, the minified version of the file would be
referenced
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
Adding reference to the css files would expose a lot of css style attributes
that can be used to style a lot of web elements or controls, even a gridview
can
be styled to give it a nice look. To demonstrate this you can add two server
textboxes
control to the webpage with their CssClass attribute set to "input-medium"
and a button with CssClass attribute set to "btn btn-primary" run the
application you should see a web page with the controls beautifully styled.