Twitter Bootstrap Pages

Twitter Bootstrap 20 Static Content Pages developed for a Greenfield project

I designed 20 static pages in MVC3 using HTML, Twitter Bootstrap CSS, JQuery. The gradient color combination and the entire flow looks like the site: 

1. http://www.microsoft.com/expression

2. http://demos.kendoui.com/web/datasource/remote-data.html

Add Article

I designed this page using twitter bootstrap css.

Add Note

When the 'Add Note' button is clicked a modal dialog appears where you can add data.

Add Profile

In this page I added 3 information widgets and a ListView with gradient background.

Add Service

In this page when 'Add Service' button is clicked, a modal dialog appears where you can add data. This data will be stored in SQL Server.

Add User

This page is designed to add details of the new users. The dropdown list and textboxes are designed to give a professional look.

Blog Details

This page is designed to display the details of the article. Here rich textbox is added where you can style your text. Also I added a Info widget on this page.

Blog Main

This page is designed blog summary in a table.

Contact Us

Manger Users

Twitter Bootstrap JQuery datatable added on this page with table paging, Add User and Search buttons.

Modal Generic Document Viewer 1

This page has a button which when clicked opens a modal dialog with image slideshow

Modal Generic Document Viewer 2

Image slide show in modal dialog. There are 4 buttons at the bottom for Downloading the image, Slideshow of all the images, display next image and previous image.

My Notifications

Here twitter bootstrap jquery datatable is used with pagination.

Partner Registration

This page displays textboxes, dropdown lists with Info widgets. I designed this page keeping in mind that the look and feel and the flow of the entire project should be same.

Profile Details

In this page the critical part was to create a list view similar to http://demos.kendoui.com/web/datasource/remote-data.html

Here the ListView should be with pagination instead of scrolling. I used JQuery for pagination of ListView.

Report

This page is designed with Info widgets and alerts using twitter bootstrap css.

Search

Simple search page with professional look and feel.

Search Result

In this page ListView with gradient background color is created. This ListView is with pagination and a search button.

Service Reports

This page contains an Info widget and a simple JQuery datatable with pagination

Update Service

For the page the requirement was that the textarea for 'Peer Note' should be re-sizable with fixed width and resize height. Usually when we expand a textarea the width and height both increase/decrease. I used CSS style to fix the width and resize the height of the textarea

Add Parcel

A simple page with professional look and feel and gradient color combination look like the site http://www.microsoft.com/expression/

Edit Profile

The color combination and the flow of  the page look like the site http://www.microsoft.com/expression/