Bootstrap
Comment se faciliter la vie en CSS ?
Bootstrap
Qu'est-ce que c'est ?
Bootstrap
Qu'est-ce que c'est ?
Framework HTML, CSS et JavaScript
Créer plus rapidement des sites
Responsive Design
Un framework, tous les supports
Bootstrap
Comment ça fonctionne ?
Bootstrap
Comment ça fonctionne ?
Le CSS est déjà prêt
Attention : ne jamais modifier les fichiers sources téléchargés
Bootstrap
Comment s'en servir ?
Bootstrap
Comment s'en servir ?
Télécharger les sources sur le site
http://getbootstrap.com/getting-started/#download
Choisir "Download Bootstrap"
Placer les fichiers téléchargés dans les bons dossiers
CSS, JavaScript, fonts
Bootstrap
Comment s'en servir ?
Faire les liens dans le head
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<meta name="author" content="Bastien Bourdin et Pauline Capot">
<link rel="shortcut icon" href="img/favicon.png">
<title>Ipsum - Design Inside Job</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/font.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>Bootstrap
Comment commencer ?
Bootstrap
Comment commencer ?
Prendre un template de base
Copier/coller
Afficher le code source de l'exemple
Le copier puis le coller dans son éditeur
Bootstrap
Comment commencer ?
Concrètement :
Obtenir une page avec un menu et un formulaire de connexion
Bootstrap
Et si le style ne me plait pas ?
Bootstrap
Et si le style ne me plait pas ?
Surcharge des sources
Création de son PROPRE fichier CSS
Exemple : styles.css
Réutilisation des classes de base
Ajout de son propre CSS
Bootstrap
Et si le style ne me plait pas ?
Exemple
Changement de la couleur de la barre de menu (noir par défaut)
.navbar-inverse {
background-color : red;
}.navbar-inverse {
background-color : #ff0000;
}.navbar-inverse {
background-color : rgb(255,0,0);
}Bootstrap
D'autres exemples de framework CSS
Bootstrap
D'autres exemples de framework CSS
Bootswatch
Foundation
Bootstrap
Comment se faciliter la vie en CSS ?