Bootstrap for rails PDF [Eng]


Télécharger Bootstrap for rails PDF [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Bootstrap for rails PDF [Eng]

...

Chapitre 1 Introduction

Bienvenue. Ce tutoriel montre comment intégrer Bootstrap à Rails. Versions:

  • Bootstrap 3.1
  • Rails 4.1

Bootstrap est un framework pour le développement frontal (basé sur le navigateur ou côté client), un peu comme Ruby on Rails est un framework pour le développement côté serveur. Bootstrap fournit des feuilles de style CSS et du code JavaScript.

Avec ce tutoriel,

Capture d'écran

Est-ce pour vous?

Si vous êtes nouveau dans Rails, commencez par le manuel Learn Ruby on Rails du projet RailsApps.

Le livre Learn Ruby on Rails vous donnera une solide introduction à Rails afin que vous soyez prêt pour ce tutoriel. Vous devez avoir au moins une expérience de niveau débutant avec Rails, ce qui signifie que vous devez avoir de l'expérience dans la construction d'une application Web Rails simple.

Si vous êtes un développeur Rails expérimenté, ce tutoriel vous permettra de créer rapidement une application de démarrage Rails complète à l'aide de Bootstrap.

4 L'application

Nous allons créer une application Web de base que vous pouvez utiliser comme application de démarrage pour vos propres projets. L'application de démarrage intègre Bootstrap à Rails. Les fonctionnalités incluent:

  • page d'accueil
  • page “à propos de”
  • Barre de navigation

Vous trouverez l’exemple d’application rails-bootstrap sur GitHub. Il s'agit d'une application fonctionnelle maintenue par une équipe de développeurs expérimentés. Vous pouvez donc toujours vérifier la «mise en œuvre de référence» en cas de problème. Vous pouvez utiliser l'outil Rails Composer pour générer rapidement l'application de démarrage complète.

L'application de démarrage utilise la gem high_voltage pour la page «À propos de». Des pages supplémentaires peuvent facilement être ajoutées. La gem high_voltage facilite l'ajout de pages à contenu statique incorporant des éléments d'une présentation d'application à l'échelle du site, tels que l'en-tête, les liens de navigation et le pied de page.

Après avoir construit l’application de démarrage, ce didacticiel va plus loin en présentant les fonctionnalités de

Bootstrap en mettant en place un site internet simple. Les fonctionnalités incluent:

  • Carrousel d'images
  • formulaire d'enquête
  • Banque de données de tableurs Google
  • fenêtre modale

Le tutoriel utilise Bootstrap pour implémenter un carrousel affichant plusieurs images graphiques sur la page d'accueil. Le visiteur est invité à voter pour une image préférée. Le vote est mis en œuvre avec un formulaire d'enquête. Lorsque le visiteur envoie le formulaire, les données sont enregistrées dans un fichier Google.

Drive tableur.

Soutenir le projet

Le projet RailsApps fournit des exemples d'applications que les développeurs utilisent comme applications de démarrage.

Des centaines de développeurs utilisent les applications, signalent les problèmes dès qu'ils se présentent et proposent des solutions.

Les rails changent fréquemment; chaque application est connue pour fonctionner et sert de votre "implémentation de référence" personnelle afin que vous puissiez rester à jour. La maintenance et le développement des applications RailsApps sont pris en charge par les abonnements aux didacticiels RailsApps.

Chapitre 2 Concepts

Bootstrap et d'autres infrastructures frontales CSS sont des kits d'outils qui fournissent le type de structure et de convention qui rend Rails populaire pour le développement back-end. Bootstrap fournit une grille standard pour la disposition, ainsi que des dizaines de composants réutilisables pour les éléments de page courants tels que la navigation, les formulaires et les boutons.

Cadres similaires

Bootstrap est le framework le plus populaire pour le développement front-end mais ce n’est pas le seul.

Les développeurs Web ont commencé à assembler des feuilles de style CSS «pèlerines» dès 2000, lorsque les navigateurs ont commencé à prendre en charge totalement le CSS. Boilerplate CSS facilite la réutilisation des règles de feuille de style CSS d’un projet à l’autre. Plus important encore, les concepteurs ont souvent implémenté les feuilles de style «CSS reset» pour renforcer l'uniformité typographique sur différents navigateurs.

En particulier, les développeurs front-end dans les grandes entreprises ont été confrontés à la nécessité d’établir des normes pour l’utilisation du CSS dans tous les projets. Ingénieurs chez Yahoo! a publié le Yahoo! Utilisateur

Interface Library (YUI) en tant que projet open source en février 2006. Inspirés d’un article de Jeff Croft et réagissant à l’immense taille de la bibliothèque YUI, des développeurs indépendants ont commencé à publier d’autres infrastructures CSS, telles que le système de grille 960 et le CSS Blueprint. cadre.

Il existe des dizaines de frameworks CSS. En général, ils cherchent tous à mettre en œuvre un ensemble commun d’exigences:

  • Une grille facilement personnalisable
  • Une typographie par défaut
  • une base typographique
  • réinitialisation CSS pour les styles de navigateur par défaut
  • une feuille de style à imprimer

Plus récemment, avec l'omniprésence des smartphones et des tablettes, les frameworks CSS prennent en charge une conception Web réactive, prenant en compte les différences de taille d'écran sur une gamme d'appareils.

Bootstrap est le fruit d'une tentative de documentation et de partage de modèles de conception et d'actifs communs entre projets sur Twitter. Il a été publié en tant que projet open source en août 2011. Peut-être en raison de la renommée de la marque Twitter et de la communauté de développeurs qu’il occupe, Bootstrap est plus populaire que les autres frameworks CSS.

Zurb Foundation est une excellente alternative au Bootstrap. Pour une comparaison des deux cadres, voir Lutte contre le cadre. Vous trouverez un exemple d’application rails-foundation dans la collection RailsApps.

Chapitre 3 Ressources

Avant de vous lancer dans l’intégration de Bootstrap à Rails, voyons comment vous pouvez obtenir de l’aide quand vous en avez besoin.

Nous verrons également comment vous pouvez enrichir votre application avec des add-ons pour Bootstrap.

Obtenir de l'aide avec l'application

L'exemple d'application rails-bootstrap sur GitHub sert d’implémentation de référence si vous rencontrez des problèmes. L'exemple d'application est mis à jour plus souvent que ce tutoriel.

Et les erreurs sont signalées comme des problèmes GitHub.

Bootstrap for rails PDF [Eng]

Prenez un moment pour examiner les problèmes en suspens sur GitHub afin de déterminer les problèmes que vous pourriez rencontrer au cours de l’exécution du didacticiel. Vous pouvez examiner les problèmes résolus pour voir certains des problèmes résolus.

Le code de ce tutoriel a été testé par de nombreuses personnes et a parfaitement fonctionné au moment de sa rédaction. Mais le code dépend de versions spécifiques de gem. Si des problèmes se sont développés depuis la dernière mise à jour de ce didacticiel, vous en trouverez les détails dans les numéros de GitHub. Si vous découvrez un bogue, vous pouvez cloner le référentiel et exécuter le code localement pour confirmer l'existence d'une erreur dans l'implémentation de référence. Si vous trouvez une anomalie, ouvrez un problème afin que nous puissions vous aider.

Stack Overflow fournit un forum de questions-réponses aux lecteurs de ce didacticiel. En tant qu’auteur de ce didacticiel, je ne peux pas répondre à des questions spécifiques ni vous aider directement lorsque vous me contactez par courrier électronique. Si je le faisais, je n'aurais pas le temps de créer les tutoriels qui profitent à tant de personnes. Cependant, je suis attentif aux questions sur Stack Overflow qui sont étiquetées railsapps et fournissent des réponses dès que je peux. Posez votre question sur Stack Overflow et utilisez les balises railsapps.

Obtenir de l'aide avec Rails ou Bootstrap

Que faire quand vous êtes bloqué?

"Google it", bien sûr. Vous devez souvent éliminer les conseils obsolètes qui ne concernent que les anciennes versions de Rails. Sous "Outils de recherche", Google propose des options permettant d'afficher uniquement les résultats récents de l'année écoulée.

Stack Overflow est un site populaire de questions et réponses sur Bootstrap. Les réponses du débordement de pile sont utiles si vous vérifiez attentivement que les réponses sont récentes. Il est sage de comparer plusieurs réponses pour déterminer ce qui convient à votre situation.

Sources d'aide gratuites:

  • Rails Hotline - ligne téléphonique gratuite pour les questions Rails avec des volontaires
  • RailsMentors - réseau de mentors bénévoles

Services commerciaux offrant de l'aide:



  • AirPair - la place de marché des mentors disponible via le chat vidéo et le partage d'écran
  • HackHands - un autre marché de mentors

Annuaire des sociétés de conseil Rails:

  • Répertoire de développement Rails

Rester à jour

Bootstrap est régulièrement mis à jour, souvent avec des modifications importantes d'une version à l'autre. Pour les nouvelles, vous pouvez suivre le compte officiel de Bootstrap, @twbootstrap, sur Twitter.

Les publications HTML5 Weekly et JavaScript Weekly de Peter Cooper incluent des éléments occasionnels sur

Bootstrap. Je recommande ses bulletins électroniques, y compris Ruby Weekly.

Vous pouvez suivre @rails_apps sur Twitter pour obtenir des nouvelles du projet RailsApps.

Ressources Bootstrap

Si vous n’ajoutez rien à Bootstrap, vous disposerez d’un framework frontal solide pour la création graphique, ainsi que de la douzaine d’éléments interactifs JavaScript intégrés à Bootstrap. Toutefois, étant donné que Bootstrap fournit une structure pour la conception Web et une communauté de développeurs active et étendue, des centaines de composants, outils et thèmes supplémentaires peuvent améliorer votre application.

Vous pouvez trouver des ressources pour Bootstrap dans la liste des plus utiles Twitter Bootstrap de Big Badass

Ressources sur le site Bootstrap Hero. La liste des héros Bootstrap, dans son ampleur, démontre la popularité de Bootstrap et la vitalité de la communauté open source.

Composants d'amorçage

La documentation Bootstrap vous donne une petite sélection d'exemples de code, juste assez pour illustrer comment utiliser chaque composant Bootstrap. Mais vous pouvez assembler les composants primitifs de Bootstrap dans des éléments de conception complexes tels que des calendriers, des tableaux de tarification, des formulaires de connexion, etc. Au lieu de créer ce dont vous avez besoin par essais et erreurs, visitez la galerie de Bootsnipp.com pour des dizaines d'éléments de conception et d'exemples de code.

Pour plus de composants que vous pouvez ajouter à Bootstrap, consultez la liste complète d'addons supplémentaires compatibles Bootstrap répertoriés sur le site Bootstrap Hero.

Thèmes Bootstrap

Les frameworks tels que Bootstrap sont destinés à fournir les éléments de base pour une conception de site Web personnalisée. Si vous avez de grandes compétences en conception ou si vous pouvez vous associer à un concepteur Web expérimenté, vous pouvez développer un design personnalisé qui exprime l’objectif et le motif de votre site Web. Si vous ne possédez ni les compétences ni les ressources pour personnaliser la conception, vous pouvez utiliser la conception générique Bootstrap.

Une alternative consiste à trouver ou à acheter un thème préconçu pour votre site Web. Thèmes pour

Bootstrap regroupe des thèmes de nombreux sites.

Vous pouvez adapter des thèmes gratuits à partir de sites tels que:

  • Themestrap
  • Démarrer Bootstrap
  • Montre de bottes

Vous pouvez adapter les thèmes que vous achetez sur les marchés, tels que:

  • WrapBootstrap

En savoir plus sur l’intégration d’un thème WrapBootstrap dans une application Rails.

Quelques consultants proposent des thèmes Bootstrap spécialement conçus pour les projets Rails:

  • Les thèmes des rails habillés de Marc-André Cournoyer
  • Railsview.com de Richardson Dackam

Vous pouvez concevoir vos pages à l'aide de Bootstrap à l'aide d'outils de conception tels que:

  • Chevalet
  • Divshot
  • Jetstrap
  • LayoutIt

Si vous voulez le look rétro du Web des années 1990, utilisez:

  • Geo pour Bootstrap

Vous devez le voir. Croyez-le ou non, les sites Web avaient l'habitude de ressembler à cela.

Chapitre 4 Comptes dont vous pourriez avoir besoin

Le tutoriel montrera comment utiliser Git pour le contrôle de version. Si vous souhaitez stocker votre application sur GitHub, vous pouvez obtenir un compte personnel gratuit sur GitHub. Voir l'article Rails et Git pour plus d'informations.

Google Drive

L'application utilisera une feuille de calcul Google Drive pour le stockage des données. Si vous avez un compte Gmail, votre nom d'utilisateur et votre mot de passe sont les informations d'identification que vous utilisez pour accéder à Google Drive. Si vous ne possédez pas de compte Gmail, vous pouvez vous inscrire gratuitement pour un compte Google.

Certains comptes Google nécessitent une vérification en deux étapes, qui envoie un code unique à votre téléphone mobile chaque fois que vous vous connectez à partir d'un appareil inconnu. Si votre compte Google nécessite une authentification à deux facteurs, vous avez trois choix:

  • configurer un mot de passe spécifique à l'application
  • désactiver la vérification en deux étapes
  • créer un nouveau compte Gmail pour être utilisé avec ce tutoriel Heroku

Le tutoriel montrera comment déployer l'application sur Heroku qui fournit l'hébergement d'applications Rails. Créer un compte Heroku et déployer autant d'applications que vous le souhaitez ne coûte rien.

Pour déployer une application sur Heroku, vous devez avoir un compte Heroku. Visitez la page d'inscription Heroku pour créer un compte.

Assurez-vous d'utiliser la même adresse e-mail que celle utilisée pour vous inscrire à GitHub. Il est très important que vous utilisiez la même adresse e-mail pour les comptes GitHub et Heroku.

Chapitre 5 Mise en route

Avant de commencer

Si vous suivez ce didacticiel de près, vous aurez une application opérationnelle qui correspond étroitement à l’exemple d’application du référentiel GitHub de Rails-Bootstrap. Si votre application ne fonctionne pas après avoir suivi le didacticiel, comparez le code avec l'exemple d'application dans le référentiel GitHub, qui est connu pour fonctionner.

Si vous rencontrez des problèmes ou souhaitez suggérer des améliorations, veuillez créer un problème avec GitHub. Il est préférable de télécharger et de consulter l’exemple d’application depuis le référentiel GitHub avant de signaler un problème, afin de s’assurer que l’erreur ne résulte pas de votre propre erreur.

Votre environnement de développement

Le didacticiel Apprendre Ruby on Rails explique comment configurer un éditeur de texte et une application de terminal.

Ce tutoriel utilisera Git pour le contrôle de version. Voir l'article Rails et Git pour plus d'informations.

Ruby 2.1

Voir l'article Installation de Rails pour installer Ruby 2.1, la dernière version de Ruby. L'article vous guidera pour mettre à jour divers gemmes et utilitaires de support, si nécessaire.

Vérifiez que la version appropriée de Ruby est installée dans votre environnement de développement.

Ouvrez votre application de terminal et entrez:

$ ruby ​​-v

Vous devriez voir Ruby version 2.1.1 ou plus récente.

Si vous utilisez des versions plus anciennes ou Ruby sur votre ordinateur, vous devez installer une version plus récente pour éviter les problèmes inattendus.

Gemset spécifique au projet

Les instructions de l'article Installation de Rails recommandent l'utilisation de RVM, le gestionnaire de versions de Ruby. Si vous êtes un administrateur Unix expérimenté, vous pouvez envisager des alternatives telles que Chruby, Sam Stephenson’s Rbenv, ou d’autres sur cette liste. RVM est populaire, bien pris en charge et constitue un excellent utilitaire pour aider un développeur à installer Ruby et à gérer ses gemsets. c'est pourquoi je le recommande.

Pour notre application rails-bootstrap, nous allons créer un gemset spécifique au projet en utilisant RVM. Nous attribuerons le même nom au gemset que notre application.

Une fois le gemset spécifique au projet créé, nous allons installer le gem Rails dans le gemset.

Entrez ces commandes:

$ rvm use ruby-2.1.1@rails-bootstrap --create

rails d'installation $ gem

Assurez-vous que Rails est prêt à fonctionner. Ouvrez un terminal et tapez:

$ rails -v

Vous devriez avoir Rails version 4.1.0 ou plus récente.

Chapitre 6 Créer l'application

Nous allons utiliser l'outil Rails Composer pour générer une application de démarrage.



Nous avons déjà créé un gemset spécifique au projet en utilisant RVM. Assurez-vous qu’il est prêt à être utilisé:

$ rvm use ruby-2.1.1@rails-bootstrap>

Pour créer l'application de démarrage par défaut de Rails, tapez:

$ rails new rails-bootstrap -m /RailsApps/rails-composer/master/composer.rb

Cela créera une nouvelle application Rails nommée «rails-bootstrap».

Vous pouvez attribuer un nom différent à l'application si vous la construisez à d'autres fins. Pour ce tutoriel, nous supposerons que le nom est «rails-bootstrap». Vous éviterez des étapes supplémentaires et des erreurs en utilisant ce nom.

Vous verrez une invite: question Créer une application de démarrage?

1) Construire un exemple d'application RailsApps

2) Construire une application contribuée

3) Je veux construire ma propre application

Entrez “1” pour sélectionner la construction d'un exemple d'application RailsApps. Une invite apparaît: interrogez les applications de démarrage pour Rails 4.1. Plus à venir.

1) apprendre-rails

2) rails-bootstrap

3) rails de fondation

4) rails-omniauth

5) rails-conce

6) rails-concevez-pundit

Choisissez rails-bootstrap. L'outil Rails Composer peut vous donner d'autres options (d'autres applications peuvent avoir été ajoutées depuis la rédaction de ces notes).

Le modèle de générateur d'applications vous demandera des préférences supplémentaires: question serveur Web pour le développement?

1) WEBrick (par défaut)

2) mince

3) Licorne

4) Puma

5) Passager Phusion (Apache / Nginx)

6) Passager Phusion (autonome)

question serveur Web pour la production?

1) Identique au développement

2) mince

3) Licorne

4) Puma

5) Passager Phusion (Apache / Nginx)

6) Passager Phusion (autonome)

question moteur de modèle?

1) ERB

2) Haml

3) mince

question Test continu?

1) aucun

2) garde

extras Définir un fichier robots.txt pour interdire les araignées? (y / n)

extras Créer un dépôt GitHub? (y / n)

extras Utiliser ou créer un jeu de gems spécifique à votre projet? (y / n)

Serveurs Web

Nous recommandons Thin en développement pour la vitesse et moins de bruit dans les fichiers journaux.

Si vous envisagez de déployer sur Heroku, sélectionnez Thin comme serveur Web de production. La licorne est recommandée par Heroku, mais la configuration est plus complexe.

Moteur de template

L'exemple d'application utilise le moteur de gabarit Rails «ERB» par défaut. Vous pouvez éventuellement utiliser un autre moteur de modèle, tel que Haml ou Slim. Voir les instructions pour Haml et Rails.

Autres choix

Si vous êtes débutant, vous n’avez pas besoin de «tests continus». Si vous souhaitez utiliser Guard, vous pouvez le sélectionner.

Définissez un fichier robots.txt pour interdire les araignées si vous souhaitez que votre nouveau site ne figure pas dans les résultats de recherche Google.

Il est judicieux d’utiliser RVM, le gestionnaire de versions de Ruby, et de créer un gemset rvm spécifique au projet (non disponible sous Windows). Voir Installation de rails. Faire ce choix crée deux fichiers, .ruby-version et .ruby-gemset, qui définissent RVM à chaque fois que nous cd vers le répertoire du projet.

Si vous choisissez de créer un référentiel GitHub, le générateur vous demandera un nom d'utilisateur et un mot de passe GitHub.

Dépannage

Si vous obtenez une erreur «Echec de la vérification du certificat OpenSSL» ou «Gem :: RemoteFetcher :: FetchError:

SSL_connect ”, voir l'article OpenSSL Errors and Rails.

Votre répertoire de projet

Après avoir créé l'application, basculez vers son dossier pour continuer à travailler directement dans l'application:

$ cd rails-bootstrap

Ceci est votre répertoire de projet. On l'appelle aussi le répertoire racine de l'application.

Remplacer les LISEZMOI

Bootstrap for rails PDF [Eng]

Veuillez modifier les fichiers README pour ajouter une description de l'application et vos informations de contact.

Changer le fichier README est important si votre application sera visible publiquement sur GitHub.

Sinon, les gens penseront que je suis l'auteur de votre application. Si vous le souhaitez, ajoutez un accusé de réception et un lien vers le projet RailsApps.

Configurer le contrôle de source (Git)

Si vous avez utilisé l'outil Rails Composer pour générer l'application de démarrage, le script de modèle d'application a déjà configuré un référentiel de contrôle de source. Vous pouvez confirmer avec:

$ git status

Si vous êtes nouveau dans Git, consultez les instructions détaillées pour Rails et Git.

Si vous souhaitez stocker votre application sur GitHub, vous devez maintenant configurer votre référentiel GitHub, si vous n'avez pas fait le choix à l'aide de l'outil Rails Composer.

Tester l'application

Vous avez créé une application de démarrage. Il est prêt à fonctionner.

Lancer le serveur Web

Vous pouvez lancer l'application en entrant la commande:

serveur $ rails

La commande rails server lance le serveur Web WEBrick par défaut fourni avec

Rubis.

Affichage dans le navigateur Web

Pour voir votre application en action, ouvrez une fenêtre de navigateur Web et accédez à http: // localhost: 3000 /. Vous verrez la page d'accueil de l'application de démarrage.

Arrêter le serveur Web

Vous pouvez arrêter le serveur avec Control-c pour revenir à l'invite de commande.

La plupart du temps, le serveur Web reste actif lorsque vous ajoutez ou modifiez des fichiers dans votre projet.

Les modifications apparaîtront automatiquement lorsque vous actualiserez le navigateur ou demanderez une nouvelle page.

Il existe cependant une exception délicate. Si vous apportez des modifications au fichier Gemfile ou aux fichiers de configuration, le serveur Web doit être arrêté et relancé pour que les modifications soient activées.

Chapitre 7 Gemmes

Bootstrap peut être installé en utilisant son langage natif LESS CSS ou le langage Sass.

Sass est une valeur par défaut pour Rails et la gem bootstrap-sass est le port Sass officiel de Bootstrap.

Utiliser une gemme signifie que vous allez installer Bootstrap dans le pipeline d’actifs Rails.

Si vous souhaitez explorer les différences entre LESS et Sass, consultez l'article Sass vs. LESS. En général, il recommande Sass.



25