Page 1: Introduction
This assignment covers the foundational concepts of Bootstrap, jQuery, and JavaScript.
These technologies are essential for modern web development. We will explore the
history, fundamentals, and integration of these tools with theoretical explanations and
practical code examples.
Page 2: Bootstrap History
Bootstrap was developed by Twitter engineers Mark Otto and Jacob Thornton in 2011. It
started as a framework to encourage consistency across internal tools. Since then, it has
evolved into one of the most popular front-end frameworks.
Page 3: Bootstrap Fundamentals
Bootstrap is a free and open-source CSS framework focused on responsive, mobile-first
front-end development. It includes CSS- and JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.
Page 4: Bootstrap Grid System
Bootstrap’s grid system allows up to 12 columns across the page. You can use
predefined grid classes to create responsive layouts. Example:
```
<div class='row'>
<div class='col-md-6'>Left</div>
<div class='col-md-6'>Right</div>
</div>
```
Page 5: Bootstrap Forms & Components
Bootstrap includes styled components like buttons, alerts, navbars, and form controls.
Example:
```
<form>
<div class='mb-3'>
<label for='email' class='form-label'>Email</label>
<input type='email' class='form-control' id='email'>
</div>
</form>
```
Page 6: Introduction to jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML
document traversal, event handling, and animation.
Example:
```
$('#element').hide();
```
Page 7: jQuery Element Selectors
jQuery selectors are used to select and manipulate HTML elements. Example:
```
$('p') // selects all <p> elements
$('#id') // selects element with specific id
$('.class') // selects all elements with class
```
Page 8: Document Ready Function
This ensures the DOM is fully loaded before executing JavaScript.
Example:
```
$(document).ready(function(){
alert('Document is ready!');
});
```
Page 9: jQuery Events
jQuery can be used to handle events such as click, hover, etc.
Example:
```
$('#btn').click(function(){
alert('Button clicked!');
});
```
Page 10: Event Handling with Bootstrap Components
You can use jQuery to handle events on Bootstrap components like modals, dropdowns.
Example:
```
$('#myModal').on('[Link]', function () {
alert('Modal is shown');
});
```
Page 11: JavaScript Basics
JavaScript is a scripting language used to create and control dynamic website content.
Variables, functions, arrays, and objects are key features.
Example:
```
let x = 5;
function greet() {
[Link]('Hello');
}
```
Page 12: JavaScript Events
JavaScript reacts to events such as clicks and keystrokes.
Example:
```
[Link]('btn').onclick = function() {
alert('Clicked');
};
```
Page 13: Conditions & Loops
JavaScript includes `if`, `else`, and loops like `for`, `while`.
Example:
```
for(let i = 0; i < 5; i++) {
[Link](i);
}
```
Page 14: Alert, Prompt, Confirm
These are JavaScript dialog boxes for interaction.
Example:
```
alert('Hello');
prompt('Enter name:');
confirm('Are you sure?');
```
Page 15: JavaScript Validation
JavaScript can be used for form validation.
Example:
```
function validateForm() {
let x = [Link]['myForm']['email'].value;
if (x == '') {
alert('Email must be filled out');
return false;
}
}
```
Page 16: Integrating All Technologies
HTML + Bootstrap + jQuery + JavaScript can be used together for dynamic web
applications.
Example:
```
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href='[Link]
</head>
<body>
<button id='btn' class='btn btn-primary'>Click Me</button>
<script src='[Link]
<script>
$('#btn').click(function() {
alert('Clicked!');
});
</script>
</body>
</html>
```
Page 17: Conclusion
Bootstrap, jQuery, and JavaScript are essential for building interactive, responsive, and
efficient web applications. Mastering these tools is crucial for any front-end developer.