{"id":7391,"date":"2015-12-14T10:39:03","date_gmt":"2015-12-14T10:39:03","guid":{"rendered":"https:\/\/dev.railscarma.com\/create-visual-magic-with-bootstrap-gem\/"},"modified":"2025-12-18T10:30:57","modified_gmt":"2025-12-18T10:30:57","slug":"creer-de-la-magie-visuelle-avec-la-gemme-bootstrap","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/creer-de-la-magie-visuelle-avec-la-gemme-bootstrap\/","title":{"rendered":"Create Visual Magic with Bootstrap Gem in Rails 8"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tSi l\u2019on en croit les experts en pr\u00e9diction, 2016 sera l\u2019ann\u00e9e du visuel. Apr\u00e8s tout, nous sommes bombard\u00e9s chaque jour de tellement de donn\u00e9es que nous en ignorons la plupart, \u00e0 moins que cela ne nous plaise. Et le visuel est un moyen s\u00fbr d\u2019attirer l\u2019attention. Mais le plus souvent, nous passons tellement de temps \u00e0 peaufiner notre application et \u00e0 essayer de lui donner un aspect esth\u00e9tique que lorsqu'elle arrive sur le march\u00e9, elle est d\u00e9j\u00e0 devenue une vieille marchandise. Alors, quelle est la sortie ? Devons-nous consacrer autant de temps \u00e0 travailler sur l'\u00e9l\u00e9ment de conception de notre application ou la mettre sur le march\u00e9 en ressemblant \u00e0 une vieille application\u00a0? Et si vous pouviez avoir le g\u00e2teau et le manger aussi ? Avec Ruby on Rails, non seulement vous pouvez mettre votre application sur le march\u00e9 plus rapidement, mais vous pouvez aussi faire de la magie avec sa conception \u00e0 l'aide de la gemme Bootstrap. Bootstrap (anciennement Twitter Bootstrap) fournit des feuilles de style CSS <\/b>et du code JavaScript pour la conception visuelle des sites Web. Il s'agit d'un framework pour le d\u00e9veloppement front-end ou bas\u00e9 sur un navigateur, similaire \u00e0 la fa\u00e7on dont Ruby on Rails est un framework pour le d\u00e9veloppement c\u00f4t\u00e9 serveur ou back-end. Bootstrap est un framework qui permet \u00e0 un d\u00e9veloppeur de cr\u00e9er facilement un joli design pour une application ou un site Web. Pour un site Web ou une application, il existe peu de composants courants comme les widgets, les listes, les formulaires, la typographie, etc., et avec Bootstrap qui est livr\u00e9 avec des classes CSS pr\u00e9d\u00e9finies, ils peuvent \u00eatre con\u00e7us facilement et sans trop de complications. Le framework est \u00e9galement livr\u00e9 avec JavaScript, ce qui facilite la cr\u00e9ation d'espions de d\u00e9filement, d'accord\u00e9ons, de modaux et de popovers. La gemme bootstrap dispose \u00e9galement d'une documentation solide, compl\u00e8te et facile \u00e0 comprendre fournissant des exemples de codes pour la plupart, sinon la totalit\u00e9, des composants fournis par Bootstrap.\n

Installation:<\/span><\/h2>\n

Rubis sur Rails<\/span>:<\/span><\/h3>\n
gem 'bootstrap-sass', '~> 3.3.6 \u2014-> Besoin d'ajouter, facile \u00e0 supprimer le pipeline d'actifs gem 'sass-rails', '>= 3.2' \u2014-> Gem par d\u00e9faut dans l'installation du bundle d'application Rails<\/blockquote>\nL'extension de fichier est tr\u00e8s importante. L'extension de fichier a .scss ou .sass. Dans la nouvelle extension par d\u00e9faut de l'application est .css, nous devons renommer cette extension de fichier.<\/span>\n
Par d\u00e9faut\u00a0: app\/assets\/stylesheets\/application.css *= require_self *= require_tree. Renommer\u00a0: app\/assets\/stylesheets\/application.scss<\/blockquote>\nApr\u00e8s avoir modifi\u00e9 l'extension, vous devez supprimer l'instruction require et ajouter le fichier d'importation bootstrap dans le fichier application.scss.\n
@import \u00ab\u00a0bootstrap-pignons\u00a0\u00bb\u00a0; @import \u00ab\u00a0bootstrap\u00a0\u00bb\u00a0; Avant le bootstrap, vous devez importer des pignons d'amor\u00e7age. Dans application.js, vous devez ajouter le bootstrap require javascript \/\/= require jquery \/\/= require bootstrap-sprockets bootstrap-sprockets fournit des fichiers Javascript Bootstrap individuels (par exemple\u00a0: alert.js, dropdown.js, combobox.js) $ (document ).ready(function(){ $('.dropdown-toggle').dropdown(); });<\/blockquote>\nCeci est le javascript de la liste d\u00e9roulante. La meilleure partie de Ruby on Rails est que pour les probl\u00e8mes les plus courants, il peut vous fournir une solution. Avec Bootstrap Gem, vous avez \u00e0 port\u00e9e de main pour impl\u00e9menter certains des meilleurs visuels et donner \u00e0 votre application une apparence magnifique sans avoir \u00e0 sacrifier trop de temps. Lorsqu'il s'agit de gagner du temps, aucun autre langage de programmation ne permet de gagner du temps comme Ruby on Rails. Donc, si vous \u00eates press\u00e9 par le temps mais que vous souhaitez quand m\u00eame cr\u00e9er une application \u00e9tonnante, optez pour Ruby on Rails. Et si vous recherchez une soci\u00e9t\u00e9 de d\u00e9veloppement Ruby on Rails, RailsCarma est un excellent pari, m\u00eame si nous le disons nous-m\u00eames. Railscarma a mis en \u0153uvre Ruby on Rails depuis ses d\u00e9buts pour le d\u00e9veloppement, la formation, le d\u00e9ploiement et la contribution \u00e0 la communaut\u00e9 Rails et offre le meilleur Services de d\u00e9veloppement Ruby on Rails<\/a>. RailsCarma fournit des services Ruby on Rails de bout en bout, notamment du conseil, de l'architecture, de la construction, de la gestion et de l'extension, aux entreprises du monde entier. Vous pouvez \u00e9galement embaucher des d\u00e9veloppeurs Ruby on Rails gr\u00e2ce \u00e0 un processus d'embauche simple. Contactez-nous<\/a> en savoir plus. En savoir plus sur les gemmes\u00a0:\n