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

Site officiel de Bootstrap : https://getbootstrap.com
Exemple des possibilités de bootstrap : https://getbootstrap.com/components/
Un excellent tutoriel : http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/

 

Télécharger Bootstrap 3

Cliquez sur le bouton "Download Bootstrap" pour télécharger la bibliothèque Bootstrap depuis le site officiel : https://getbootstrap.com/docs/3.3/getting-started/
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 : https://jquery.com

 

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 : https://fontawesome.com

 

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 ses pages.

 

Autres ressources

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

 

Les ressources officielles, en anglais

Démarrer avec GetBootstrap 3.3 : Démarrer avec GetBootstrap 3.3
Get Bootstrap - Getting Started : ICI
Get Bootstrap - CSS : ICI

 

Archives

Base CSS Bootstrap 2.3.2 : ICI

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]

Visionduweb - La Réponse Collaborative - 2002 / 2019

Condition d'utilisation du site Visionduweb

Vous êtes soumis au règlement suivant et à ce titre ni l'administrateur ni l'hébergeur ne pourraient ni ne seraient tenu pour responsable de vos actes.
Vous ne devez en aucun cas utiliser les informations présentes sur Visionduweb pour nuire à autrui ou à un système informatique.

La licence CC BY-NC-ND 4.0 est attribuée au contenu rédigé par Visionduweb sur les domaines suivants :
www.visionduweb.com www.visionduweb.eu www.visionduweb.fr www.visionduweb.info

Les profils utilisés par Visionduweb : Anonymous, Visionduweb, Zer00CooL

------------------------------------------------------------------------
------------------------------------
------------

Chercher dans ce site

Menu de connexion