Description

The Bootstrap framework, created by Twitter developers, has become a benchmark CSS framework in web design. In this course, you will learn how to dress up your pages and enrich them with interactive components with Bootstrap in order to make your sites attractive and adaptive.

Who is this training for ?

For whom ?

Webmasters, developers and integrators.

Prerequisites

Training objectives

Integrate Bootstrap into a Web project

Create Web pages using the aesthetic codes of current sites

Master the components and plug-ins of the Bootstrap framework

Develop responsive websites

Training program

• Framework overview
  • Overview of the Bootstrap framework.
  • The contribution of BootStrap compared to CSS.
  • The elements of the Bootstrap kit (grids, Normalize.
  • css, icons, jQuery plug-ins.
  • ).
  • Understanding the tree structure of different files: style sheets, JavaScript.
  • Link a web page to the basic Bootstrap style sheet.
  • Practical work Installing Bootstrap.
  • Dressing up an HTML page with Bootstrap.
• Bootstrap style sheets
  • CSS for text elements and images.
  • CSS for form elements and tables.
  • Using icon fonts to display icons on pages.
  • CSS for layout, text blocks.
  • Personalize your style sheet.
  • Practical work Styling the different elements constituting a web page with Bootstrap CSS.
  • Customize the style of certain elements of the page.
• Grates
  • Understand the concept of grid.
  • Adaptive grids (Responsive Web Design, Media Queries, positioning.
  • ).
  • Organization of the grid.
  • Manipulate the grids.
  • Create a multigrid page.
  • Static and elastic grids.
  • Practical work rnCreate a Responsive Grid-Based Web Page
• The basic components
  • Drop-down menus.
  • Navigation and pagination components.
  • Buttons, badges, alerts.
  • Bars progress.
  • Tables, lists of elements.
  • Practical work Design of a web page for an internet or intranet site integrating several Bootstrap components.
• Les plug-ins jQuery de Bootstrap
  • Modal windows.
  • Accordions.
  • The photo carousel.
  • The navigation bar.
  • Tabs.
  • Drop-down menus.
  • Auto-completion fields.
  • Integration of external plug-ins (Datepicker.
  • ).
  • Flexible and extensible container cards.
  • Practical work Integrate modern visual effects using jQuery plug-ins associated with the Bootstrap library.
• Analysis of Bootstrap templates
  • Analyze templates built from Bootstraps.
  • Create a site with one of the templates.
  • Create a page from a template by overriding the file CSS.
  • Use LESS files with a preprocessor and a Nodejs server.
  • Practical work Create a site from a template.