O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Bootstrap V2

Video Description

In this Bootstrap 2 training course, expert Craig Campbell introduces you to this popular toolkit developed by Twitter. Bootstrap is a set of CSS, JavaScript and graphic components that are designed to make user interface development for websites faster and easier. To get the most out of this tutorial you should already have a fundamental understanding of HTML, CSS and JavaScript.
Craig starts by showing you how to download and setup Bootstrap on your system. You will explore how to utilize major functions of Bootstrap such as the grid system, responsive design features, as well as creating NavBars and footers. Throughout the course you will follow along with the author as he creates a real functional website. You will learn how to create hero units, tabbed content, an image carousel, and modal popups, and how to apply Bootstrap functions to forms. The author has included his source files so you can follow along step by step and re-create the results of each lesson on your own.
Once you have completed this video based tutorial for Twitter Bootstrap 2, you will have an solid understanding of this framework, and you will be able to apply this knowledge to your own web development projects.

Table of Contents

  1. Introduction
    1. Introduction To Bootstrap 00:02:07
    2. What To Expect 00:01:22
  2. Setting Up Bootstrap
    1. Examining The Framework Files 00:03:29
    2. Documentation Overview 00:04:18
  3. The Grid System
    1. Using Containers 00:08:08
    2. Default Grid 00:03:42
    3. Coding Columns In HTML 00:11:57
    4. Column Offsets 00:04:36
    5. Using Nested Columns 00:04:50
    6. Using The Fluid Grid 00:06:59
    7. Exercise - Using Templates 00:02:05
  4. Responsive Bootstrap
    1. Responsive Features 00:02:58
    2. Enabling Responsive Features 00:05:50
    3. Responsive Utility Classes 00:05:43
  5. Site Structure
    1. Building A NavBar 00:08:33
    2. Using Icon Glyphs 00:03:55
    3. Fixing The NavBar To The Top Of The Browser 00:04:28
    4. NavBar Dropdowns 00:06:19
    5. Building The Footer 00:08:20
    6. Exercise - Building Navigations 00:02:43
  6. The Blog Page
    1. Text Styles 00:07:18
    2. Image Styles 00:03:25
    3. Media Objects For Comments 00:04:57
    4. Breadcrumbs 00:03:27
    5. Pagination 00:04:37
  7. The About Page
    1. Building A Hero Unit 00:07:16
    2. Styling The Hero Unit 00:04:40
    3. Styling The Featured Icons 00:10:54
    4. Tabbed Content 00:08:51
    5. Exercise - Tab Options 00:03:10
  8. The Home Page
    1. Image Carousel 00:07:13
    2. Carousel Navigation 00:07:25
    3. Modal Popups 00:07:46
    4. Thumbnails 00:07:49
    5. Modal Lightbox - Part 1 00:06:13
    6. Modal Lightbox - Part 2 00:08:46
  9. The Contact Page
    1. Using Forms 00:03:48
    2. Inline Forms 00:05:40
    3. Horizontal Forms 00:06:19
    4. Prepended And Appended Inputs 00:05:57
    5. Appending Buttons 00:01:56
    6. Validation States 00:03:30
    7. Alerts 00:03:49
    8. Button Options 00:03:31
    9. Exercise - Progress Bars 00:01:22
  10. About The Author
    1. About The Author 00:00:40