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

more examples 31032020

master
art.dambrine 5 years ago
parent
b9766585f9
commit
dd9763f58e
5 changed files with 440 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 92
      btn-jquery-bootstrap.html
  2. 2
      index.html
  3. 24
      mise_en_page.html
  4. 464
      page_test.html
  5. 2
      tuto.css

92
btn-jquery-bootstrap.html
View File

@ -0,0 +1,92 @@
<!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;">
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Saisie</label>
<input id="text" type="text" class="form-control" placeholder="Texte ici">
</div>
<button type="submit" class="btn btn-primary pull-right">Envoyer</button>
<p class="help-block">Déclenchez une alerte en envoyant un texte de moins de 4 caractères.</p>
<div class="alert alert-block alert-danger" style="display:none">
<h4>Erreur !</h4>
Vous devez entrer au moins 4 caractères !
</div>
</form>
</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>
<script>
$(function(){
$("form").on("submit", function() {
if($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return false;
}
});
});
</script>
</body>
</html>

2
index.html
View File

@ -44,7 +44,7 @@
<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>
<li><a href="page_test.html">Page de test</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>

24
mise_en_page.html
View File

@ -44,7 +44,7 @@
<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>
<li><a href="page_test.html">Page de test</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
@ -98,12 +98,30 @@
</div>
<div class="col-md-2">
<div class="row">
<div class="col-sm-12">a</div>
<div class="col-sm-12">a</div>
<aside class="col-sm-12">aside</aside>
<aside class="col-sm-12">aside</aside>
</div>
</div>
</div>
</section>
<section class="col-lg-10 col-lg-offset-2">section
<div class="row">
<div class="col-md-12">
<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>
</section>
</div>
<footer class="row">
<div class="col-lg-12">footer</div>

464
page_test.html
View File

@ -1,165 +1,351 @@
<!DOCTYPE HTML>
<html>
<head>
<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;
/* [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>
</head>
<body>
<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 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>
</nav>
<div class="container">
<div class="starter-template" style="text-align: unset;">
<!-- <header class="page-header"> -->
<!-- <header class="col-lg-12"> -->
<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>
<!-- </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>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</body>
</html>

2
tuto.css
View File

@ -3,7 +3,7 @@ body {
}
[class*="col-"], footer {
background-color: lightgreen;
background-color: lightblue;
border: 2px solid black;
border-radius: 6px;
line-height: 40px;

Write Preview
Loading…
Cancel
Save