|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
|
|
<html lang="fr"> |
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
|
@ -17,6 +17,7 @@ |
|
|
|
|
|
|
|
<!-- Custom styles for this template --> |
|
|
|
<link href="starter-template.css" rel="stylesheet"> |
|
|
|
<link href="tuto.css" rel="stylesheet"> |
|
|
|
|
|
|
|
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
|
|
@ -50,17 +51,90 @@ |
|
|
|
</nav> |
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
|
|
<div class="starter-template"> |
|
|
|
<h1>Bootstrap starter template</h1> |
|
|
|
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> |
|
|
|
|
|
|
|
<!-- Plusieurs rangées classiques --> |
|
|
|
<h2>Plusieurs rangées classiques</h2> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-1">1 col</div> |
|
|
|
<div class="col-lg-2">2 colonnes</div> |
|
|
|
<div class="col-lg-3">3 colonnes</div> |
|
|
|
<div class="col-lg-6">6 colonnes</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-12">12 colonnes</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-4">4 colonnes</div> |
|
|
|
<div class="col-lg-8">8 colonnes</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Avec offset - saut de colonnes --> |
|
|
|
<h2>Exemple saut de colonnes</h2> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-3">3 colonnes</div> |
|
|
|
<div class="col-lg-offset-6 col-lg-3">3 colonnes</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Avec rangées imbriquées --> |
|
|
|
<h2>Exemple rangées imbriquées</h2> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-8">8 colonnes |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-3">3 colonnes</div> |
|
|
|
<div class="col-lg-6">6 colonnes</div> |
|
|
|
<div class="col-lg-3">3 colonnes</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Enchainement d'imbrications --> |
|
|
|
<h2>Enchainement d'imbrications</h2> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-12">Premier niveau avec 12 colonnes |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-8">Second niveau avec 8 colonnes |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-4">Troisième niveau avec 4 colonnes</div> |
|
|
|
<div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div> |
|
|
|
<div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-4">Second niveau avec 4 colonnes</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Petit TP --> |
|
|
|
<h2>Petit TP - test</h2> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-6">col 6 |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-4">col 4</div> |
|
|
|
<div class="col-lg-4 col-lg-offset-4">col 4 avec offset 4</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-lg-6">col 6 |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-4">col 4</div> |
|
|
|
<div class="col-lg-8">col 8</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> <!-- /.starter-template --> |
|
|
|
</div><!-- /.container --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap core JavaScript |
|
|
|
================================================== --> |
|
|
|
<!-- Bootstrap core JavaScript --> |
|
|
|
<!-- Placed at the end of the document so the pages load faster --> |
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
|
|
|
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> |
|
|
|
|
