05.beginnerbootstrapgrid

8/18/2019 05.BeginnerBootstrapGrid

1/11

(1)

User Interface Frameworks:Twitter Bootstrap 3.0

Philip Johnson

olla!orati"e #oftware $e"elopment %a!orator&Information an' ompter #ciences

Uni"ersit& of awaii

onoll I *+,--


2/11

(-)

!/ecti"es

%earn !asic concepts of we! UI with the TwitterBootstrap 3.0 framework

arnin:

•Twitter Bootstrap -.0 has man& we!2!ase'ttorials.

•Twitter Bootstrap 3.0* was /st release' an' issinificantl& chane' from -.0.

Be carefl when oolin a!ot TwitterBootstrap: most reslts (otsi'e of official'ocmentation) 'o not refer to 4ersion 3.05


3/11

(3)

hat is a (we!) UI Framework6

7 (we!) UI framework pro"i'es a set of ##classes an'8or Ja"ascript fnctions that:

•#implif& the 'e"elopment of la&ot

•Pro"i'e an attracti"e look2an'2feel

•Pro"i'e consistent reslts across !rowsers.

In contrast a 9we! 'e"elopment framework9pro"i'es spport for interaction.


4/11


5/11


6/11

(+)

h& 9responsi"e9 UI 'esin6

There are crrentl& three t&pes of 9hosts9 for mo'ernInternet applications:

•%aptops

-operatin s&stem irrele"ant (se !rowser)

-

normal si@e screens (A1-,0 pi


7/11 (C)

h& responsi"e UI 'esin6

#oltion 1: o'e for 9nati"e9 applications:

•T?% i# 7n'roi' in'ows

•That>s a lot of work5

#oltion -: o'e one T?% application thatpresents 'ifferent UIs 'epen'in pon thescreen si@e:

•ne 9look9 when in the !rowser on laptop

•7nother 9look9 when in the !rowser on ta!let

•7 thir' 9look9 when in the !rowser on phone


8/11 (,)

;


9/11 (*)

h& create a 9nati"e9 application6

Take a'"antae of a 9nati"e9 featre

•Plin to #iri for "oice2controlle' interaction

therwise responsi"e we! 'esin is the fastest

path to an application that works well onlaptops ta!lets an' phones rear'less of #.


10/11 (10)

hat is 9mo!ile first96

Twitter Bootstrap is 9mo!ile first9 which meansthat no special co'in is required to reformatthe UI for mo!ile screen si@es.

If 'esire' &o can alter Bootstrap>s 'efaltapproach to mo!ile 'ispla&.

This is nlike other frameworks where mo!ileis a 9special case9 an' reEires lots ofcstomi@ation.


11/11 (11)

e

05.beginnerbootstrapgrid

Documents