responsive web-design through bootstrap

RESONSIVE DESIGN with

BOOTSTRAP

ZUNAIR ZAKIR

Presented By

& TAHA SHAHID

INTRODUCTION• Bootstrap is an Open-Source front-end Frame-work.

• Bootstrap 3.1.1 is the current version of bootstrap

• It is for creating responsive websites and web applications.

• It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

• It is the No.1 project on Github with 65,000+ stars and 23,800 forks (as of March 2014)(http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)).

• Bootstrap Official Address (http://getbootstrap.com/ ).

What’s new in Bootstrap 3.1.1 ?

Mobile-first approach

Single (responsive) grid system

Dropping support for IE7 and FF 3.6

Now supporting IE8 and higher

Font icons

What is Responsive Design ?

The design that works properly on any resolution .

It majorly concerns with standard devices resolutions.

User friendly approach.

Bootstrap standard devices resolution?

Extra small devices i.e Phones (<768px),Symbol (-xs-),column width(Auto).

Small devices i.e Tablets (≥768px),Symbol (-sm-),column

width(60px). Medium devices i.e Desktop (≥992px),Symbol (-md-),column

width(78px). Large devices i.e Desktop (≥1200px),Symbol (-lg-),column

width(95px).

What is the most important thing to understand in Bootstrap?

Grid System Bootstrap includes a responsive, mobile first fluid grid system that

appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any -md- class to an element will not only affect its styling on medium devices but also on large devices if a  -lg- class is not present.

Bootstrap Grid System Example :

Bootstrap Glyphicons :

These are SVG , scalable vectors graphics .

Around 200 icons are available for free with bootstrap.

How to use For performance reasons, all icons require a base class and

individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

<div> <span class="glyphicon glyphicon-search"></span> </div>

For more Bootstrap Glyph-icons, visit : http://getbootstrap.com/components/#glyphicons

Bootstrap other components : Dropdown

Button Group

Navigations

Pagination

Thumbnails

Alerts

Progress Bars

Panels … etc.

for all components visit(http://getbootstrap.com/components/)

Bootstrap CSS:

Tables

Forms

Buttons

Images

Helper Classes .. etc.

for more (http://getbootstrap.com/css/).

Bootstrap JavaScript:

Bootstrap all JavaScript components require jQuery. These are :

Modals

Dropdown

Popover

Alert

Collapse

Carousal

Tool tip .. etc.

for more visit (http://getbootstrap.com/javascript/).

Starting Demo ..

CONTACT INFORMATION:

ZUNAIR ZAKIR• 0313-7194488• zunair_zakir@yahoo.com

TAHA SHAHID• 03332577562• m.tahashahid@yahoo.com

THANK YOU