Audience
Web developers and mobile web developers
Prerequisites
Some knowledge of HTML and CSS
Duration
1 day
Outline for Responsive (Mobile) Web Design with Bootstrap Training
Chapter 1. Getting Started with Bootstrap
- What Is Bootstrap
- Keywords from package.json
- Bootstrap History
- Responsive Web Development
- Responsive Grid Layout
- Reusable GUI Components
- JavaScript
- The Mobile First Philosophy
- Why RWD Matters
- Responsive Page Views
- SASS
- Getting Bootstrap
- Bootstrap CSS Content Delivery Network
- Bootstrap JavaScript Content Delivery Network
- Other Setup Options
- The Bootstrap Core Files
- To Min or Not to Min
- Summary
Chapter 2. Basic Bootstrap
- Bootstrap Basic Page Template
- The Viewport Meta Tag
- The user-scalable Property
- Including Bootstrap JavaScript Files
- Plugin Dependencies
- Resetting Styles
- Bootstrap Components
- Containers
- Using Containers
- Device Sizes
- The Grid System
- The Column Arithmetic
- A Grid Example
- CSS Media Queries (1/2)
- CSS Media Queries (2/2)
- Customizing Breakpoints
- Responsive Grid Layout
- Combining Column Styles
- Other Column Operations
- Navigation
- Navigation (Desktop)
- Navigation (Mobile)
- Navigation Source
- Navigation Explained
- Navigation Elements and Styles
- Icons
- Using Icons
- Responsive Images
- Summary
Chapter 3. Bootstrap Miscellaneous Topics
- Bootstrap Components
- Bootstrap Components Web Page
- Integrating Bootstrap Components with jQuery
- Identifying the Required Version of jQuery
- Customizing Bootstrap
- Customizing Sass variables
- More Customization
- Customizing Bootstrap Components
- Light Customizations Steps
- Colors
- Spacing
- Notation (pt 1)
- Notation (pt 2)
- Notation (pt 3)
- Summary
Chapter 4. Bootstrap Components
- Bootstrap Components
- Component List
- Alerts
- Breadcrumb
- Collapse
- List Group (with Badges)
- Badges Example
- Modal
- Progress
- Summary
Chapter 5. jQuery for Bootstrap
- jQuery and Bootstrap
- jQuery Example
- CSS Selectors
- Background – DOM
- The jQuery Function Object
- What Does the $() Function Take as Argument?
- The jQuery Function – Case 1
- The jQuery Function - Case 2
- The jQuery Function – Case 3
- The jQuery Function – Case 4
- The jQuery Wrapper
- The jQuery Wrapper as an Array-Like Object
- Note: innerHTML() vs. .html()
- jQuery Wrapper Chaining
- API Function Notation
- Selecting Elements by Attribute
- Pseudo-Selectors
- Faster Selection
- Saving Selections
- Iterating Through Selected Elements Using .each()
- JavaScript Methods
- JavaScript "this"
- Function Context 1 of 2
- .each() Revisited
- Typical Use Cases
- Handle a Menu Selection
- Hide Content
- Modify Content
- Change a Style
- Summary
Lab Exercises
Lab 1. Getting Started With Bootstrap
Lab 2. Bootstrap Flex
Lab 3. Bootstrap Grid
Lab 4. Responsive Images
Lab 5. Bootstrap Navbar
Lab 6. Build a Responsive App
Lab 7. Using jQuery with Bootstrap