Bootstrap Development

Bootstrap provides an extremely powerful set of HTML and CSS templates that makes it almost trivial to create fluid and adaptive Web user interfaces that look great on any device. Bootstrap also promotes cross-browser compatibility, so you can focus on the UI and leave Bootstrap worry about browser nuances.

Duration

2 days

 

Prerequisites

  • Familiarity with HTML and JavaScript programming

What you'll learn

  • How to use the Bootstrap grid system
  • Using Bootstrap CSS techniques
  • Creating adaptive HTML content
  • Bootstrap best practices

Course details

Introduction to Bootstrap

  • Goals of Bootstrap
  • How to get Bootstrap
  • Overview of how to use Bootstrap in a Web app

The Bootstrap Grid System

  • Overview of grids in Bootstrap
  • The role of media queries
  • Grid options
  • Recommendations for different types of device
  • Column techniques

CSS Techniques

  • HTML5 doctype and viewport meta tags
  • Containers
  • Responsive images
  • Normalization

Typography

  • Headings
  • Inline headings
  • Emphasis
  • Abbreviations
  • Lists
  • Additional techniques

Tables

  • Displaying basic tables
  • Striped tables
  • Hover tables
  • Condensed tables
  • Contextual tables
  • Responsive tables
  • Additional techniques

Forms

  • Overview
  • Vertical forms
  • Inline forms
  • Horizontal forms
  • Form input controls
  • Form control states
  • Panels

Additional UI Techniques

  • Labels
  • Badges
  • Buttons and button groups
  • Dropdowns
  • Button dropdowns
  • Images and thumbnails
  • Alerts
  • Progress bars
  • Input groups
  • List groups

Navigation

  • Tabular navigation
  • Tabs
  • Pills
  • Dropdowns
  • Navbar
  • Breadcrumbs

Additional Techniques

  • Helpers
  • Responsive utilities
  • Glyphicons
  • Pagination
  • Media objects
  • Using the modal plugin