bootstrap how it can help you build better websites
TRANSCRIPT
What is a (web) UI Framework?
A (web) UI framework provides a set of CSS classes and/or Javascript functions that:• Simplify the development of layout• Provide an attractive look-and-feel• Provide consistent results across browsers.
What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
So, what is responsive design?
Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
How can we better serve our increasingly mobile users?
Design: Build responsiveness into your websites and applications
Content: Think about content from a mobile first perspective
There are currently three types of "hosts" for modern Internet applications:› Laptops
operating system irrelevant (use browser) normal size screens (~1280 pixels wide) large screens (~2500+ pixels wide)
› Tablets Two operating systems (iOS, Android) typical size screens (~768 pixels wide)
› Phones Three operating systems (iOS, Android,
Windows) small screen sizes (480 – 640 pixels wide)
Content: Think about content from a mobile first perspective
A responsive website does not make responsive content
Curate your content down to its essential points
Consider the needs of the mobile user first
Advantages of Bootstrap
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
EXAMPLEResponsive Non Responsive
http://www.disney.my/ http://www.tnb.com.my/
Create the Bootstrap Website
Create your beginning project HTML5 code
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element
Example Stacked-to-horizontal Mobile and desktop Mobile, tablet, desktop Column wrapping
http://getbootstrap.com/css/#grid-example-basic
Naming Source /Quote
Address
http://www.w3schools.com/bootstrap/bootstrap_typography.asp
http://getbootstrap.com/css/#type
Contextual Classes
Responsive Table
http://www.w3schools.com/bootstrap/bootstrap_tables.asp
http://getbootstrap.com/css/#tables
Others component visit :
http://getbootstrap.com/&
http://www.w3schools.com/bootstrap/default.asp