ode-bootstrap-one
Version:
One theme by Open Digital Education"
618 lines (610 loc) • 26.8 kB
HTML
<html lang="en" class="ode-bootstrap-one">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./index.css" />
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<title>Mes parcours</title>
</head>
<body>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<h1>Navigation de parcours</h1>
<nav class="paths__navigation">
<div class="paths__border"></div>
<a class="paths__navigation-home" href="#"></a>
<a class="paths__navigation--previous"></a>
<!-- Success -->
<a class="paths__navigation-item--success " href="#">
<span class="paths__navigation--status"></span>
<span class="paths__step">1</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- feedback -->
<a class="paths__navigation-item--feedback" href="#">
<span class="paths__navigation--status"></span>
<span class="paths__step">2</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- Success -->
<a class="paths__navigation-item--success " href="#">
<span class="paths__navigation--status"></span>
<span class="paths__step">3</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- need help -->
<a class="paths__navigation-item--help paths__in-progress" href="#">
<span class="paths__navigation--status"></span>
<span class="paths__step">4</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- non exploré -->
<a class="paths__navigation-item--undiscovered" href="#">
<span class="paths__step">5</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- Locké -->
<a class="paths__navigation-item--locked" href="#">
<span class="paths__step">6</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- Locké -->
<a class="paths__navigation-item--locked" href="#">
<span class="paths__step">7</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<!-- Locké -->
<a class="paths__navigation-item--locked" href="#">
<span class="paths__step">8</span>
<span class="paths__navigation-title">Titre du module</span>
</a>
<a class="paths__navigation--next"></a>
</nav>
<div class="container p-5">
<h1 class="text-white">Test de composants Bootstrap :</h1>
</div>
<div class="container card">
<div class="m-4">
<h2>Alerts</h2>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="m-4">
<h2>Badges</h2>
<div class="row">
<span class="badge badge-primary m-1">Primary</span>
<span class="badge badge-secondary m-1">Secondary</span>
<span class="badge badge-success m-1">Success</span>
<span class="badge badge-danger m-1">Danger</span>
<span class="badge badge-warning m-1">Warning</span>
<span class="badge badge-info m-1">Info</span>
<span class="badge badge-light m-1">Light</span>
<span class="badge badge-dark m-1">Dark</span>
<div class="w-100"></div>
<span class="badge badge-blue m-1">Blue</span>
<span class="badge badge-indigo m-1">Indigo</span>
<span class="badge badge-purple m-1">Purple</span>
<span class="badge badge-pink m-1">Pink</span>
<span class="badge badge-red m-1">Red</span>
<span class="badge badge-orange m-1">Orange</span>
<span class="badge badge-yellow m-1">Yellow</span>
<span class="badge badge-green m-1">Green</span>
<span class="badge badge-teal m-1">Teal</span>
<span class="badge badge-cyan m-1">Cyan</span>
</div>
</div>
<div class="m-4">
<h2>Badge-pill</h2>
<div class="row">
<span class="badge badge-pill badge-primary m-1">Primary</span>
<span class="badge badge-pill badge-secondary m-1">Secondary</span>
<span class="badge badge-pill badge-success m-1">Success</span>
<span class="badge badge-pill badge-warning m-1">Warning</span>
<span class="badge badge-pill badge-danger m-1">Danger</span>
<span class="badge badge-pill badge-cyan m-1">Info</span>
<span class="badge badge-pill badge-light m-1">Light</span>
<span class="badge badge-pill badge-dark m-1">Dark</span>
<div class="w-100"></div>
<span class="badge badge-pill badge-blue m-1">Blue</span>
<span class="badge badge-pill badge-indigo m-1">Indigo</span>
<span class="badge badge-pill badge-purple m-1">Purple</span>
<span class="badge badge-pill badge-pink m-1">Pink</span>
<span class="badge badge-pill badge-red m-1">Red</span>
<span class="badge badge-pill badge-orange m-1">Orange</span>
<span class="badge badge-pill badge-yellow m-1">Yellow</span>
<span class="badge badge-pill badge-green m-1">Green</span>
<span class="badge badge-pill badge-teal m-1">Teal</span>
<span class="badge badge-pill badge-cyan m-1">Cyan</span>
</div>
</div>
<div class="m-4">
<h2>Buttons primary</h2>
<div class="row">
<button type="button" class="btn btn-primary m-1">Primary</button>
<button type="button" class="btn btn-secondary m-1">Secondary</button>
<button type="button" class="btn btn-success m-1">Success</button>
<button type="button" class="btn btn-danger m-1">Danger</button>
<button type="button" class="btn btn-warning m-1">Warning</button>
<button type="button" class="btn btn-info m-1">Info</button>
<button type="button" class="btn btn-light m-1">Light</button>
<button type="button" class="btn btn-dark m-1">Dark</button>
<button type="button" class="btn btn-primary m-1" disabled>Primary disabled</button>
<button type="button" class="btn btn-link m-1">Link</button>
<div class="w-100"></div>
<button type="button" class="btn btn-blue m-1">blue</button>
<button type="button" class="btn btn-indigo m-1">indigo</button>
<button type="button" class="btn btn-purple m-1">purple</button>
<button type="button" class="btn btn-pink m-1">pink</button>
<button type="button" class="btn btn-red m-1">red</button>
<button type="button" class="btn btn-orange m-1">orange</button>
<button type="button" class="btn btn-yellow m-1">yellow</button>
<button type="button" class="btn btn-green m-1">green</button>
<button type="button" class="btn btn-teal m-1">teal</button>
<button type="button" class="btn btn-cyan m-1">cyan</button>
</div>
</div>
<div class="m-4">
<h2>Buttons outline</h2>
<div class="row">
<button type="button" class="btn btn-outline-primary m-1">Primary</button>
<button type="button" class="btn btn-outline-secondary m-1">Secondary</button>
<button type="button" class="btn btn-outline-success m-1">Success</button>
<button type="button" class="btn btn-outline-danger m-1">Danger</button>
<button type="button" class="btn btn-outline-warning m-1">Warning</button>
<button type="button" class="btn btn-outline-info m-1">Info</button>
<button type="button" class="btn btn-outline-light m-1">Light</button>
<button type="button" class="btn btn-outline-dark m-1">Dark</button>
<button type="button" class="btn btn-outline-primary m-1" disabled>Primary disabled</button>
<div class="w-100"></div>
<button type="button" class="btn btn-outline-blue m-1">blue</button>
<button type="button" class="btn btn-outline-indigo m-1">indigo</button>
<button type="button" class="btn btn-outline-purple m-1">purple</button>
<button type="button" class="btn btn-outline-pink m-1">pink</button>
<button type="button" class="btn btn-outline-red m-1">red</button>
<button type="button" class="btn btn-outline-orange m-1">orange</button>
<button type="button" class="btn btn-outline-yellow m-1">yellow</button>
<button type="button" class="btn btn-outline-green m-1">green</button>
<button type="button" class="btn btn-outline-teal m-1">teal</button>
<button type="button" class="btn btn-outline-cyan m-1">cyan</button>
</div>
</div>
<div class="m-4">
<h2>Forms</h2>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
<form class="form-inline">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
<h3>Readonly</h3>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<h3>Checkboxes and radios</h3>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="p-2"></div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="p-2"></div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input"
disabled>
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>
</div>
<div class="m-4">
<h2>Tables</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="w-100"></div>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="m-4">
<h2>Modal</h2>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title lg</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title sm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Add</button>
</div>
</div>
</div>
</div>
</div>
<div class="m-4">
<h2>Navigation : left</h2>
<nav class="nav nav-pills">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
<div class="m-4">
<h2>Navigation : center</h2>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="m-4">
<h2>Navigation : right</h2>
<ul class="nav nav-pills justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="m-4">
<h2>Navigation : vertical</h2>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="m-4">
<h2>Navigation : fill and justify</h2>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="m-4">
<h2>Tabs</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<p class="m-3"><a href="https://getbootstrap.com/docs/4.1/components/navs/">Navigations : More exemple here</a>
</p>
</div>
<div class="m-4">
<h2>Progress bar</h2>
<div class="progress m-2">
<div class="progress-bar bg-teal" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar bg-orange" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar bg-red" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<h3>Striped</h3>
<div class="progress m-2">
<div class="progress-bar progress-bar-striped bg-orange" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h3>Animated stripes</h3>
<div class="progress m-2">
<div class="progress-bar progress-bar-striped bg-cyan progress-bar-animated" role="progressbar"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
</div>
<div class="col-12">
<div style="display: block;" class="humane humane-original-success">L'activité a été enregistré avec succès</div>
</div>
<div class="m-4" style="position: relative;overflow: hidden;height: 50px;">
<div class="image-contextual-menu">
<button class="edit-image">Retoucher</button>
<i class="resize-image small"></i>
<i class="resize-image medium"></i>
<i class="resize-image large"></i>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
</body>
</html>