Lecture Notes Of Class 5 - Buttons and Alerts
Objective
By the end of this class,
students will understand how to use different button styles and sizes in HTML
and CSS (or Bootstrap) and display alerts for success, error, and warnings.
1.
Introduction to Buttons
Buttons are an essential part of
any web application, allowing users to interact with the system by performing
actions like submitting forms, navigating pages, or triggering events.
Types of
Buttons
Buttons can be categorized based
on their styles, purposes, or the frameworks used to style them. If using
Bootstrap, buttons are styled using predefined classes such as:
- Primary
Button: Indicates a primary action.
- Secondary
Button: For less important actions.
- Success
Button: Indicates a successful or positive action.
- Danger
Button: Indicates a potentially negative action.
- Warning
Button: For cautionary actions.
- Info
Button: Displays informational messages.
- Light
Button: Minimal styling, usually light background.
- Dark
Button: Dark background, opposite to light.
- Link
Button: Styled as a hyperlink.
2. Button
Styles and Sizes
Basic
Syntax for Buttons
Buttons are created using the <button>
tag or <a> tags styled as buttons. Examples:
html
Copy code
<!--
Default Button -->
<button>Click
Me</button>
Using
Classes for Styling (Bootstrap)
Bootstrap provides predefined
classes to style buttons.
html
Copy code
<!--
Example Buttons -->
<button
class="btn btn-primary">Primary</button>
<button
class="btn btn-secondary">Secondary</button>
<button
class="btn btn-success">Success</button>
<button
class="btn btn-danger">Danger</button>
<button
class="btn btn-warning">Warning</button>
<button
class="btn btn-info">Info</button>
<button
class="btn btn-light">Light</button>
<button
class="btn btn-dark">Dark</button>
<button
class="btn btn-link">Link</button>
Button
Sizes
Buttons can be adjusted in size
using additional classes.
- Large
Button: btn-lg
- Small
Button: btn-sm
- Default
Button: No size class needed.
Example:
html
Copy code
<button
class="btn btn-primary btn-lg">Large Button</button>
<button
class="btn btn-primary btn-sm">Small Button</button>
<button
class="btn btn-primary">Default Button</button>
Button
States
You can disable a button to
prevent user interaction using the disabled attribute or class.
html
Copy code
<button
class="btn btn-primary" disabled>Disabled Button</button>
3. Alerts
Alerts are used to display
important messages to users, such as notifications, warnings, or errors. In
Bootstrap, alerts are styled using predefined classes.
Basic
Syntax for Alerts
Alerts are created using the <div>
tag with the alert class and a contextual class for the alert type.
html
Copy code
<div class="alert
alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert
alert-danger" role="alert">
This is a danger alert—be careful!
</div>
<div class="alert
alert-warning" role="alert">
This is a warning alert—pay attention!
</div>
Types of
Alerts
- Success
Alert: alert-success (e.g., "Operation
successful!")
- Danger
Alert: alert-danger (e.g., "An error
occurred!")
- Warning
Alert: alert-warning (e.g., "Proceed with
caution!")
- Info
Alert: alert-info (e.g., "Information
update.")
- Light
and Dark Alerts: alert-light, alert-dark
Dismissing
Alerts
Alerts can be made dismissible
(closable) using the alert-dismissible class and a close button.
html
Copy code
<div class="alert
alert-warning alert-dismissible fade show" role="alert">
Warning! This is a dismissible alert.
<button type="button" class="btn-close"
data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Lab Tasks
Task 1:
Add Buttons with Various Styles
1. Create a
webpage with the title "Button Styles and Alerts."
2. Add
buttons with the following classes:
o
btn-primary
o
btn-danger
o
btn-success
o
btn-warning
3. Use
large, small, and default sizes for at least one button.
Task 2:
Display Alerts for Success, Error, and Warnings
1. Add a
success alert with the message: "Your operation was successful!"
2. Add a
danger alert with the message: "An error occurred while processing your
request!"
3. Add a
warning alert with the message: "Please proceed with caution!"
4. Make one
of the alerts dismissible.
Code
Example: Combined Buttons and Alerts
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Buttons and Alerts</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Button Styles</h2>
<button class="btn
btn-primary">Primary</button>
<button class="btn btn-danger
btn-lg">Large Danger</button>
<button class="btn btn-success
btn-sm">Small Success</button>
<h2 class="mt-5">Alerts</h2>
<div class="alert
alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger
alert-dismissible fade show" role="alert">
This is a dismissible danger alert!
<button type="button" class="btn-close"
data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert
alert-warning" role="alert">
Warning! Pay attention!
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Learning
Outcomes
- Students
will understand how to style buttons using predefined classes.
- Students
will be able to create alerts with various contextual styles.
- Students
will understand how to make alerts dismissible for better user
interaction.
No comments:
Post a Comment