TechBubbles Microsoft Technology BLOG

Bootstrap components for building responsive UI

Visual Studio 2013 automatically uses the boot strap as default template. How to customize the template generation. This applies for MVC developers and Web form developers. Boot strap is open source and it is just html, java script and css.

Bootstrap is the most popular HTML, CSS and JS Framework for developing responsive, mobile first projects on the web.

Solves basic tasks example – page layouts without tables.

Bootstrap Features

· Theme Support

· Responsive – as you resize in browser it automatically scales to the size.

Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops.

· Grid

· Components

-Pagination

-Buttons

· -Modal

· Great Visual Studio support

Bootstrap in ASP.NET templates

Bootstrap is built in ASP.NET template when you create a new web application project in VS 2013.

clip_image002

Styles.Render and Scripts. Render actually loads the bootstrap css and javascript files in to your application.

clip_image004

Themes can be downloaded from here. Just download bootstrap.min.css file and replace the existing one then you will notice the difference in look and feel.

Bootstrap Components

The idea of components is to build all those little widgets in to your site. Components are reusable and they built to provide iconography, dropdowns, input groups, navigation and alerts. Generally components are look good, themeable and these are replacement for HTML server controls.

This post outlines the available objects and how to use them to create pages.

Grouping

· Jumbo tran

· Labels

· Panels

Jumbo tran – The following high-lighted section is called Jumbo tran.

clip_image006

Labels – example labels are shown below

clip_image007

Panels are way of grouping things together so it looks as below

clip_image008

You can install Bootstrap snippet pack for web development if you want to use bootstrap framework. This can be downloaded from here. Once you installed then you can use it in Visual Studio editor as below

clip_image009

Objects

· Glyphicons

· Dropdowns

· Buttons

Glyphicons are very simple to use and are scalable as shown in the following picture

clip_image011

Buttons and Drop downs

You can use btn css class for to make something look like button and btn-modifier to change the look

clip_image012

About the author

Kalyan Bandarupalli

My name is kalyan, I am a software architect and builds the applications using Microsoft .NET technologies. Here I am trying to share what I feel and what I think with whoever comes along wandering to Internet home of mine.I hope that this page and its contents will speak for me and that is the reason I am not going to say anything specially about my self here.

Add Comment

TechBubbles Microsoft Technology BLOG

Follow me

Archives

Tag Cloud