Vision du web. La réponse collaborative.

Gagner des Bitcoins.

Obtenir des Bitcoins Gratuitement !
Le HackerSpace Vision du web.
La réponse collaborative.
Le glider des Hackers.
Un symbole de rassemblement.
QWERTY.
Du clavier au terminal.
GNU / Linux Debian.
La distribution universelle.
GNU / Linux Ubuntu.
Linux pour les êtres humains.
GNU / Linux Arch.
Un Linux léger et flexible.
Nom de code Linux.
Documentaire FR.
HackerSpace !
Messagerie entre membres connectés.

Vous n´êtes pas identifié(e).

Nous avons 214 invités et aucun membre en ligne

 

Le Framework Bootstrap

Le Framework Bootstrap kit CSS de Twitter

Bootstrap est un Framework qui permet d'augmenter la productivité de développement d'un Front-end responsive.

 

Apprendre à utiliser le framework Bootstrap

Maitriser Bootstrap 3 par la pratique[/b] - Excellent tutoriel : http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/

Exemple des possibilités de bootstrap : http://getbootstrap.com/components/

 

Installer Bootstrap 3

Cliquez sur le bouton "Download Bootstrap" pour télécharger la bibliothèque Bootstrap depuis le site officiel : ICI
Décompresser l'archive. Le dossier Bootstrap3 contient trois dossiers: css, js et font.

 

Bootstrap utilise JQuery

Télécharger la dernière version de la bibliothèque JQuery depuis le site officiel : ICI

 

En option : utiliser Font Awesome pour avoir d'avantage d'icônes

Télécharger Font Awesome pour enrichir vos possibilités créatives en css : ICI

 

Charger les bibliothèques pour les utiliser

<!-- Bootstrap -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="/bootstrap/js/bootstrap.min.js"></script>

<!-- JQuery -->
<script src="/jquery-2.1.4.min.js"></script>

<!-- Font-Awesome (En option.) -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">

 

Le contenu de l'archive de Bootstrap 3

├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Les fichiers css et js existent en deux exemplaires : les originaux et les minimisés.

Qu’est ce qu’un fichier css/js minimisé ?
Un fichier css/js  minimisé est un fichier qui supprime tous les sauts de ligne, commentaires et espaces inutiles.
On opte pour les fichiers minimisés dans les environnements de production pour des raisons de performance.
Les fichiers originaux servent exclusivement à la phase de développement.

Avantages et inconvénients d’un fichier css/js minimisé ?
Les fichiers minimisés sont plus légers et donc chargés plus rapidement.
Un fichier minimisé est difficile à lire et à modifier.

 

Présentation des fichiers de Bootstrap

Dossier Fichier Description
css bootstrap.css Feuille de style de Bootstrap.
bootstrap.min.css Version minimisée de la feuille de style bootstrap.css.
bootstrap-theme.css Feuille de style additionnelle contenant des éléments provenant de Bootstrap 2.
bootstrap-theme.min.css Version minimisée de la feuille de style bootstrap-theme.css.
js bootstrap.js Fichier JavaScript de Bootstrap.
bootstrap.min.js Version minimisée du fichier JavaScript bootstrap.js.
font glyphicons-halflings-regular.eot Fichiers de police contenant la bibliothèque d’icônes Glyphicon.
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

 

Définir des grilles responsives avec Bootstrap

Des grilles pour structurer vos pages : ICI

 

Autres ressources

Une trame pour bien démarrer : ICI
Cours gratuits : ICI
Les fichiers de Bootstrap en HTTPS : ICI
Créer un site portfolio avec bootstrap : ICI

 

Les ressources officielles, en anglais

Get Bootstrap - Getting Started : ICI
Get Bootstrap - CSS : ICI

 

Archives

Base CSS Bootstrap 2.3.2 : ICI

REMARQUE ! Ce site utilise des cookies et autres technologies similaires.

Si vous ne changez pas les paramètres de votre navigateur, vous êtes d'accord. En savoir plus

J'ai compris

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de Cookies pour vous proposer un accès membre personnalisé et réaliser des statistiques de visites.

Vision du web sur votre réseau social

Les liens de l'annuaire

Comment l'indomptable recherche scientifique va-t-elle rester au service du mieux-être physique et mental de tous ? Deux maîtres mots : éducation et éthique, qu'il faut traduire en pratique.
[Etienne-Emile Baulieu]

Votre hébergement internet avec LWS.