2013
lynda
Jen Kramer
3:21
English
Meet Bootstrap, the one-stop shop for designing sleek, mobile-ready websites with HTML5, CSS3, and JavaScript. It's an open-source, responsive design framework, featuring a grid-based layout system, web-ready icons you can incorporate into your designs, fully functional navigation, and much more. Join Jen Kramer for a quick overview of all of the goodies in Bootstrap, and then learn how to customize the grid, override the CSS to customize your site, and leverage Bootstrap's stylish built-in JavaScript effects. Once you're prepared to test your knowledge, you can take the hands-on challenges offered by Jen.
Topics include:
Downloading and installing Bootstrap
Understanding the Bootstrap file structure
Exploring the 12-column grid
Changing column width and order
Styling buttons, images, and tables
Overriding core CSS
Creating a thumbnail gallery
Adding JavaScript effects, like dropdown menus, tabs, accordions, and more
Introduction
Welcome
Using the exercise files
Installing Sublime Text 2
1. Bootstrap Introduction and Download
What is Bootstrap?
Downloading and unzipping Bootstrap 3
Examining Bootstrap file structure
Adding CSS to a Bootstrap HTML file
Adding JavaScript to a Bootstrap HTML file
2. The Bootstrap Grid System
Exploring Bootstrap's grid system
Creating new rows and cells
Adjusting column widths using offset
Changing column order using push and pull
Nesting columns
Creating a JumboTron-style layout
Challenge: Working with grids
Solution: Working with grids
3. CSS Overview
Exploring basic typography: The small and blockquote tags
Exploring Bootstrap's responsive classes including .hidden and .visible
Styling buttons using btn classes
Styling images with responsiveness and decorative touches
Incorporating Bootstrap 3 glyph icons
Creating a thumbnail gallery
Styling tabular data
Overriding core CSS with custom styles
Challenge: Styling panels and callouts
Solution: Styling panels and callouts
4. Navigation Systems
Implementing location breadcrumbs
Using tabs and pills for navigation
Developing a responsive navigation bar
Challenge: Modify the "pancake" button
Solution: Modify the "pancake" button
5. JavaScript Effects
Implementing dropdowns within a navigation bar
Tabbing within the same page
Accordion panels with collapse functionality
Challenge: Tooltips
Solution: Tooltips
Conclusion
Next steps towards advanced Bootstrap
http://www.lynda.com/Bootstrap-tutorials/Up-Running-Bootstrap-3/133339-2.html
Download File Size:638.38 MB