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 Path: Real-World Bootstrap

Video Description

Quickly prototype front-end applications in style

In Detail

A unique online presence is becoming increasingly important as more developers rely on Bootstrap as the scaffold for their frontend projects. Learn how you can use Bootstrap the right way, reducing page load times and customising functionality on top of the core framework so that you (and your business) can stand out from the crowd.

Prerequisites: Some experience with HTML and CSS syntax

Resources: Code downloads and errata:

  • Rapid Bootstrap

  • Building a Responsive Application with Bootstrap

  • Web Development with AngularJS and Bootstrap

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Rapid Bootstrap (35m)

  • Building a Responsive Application with Bootstrap (3h 10m)

  • Web Development with AngularJS and Bootstrapt (1h 48m)

  • Photo Credit: ©iStockphoto.com/virusowy

    Table of Contents

    1. Chapter 1 : Rapid Bootstrap
      1. Introduction 00:03:00
      2. Integrating a Text Editor 00:06:10
      3. Using the Bootstrap Grid to Set the Layout and Navigation 00:02:50
      4. Custom Webfonts 00:02:41
      5. Adding the Hero Unit 00:03:38
      6. Bootstrap Thumbnails 00:04:29
      7. Adding Custom Color and Style to the Site 00:04:38
      8. Styling the Hero Using Bootstrap Variables 00:08:13
    2. Chapter 2 : Building a Responsive Application with Bootstrap
      1. The Course Overview 00:04:00
      2. Setting Up Our Project 00:08:40
      3. Creating a Login Page 00:08:36
      4. Working with Forms in Bootstrap 00:08:49
      5. Designing Efficient Forms 00:08:51
      6. Building Layouts with Bootstrap 00:09:08
      7. Custom Layouts and Bootstrap 00:09:47
      8. Creating a Dashboard Page 00:08:47
      9. Creating Our First Table View 00:09:38
      10. Tables and Bootstrap 00:07:11
      11. Advanced Tables 00:13:27
      12. Working with Bootstrap JS plugins 00:15:21
      13. Most Popular Third-party JS plugins 00:21:06
      14. Making Our App More Responsive 00:13:54
      15. Difference between Bootstrap 3 and Bootstrap 4 00:06:50
      16. Migrating Our App to Bootstrap 4 00:18:18
      17. Using New Bootstrap 4 Components 00:09:28
      18. Final Steps 00:08:31
    3. Chapter 3 : Web Development with AngularJS and Bootstrap
      1. Course Overview 00:06:05
      2. Using AngularJS with Bootstrap 00:04:59
      3. Getting started; “Hello, World” 00:06:59
      4. Introducing the Input 00:04:02
      5. Validating Inputs 00:08:27
      6. Taking a Closer Look at ngModel 00:03:19
      7. Bonus: Angular-Better-Placeholders for Open Source UX 00:03:50
      8. Conditionally Disabling Buttons 00:03:57
      9. Dealing with Forms 00:03:03
      10. Submitting a Form via Ajax 00:02:57
      11. Submission Feedback 00:05:13
      12. Routing – What, Why, and How 00:07:11
      13. Routing Events 00:06:43
      14. Sharing Data between Routes 00:03:10
      15. Bonus – Animating the Route Changes 00:04:15
      16. ngRepeat – What and How 00:04:37
      17. Filters for Display 00:08:30
      18. Advanced Repeating 00:08:48
      19. An Introduction to AngularStrap 00:06:26
      20. Using AngularStrap 2 00:06:10