Course: Study / Web Design and Web Development, Topic: Module10: Bootstrap Javascript Components

Topic outline

General

Collapse all Expand all

Module10: Bootstrap Javascript Components
Tabs and Tabbed Navigation. Accordion. Revealing Content. Carousel

Tabs and Tabbed Navigation

Accordion

Revealing Content

Carousel

Tabs and Tabbed Navigation. In this submodule, we will design a tabbed navigation for the content.
We will aslo use tab panes to organize the content and navigate.
Tabs require Javascript support to be enabled for navigating the content.

Accordion. In this submodule, we will explore the use of the collapse Javascript plugin together with card component to create an accordion to show/hide content in a web page.

Revealing Content. In this submodule, we will look at the ways of presenting information to users by overlaying the information on top of the page.
We will examine how to add tooltips to be displayed when the user hovers over an area, and modals to be displayed when the user clicks on a link or button of the page.

Carousel. In this submodule, we will create a Carousel and we will apply images to it.
We will also add controls to the carousel to manually control it.
- Page
  
  Aims - Expected outcomes- Key concepts - Instructions Bootstrap JS Components Page
- Book
  
  Submodule 10.1: Tabs and Tabbed Navigation Book
  
  View
  Tab Navigation Elements
  
  Tab Content
  
  Tab-content CSS
- Book
  
  Submodule 10.2: Accordion Book
  
  View
  Collapse plugin
  
  Cards
  
  Accordion
- Book
  
  Submodule 10.3: Revealing Content Book
  
  View
  Tooltip
  
  Modal
- Book
  
  Submodule 10.4: Carousel Book
  
  View
  Adding carousel
  
  Adding CSS Classes
  
  Adding Carousel Controls

Topic outline

General

Module10: Bootstrap Javascript Components

Tabs and Tabbed Navigation. Accordion. Revealing Content. Carousel