7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 1/39

KSSubbaRaj

Responsive Designand Twitter Bootstrap

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 2/39

IntroductionsWho are we?

What do you do?

What do you want  to do?

What tools or areas of webdesign interest you ost?

!bout the class "#

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 3/39

Design

What is it?

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 4/39

$oncepts

Responsive Design

%raewor&s

'pen Source

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 5/39

Design is a process fordevelopingsolutions that

eectivelyintegrate task,

context of use

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 6/39

State of Today(s Web

Source)

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 7/39

Source) http

)**www#coscore#co*Insights*+ress,Releases*-./0*1*coScore,Reports,%ebruary,-./0 ,2#S#,Sartphone,Subscriber,3ar&et,Share

4/5 of 2S

obile phones

are

sartphones

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 8/39

6!nyone who slaps a 7This page

is best viewed with browser 8(label on a web page appears tobe yearning for the bad old

days9 before the web9 when youhad very little chance of readinga docuent written on another

coputer9 another wordprocessor9 or another networ&#:

 Ti Berners;<ee in Technology Review9 =uly />>

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 9/39

!n approach to web design thatprovides an optial viewing

e@perience across a wide range

of devices#

What is Responsive

Web Design?

http)**www#alistapart#co*articles*responsive;web;design*

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 10/39

http)**www#aboo&apart#co*products*responsive;web;design

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 11/39

Aleents of RWD

%luid Crid

Resiable Iages3edia Eueries

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 12/39

Crids

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 13/39

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 14/39

Grids *

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 15/39

  A  @  a     p l  e  b  a  s  e  d  o  n  %  o  u  n  d  a  t i  o  n   F  u  r  b  %  r  a     e   w  o  r  & G  h  t  t  p )  *  *  f  o  u  n  d  a  t i  o  n #  D  u  r  b #  c  o    H #   !  /  -  c  o l  u     n  g  r i  d  s  y  s  t  e   

ow do grid systes

wor&?

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 16/39

Resiable Iagesimg {

max-width: 100%;height: auto;}

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 17/39

3edia Eueries

•  ! $SS0 odule that renders

web pages based onconditions such as screenresolution

•

 Drafted in -../ by the W0$•  Becae a recoendedstandard in =une -./-

Source) Wi&ipedia#org

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 18/39

$oon

Brea&points<abel <ayout Width

Sartphones 1J.p@ and below

+ortrait Tables 1J.p@ to Jp@

<andscape Tablets Jp@ to >1.p@

Default >1.p@ and up

<arge Screens /-/.p@ and up

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 19/39

!dvantages L Disadvantages

!dvantages Disadvantages

2ser A@perience G28H 2ser A@perience*<oad Tie

!nalytics Mo lin&ing

Sharing*<in&ing SA'

SA' Developent

Developent Design

3aintenance

Source) http)**www#seoo#org*

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 20/39

%raewor&s

+roject reNuireents deterine thefraewor&

%luid Crid Syste

Responsiveness a plus

'Oer ore than just a grid Gpre;dePnedstyles for typography9 tables9 buttons9navigation9 fors eleents9 etc#H

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 21/39

%raewor&s

Creat docuentation

3aintained regularly by the counity orcreator

'pen Source GfreeH

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 22/39

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 23/39

What

http)**twitter#github#co*bootstrap*

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 24/39

 ! freely available design

fraewor& for websites andweb applications

 Based upon T3<49 $SSand =avaScript

Supports all ajor browsers

 Twitter Bootstrap

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 25/39

$reated By

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 26/39

WhyReason /) Rich %eatures

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 27/39

WhyReason -)+opularity

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 28/39

!lso 3SIA and

'pera

WhyReason 0) Browser Support

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 29/39

WhyReason 1) Clyph Icon Set

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 30/39

>. Crid Syste http)**>.#gs*

Blue +rint $SS http)**www#blueprintcss#org*

Colden Crid Syste http)**goldengridsyste#co*

WhyReason 4) Crid Syste

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 31/39

Buttons)

 Tabs)

Breadcrub) +agination)

!lerts)

+rogress bar)

WhyReason ) $oponents

Wh

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 32/39

WhyReason ) =avascript*jEuery

Wh

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 33/39

WhyReason J) $ustoiation

Wh

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 34/39

WhyReason >) <ive 3oc&;2ps

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 35/39

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 36/39

/# Download Bootstrap andinline te@t editor

-# Install te@t editor

0# A@tract the bootstrap Plesin to your project folder

1# Download e@aple htl

ow

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 37/39

Do websites

need to loo&e@actly the sae

in every

browser?http)**dowebsitesneedtoloo&e@actlythesaeineverybrowser#co*

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 38/39

Resources

http)**bootswatch#co*

Th & Q

7/17/2019 Bootstrap Framework

http://slidepdf.com/reader/full/bootstrap-framework 39/39

 Than&sQ

Kathy A Cill

&egill

Slideshare#net*&egill

$reative $oons <icense * share;and;shareali&e * attribution * non;coercial