Comment intégrer un thème Wrap Bootstrap dans une application Rails?
j'ai acheté un thème bootstrap twitter de wrapbootstrap. J'ai déjà une application de rails fonctionnelle. Maintenant, je veux concevoir mon application en intégrant le thème bootstrap dans mon application. Je suis nouveau et je n'ai aucune idée de comment le faire. Après avoir fait beaucoup de recherches à ce sujet, je n'ai trouvé que très peu de discussions sur cette question. Comme par exemple j'ai trouvé ce post: la mise en Œuvre de WrapBootstrap thème en Application Rails
mais, je suis pas tout à fait sûr comment les actifs du thème seront appliquées à ma demande. J'ai copié tous les actifs sous mon projet app/assets/images,app/assets/javascripts et app/assets/stylesheets dossiers des dossiers correspondants du thème. Ensuite, j'ai eu plusieurs erreur quand j'ai essayé de lancer mon application localement. J'ai supprimé mon application.css le fichier, après qu'il a commencé à travailler. Mais je ne vois pas encore de design du thème appliqué. Que dois-je faire pour que ce thème fonctionne dans mon application rails?
2 réponses
Vérifiez D'abord ce screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
puis j'ajouterais une gemme bootstrap comme bootstrap-sass, puis j'ajouterais les fichiers JS à travers la gemme en les ajoutant au manifeste, quelque chose comme ceci:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
puis je récupérerais les fichiers css que vous avez achetés à wrapboostrap et les placerais dans votre dossier ACTIFS/feuilles de style, puis j'ajouterais le markup et clases nécessaires à votre application c'est comme ça ive fait avant.
j'espère que ça aide
EDIT:
Syntaxe:
vérifiez le modèle que vous avez téléchargé, commençons par la barre de navigation par exemple
Code de modèle:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul id="dropdown-menu" class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Maintenant vous devez vous placer dans votre application, si la barre de navigation apparaît dans chaque vue de votre application, vous devez le mentionner sur les layouts/application.HTML.erb quelque chose comme ceci:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
et enfin, faire de votre barre de navigation partielle
_navbar.HTML.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active"><a href="index.html">Home</a></li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
ce n'était que pour la navbar, maintenant vous devez faire le reste, ajouter le markup que votre modèle vous montre à faire, avec toute votre application, ce n'est pas un travail facile, mais c'est comme ça que c'est fait.
assurez-vous que lors de l'installation de twitter bootstrap vous devez ajouter la gemme suivante dans votre Gemfile sous "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
alors lancez la commande bundle.
Maintenant, le thème "file_name.css" (nom_fichier pourrait être) que u ont téléchargé il suffit de l'ajouter en "feuilles de style" sous-dossier app->actif->les feuilles de style
alors ouvrez votre application.fichier css dans le même dossier, vous verrez
*= require_tree.
remplacer cette ligne
*= require "file_name.css"
NOTE: n'oubliez pas de recompiler vos actifs ou simplement de supprimer le contenu de votre dossier tmp/cache.
sauvegarder et redémarrer votre serveur. il appliquera votre nouveau thème.