web-dev-qa-db-ja.com

ラップBootstrapテーマをRailsアプリケーションに統合する方法は？

Twitterを購入しましたbootstrap wrapbootstrap のテーマです。すでに機能的なRailsアプリケーションがあります。今、 bootstrapテーマをアプリケーションに統合することでアプリケーションを作成しました。私はこれに慣れていないので、どうすればよいかわかりません。これについて多くの調査を行った後、ごくわずかな議論しか見つかりませんでしたこの問題に関して。たとえば、私はこの投稿を見つけました： WrapBootstrapテーマの実装Rails App

しかし、テーマのアセットがアプリケーションにどのように適用されるかは完全にはわかりません。プロジェクトのapp/assets/images、app/assets/javascripts、app/assets/stylesheetsフォルダーの下のすべてのアセットを、テーマの対応するフォルダーからコピーしました。次に、アプリをローカルで実行しようとすると、いくつかのエラーが発生しました。 application.cssファイルを削除した後、機能し始めました。しかし、テーマが適用されたデザインはまだ見えません。このテーマを私のRailsアプリに組み込むにはどうすればよいですか？

ruby-on-railstwitter-bootstrapruby-on-rails-3ruby-on-rails-4twitter-bootstrap-rails
14
K M Rakibul Islam

最初にこのスクリーンキャストを確認してください：

http://railscasts.com/episodes/328-Twitter-bootstrap-basics

次に、bootstrap gemをbootstrap-sassのように追加し、JSファイルをマニフェストに追加することで、gemを介して次のように追加します。

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

次に、wrapboostrapから購入したcssファイルを取得して、assets/stylesheetsフォルダーに配置し、必要なマークアップとクラスをアプリに追加します。これは、以前の方法です。

それが役に立てば幸い

編集：

マークアップ：

ダウンロードしたテンプレートを確認してください。たとえば、ナビゲーションバーから始めましょう。

テンプレートからのコード：

<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-->

ここで、自分をアプリに配置する必要があります。ナビゲーションバーがアプリのすべてのビューに表示される場合は、layouts/application.html.erbで次のように説明する必要があります。

<!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>

そして最後に、あなたのnavbar部分を行います

_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-->

それはnavbarのためだけでした、今あなたは残りを行う必要があります、あなたのテンプレートで行うように示したマークアップを追加してください、すべてのアプリで、それは簡単な仕事ではありませんが、それはそれがどのように行われたかです。

22
Rodrigo Zurek

twitterのインストール中にbootstrapを実行して、次のgemをGemfileの "group：assets"の下に追加してください。

gem 'therubyracer'
gem 'less-Rails'
gem 'Twitter-bootstrap-Rails'

次にbundleコマンドを実行します。

ここで、ダウンロードしたテーマ「file_name.css」（file_nameは任意）をapp-> assests-> stylesheetsの下の「stylesheets」フォルダに追加します。

次に、同じフォルダにあるapplication.cssファイルを開きます。

*= require_tree.

この行を次で置き換えます

*= require "file_name.css"

注：アセットを再コンパイルするか、単にtmp/cacheフォルダーのコンテンツを削除することを忘れないでください。

保存してサーバーを再起動します。新しいテーマが適用されます。

7
Muhammad Suleman