You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
4.4 KiB
HTML
185 lines
4.4 KiB
HTML
1 year ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<!-- Mobile Responsive Meta Tag -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Bootstrap Link -->
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<title>Bootstrap Introduction and Simple Styles</title>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="text-center bg-secondary">
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<!-- Header -->
|
||
|
|
<h1>Bootstrap Introduction and Simple Styles</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="d-none d-lg-inline-block w-25 mt-4">
|
||
|
|
<img class="rounded-circle bg-white img-fluid" src="https://www.drupal.org/files/project-images/bootstrap-stack.png" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End of Header -->
|
||
|
|
|
||
|
|
<!-- Bootstrap Utility Classes -->
|
||
|
|
|
||
|
|
<div class="container-fluid">
|
||
|
|
|
||
|
|
<h2>Boostrap Color Classes</h2>
|
||
|
|
|
||
|
|
<table class="table table-dark table-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Text</th>
|
||
|
|
<th>Background</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-primary">Primary link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-primary text-white">
|
||
|
|
Primary
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-secondary">Secondary link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-secondary text-white">
|
||
|
|
Secondary
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-success">Success link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-success text-white">
|
||
|
|
Success
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-danger">Danger link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-danger text-white">
|
||
|
|
Danger
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-warning">Warning link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-warning text-white">
|
||
|
|
Warning
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-info">Info link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-info text-white">
|
||
|
|
Info
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-light">Light link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-light text-dark">
|
||
|
|
Light
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-dark">Dark link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-dark text-white">
|
||
|
|
Dark
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-muted">Muted link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-transparent text-white">
|
||
|
|
Transparent
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="text-white">White link</a>
|
||
|
|
</td>
|
||
|
|
<td class="bg-white text-dark">
|
||
|
|
White
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<!-- End of Bootstrap Color Classes Table -->
|
||
|
|
|
||
|
|
<!-- Bootstrap Text Alignment Classes Table -->
|
||
|
|
<h2>Bootstrap Text Classes</h2>
|
||
|
|
|
||
|
|
<table class="table table-dark text-light table-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Alignment</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td class="text-left">Left</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="text-center">Center</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="text-right">Right</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<!-- For extra samll screens or small mobile phones, we can avoid using breakpoints -->
|
||
|
|
<!-- All mobile views in Google Chrome browser are considered small screen sizes -->
|
||
|
|
<!-- Screen size is greater than or equal to 576px -->
|
||
|
|
<!-- Larger mobile phones -->
|
||
|
|
<td class="text-sm-center">Small Center</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<!-- Screen size is greater than or equal to 786 px -->
|
||
|
|
<!-- Tablets -->
|
||
|
|
<td class="text-right text-md-left">Others Right/Medium Left</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<!-- Screen size is greater than or equal to 992px -->
|
||
|
|
<!-- Desktop -->
|
||
|
|
<td class="text-lg-right">Large Right</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<!-- Screen size is greater than or equal to 1200px -->
|
||
|
|
<!-- TV and other large screens -->
|
||
|
|
<td class="text-xl-center">Extra Large Center</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Bootstrap Script -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||
|
|
<!-- End of Bootstrap Script -->
|
||
|
|
</body>
|
||
|
|
</html>
|