Training

 

 

Popular Courses

Browse Our Free Resources

  • whitepapers
  • whitepapers
  • webinars
  • blogs

Our Locations

Training Centres

Vancouver, BC
Calgary, AB
Edmonton, AB
Toronto, ON
Ottawa, ON
Montreal, QC
Hunt Valley
Columbia

locations map

Calgary

550 6th Av SW
Suite 475
Calgary, AB
T2P 0S2

Toronto

821A Bloor Street West
Toronto, ON
M6G 1M1

Vancouver

409 Granville St
Suite 902
Vancouver, BC
V6C 1T2

U.S. Office

436 York Road
Suite 1
Jenkintown, PA
19046

Other Locations

Dallas, TX
Miami, FL

Home > Training > Mobile Web Development > Responsive (Mobile) Web Design with Bootstrap Training

Responsive (Mobile) Web Design with Bootstrap Training

Course#: WA2350

This 1 day class introduces students to responsive web design for desktop using Bootstrap. Students will begin by learning some of the fundamental technologies upon which Bootstrap is built like CSS Media queries and LESS. Students will progress to using Bootstrap to build simple and then more complex web sites.

Audience

Web developers and mobile web developers

Prerequisites

Some knowledge of HTML and CSS

Duration

1 day

Outline of WA2350 Responsive (Mobile) Web Design with Bootstrap Training

Chapter 1. Bootstrap Overview

  • What is Bootstrap
  • Keywords from bower.js
  • Bootstrap History
  • Responsive Web Development
  • Responsive Grid Layout
  • Reusable GUI Components
  • JavaScript
  • The Mobile First Philosophy
  • Why RWD Matters
  • Responsive Page Views
  • Less
  • Getting Bootstrap
  • Bootstrap Content Development Network
  • Other Setup Options
  • The Bootstrap Core Files
  • To Min or Not to Min
  • Summary

Chapter 2. Getting Started with Bootstrap

  • Bootstrap Basic Page Template
  • The Viewport Meta Tag
  • The user-scalable Property
  • Including Bootstrap JavaScript Files
  • Plugin Dependencies
  • Checking the Needed Version of jQuery
  • Resetting Styles
  • Customizing the CSS Global Settings
  • A Fragment of the scaffolding.less File
  • Bootstrap Components
  • Containers
  • Using Containers
  • Device Sizes
  • The Grid System
  • The Column Arithmetic
  • A Grid Example
  • CSS Media Queries (1 / 2)
  • CSS Media Queries (2 / 2)
  • Customizing Breakpoints
  • Responsive Grid Layout
  • Combining Column Styles
  • Other Column Operations
  • Navigation
  • Navigation (Desktop)
  • Navigation (Mobile)
  • Navigation Source
  • Navigation Explained
  • Navigation Elements and Styles
  • Glyphicons
  • Using
  • Glyphicons
  • Responsive Images
  • Styles for Image Shapes
  • Summary

Chapter 3. Bootstrap Miscellaneous Topics

  • Integrating Bootstrap Components with jQuery
  • Identifying the Required Version of jQuery
  • Minimizing Bootstrap's Download Size
  • Using the Customizer
  • Customizer Page Fragment
  • Compiling and Downloading Customized Bootstrap
  • Customizing Bootstrap Components
  • Light Customizations Steps
  • Summary

Chapter 4. UI Bootstrap Overview

  • What is UI Bootstrap?
  • UI Bootstrap Directives
  • Project Philosophy
  • The Angular UI Bootstrap Modules
  • Getting UI Bootstrap
  • The Direct Download
  • What are the -tpls- Files?
  • Understanding Templates
  • Picking and Choosing Your Modules (1/2)
  • Picking and Choosing Your Modules (2/2)
  • Basic UI Bootstrap HTML Page
  • Referencing Angular UI Bootstrap Modules
  • Adding Component Prefixes in Release 0.14.0
  • Summary

Chapter 5. UI Bootstrap Directives

  • UI Bootstrap Directives
  • Directive Inter-dependencies
  • Where to Get Help
  • Plunker
  • The Alert Directive
  • Carousel
  • Datepicker
  • Dropdown
  • Pagination
  • The Pagination Code
  • Progress Bar
  • Tabs
  • Summary

Lab Exercises

Lab 1. Learning the Lab Environment
Lab 2. Understanding Bootstrap's Grid System
Lab 3. Understanding Bootstrap's Navbar Component
Lab 4. Using jQuery in Bootstrap
Lab 5. Understanding UI Bootstrap Lab Files
Lab 6. Customizing UI Bootstrap Templates
Lab 7. Using UI Bootstrap Directives

We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.
*Your name:

*Your e-mail:

*Phone:

*Company name:

Additional notes:

We have received your message. A sales representative will contact you soon.

Thank you!.

more details
buy this course

Register for a courseware sample

It's simple, and free.

 

Thank You!

You will receive an email shortly containing a link to download the requested sample of the labs for this course.