2015
Lynda
Ray Villalobos
3h 3m
English
Find out how Bootstrap can transform your standard HTML websites into inspired single-page designs. This course is a project-based approach to learning how to manipulate website layouts with the Bootstrap framework. Staff author Ray Villalobos tackles Bootstrap's layout classes, like containers, rows, and columns, and shows what it takes to customize Bootstrap's CSS and address layout challenges like multiple grids and columns. Plus, learn how to track navigation as users scroll, with the ScrollSpy plugin, and create a full-screen, responsive image carousel.
Topics include:
Analyzing your markup
Creating simple column layouts
Creating basic navigation and a simple carousel
Modifying Bootstrap styles
Working with branding and toggle styles
Adding interactivity
Introduction 3m 8s
Welcome 1m 4s
What you should know 1m 6s
Exercise files 58s
1. Understanding Bootstrap Layouts 1h 2m
What we'll build 3m 19s
Analyzing our starting markup 3m 32s
Understanding the container class 6m 56s
Using rows and columns 7m 26s
Creating simple column layouts 6m 42s
Finishing our simple layout 6m 18s
Creating basic navigation 8m 9s
Controlling navigation positions 6m 33s
Building a footer layout 5m 23s
Adding a basic carousel 7m 54s
2. Customizing Bootstrap Styles 1h 8m
Creating basic page styles 11m 0s
Working with the branding and toggle styles 8m 50s
Overcoming injection issues 4m 25s
Styling single-page designs 9m 42s
Using multiple Bootstrap grids 5m 32s
Tackling a multilevel layout 6m 21s
Dealing with multiple responsive columns 7m 17s
Using background images and rollovers 9m 56s
Fixing our footer 5m 18s
3. Adding Interactivity 46m 40s
Tracking our navigation with ScrollSpy and jQuery 12m 52s
Smoothing our page scroll 2m 36s
Automating carousel indicators 4m 54s
Creating a carousel that fades 6m 45s
Making carousel elements display full screen 9m 53s
Randomizing our carousels 9m 40s
Conclusion 2m 50s
Next steps 2m 50s
www.lynda.comBootstrap-tutorials/Bootstrap-Layouts-Responsive-Single-Page-Design/186538-2.html
Download File Size:874.76 MB
|
