Bootstrap training basics tutorial | Bootstrap Essentials

KSSubbaRaj
Compiled By
QATRAININGHUB.COM - Best Software Training InstituteQATRAININGHUB.COM - Best Software Training Institute

FRONT-END MOBILE WEBFRONT-END MOBILE WEB
DEVELOPMENTDEVELOPMENT
Popular Mobile front-end frameworks:
1. Bootstrap
2. Ionic
3. Foundation
4. Semantic UI
5. Pure
6. UIkit

Design

Mobile History

Concepts
Responsive Design
Frameworks
Open Source

Design is a process for developing
solutions that effectively integrate task,
context of use, and “user.”
Responsive web design is to create web
sites which adjust and align themselves
according to what media tool you use for
viewing it. QATRAININGHUB.COM - Best Software Training InstituteQATRAININGHUB.COM - Best Software Training Institute

State of Today’s Web

61% of US mobile
phones are
smartphones

“Anyone who slaps a ‘This page is best
viewed with browser X’ label on a web page
appears to be yearning for the bad old days,
before the web, when you had very little
chance of reading a document written on
another computer, another word processor,
or another network.”
Tim Berners-Lee in Technology Review, July 1996

An approach to web design that provides an
optimal viewing experience across a wide
range of devices.
What is Responsive
Web Design?

Elements of RWD
• Fluid Grid
• Resizable Images
• Media Queries

Grids

ExamplebasedonFoundationZurbFramework(http://foundation.zurb.com).A12columngridsystem
How do grid systems work?

Resizable Images
img {
max-width: 100%;height: auto;}

Media Queries
• A CSS3 module that renders web pages
based on conditions such as screen
resolution
• Drafted in 2001 by the W3C
• Became a recommended standard in
June 2012

Common Breakpoints
Label Layout Width
Smartphones 480px and below
Portrait Tables 480px to 768px
Landscape Tablets 768px to 940px
Default 940px and up
Large Screens 1210px and up

Frameworks
Project requirements determine the framework
Fluid Grid System
Responsiveness a plus
Offer more than just a grid (pre-defined styles for typography,
tables, buttons, navigation, forms elements, etc.)
Great documentation
Maintained regularly by the community or creator
Open Source (free)

What
http://twitter.github.com/bootstrap/

 A freely available design framework for
websites and web applications
 Based upon HTML5, CSS and JavaScript
Released on GitHub in August 2011
Bootstrap

Created By

Why
Reason #1: Rich Features

Why
Reason #2: Popularity

Also MSIE and Opera
Why
Reason #3: Browser Support

Why
Reason #4: Glyph Icon Set

960 Grid System http://960.gs/
Blue Print CSS http://www.blueprintcss.org/
Golden Grid System http://goldengridsystem.com/
Why
Reason #5: Grid System

 Buttons:
Tabs:
Breadcrumb:
Pagination:
Alerts:
Progress bar:
Why
Reason #6: Components

Why
Reason #7: Javascript/jQuery

Why
Reason #8: Customization

Why
Reason #9: Live Mock-Ups

1. Download Bootstrap and inline text
editor
2. Install text editor
3. Extract the bootstrap files in to your
project folder
4. Download example html file and save it
as index.html in the project folder
How

Do websites need to
look exactly the same
in every browser?

Resources
http://bootswatch.com/
For Complete web development
course training : webcourse

Bootstrap training basics tutorial | Bootstrap Essentials

More Related Content

What's hot (20)

Similar to Bootstrap training basics tutorial | Bootstrap Essentials (20)

More from QA TrainingHub (6)

Recently uploaded (20)

Bootstrap training basics tutorial | Bootstrap Essentials

Editor's Notes