Duration
1 day
Objective
This course is for anybody who creates and/or develops web sites or applications needing a framework to help them quickly prototype their designs or speed up their design process.
Prerequisite
Attendees should be knowledgeable in HTML5, CSS, and basic responsive design concepts
Module 1 - Bootstrap Scaffolding
- Mobile first design
- Why Bootstrap?
- Including Bootstrap
- Customizing install
- Responsive Design
- The "container" class
- How Grids work in Bootstrap
- Grid classes (.col-xs-, .col-sm-, .col-md-, .col-lg-)
- Adding offsets to columns
- Pushing and pulling columns
- Nesting columns
- Navigation components
- Navs
- Navbars
- Jumbotron component
Module 2: Page Components
- Headers
- Panels
- ListGroup
- Breadcrumbs
- Labels
- Buttons
- Glyphicons (with buttons, toolbars and form inputs)
- Wells
Module 3: Page Components: Forms
- Creating forms
- Inline and horizontal forms
- Form validation
Module 4: Bootstrap Plugins
- Alert Messages
- Buttons and button groups
- ScrollSpy
- Tabs
- Collapse
- Carousel
- Modal
Module 5: Extending Bootstrap with Custom Plugins
- Bootbox.js
- DateTime Picker
- Font Awesome
- Off-Canvas
- Image Gallery
- Social Buttons
- SweetAlert
- Yamm3 Mega Menu
Module 6: Under the Hood and More Practice
- Reviewing the Bootstrap CSS source code
- Building another Bootstrap web page from scratch
Programme scope, delivery arrangements and suitability are confirmed during enquiry.