<!ELEMENT courses (student)+>
<!ELEMENT student (name,regno)>
<!ATTLIST student class (UG|PG) FIXED "UG">
<!ELEMENT name (first,last)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT regno (#PCDATA)>
Programming is an art and skill that can be calibrated by learning the different ways to apply logic to a solution. This blog helps the beginner level programmers and computer science graduates to acquire programming skill easily by learning a program a day. They can also try to rewrite the same program in a more efficient way. This will boost up their programming knowledge.
Monday, 9 December 2024
Tuesday, 2 April 2024
Bootstrap working with content
WORKING
WITH CONTENT
Content
components in Bootstrap are reserved for the most commonly used HTML elements
such as images, tables, typography, and more.
Bootstrap comes with a brand-new CSS reset called Reboot.
It builds on top of Normalize.css to make
your site look even better out of the box.
Reboot, a collection of element-specific CSS changes in a single file,
kickstart Bootstrap to provide an elegant, consistent, and simple baseline to
build upon.
REBOOT
BASICS
Update
some browser default values to use rems instead
of ems
for scalable component spacing.
rem is short for root em and is a little bit different from a regular em unit.
em is a relative unit to the font-size of the parent element it is contained
within.
The rem unit is not relative to its parent, it is relative to the root or HTML
element.
This makes it much easier to determine the actual size of text or other content
components that will appear on the screen.
REBOOT PAGE
DEFAULTS
The <html> and <body> elements
are updated to provide better page-wide defaults
The box-sizing is
globally set on every element—including *::before and *::after, to border-box.
The base font-size is set to 16px (the browser default).
font-size: 1rem is applied on the <body> for easy
responsive type-scaling via media queries
The <body> also sets a
global font-family, font-weight, line-height, and color.
This is inherited later by some form elements to prevent font inconsistencies.
For safety, the <body> has a declared background-color,
defaulting to #fff.
REBOOT
HEADINGS AND PARAGRAPHS
All
heading elements have been reset to have their top-margin removed.
Headings have a margin-bottom value of 0.5rem
Paragraphs
have a margin-bottom value of 1rem.
Headings inherit their color by
default, but can be overridden using CSS variable, --bs-heading-color.
Lists
All lists
have their top margin removed, has a bottom margin of 1rem.
In nesting lists, there is no bottom-margin at all.
The left padding has also been reset
REBOOT
TABLES AND FORMS
Tables
are slightly adjusted to style <caption>s, collapse
borders, and ensure consistent text-align throughout.
Various form elements have been rebooted for simpler base styles.
<fieldset>s have no borders, padding, or margin so they can be easily
used as wrappers for individual inputs or groups of inputs.
<legend>s, like fieldsets, have also been restyled to be displayed as a
heading of sorts.
<label>s are set to display: inline-block to
allow margin to be applied.
<input>s, <select>s, <textarea>s,
and <button>s are mostly addressed by Normalize, but Reboot removes
their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal
resizing often “breaks” page layout.
<button>s and <input> button elements have cursor:
pointer when :not(:disabled).
HEADINGS
EXAMPLE
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h3>
This is the main title
<small class="text-muted">this is a description</small>
</h3>
Display
headings are configured via the $display-font-sizes Sass
map and two variables, $display-font-weight and $display-line-height.
PARAGRAPH
EXAMPLE
<p
class="lead"> here's some text with the .lead class to make this
paragraph look a bit different and standout. </p>
TEXT FORMATTING
<p>mark
tag <mark>highlights</mark> text.</p>
<p>del tag used to
<del>delete</del> text.</p>
<p>s tag is used for text
which is <s>no longer accurate</s>.</p>
<p><ins>This line is added.</ins></p>
<p>This is
<u>underlined</u>.</p>
<p><small>small tag
is used for fine prints.</small></p>
<p><strong>strong
tag is used to bold text.</strong></p>
<p><em>em tag is used to italicize
text.</em></p>
LISTS
Unstyled
class
Remove the
default list-style and
left margin on list items
This only applies to immediate children list items
Example
<ul
class="list-unstyled"> <li>item</li>
<li>item</li> <li>item</li> <li>item</li>
<li>item</li> </ul>
The next most useful class is list-inline,
which will line up each <li> in a horizontal line.
Need to add a class of list-inline-item to each
<li> tag.
DESCRIPTION
LIST
Align
terms and descriptions horizontally by using our grid system’s predefined
classes like row and col
For longer terms, add a .text-truncate class
to truncate the text with an ellipsis.
<dt class="col-sm-3 text-truncate">Truncated term is
truncated</dt>
<dl class="row"> <dt
class="col-sm-3">Description lists</dt> <dd
class="col-sm-9">A description list is perfect for defining
terms.</dd>
Bootstrap Images
BOOTSTRAP IMAGES
Bootstrap
allows you to do a few useful things with images using CSS classes. These things
include: making images responsive, converting images to shapes, and aligning
images.
MAKING IMAGES RESPONSIVE
Images in Bootstrap are made
responsive with the .img-fluid class.
This applies max-width:
100%; and height: auto; to the image so that it scales with the
parent width.
<img
src="mycar.jpg" class="img-fluid" alt="Responsive
Image">
Can use .img-thumbnail to give
an image a rounded 1px border appearance.
USING IMAGE SHAPES
Bootstrap 4 uses three
different shape styles that can be applied to images:
·
img-rounded will add round corners to
your image
·
img-circle will crop your image into
a circle
·
img-thumbnail will add round corners
and a border to make the image look like a thumbnail
Bootstrap 5 replaced the above
classes with the classes given below.
<img src="..."
class="rounded" alt="..."><
img src="..."
class="rounded-top" alt="...">
<img src="..."
class="rounded-end" alt="...">
<img src="..."
class="rounded-bottom" alt="...">
<img src="..."
class="rounded-start" alt="...">
<img src="..."
class="rounded-circle" alt="...">
<img src="..."
class="rounded-pill" alt="...">
Rounded
corner sizes range from 0 to 5
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
ALIGNING
IMAGES
Align
images with the helper float classes or text alignment classes.
Block-level
images can be centered using the .mx-auto margin utility class.
<img
src="..." class="rounded float-start"
alt="...">
<img
src="..." class="rounded float-end" alt="...">
<img src="..."
class="rounded mx-auto d-block" alt="...">
<div
class="text-center">
<img src="..." class="rounded"
alt="...">
</div>
Bootstrap Tables
BOOTSTRAP
TABLES
The basic table
structure in Bootstrap takes advantage of almost all the available HTML table
tags. Add the base class .table to any <table
<table
class="table">
All table styles are not inherited in Bootstrap,
meaning any nested tables can be styled independently from the parent.
TABLE CLASS VARIANTS
Use contextual classes to colour tables, table rows or individual cells.
<!-- On tables -->
<table
class="table-primary">...</table>
<table
class="table-secondary">...</table>
<table
class="table-success">...</table>
<table
class="table-danger">...</table>
<table
class="table-warning">...</table>
<table
class="table-info">...</table>
<table
class="table-light">...</table>
<table
class="table-dark">...</table>
<!-- On rows -->
<tr
class="table-primary">...</tr>
<tr
class="table-secondary">...</tr>
<tr
class="table-success">...</tr>
<tr
class="table-danger">...</tr>
<!-- On cells (`td` or `th`) -->
<tr> <td
class="table-primary">...</td>
<td
class="table-secondary">...</td>
<td
class="table-success">...</td>
<td
class="table-danger">...</td>
Table Classes
|
Class-Name |
Description |
Example |
|
table-striped |
to add zebra-striping to any table row within the |
<table class="table table-striped"> |
|
table-striped-columns |
to add zebra-striping to any table column. |
<table class="table table-striped-columns"> |
|
.table-hover |
to
enable a hover state on table rows within a |
<table class="table table-hover"> |
|
table-active |
To
highlight a table row or cell by adding this class. |
<table class="table"> <thead> ... </thead> <tbody><tr class="table-active"> |
|
table-bordered |
To add borders on all sides of the table and cells. |
<table class="table table-bordered"> |
|
table-borderless |
To prepare a table without borders. |
<table class="table table-borderless"> ... |
|
table-sm |
to
make any |
<table class="table table-sm"> |
|
table-hover |
adds
a hover effect (grey background color) on table rows: |
<table class="table table-hover"> |
|
table-dark |
adds a black background to the table |
<table class="table table-dark"> |
|
table-dark and
.table-striped |
to create a dark, striped table |
<table class="table table-dark table-striped"> |
|
table-responsive |
adds a scrollbar to the table when needed |
<div class="table-responsive"> <table class="table"> ... </table></div> |
RESPONSIVE TABLES
Possible
to decide when the table should get a scrollbar, depending on the screen width:
|
Class |
Screen width |
|
.table-responsive-sm |
< 576px |
|
.table-responsive-md |
< 768px |
|
.table-responsive-lg |
< 992px |
|
.table-responsive-xl |
< 1200px |
|
.table-responsive-xxl |
< 1400px |
SAMPLE SCRIPT
<link rel="stylesheet" href="CSS/bootstrap.min.css" />
<script src="JS/bootstrap.min.js"></script>
<script
src="JS/bootstrap.bundle.min.js"></script>
<!doctype html>
<html>
<head>
<title>Navigation Bootstrap</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
</head>
</head>
<body>
<table class="table
table-hover table-danger table-bordered border-primary">
<thead>
<tr class="table-secondary">
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
</html>
Subscribe to:
Posts (Atom)