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.
92 lines
3.3 KiB
92 lines
3.3 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;">
|
|
|
|
<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>
|