Bootstrap pour Drupal			
Drink and Drupal - 17/06/2015 Montpellier
Je me présente... @sographik
Sophie BONNIN
Graphiste Webdesigner Freelance
www.sographik.com
sographik@gmail.com
@sographi...
Le framework Bootstrap créé par Twitter
Pourquoi Bootstrap ?
Mobile first - Responsive
Compatible avec tous les navigateur...
Pour apprendre à utiliser Bootstrap
Le site Bootstrap 3
une super documentation :
http://getbootstrap.com/
Prenez en main ...
La grille Bootstrap
Structure de base d’un fichier html Bootstrap
Installer un sous-thème Bootstrap : Comment ? (sans LESS)
Documentation : https://www.drupal.org/node/1978010
Le thème Boo...
Des modules Bootstrap Drupal très utiles !
Display Suite Bootstrap :
https://www.drupal.org/project/ds_bootstrap_layouts
B...
Des modules pour vous aider à thémer
• Field Group (HTML5 elements for groups)
• Field Formatter Class (custom class on fi...
D’autres frameworks à proposer ?
Parlons de Less et Sass ...
Prochain SlideShare
Chargement dans…5
×

Bootstrap 3 sur drupal

803 vues

Publié le

Boostrap pour Drupal

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
803
Sur SlideShare
0
Issues des intégrations
0
Intégrations
84
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Bootstrap 3 sur drupal

  1. 1. Bootstrap pour Drupal Drink and Drupal - 17/06/2015 Montpellier
  2. 2. Je me présente... @sographik Sophie BONNIN Graphiste Webdesigner Freelance www.sographik.com sographik@gmail.com @sographik Thémeur niveau intermédiaire
  3. 3. Le framework Bootstrap créé par Twitter Pourquoi Bootstrap ? Mobile first - Responsive Compatible avec tous les navigateurs et IE8+ Pleins de composants CSS et JS qui facilite la vie Possibilité d’utiliser SASS ou LESS Plus d’infos : http://getbootstrap.com/
  4. 4. Pour apprendre à utiliser Bootstrap Le site Bootstrap 3 une super documentation : http://getbootstrap.com/ Prenez en main Bootstrap, des tutos : http://openclassrooms.com/courses/prenez-en-main-bootstrap http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/
  5. 5. La grille Bootstrap
  6. 6. Structure de base d’un fichier html Bootstrap
  7. 7. Installer un sous-thème Bootstrap : Comment ? (sans LESS) Documentation : https://www.drupal.org/node/1978010 Le thème Bootstrap pour Drupal : https://www.drupal.org/project/bootstrap Installation : Installer le thème Bootstrap de base dans sites/all/themes Module requis : - Jquery update : https://www.drupal.org/project/jquery_update Bootstrap 3 a besoin de la version jQuery 1.9 ou + Créer votre sous-thème : - Copier le dossier «bootstrap_subtheme» dans sites/all/themes - Renommer le dossier: my_bootstrap_theme. Renommer le fichier .info : the bootstrap_ subtheme.info.starterkit en lui donnat le même nom que le dossier de sous-thème créé : my_bootstrap_theme.info. - Apparence > «Activer et choisir par défaut» votre sous-thème
  8. 8. Des modules Bootstrap Drupal très utiles ! Display Suite Bootstrap : https://www.drupal.org/project/ds_bootstrap_layouts Bootstrap views : https://www.drupal.org/project/views_bootstrap Bootstrap Library : https://www.drupal.org/project/bootstrap_library Pour les fans de Panels : https://www.drupal.org/project/panels_bootstrap_layouts et pleins d’autres : https://www.drupal.org/node/2011034
  9. 9. Des modules pour vous aider à thémer • Field Group (HTML5 elements for groups) • Field Formatter Class (custom class on fields) • Block Class (custom class on blocks) • Font Awesome (cool icons just with a class) Et une extension chrome pratique et utile «Bootstrap Overlay» Des modules pour vous aider à thémer !
  10. 10. D’autres frameworks à proposer ? Parlons de Less et Sass ...

×