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 ?

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

Bootstrap

Comment se faciliter la vie en CSS ?

Bootstrap

By Pauline Capot

Bootstrap

  • 1,333