Last active
April 24, 2023 11:51
-
-
Save Tazaf/329374f10e54818875620c9e03a2609a to your computer and use it in GitHub Desktop.
MAS-RAD - Final example file for "Bootstrap - Layout management"
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> | |
<div class="row"> | |
<h2 class="col-12">Lists</h2> | |
<div class="col-6"> | |
<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> | |
<div class="col-6"> | |
<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> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-5"> | |
<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 form</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> | |
</div> | |
<div class="col-5 offset-2"> | |
<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> | |
</div> | |
</div> | |
<h2>Color classes</h2> | |
<p class="text-primary col-6 col-sm-4 col-md-3 col-lg-2"> | |
This text uses the primary color scheme. | |
</p> | |
<p class="text-success col-6 col-sm-4 col-md-3 col-lg-2"> | |
This text uses the success color scheme. | |
</p> | |
<p class="bg-warning col-6 col-sm-4 col-md-3 col-lg-2"> | |
This paragraph has a warning colored background. | |
</p> | |
<p class="bg-info col-6 col-sm-4 col-md-3 col-lg-2"> | |
This paragraph has an info colored background. | |
</p> | |
<p class="bg-danger text-light col-6 col-sm-4 col-md-3 col-lg-2"> | |
Colored background and colored text | |
</p> | |
<div class="d-none d-sm-block"> | |
<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> | |
</div> | |
</main> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment