Scribd
Upload
10 views7 pages

WTL Assignment 12

The document outlines an assignment focused on using Bootstrap to create a popup that appears on mouse hover over a link, which includes two text boxes and a button. It explains the benefits of Bootstrap, such as its mobile-first approach, responsive design, and built-in components. Additionally, it provides a code example demonstrating how to implement the popup functionality using HTML, CSS, and JavaScript.

Uploaded by

kirannandi01234
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
10 views7 pages

WTL Assignment 12

The document outlines an assignment focused on using Bootstrap to create a popup that appears on mouse hover over a link, which includes two text boxes and a button. It explains the benefits of Bootstrap, such as its mobile-first approach, responsive design, and built-in components. Additionally, it provides a code example demonstrating how to implement the popup functionality using HTML, CSS, and JavaScript.

Uploaded by

kirannandi01234
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/ 7

Name:Harsh Singh Parihar

Class: CC1 Batch: B

Roll no:2223337

Assignment No.12

Aim:
Display a popup on mouse over of the link and add two text boxes and button to that popup.

Objective: To learn about concept of Bootstrap

Theory:

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and
easier web development. It uses HTML, CSS and Javascript.

Why use Bootstrap?


Mobile first approach: Since Bootstrap 3, the framework consists of Mobile first styles
throughout the entire library instead of in separate files.

Browser Support: It is supported by all popular browsers.

Easy to get started: With just the knowledge of HTML and CSS anyone can get started with
Bootstrap. Also the Bootstrap official site has good documentation.

Responsive design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
More about responsive design in the chapter Bootstrap Responsive Design. Provides a clean
and uniform solution for building an interface for developers. It contains beautiful and
functional built-in components which are easy to customize. It also provides web-based
customization. And best of all it is open source.
What Bootstrap Package Includes?
Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background.

CSS: Bootstrap comes with features of global CSS settings, fundamental HTML elements
styled and enhanced with extensible classes, and an advanced grid system.

Components: Bootstrap contains over a dozen reusable components built to provide


iconography, dropdowns, navigation, alerts, popovers, and much more.

JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily
include them all, or one by one.

Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins
to get your very own version.

Bootstrap Grid System


What is a Grid?
In graphic design, a grid is a structure (usually two-dimensional) made up of a series of
intersecting straight (vertical, horizontal) lines used to structure content. It is widely used to
design layout and content structure in print design. In web design, it is a very effective method
to create a consistent layout rapidly and effectively using HTML and CSS. To put it simple
words grids in web design organize and structure content, makes websites easy to scan and
reduces cognitive load on users.

What is a Bootstrap Grid System?


As put by the official documentation of Bootstrap for grid system:
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to
12 columns as the device or viewport size increases. It includes predefined classes for easy
layout options, as well as powerful mixins for generating more semantic layouts.
Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for
Bootstrap now starts by targeting smaller screens like mobile devices, tablets, and then
“expands” components and grids for larger screens such as laptops, desktops.

Working of Bootstrap Grid System


Grid systems are used for creating page layouts through a series of rows and columns that
house your content.
Here's how the Bootstrap grid system works:
● Rows must be placed within a .container class for proper alignment and padding.
● Use rows to create horizontal groups of columns.
● Content should be placed within columns, and only columns may be immediate children of
rows.
● Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
LESS mixins can also be used for more semantic layouts.
● Columns create gutters (gaps between column content) via padding. That padding is offset in
rows for the first and last column via negative margin on .rows.
● Grid columns are created by specifying the number of twelve available columns you wish to
span. For
● Example, three equal columns would use three .col-xs-4.

Bootstrap Modal Plugin


A model is a child window that is layered over its parent window. Typically, the purpose is to
display content from a separate source that can have some interaction without leaving the parent
window. Child windows can provide information, interaction, or more.
You can toggle the modal plugin's hidden content:
Via data attributes: Set attribute data-toggle="modal" on a controller element, like a button or
link, along with a data-target="#identifier" or href="#identifier" to target a specific modal (with
the id="identifier") to toggle.
Via JavaScript: Using this technique you can call a modal with id="identifier" with a single

line of JavaScript:
$('#identifier').modal(options)

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup on Hover</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
a{
text-decoration: none;
font-size: 18px;
color: #3498db;
cursor: pointer;
}
#popup {
display: none;
position: absolute;
top: 60px;
left: 100px;
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 8px;
width: 250px;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#popup input {
width: 100%;
padding: 8px;
margin: 5px 0;
border-radius: 5px;
border: 1px solid #ccc;
}
#popup button {
width: 100%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#popup button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>

<a href="#" id="hoverLink">Hover over me!</a>

<div id="popup">
<input type="text" placeholder="Enter your name">
<input type="text" placeholder="Enter your email">
<button id="submitBtn">Submit</button>
</div>

<script>
$(document).ready(function(){
$("#hoverLink").hover(function(){
$("#popup").fadeIn();
}, function(){
$("#popup").fadeOut();
});

$("#submitBtn").click(function(){
var name = $("#popup input").eq(0).val();
var email = $("#popup input").eq(1).val();
alert("Name: " + name + "\nEmail: " + email);
});
});
</script>
</body>
</html>

Output:

Conclusion:
To create a popup on mouse-over, set up a hidden div with two text boxes and a button. Use CSS
to style and position it, then toggle its visibility on link hover using CSS :hover or JavaScript.
This enhances interactivity by displaying input options without leaving the page.

You might also like