5 changed files with 440 additions and 144 deletions
@ -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> |
||||
Loading…
Reference in new issue