Web Technology
Web Technology
Unit-2
8-Marks
Tables in Bootstrap:
Bootstrap provides a simple and responsive approach to creating tables. It offers various styles and classes to
customize their appearance and behavior.
Basic Table Structure:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>john</td>
</tr>
</tbody>
</table>
Key Classes:
table: The base class for creating tables.
thead: Defines the table header.
tbody: Defines the table body.
tr: Represents a table row.
th: Represents a table header cell.
td: Represents a table data cell.
Customization:
Striped rows: Add the table-striped class.
Bordered table: Add the table-bordered class.
Hoverable rows: Add the table-hover class.
Small table: Add the table-sm class.
Large table: Add the table-lg class.
Forms in Bootstrap
Bootstrap offers a comprehensive set of form elements and styles to create various types of forms.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Key Classes:
form: The base class for creating forms.
form-group: Groups form elements together.
form-control: Applies styling to form elements like inputs and selects.
label: Creates labels for form elements.
input: Creates input fields of various types (text, email, password, etc.).
textarea: Creates multi-line text areas.
select: Creates dropdown lists.
button: Creates buttons.
Customization:
Form layout: Use the form-inline class for horizontal forms and the form-horizontal class for vertical forms.
Form validation: Utilize Bootstrap's built-in validation features to provide feedback to users.
Custom styles: Apply custom CSS to further customize the appearance of forms.
HTML Structure:
<div class="box">
</div>
CSS Styling:
.box {
width: 200px;
height: 100px;
border: 2px solid black;
background-color: lightblue;
}
Explanation:
The <div> element creates a container for your box.The class="box" attribute assigns a unique identifier to the container, allowing
you to style it with CSS.
CSS:
.box: Targets the element with the class "box".
width: 200px;: Sets the width of the box to 200 pixels.
height: 100px;: Sets the height of the box to 100 pixels.
border: 2px solid black;: Creates a 2-pixel-wide solid black border around the box.
background-color: lightblue;: Fills the box with a light blue background color.
Colors:
Colors are added by css to decorate our web site.
We can set a color to the text as we want.
There are 145 colors in css (Black,White,Red,..,ect)
5-Marks
Color Grading:
Hue, Saturation, and Lightness (HSL): Adjust the color's hue, saturation, and lightness using the hsl().
function:
.element {
background-color: hsl(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% lightness */
}
Hue, Saturation, and Value (HSV): Adjust the color's hue, saturation, and value using the hsv().
function:
.element {
background-color: hsv(240, 50%, 70%);
/* Blue hue, 50% saturation, 70% value */
}
Opacity: Control the transparency of the background using the opacity property.
.element {
background-color: rgba(0, 0, 0, 0.5);
/* Black with 50% opacity */
}
Gradients: Create smooth color transitions using linear or radial gradients.
.element {
background-image: linear-gradient(to right, red, blue);
}