2014
Lynda
Jen Kramer
1:55
English
Twitter's Bootstrap is one of the most popular HTML/CSS/JavaScript frameworks for creating responsive websites. Here, Jen Kramer shows you how to add interactive elements like a thumbnail gallery, image carousel, or contact form using Bootstrap and a simple text editor. Plus, learn to style these features with CSS and add helpful JavaScript-based pop-ups and tooltips that enhance their usability. Along the way, you can test your Bootstrap prowess with a series of challenge videos.
Introduction
Welcome
Using the exercise files
Using the challenges
1. Setting Up
Installing Sublime Text 2
Installing Bootstrap 3
Installing jQuery
2. Creating a Thumbnail Gallery with Modal Pop-Ups
Planning the thumbnail gallery
Creating the thumbnail gallery grid layout
Creating the modal windows
Linking the thumbnails to the modal windows
Enhancing the thumbnail layout with captions
Challenge: Styling thumbnails and modals
Solution: Styling thumbnails and modals
3. Creating an Image Carousel for the Homepage
Planning the image carousel and prepping images
Creating the image carousel
Adding carousel navigation
Adding captions to the carousel
Adding and styling a carousel position indicator
Customizing the carousel rotation interval and wrapping style
Challenge: Create modal windows in your carousel
Solution: Create modal windows in your carousel
4. Creating Forms
Including a text input and styling it with a grid
Creating and formatting radio buttons
Creating and formatting a selection dropdown menu
Adding a comments box and tooltips
Adding a check box and using collapse to enhance usability
Challenge: Styling the form
Solution: Styling the form
Conclusion
Next steps
Download File Size:434.39 MB