You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
17 KiB
351 lines
17 KiB
<!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 de 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 SAT 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 class="row">
|
|
<form class="col-lg-6 well">
|
|
<legend>Légende</legend>
|
|
<h4>Comment m'avez-vous trouvé ?</h4>
|
|
<div class="radio">
|
|
<label for="ami" class="radio">
|
|
<input type="radio" name="origine" value="ami" id="ami">
|
|
Par un ami
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label for="web" class="radio">
|
|
<input type="radio" name="origine" value="web" id="web">
|
|
Sur le web
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="text">Text</label>
|
|
<input type="text" id="text" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="textarea">Textarea</label>
|
|
<textarea id="textarea" class="form-control"></textarea>
|
|
<p class="help-block">Vous pouvez agrandir la fenêtre</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="select">Select</label>
|
|
<select class="form-control" id="select">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" type="submit">Envoyer</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<!-- Exemple - formulaire form-horizontal -->
|
|
<form class="form-horizontal col-lg-6">
|
|
<div class="form-group">
|
|
<legend>Formulaire form-horizontal</legend>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label for="text" class="col-lg-2 control-label">Text : </label>
|
|
<div class="col-lg-10">
|
|
<input type="text" class="form-control" id="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label for="textarea" class="col-lg-2 control-label">Textarea : </label>
|
|
<div class="col-lg-10">
|
|
<input type="textarea" class="form-control" id="textarea">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label for="select" class="col-lg-2 control-label">Select: </label>
|
|
<div class="col-lg-10">
|
|
<select id="select" class="form-control">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<button class="pull-right btn btn-default">Envoyer</button>
|
|
</div>
|
|
</form> <!-- ./form -->
|
|
</div>
|
|
|
|
<!-- Formulaire sur une ligne - avec form-inline -->
|
|
|
|
<div class="row">
|
|
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label class="sr-only" for="text">Texte</label>
|
|
<input type="text" class="form-control" id="text" placeholder="un texte ici">
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Se rappeler de moi..
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Envoyer</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
<!-- Formulaire avec input-group et input-group-addon -->
|
|
|
|
<div class="row">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">€</span>
|
|
<input type="text" class="form-control" value="100">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" style="text-align:right" value="100,50">
|
|
<span class="input-group-addon">€</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Accoler un bouton à un contrôle -->
|
|
|
|
<div class="row">
|
|
<form class="form-inline">
|
|
<div class="input-group col-lg-3">
|
|
<input type="text" class="form-control" style="text-align:right" value="10 000">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">Valider</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Formulaires avec stylisation selon l'état -->
|
|
|
|
<div class="row">
|
|
<form class="col-lg-5">
|
|
<fieldset>
|
|
<legend>Validation, erreur et succès</legend>
|
|
<div class="form-group has-error has-feedback">
|
|
<label class="control-label" for="idError">Erreur</label>
|
|
<input type="text" class="form-control" id="idError">
|
|
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
|
|
<span class="help-block">Corrigez l'erreur s'il vous plait</span>
|
|
</div>
|
|
<div class="form-group has-warning has-feedback">
|
|
<label class="control-label" for="idWarning">Avertissement</label>
|
|
<input type="text" class="form-control" id="idWarning">
|
|
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
|
|
<span class="help-block">Il y a un problème dans la saisie</span>
|
|
</div>
|
|
<div class="form-group has-success has-feedback">
|
|
<label class="control-label" for="idSuccess">Réussite</label>
|
|
<input type="text" class="form-control" id="idSuccess">
|
|
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
|
<span class="help-block">Saisie correcte</span>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Exemple de bouton dynamique avec Bootstrap & jQuery -->
|
|
<a style="font-weight: bold;" href="btn-jquery-bootstrap.html">Autre exemple de bouton avec Bootstrap & jQuery (legacy - refaire avec JS)</a>
|
|
|
|
</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>
|