bootstrap how it can help you build better websites

36
NURZAIDAH BINTI ZAHARI

Upload: aidan-technologies-sdn-bhd

Post on 09-Aug-2015

32 views

Category:

Technology


1 download

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/

Where to Get Bootstrap?

http://getbootstrap.com

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.