Как интегрировать тему Wrap Bootstrap в приложение Rails?

Я купил тему загрузочного твиттера из wrapbootstrap. У меня уже есть функциональное приложение для рельсов. Теперь я хочу создать свое приложение, включив тему загрузки в мое приложение. Я новичок в этом, и я понятия не имею, как это сделать. Проведя много исследований по этому вопросу, я нашел лишь небольшое обсуждение этой проблемы. Например, я нашел этот пост: Внедрение темы WrapBootstrap в приложение Rails

Но я не совсем уверен, как активы из темы будут применены к моему приложению. Я скопировал все активы в рамках моих проектов app/assets/images, app/assets/javascripts и app/assets/stylesheets папок из соответствующей папки. Затем я получил несколько ошибок при попытке запустить приложение локально. Я удалил файл application.css, после чего начал работать. Но я не вижу никакого дизайна из темы, которая применяется еще. Что делать, чтобы эта тема работала в моем приложении rails?

Ответ 1

Сначала проверьте этот скринкаст:

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

то я бы добавил бутстрап-жемчуг, как bootstrap-sass, а затем добавил файлы JS через жемчуг, добавив их в манифест, примерно так:

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

тогда я получаю файлы css, которые вы купили из wrapboostrap, и поместите их в папку с вашими ресурсами/таблицами стилей, затем добавьте требуемую разметку и классы в ваше приложение, это то, как раньше это делалось.

надеюсь, что это поможет

EDIT:

Разметка:

Проверьте загруженный шаблон, начните с навигационной панели, например

Код из шаблона:

<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.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, теперь вам нужно сделать все остальное, добавьте разметку, которую показывает ваш шаблон, со всем вашим приложением, это не простая работа, но вот как это делается.

Ответ 2

убедитесь, что при установке twitter bootstrap вы должны добавить следующий gem в свой Gemfile в разделе "group: assets"

gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

затем выполните команду bundle.

Теперь тема "file_name.css" (имя_файла может быть любой), которую вы загрузили, просто добавьте в папку "stylesheets" в папке "app- > assests- > stylesheets

затем откройте файл application.css в той же папке, там вы увидите

*= require_tree.

замените эту строку на

*= require "file_name.css"

ПРИМЕЧАНИЕ. Не забывайте повторно компилировать свои активы или просто удалять содержимое вашей папки tmp/cache.

сохраните его и перезагрузите сервер. он применит вашу новую тему.

Ответ 3

Обновление на конец 2015 года:

На gorails.com(pro only) есть отличный скринкаст, который проходит весь процесс от начала до конца, включая формы для создания, для темы загрузочного бутстрапа:

Использование приобретенных тем с Rails - Go Rails