Goals
- Learn to use the Bootstrap framework
Program
Presentation of jQuery: objectives, alternatives … Use
cases, examples of sites
Specific principles and tips
The versions of jQuery
jQuery slim
Workshop: Add jQuery in a project
Essential functions and chaining
Extended CSS3 selectors Browsing
, manipulation of the DOM tree and filters
Association of events and triggering
Control of the execution context of callbacks
Animation effects
Existing functions
Workshop: Handling web pages with jQuery
Asynchronous / synchronous communication
Implementation of AJAX
jQuery functions available
Interface of Deferred and Promise objects
Loading of pages and code injection
Complete integration of AJAX and the UI
Compatibility with other frameworks
Workshop: AJAX requests and XML parsing with jQuery
Discover adaptive CSS frameworks Bootstrap
alternatives
: presentation, contributions, examples
Dependencies associated with Bootstrap: jQuery and popper.js
Workshop: Include Bootstrap in a project and basic templating
Bootstrap and Responsive Web Design (RWD)
The Bootstrap Grid
Containers and breakpoints
Class prefixes
Automatically arranged columns
Horizontal and vertical alignment
Reorder, offset and nest columns
Workshop: Using the grid in a project
Typography and links
Tables: lines, borders, rollover, RWD
Form elements, supported controls
Buttons: options, sizes, status
Avoid image overflows
Workshop: Using bootstrap classes in web pages
Manage positioning: flex, position, float and clearfix
Modify texts: alignment, truncation, weight, italics, etc.
Manage borders, shadows, margins (padding, margin)
Background and text colors
Workshop: Customizing the appearance of beacons with the utilities
The badges
The breadcrumbs
The buttons and group of buttons
The cards: title, image, link, formatting
The Forms: layout, validation, grouping
The Lists
The Media
Workshop: Integrating CSS components into a page
Discovery of JS components
Usefulness of jQuery for components
Interact using data- * attributes Component
option variables Methods
and events available
Workshop: Transmit information to components using events – Display the components using asynchronous request
Presentation of the customization of the bootstrap theme
Structure of the files of a project
Import the library into a sass file
List of existing variables
Modify the values of the bootstrap variables
Manipulate the maps (addition, modification, deletion)
Create these own components using the Bootstrap functions
Lab: Modifying bootstrap using Sass
Duration
3 days
Price
£ 1501
Audience
Web developers, integrator, Front End developer
Prerequisites
Good knowledge of HTML, CSS and javascript
Reference
SIT101067-F
Sessions
Contact us for more informations about session date