NURZAIDAH BINTI ZAHARI
Bootstrap how it can help you build better websites
Aug 09, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
NURZAIDAH BINTI ZAHARI
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.
Example UI Frameworks
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.
Then, why we need a
responsive design?
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
Design: Build responsiveness into your websites and applications
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
Container
Grid System
Grid Classes
Example Stacked-to-horizontal Mobile and desktop Mobile, tablet, desktop Column wrapping
http://getbootstrap.com/css/#grid-example-basic
Bootstrap Element
TypographyTableFormButtonImages
Typography
Heading (<h1>--<h6>)
Example
Create lighter, secondary text for heading (<small>)
Marked text (<mark>)
Alignment classes
Naming Source /Quote
Address
http://www.w3schools.com/bootstrap/bootstrap_typography.asp
http://getbootstrap.com/css/#type
Basic table
Table
Example
Striped Rows
Bordered Table
Contextual Classes
Responsive Table
http://www.w3schools.com/bootstrap/bootstrap_tables.asp
http://getbootstrap.com/css/#tables
Basic form
Form
Example
Inline form
Horizontal form
Validation State
Default button
Options Button
ButtonExample
Sizes
Responsive Images
Image shapes
ImagesExample
Others component visit :
http://getbootstrap.com/&
http://www.w3schools.com/bootstrap/default.asp
Thank You for spending your time with me.
Related Documents
![D4.1-Technical description of the first prototype of the ... · - Twitter Bootstrap Twitter Bootstrap [5] is a free collection of tools for creating websites and web applications](https://static.cupdf.com/doc/110x72/5fbc19809e09c404c41ea10b/d41-technical-description-of-the-first-prototype-of-the-twitter-bootstrap.jpg)
