Learning Bootstrap 2

Discover Bootstrap, a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun.

Bootstrap is a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun. Author Jen Kramer explores its 12-column grid layout; typography and icon libraries; fully functional components like nav bars, buttons, and tabs; and much more. This course also shows how to add JavaScript extras like dropdown menus, modal windows, and photo carousels.

Introduction

• Welcome
• Using the exercise files

1. Getting Started with Bootstrap

• What is Bootstrap?
• Downloading and unzipping Bootstrap
• Setting up a Dreamweaver site with Bootstrap files

2. The Grid System in Bootstrap

• Understanding the difference between default and fluid grids
• Exploring the fluid grid and creating new rows
• Understanding fluid offsetting
• Nesting with fluid grids
• Exploring Bootstrap media queries and device-specific styling
• Adding a hero unit
• Creating a thumbnail gallery

3. CSS Overview

• Exploring basic typography
• Including blockquotes
• Including lists
• Styling buttons
• Incorporating images
• Incorporating icons
• Overriding Bootstrap core CSS

4. Navigation Systems

• Adding breadcrumbs
• Adding pagination for paging through content
• Adding a page for next and previous links
• Using tabs and pills navigation
• Adding the basic navigation bar

5. JavaScript Effects

• Understanding how JavaScript works in Bootstrap
• Making the nav bar responsive with JavaScript
• Adding a dropdown menu to the navigation bar
• Adding a dropdown menu to the tabs and pill navigation
• Tabbing within the same page
• Creating modal windows
• Creating a photo carousel

Conclusion

• Other resources