05.BeginnerBootstrapGrid - ics-software
Transcript 05.BeginnerBootstrapGrid - ics-software
User Interface Frameworks:
Twitter Bootstrap 3.0
Collaborative Software Development Laboratory
Information and Computer Sciences
University of Hawaii
Honolulu HI 96822
Learn basic concepts of web UI with the Twitter
Bootstrap 3.0 framework
• Twitter Bootstrap 2.0 has many web-based
• Twitter Bootstrap 3.09 was just released, and
is significantly changed from 2.0.
Be careful when googling about Twitter
Bootstrap: most results (outside of official
documentation) do not refer to Version 3.0!
What is a (web) UI Framework?
A (web) UI framework provides a set of CSS
• Simplify the development of layout
• Provide an attractive look-and-feel
• Provide consistent results across browsers.
In contrast, a "web development framework"
provides support for interaction.
Example UI Frameworks
Why choose Bootstrap?
It's a very popular, well designed, open source UI
• modal windows, typeahead, tooltips, etc.
• Bootstrap 3.0 is in the vanguard of responsive,
mobile-first UI design frameworks
Why "responsive" UI design?
There are currently three types of "hosts" for modern
-operating system irrelevant (use browser)
-normal size screens (~1280 pixels wide)
-large screens (~2500+ pixels wide)
-Two operating systems (iOS, Android)
-typical size screens (~768 pixels wide)
-Three operating systems (iOS, Android, Windows)
-small screen sizes (480 – 640 pixels wide)
Why responsive UI design?
Solution 1: Code four "native" applications:
• HTML, iOS, Android, Windows
• That's a lot of work!
Solution 2: Code one HTML application that
presents different UIs depending upon the
• One "look" when in the browser on laptop
• Another "look" when in the browser on tablet
• A third "look" when in the browser on phone
Example : Disney.com
Why create a "native" application?
Take advantage of a "native" feature
• Plugin to Siri for voice-controlled interaction
Otherwise, responsive web design is the fastest
path to an application that works well on
laptops, tablets, and phones regardless of OS.
What is "mobile first"?
Twitter Bootstrap is "mobile first", which means
that no special coding is required to reformat
the UI for mobile screen sizes.
If desired, you can alter Bootstrap's default
approach to mobile display.
This is unlike other frameworks, where mobile
is a "special case" and requires lots of
Watch the tutorials.
Do the practice WODS.