Interactive Bootstrap

Joel Ross

LIS 549

In this video...

  • Web Page Interactivity

  • Bootstrap Components

Interactivity

An interactive web page is one where the displayed content on the page changes in response to user actions or input.

Web pages are made interactive using JavaScript, a programming language that can be used to code dynamic changes to the rendered HTML. 

Interactive Bootstrap

The Bootstrap framework provides some interactive "widgets" you can use without writing separate JavaScript code, just by using specific HTML attributes.

https://getbootstrap.com/docs/5.3/components

 

You will need to add Bootstrap's JavaScript code to your page by including a <script> tag in your <head>

<head>
  <!-- include Bootstrap library -->
  <!-- copy script tag from the Bootstrap home page -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>  
</head>

Example: Collapsables

As a simple example, you can make an element "collapsable" so that it disappears with a button click!

https://getbootstrap.com/docs/5.3/components/collapse/

<button class="btn btn-primary" 
        data-bs-toggle="collapse" 
        data-bs-target="#collapseExample" 
        aria-expanded="false" aria-controls="collapseExample">
   Button with data-bs-target
</button>


<div class="collapse" id="collapseExample">
    Some placeholder content for the collapse component. This panel is 
    hidden by default but revealed when the user clicks the toggler.
</div>

aria for screen-readers

Example: NavBar

See https://getbootstrap.com/docs/5.3/components/
navbar/#toggler for an example of a NavBar with a collapsible "hamburger menu"

lis549-bootstrap-interactive

By Joel Ross

lis549-bootstrap-interactive

  • 522

More from Joel Ross