art.dambrine
/
bootstrap-example
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

tests de mise en page bootstrap

master
art.dambrine 5 years ago
parent
fa70222ef3
commit
b9766585f9
3 changed files with 295 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      index.html
  2. 126
      mise_en_page.html
  3. 165
      page_test.html

7
index.html
View File

@ -42,9 +42,9 @@
</div> </div>
<div id="navbar" class="collapse navbar-collapse"> <div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="mise_en_page.html">Mise en page</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="page_test.html">Page test</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
@ -109,6 +109,7 @@
<div class="col-md-4">Second niveau avec 4 colonnes</div> <div class="col-md-4">Second niveau avec 4 colonnes</div>
</div> </div>
</div> </div>
</div>
<!-- Petit TP --> <!-- Petit TP -->
<h2>Petit TP - test</h2> <h2>Petit TP - test</h2>

126
mise_en_page.html
View File

@ -0,0 +1,126 @@
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://art-dambrine.ovh/favicon.ico"/>
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 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 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="mise_en_page.html">Mise en page</a></li>
<li><a href="page_test.html">Page test</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<!-- Bootstrap starter template - exemple mise en page -->
<h1>Bootstrap starter template - exemple mise en page</h1>
<header class="row">
<div class="col-lg-12">
Entete
</div>
</header>
<div class="row">
<nav class="col-lg-2">
Menu
</nav>
<section class="col-lg-10">
Section
</section>
</div>
<footer class="row">
Pied de page
</footer>
<!-- Mise en page - exemple plus fournit -->
<h1>Mise en page - exemple plus fournit</h1>
<header class="row">
<div class="col-lg-12">header</div>
</header>
<div class="row">
<nav class="col-lg-2">menu</nav>
<section class="col-lg-10">section
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
<div class="col-sm-6">article</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<div class="col-sm-12">a</div>
<div class="col-sm-12">a</div>
</div>
</div>
</div>
</section>
</div>
<footer class="row">
<div class="col-lg-12">footer</div>
</footer>
</div> <!-- /.starter-template -->
</div><!-- /.container -->
<!-- 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>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

165
page_test.html
View File

@ -0,0 +1,165 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<style type="text/css">
/* [class*="col"] { margin-top: 20px; } */
img {
width: 100%;
background-color: grey;
border: 2px solid black;
border-radius: 2px;
line-height: 80px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="mise_en_page.html">Mise en page</a></li>
<li><a href="page_test.html">Page test</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template" style="text-align: unset;">
<!-- <header class="page-header"> -->
<!-- <header class="col-lg-12"> -->
<h1>Mon amour pour les tigres</h1>
<!-- </header> -->
<section class="row">
<div class="col-lg-12">
<p>
Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>
<p>Voici ce qu'en dit le wikipedia :</p>
<blockquote>
Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera.
Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde.
L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur,
il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles.
Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ;
le mâle possède un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>
</div>
</section>
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
</section>
<div class="row">
<section class="col-sm-4">
<h5>Voici les sous-espèces des tigres :</h5>
<br>
<ul>
<li>Tigre de Sibérie</li>
<li>Tigre de Chine méridionale</li>
<li>Tigre de Bali</li>
<li>Tigre de d'Indochine</li>
<li>Tigre de Malaisie</li>
<li>Tigre de Java</li>
<li>Tigre de Sumatra</li>
<li>Tigre du Bengale</li>
<li>Tigre de la Caspienne</li>
</ul>
</section>
<section class="col-sm-8">
<img src="images/photo-tigre.jpg" alt="Tigre">
</section>
</div>
<div class="row">
<section class="col-sm-8 table-responsive">
<table class="table table-bordered table-striped table-condensed">
<caption>
<h4>Les menaces pour les tigres</h4>
</caption>
<thead>
<tr>
<th>Lieu</th>
<th>Menace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Grand Mekong</td>
<td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle
et fragmentation des habitats du fait du développement non durable d’infrastructures</td>
</tr>
<tr>
<td>Île de Sumatra</td>
<td>Production d’huile de palme et de pâtes à papiers</td>
</tr>
<tr>
<td>Indonésie et Malaisie</td>
<td>Pâte à papier, l’huile de palme et le caoutchouc</td>
</tr>
<tr>
<td>États-Unis</td>
<td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
</tr>
<tr>
<td>Europe</td>
<td>Gros appétit pour l’huile de palme</td>
</tr>
<tr>
<td>Népal</td>
<td>Commerce illégal de produits dérivés de tigres</td>
</tr>
</tbody>
</table>
</section>
<section class="col-sm-4">
<address>
<p>Vous pouvez me contacter à cette adresse :</p>
<strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br>
</address>
</section>
</div>
</div> <!-- ./starter-template -->
</div>
<!-- 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>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save