Last active
April 24, 2023 11:47
-
-
Save Tazaf/18732ef01164f7b6348443c4c4748f42 to your computer and use it in GitHub Desktop.
MAS-RAD - Final example file for "Bootstrap - Basics"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
<title>Bootstrap initiation</title> | |
<!-- Add here the link to Bootstrap --> | |
<link | |
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" | |
rel="stylesheet" | |
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" | |
crossorigin="anonymous" | |
/> | |
<link | |
rel="stylesheet" | |
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" | |
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" | |
crossorigin="anonymous" | |
referrerpolicy="no-referrer" | |
/> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand navbar-dark bg-primary sticky-top"> | |
<div class="container"> | |
<span class="navbar-brand">Bootstrap Initiation</span> | |
<div class="collapse navbar-collapse"> | |
<ul class="navbar-nav"> | |
<li class="nav-item"> | |
<a href="https://google.com" class="nav-link">Google</a> | |
</li> | |
</ul> | |
</div> | |
<a class="btn btn-outline-light" href="#">Go to top</a> | |
</div> | |
</nav> | |
<main class="container"> | |
<h1>Hello, world!</h1> | |
<h2>Icons</h2> | |
<div> | |
<button class="btn btn-light"><i class="fas fa-align-left"></i></button> | |
<button class="btn btn-light"> | |
<i class="fas fa-align-center"></i> | |
</button> | |
<button class="btn btn-light"> | |
<i class="fas fa-align-right"></i> | |
</button> | |
</div> | |
<h2>Cards</h2> | |
<div class="card text-primary bg-warning"> | |
<div class="card-header text-danger">John Doe commented on that:</div> | |
<div class="card-body bg-dark">Today, I ate an apple. It was tasty</div> | |
<div class="card-footer bg-info"> | |
<button class="btn btn-light btn-sm">Like</button> | |
</div> | |
</div> | |
<h2>Lists</h2> | |
<div class="list-group"> | |
<a | |
class="list-group-item list-group-item-action list-group-item-success" | |
> | |
<h5 class="d-flex justify-content-between"> | |
Jame T. Kirk <span class="badge text-bg-light">3</span> | |
</h5> | |
<p>Beam me up, Scotty!</p> | |
</a> | |
<a | |
class="list-group-item list-group-item-action list-group-item-info" | |
></a> | |
<a | |
class="list-group-item list-group-item-action list-group-item-danger" | |
></a> | |
</div> | |
<div class="list-group"> | |
<a | |
href="https://en.wikipedia.org/wiki/Star_Trek:_The_Original_Series" | |
class="list-group-item list-group-item-action" | |
>The Original Series <span class="badge text-bg-primary">3</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Next Generation <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Deep Space Nine <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Voyager <span class="badge text-bg-primary">7</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Enterprise <span class="badge text-bg-primary">4</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Discovery <span class="badge text-bg-primary">3</span></a | |
> | |
<a href="#" class="list-group-item list-group-item-action" | |
>Picard <span class="badge text-bg-primary">2</span></a | |
> | |
</div> | |
<h2>Forms</h2> | |
<form> | |
<div class="form-group"> | |
<label for="firstname">First name</label> | |
<input type="text" id="firstname" class="form-control" /> | |
</div> | |
<div class="form-group"> | |
<label for="lastname">Last name</label> | |
<input type="text" id="lastname" class="form-control" /> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="checkbox" | |
value="" | |
id="defaultCheck1" | |
/> | |
<label class="form-check-label" for="defaultCheck1" | |
>Remember me</label | |
> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="radio" | |
name="directions" | |
id="leftDirection" | |
value="left" | |
checked | |
/> | |
<label class="form-check-label" for="leftDirection">Left</label> | |
</div> | |
<div class="form-check"> | |
<input | |
class="form-check-input" | |
type="radio" | |
name="directions" | |
id="rightDirection" | |
value="right" | |
/> | |
<label class="form-check-label" for="rightDirection">Right</label> | |
</div> | |
<input type="submit" class="btn btn-success" value="Register" /> | |
</form> | |
<h2>Buttons</h2> | |
<div> | |
<a href="#" class="btn btn-default">Link</a> | |
<button class="btn btn-info btn-lg">Button</button> | |
<input type="submit" value="Input Submit" class="btn btn-success" /> | |
<input | |
type="button" | |
value="Input Button" | |
class="btn btn-outline-danger btn-sm" | |
/> | |
</div> | |
<h2>Color classes</h2> | |
<p class="text-primary">This text uses the primary color scheme.</p> | |
<p class="text-success">This text uses the success color scheme.</p> | |
<p class="bg-warning">This paragraph has a warning colored background.</p> | |
<p class="bg-info">This paragraph has an info colored background.</p> | |
<p class="bg-danger text-light">Colored background and colored text</p> | |
<h2>Tables</h2> | |
<table class="table table-striped table-bordered table-hover"> | |
<thead> | |
<th>#</th> | |
<th>First name</th> | |
<th>Last name</th> | |
<th>Starship</th> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>Jean-Luc</td> | |
<td>Picard</td> | |
<td>Enterprise D</td> | |
</tr> | |
<tr> | |
<td>2</td> | |
<td>Benjamin</td> | |
<td>Sisko</td> | |
<td>Defiant</td> | |
</tr> | |
<tr> | |
<td>3</td> | |
<td>Kathryn</td> | |
<td>Janeway</td> | |
<td>Voyager</td> | |
</tr> | |
</tbody> | |
</table> | |
</main> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment