/fdata%2F0451946%2Favatar-blog-1066097-tmpphp3M2yUZ.png){kind=avatar}
Bootstrap(documentation en français)
http://www.oneskyapp.com/docs/bootstrap/fr
1-Utilisation de Glyphicons
Icones disponibles http://getbootstrap.com/components/
2 possibilités : soit utiliser un CDN, soit télécharger les fichiers
Exemple
| <!doctype html> <html> <head> <meta charset="utf-8"> <title></title>
<!--CDN--> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <!--Local--> <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">--> <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> --> </head> <body> <p><span class="glyphicon glyphicon-hand-right"></span> Icônes</p> <p><span class="glyphicon glyphicon-home"></span> Accueil</p> <p> <span class="label label-primary"> <span class="glyphicon glyphicon-comment"></span> 10 Commentaires </span> <button class="btn btn-warning"> <span class="glyphicon glyphicon-shopping-cart"></span>Ajouter au panier </button> </p>
<!--CDN--> <script src="http//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <!--Local--> <!--<script src="js/bootstrap.min.js"></script>--> </body> </html> |
2-Utilisation de Font Awesome
Icones disponibles http://fortawesome.github.io/Font-Awesome/icons/
Exemples http://fortawesome.github.io/Font-Awesome/examples/
1 – Télécharger http://fortawesome.github.io/Font-Awesome/
2- Ajouter les dossiers « css » et « fonts » au site .
3- Page de base
| <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <!--[if IE 7]> <link rel="stylesheet" href="css/font-awesome-ie7.min.css"> <![endif]-->
</head> <body>
<script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
4- Exemple
| <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <!--[if IE 7]> <link rel="stylesheet" href="css/font-awesome-ie7.min.css"> <![endif]--> </head> <body> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-dollar">29.99</i> <i class="fa fa-facebook-square"></i> <i class="fa fa-google-plus-square"></i> <i class="fa fa-linkedin-square"></i>
<div class="input-group margin-bottom-sm"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input class="form-control" type="text" placeholder="Email address"> </div> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input class="form-control" type="password" placeholder="Password"> </div>
<div class="btn-group open"> <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
<script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
