Bootstrap PP

BOOTSTRAP
PRESENTED BY AFREEN
WHAT IS BOOTSTRAP?
Bootstrap is a widely-used open-source front-end framework for web development. It provides a
collection of pre-designed HTML, CSS, and JavaScript components, as well as a responsive grid
system, to help developers create responsive and visually appealing websites and web applications
quickly and efficiently. Here are some key aspects of Bootstrap in web programming:
• Responsive Design: Bootstrap is known for its responsive grid system, which allows web
developers to create layouts that adapt to various screen sizes and devices, including desktops,
tablets, and mobile phones. This ensures that websites built with Bootstrap look and function well
on different devices.
• Pre-Designed Components: Bootstrap offers a rich set of pre-designed UI components such as
navigation bars, buttons, forms, modals, alerts, and more. Developers can easily incorporate these
components into their projects by adding the corresponding Bootstrap classes to their HTML
elements.
• Customizable Styles: While Bootstrap provides default styles for its components, it is highly
customizable. Developers can customize the look and feel of Bootstrap components by overriding
default styles or creating custom CSS rules.
FUNDAMENTALS OF BOOTSTRAP
• Bootstrap is a front-end framework for web development that provides a set of tools, styles, and components to
help you create responsive and visually appealing websites. To understand the fundamentals of Bootstrap, you
should be familiar with the following key concepts and components:
• Grid System:
– Bootstrap's grid system is based on a 12-column layout, making it easy to create responsive designs.
– You can specify how many columns a specific element should span on different screen sizes (e.g., mobile, tablet, desktop)
using classes like col-, col-md-, and col-lg-.
• Typography:
– Bootstrap includes default styles for typography, such as headings, paragraphs, lists, and links, making it easy to create
consistent text styles.
• CSS Components:
– Bootstrap provides a wide range of pre-designed CSS components like buttons, forms, navigation bars, alerts, badges, and
labels. You can easily incorporate these components into your website by applying Bootstrap classes.
• JavaScript Components:
– Bootstrap offers JavaScript-powered components like carousels, modals, tooltips, popovers, and collapsible accordions.
These components add interactivity and enhance the user experience.
BOOTSTRAP GRID SYSTEM
• The Bootstrap grid system is a fundamental component of the Bootstrap front-end framework. It's a responsive, mobile -
first grid system that makes it easy to create layouts for web pages. Bootstrap uses a 12-column grid system, which allows
you to create flexible and responsive designs for various screen sizes and devices.
• Here's an example of a basic Bootstrap grid structure

• <div
class="container">
<div class="row">
• <div class="col-md-6">
• 
• </div>
• <div class="col-md-6">
• 

</div>
• </div>
BOOTSTRAP FORM AND FORM COMPONENTS
• Bootstrap provides a set of CSS classes and JavaScript components to easily create and style forms in your web
applications. Bootstrap's form components are designed to be responsive and customizable. Here are some
common Bootstrap form components and how to use them:
• Basic Form Structure: To create a basic form using Bootstrap, you'll typically start with an HTML form element
and add the .form class to it:
• <form class="form">
• < Form inputs and controls go here -->
• </form>
• Form Groups: Form groups are used to wrap labels and form controls together. You can use the .form-group
class for this purpose:
• <div class="form-group">
• <label for="exampleInputEmail">Email address</label>
• <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email”>
• </div>
INTRODUCTION JQUERY
• Bootstrap is a popular front-end framework for web development, and jQuery is a

JavaScript library that simplifies client-side scripting and interaction with HTML
documents. Bootstrap and jQuery can work together seamlessly to enhance the
functionality and interactivity of your web applications
ELEMENT SELECTOR
• Bootstrap doesn't introduce its own element selectors; instead, it relies on standard CSS
and jQuery selectors to target and style HTML elements. However, Bootstrap provides a
set of classes and attributes that you can use to select and style elements efficiently.
DOCUMENT READY FUNCTION
• The $(document).ready() function is not specific to Bootstrap; it's a part of jQuery,
which is often used in conjunction with Bootstrap for handling DOM manipulation and
interactions. This function is used to ensure that your JavaScript code doesn't run until
the HTML document (the DOM) is fully loaded and ready for manipulation. It helps
prevent issues where JavaScript code attempts to interact with elements that haven't
been created or loaded yet.
EVENTS
• In Bootstrap, you can use events to add interactivity and functionality to your web pages.
Bootstrap provides a set of JavaScript events that you can use to trigger actions or
customize the behavior of Bootstrap components. Here are some common Bootstrap
events and how to use them:
• Click Event: Bootstrap components often respond to click events. For example, you can use
the click event to trigger actions when a Bootstrap button or modal is clicked.
• Show and Hide Events: Bootstrap modal components have show.bs.modal and
hide.bs.modal
• Accordion Events: Bootstrap accordion components have events like show.bs.collapse

and hide.bs.collapse
• Event handling in web programming allows you to define how your web application responds to
various user interactions, such as clicks, mouse movements, keyboard inputs, and more. You can
attach event handlers to HTML elements, including Bootstrap components, to make your web
application interactive. Here's an overview of event handling with HTML and Bootstrap
components:
• 1. HTML Event Handling:

• In HTML, you can add event handlers directly to HTML elements using attributes like onclick,
onmouseover, onkeydown
• 2. JavaScript Event Listeners:
• A more common and recommended way to handle events is by using JavaScript event listeners.
You can select HTML elements by their IDs, classes, or other attributes and attach event listeners
to them.
THANK
YOU

Bootstrap PP

Uploaded by

Copyright:

Available Formats

Bootstrap PP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap PP

Uploaded by

Copyright:

Available Formats

BOOTSTRAP

• Here's an example of a basic Bootstrap grid structure

•

•

• < Form inputs and controls go here -->

• <label for="exampleInputEmail">Email address</label>

• <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email”>

• Bootstrap is a popular front-end framework for web development, and jQuery is a

• Accordion Events: Bootstrap accordion components have events like show.bs.collapse

• 1. HTML Event Handling:

You might also like