When does class start/end?
Classes begin promptly at 9:00 am, and typically end at 5:00 pm.
Responsive (Mobile) Web Design with Bootstrap
This 1 day class introduces students to responsive web design for desktop using Bootstrap. Students will begin by learning some of the fundamental technologies upon which Bootstrap is built like CSS...
Read More
$680 USD
Course Code
WA2350
Duration
1 day
Available Formats
Classroom, Virtual
This 1 day class introduces students to responsive web design for desktop using Bootstrap. Students will begin by learning some of the fundamental technologies upon which Bootstrap is built like CSS Media queries and LESS. Students will progress to using Bootstrap to build simple and then more complex web sites.
Who Can Benefit
- Web developers and mobile web developers
Prerequisites
- Some knowledge of HTML and CSS
Course Details
Outline
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
