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
Unified 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"> <ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li> <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="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> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>

24
mise_en_page.html
View File

@ -44,7 +44,7 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li> <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="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> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
@ -98,12 +98,30 @@
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<div class="row"> <div class="row">
<div class="col-sm-12">a</div> <aside class="col-sm-12">aside</aside>
<div class="col-sm-12">a</div> <aside class="col-sm-12">aside</aside>
</div> </div>
</div> </div>
</div> </div>
</section> </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> </div>
<footer class="row"> <footer class="row">
<div class="col-lg-12">footer</div> <div class="col-lg-12">footer</div>

464
page_test.html
View File

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

2
tuto.css
View File

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

Write Preview
Loading…
Cancel
Save