Scribd
Upload
29 views9 pages

Bootstrap Javascript Components: Jogesh K. Muppala

This document discusses how to use Bootstrap for both CSS and JavaScript components. It explains that Bootstrap provides many CSS classes that can be used to style components, and that JavaScript plugins are included that are written using jQuery. It provides examples of common Bootstrap CSS classes for buttons, navigation, and other elements, and emphasizes that the JavaScript components can often be used without writing any JavaScript code by using data attributes.

Uploaded by

aleksandarpmau
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views9 pages

Bootstrap Javascript Components: Jogesh K. Muppala

This document discusses how to use Bootstrap for both CSS and JavaScript components. It explains that Bootstrap provides many CSS classes that can be used to style components, and that JavaScript plugins are included that are written using jQuery. It provides examples of common Bootstrap CSS classes for buttons, navigation, and other elements, and emphasizes that the JavaScript components can often be used without writing any JavaScript code by using data attributes.

Uploaded by

aleksandarpmau
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Bootstrap

JavaScript Components
Jogesh K. Muppala

Bootstrap and CSS


Bootstrap provides a number of CSS classes that
can be used eec=vely
Components are created by applying the
Bootstrap CSS classes
Bootstrap can be used purely for its CSS classes

Bootstrap and CSS


CSS classes for many components start with a
base class
Further modiers can be applied with a set of
related classes

Example: Bootstrap BuGon Classes

btn +

Color

btn-default
btn-primary
btn-success
btn-info +
btn-warning
btn-danger
btn-link

Size



btn-lg
btn-sm + btn-block
btn-xs

Bootstrap Nav Classes


nav
navbar-nav

nav-tabs

nav-pills

Bootstrap and JavaScript


Bootstraps JavaScript support is through JS
Plugins
Plugins wriGen based on Jquery
Plugins can be individually included

Bootstrap and JavaScript


Bootstrap JS Components

JQuery

JavaScript

Using Bootstrap JS Plugins


Include the Javascript les at the boGom of the
<body>
<script src="hGps://ajax.googleapis.com/ajax/libs/jquery/
1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual les as needed -->
<script src="js/bootstrap.min.js"></script>

Bootstrap JS Components
JS components can all be used without wri=ng a single
line of JavaScript:
data-* aGributes (e.g., data-toggle, data-spy)
Straighcorward approach to use plugins
We will explore this approach in this module

Full JS API available if needed

Need to know JQuery syntax and JavaScript

You might also like